Scribd Logo
Upload

Welcome to Scribd!

  • 9 views

    HTML Css Javascript

    Uploaded by

    sanjeevm699
    This document provides an introduction to HTML, CSS, and JavaScript. It describes what each technology is, how they are used together, and provides some basic examples and syntax. Key topics covered include HTML tags and structure, CSS selectors and the box model, JavaScript DOM manipulation, and how scripts can be inserted via tags or linked files.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    HTML Css Javascript

    Uploaded by

    sanjeevm699
    9 views29 pages
    This document provides an introduction to HTML, CSS, and JavaScript. It describes what each technology is, how they are used together, and provides some basic examples and syntax. Key topics covered include HTML tags and structure, CSS selectors and the box model, JavaScript DOM manipulation, and how scripts can be inserted via tags or linked files.

    Original Title

    Html css javascript

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document provides an introduction to HTML, CSS, and JavaScript. It describes what each technology is, how they are used together, and provides some basic examples and syntax. Key topics covered include HTML tags and structure, CSS selectors and the box model, JavaScript DOM manipulation, and how scripts can be inserted via tags or linked files.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    9 views29 pages

    HTML Css Javascript

    Uploaded by

    sanjeevm699
    This document provides an introduction to HTML, CSS, and JavaScript. It describes what each technology is, how they are used together, and provides some basic examples and syntax. Key topics covered include HTML tags and structure, CSS selectors and the box model, JavaScript DOM manipulation, and how scripts can be inserted via tags or linked files.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 29

    z

    Introduction of HTML/CSS/JS
    What is HTML?
    ●HTML is a language for describing web pages.
    ●HTML stands for Hyper Text Markup Language
    ●HTML is a markup language
    ●A markup language is a set of markup tags
    ●The tags describe document content
    ●HTML documents contain HTML tags and plain text
    ●HTML documents are also called web pages
    HTML Tags

    ●HTML markup tags are usually called HTML tags

    ●HTML tags are keywords (tag names) surrounded by angle brackets like <html>

    ●HTML tags normally come in pairs like <b> and </b>

    ●The first tag in a pair is the start tag, the second tag is the end tag

    ●The end tag is written like the start tag, with a forward slash before the tag name

    ●Start and end tags are also called opening tags and closing

    tags<tagname>content</tagname>
    • Basic HTML page structure

    Click to add text


    Example
    Lists In HTML
    ▪ <ul>
    <li>Coffee</li> <ul> Defines an unordered
    <li>Tea</li> list
    <li>Milk</li>
    z </ul> <ol> Defines an ordered list

    ▪ <ol> <li> Defines a list item


    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <dl> Defines a description list
    </ol>

    <dt> Defines a term in a


    ▪ <dl> description list
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt> <dd> Describes the term in a
    description list
    <dd>- white cold
    drink</dd>
    </dl>
    HTML Comments

    • HTML comments are not displayed in the browser, but they can help document your HTML
    source code.

    • Syntax : <!-- Write your comments here -->

    HTML Links

    • HTML links are hyperlinks. You can click on a link and jump to another document.

    Syntax :

    • <a href="url">link text</a>

    • <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">

    HTML Block And Inline Elements


    • A block-level element always starts on a new line & always takes up the full width available.

    • An inline element does not start on a new line & only takes up as much width as necessary.
    HTML Classes And Id

    The HTML class attribute is used to specify a


    class for an HTML element. Multiple HTML
    elements can share the same class. To create
    a class; write a period (.) character, followed by
    a class name

    The HTML id attribute is used to specify a


    unique id for an HTML element.
    You cannot have more than one element with
    the same id in an HTML document.
    z
    HTML Semantic
    Elements

    ▪A semantic element clearly


    describes its meaning to both
    the browser and the
    developer.
    ▪Examples
    of semantic elements:
    ▪<form>, <table>,
    and <article> - Clearly defines
    its content.
    z

    CSS stands for Cascading Style Sheets

    ●Styles define how to display HTML elements

    ●Styles were added to HTML 4.0 to solve a


    What is CSS? problem

    ●External Style Sheets can save a lot of work

    ●External Style Sheets are stored in CSS files

    ●A CSS (cascading style sheet) file allows to


    separate web sites HTML content from it’s style.
    How to use CSS?
    There are three ways of inserting a style sheet:
    z
    ▪External Style Sheet: An external style sheet is ideal when the style is applied
    to many pages.
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>

    ▪Internal Style Sheet: An internal style sheet should be used when a single
    document has a unique style.
    <head>
    <style>
    p {margin-left:20px;}
    body{background-image:url("images/back40.gif");
    }
    </style>
    </head>
    • Inline Styles: To use inline styles use the style attribute in the
    relevant tag. The style attribute can contain any CSS property.

    <p style="color:#fafafa;margin-left:20px">This is a paragraph.</p>

    Multiple Styles Will Cascade into One:Cascading order

    1. Inline style (inside an HTML element)

    2. Internal style sheet (in the head section)

    3. External style sheet


    CSS Syntax: A CSS rule has two main parts: a
    selector, and one or more declarations:
    Combining Selectors

    {
    color: #009900;
    font-family: Georgia, sans-serif;
    }

    The id Selector

    The id selector is used to specify a style for a single, unique element.


    The id selector uses the id attribute of the HTML element, and is
    defined with a "#".

    Syntax
    #selector-id {
    property : value ;
    }
    The class Selector
    The class selector is used to specify
    a style for a group of elements. The class
    selector uses the HTML class attribute,
    and is defined with a "."

    Syntax
    .selector-class
    {
    property : value ;
    }
    CSS Anchors, Links and Pseudo Classes:

    Below are the various ways you can use CSS to


    style links.

    a:link {color: #009900;}


    a:visited {color: #999999;}
    a:hover {color: #333333;}
    a:active {color: #009900;}
    The CSS Box Model

    ●All HTML elements can be considered as boxes. In CSS, the term "box model" is
    used when talking about design and layout.

    ●The CSS box model is essentially a box that wraps around HTML elements, and it
    consists of: margins, borders, padding, and the actual content.

    ●The box model allows to place a border around elements and space elements in
    relation to other elements.
    Click to add text
    Example
    z What is JavaScript

    ▪ ●JavaScript is a Scripting Language

    ▪ ●A scripting language is a lightweight programming


    language.

    ▪ ●JavaScript is programming code that can be


    inserted into HTML pages.

    ▪ ●JavaScript inserted into HTML pages, can be


    executed by all modern web browsers.
    How to use JavaScript?

    The <script> Tag To insert a JavaScript into an HTML page, use the <script> tag.
    The <script> and </script> tells where the JavaScript starts and ends.

    <script>
    alert("My First JavaScript");
    </script>

    JavaScript in<body>

    <html>
    <body>
    <script>
    document.write("<h1>This is a heading</h1>");
    </script>
    </body>
    </html>
    External JavaScripts

    Scripts can also be placed in external files. External files often contain code to be used by
    several different web pages. External JavaScript files have the file extension .js.To use an
    external script, point to the .js file in the "src" attribute of the <script> tag:

    <html>
    <body>
    <script src="myScript.js">
    </script>
    </body>
    </html>
    z The HTML DOM (Document Object Model)

    ▪ When a web page is loaded, the


    browser creates a Document Object
    Model of the page. The HTML DOM
    model is constructed as a tree of
    Objects:
    Finding HTML Elements by Id

    • document.getElementById("<id-name>");

    Finding HTML Elements by Tag Name

    • document.getElementsByTagName("<tag>");

    Finding HTML Elements by Name

    • document.getElementsByName(“<name-attr>”);

    Finding HTML Elements by Class

    • document.getElementByClass(“<class-name>”);
    Writing Into HTML Output

    • document.write("<h1>This is a heading</h1>");
    • document.write("<p>This is a paragraph</p>");

    Reacting to Events

    • <button type="button" onclick="alert('Welcome!')">Click Me!</button>

    Changing HTML Content

    Using JavaScript to manipulate the content of HTML elements is a very powerful


    functionality.

    • x=document.getElementById("demo") //Find the element

    • x.innerHTML="Hello JavaScript"; //Change the content


    Changing HTML Styles

    Changing the style of an HTML element, is a variant of


    changing an HTML attribute.

    • x=document.getElementById("demo") //Find the


    element
    • x.style.color="#ff0000"; //Change the style

    Validate Input

    JavaScript is commonly used to validate input.

    • if isNaN(x) {alert("Not Numeric")};


    z THANK YOU

    You might also like