Scribd Logo
Upload

Welcome to Scribd!

  • 4 views

    2 - HTML

    Uploaded by

    Ali Hassan
    The document provides information on HTML (Hypertext Markup Language) including: 1. HTML is the standard markup language used to create web pages and it describes the structure of a web page using elements like headings, paragraphs, links, etc. 2. The basic structure of an HTML document includes the <!DOCTYPE>, <html>, <head> and <body> elements where the <head> contains metadata and the <body> contains visible content. 3. Common HTML elements include headings (<h1>-<h6>), paragraphs (<p>), links (<a>), lists (<ul>, <ol>, <li>), images (<img>), and dividers (<div>).

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    2 - HTML

    Uploaded by

    Ali Hassan
    4 views31 pages
    The document provides information on HTML (Hypertext Markup Language) including: 1. HTML is the standard markup language used to create web pages and it describes the structure of a web page using elements like headings, paragraphs, links, etc. 2. The basic structure of an HTML document includes the <!DOCTYPE>, <html>, <head> and <body> elements where the <head> contains metadata and the <body> contains visible content. 3. Common HTML elements include headings (<h1>-<h6>), paragraphs (<p>), links (<a>), lists (<ul>, <ol>, <li>), images (<img>), and dividers (<div>).

    Original Description:

    Original Title

    2- HTML

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document provides information on HTML (Hypertext Markup Language) including: 1. HTML is the standard markup language used to create web pages and it describes the structure of a web page using elements like headings, paragraphs, links, etc. 2. The basic structure of an HTML document includes the <!DOCTYPE>, <html>, <head> and <body> elements where the <head> contains metadata and the <body> contains visible content. 3. Common HTML elements include headings (<h1>-<h6>), paragraphs (<p>), links (<a>), lists (<ul>, <ol>, <li>), images (<img>), and dividers (<div>).

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    4 views31 pages

    2 - HTML

    Uploaded by

    Ali Hassan
    The document provides information on HTML (Hypertext Markup Language) including: 1. HTML is the standard markup language used to create web pages and it describes the structure of a web page using elements like headings, paragraphs, links, etc. 2. The basic structure of an HTML document includes the <!DOCTYPE>, <html>, <head> and <body> elements where the <head> contains metadata and the <body> contains visible content. 3. Common HTML elements include headings (<h1>-<h6>), paragraphs (<p>), links (<a>), lists (<ul>, <ol>, <li>), images (<img>), and dividers (<div>).

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    of 31

    HTML

    Hyper Text Markup


    Language
    What is HTML?
    • HTML stands for Hyper Text Markup Language
    • HTML is the standard markup language for creating Web pages
    • HTML describes the structure of a Web page
    • HTML consists of a series of elements
    • HTML elements tell the browser how to display the content
    • HTML elements label pieces of content such as "this is a heading",
    "this is a paragraph", "this is a link", etc.
    HTML Basic Content
    <!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>

    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>

    </body>
    </html>
    Creating an HTML Document
    • The Outer Structure
    • The Metadata
    • The Content
    The Outer Structure
    • There are two elements that provide the outer structure of an HTML
    document—the DOCTYPE and html elements.
    <!DOCTYPE HTML>
    <html>
    <!-- elements go here -->
    </html>

    • The DOCTYPE element tells the browser it is dealing with an HTML


    document. This is expressed through the HTML boolean attribute:
    <!DOCTYPE HTML>
    <!DOCTYPE>
    • The <!DOCTYPE> Declaration
    • The <!DOCTYPE> declaration represents the document type, and
    helps browsers to display web pages correctly.
    • It must only appear once, at the top of the page (before any HTML
    tags).
    • The <!DOCTYPE> declaration is not case sensitive.
    • The <!DOCTYPE> declaration for HTML5 is: <!DOCTYPE html>
    The Metadata
    • The metadata region of an HTML document allows you to provide information about your
    document to the browser. The metadata is contained inside a head element.
    • Most browsers display the contents of the title element in the menu bar of the browser
    window or at the top of the tab that displays the page.
    <!DOCTYPE HTML>
    <html>
    <head>
    <!-- metadata goes here -->
    <title>Example</title>
    </head>
    </html>
    • Tip The listing demonstrates how you create comments in HTML document. You begin with
    the tag <!– and end with -->. The browser will ignore anything you put inside these tags.
    The Content
    • The third and final part of the document is the content, which you put inside a body element.
    • The body element tells the browser which part of the document is to be displayed to the use.
    <!DOCTYPE HTML>
    <html>
    <head>
    <!-- metadata goes here -->
    <title>Example</title>
    </head>
    <body>
    <!-- content and elements go here -->
    I like <code>apples</code> and oranges.
    </body>
    </html>
    What is an HTML Element?
    • An HTML element is defined by a start tag, some content, and an end
    tag:
    • <tagname>Content goes here...</tagname>
    • The HTML element is everything from the start tag to the end tag:
    • <h1>My First Heading</h1>
    • <p>My first paragraph.</p>
    HTML Headings
    • HTML headings are defined with the <h1> to <h6> tags.
    • <h1> defines the most important heading. <h6> defines the least
    important heading:
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>
    The basic elements of an HTML Page

    • A text header, denoted using the <h1>, <h2>, <h3>, <h4>, <h5>, <h6> tags.
    • A paragraph, denoted using the <p> tag.
    • A horizontal ruler, denoted using the <hr> tag.
    • A link, denoted using the <a> (anchor) tag.
    • A list, denoted using the <ul> (unordered list), <ol> (ordered list) and <li> (list
    element) tags.
    • An image, denoted using the <img> tag
    • A divider, denoted using the <div> tag
    • A text span, denoted using the <span> tag
    Types of Attributes
    • Local
    The href attribute is local to the a element.
    • Global
    There are a set of global attributes that can be applied to any
    HTML element.
    Local Attributes
    • href use a tag is a local attribute.
    Global Attributes
    1. The accesskey Attribute
    2. The class Attribute
    3. The contenteditable Attribute
    4. The contextmenu Attribute
    5. The dir Attribute
    6. The draggable Attribute
    7. The dropzone Attribute
    8. The hidden Attribute
    9. The id Attribute
    10. The lang Attribute
    11. The spellcheck Attribute
    12. The style Attribute
    13. The tabindex Attribute
    14. The title Attribute
    The accesskey Attribute
    • The accesskey attribute lets you specify one or more keyboard shortcuts that will select the element on
    the page.
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Example</title>
    </head>
    <body>
    <form>
    Name: <input type="text" name="name" accesskey="n"/>
    <p/>
    Password: <input type="password" name="password" accesskey="p"/>
    <p/>
    <input type="submit" value="Log In" accesskey="s"/>
    </form>
    </body>
    </html>
    The accesskey Attribute Example
    • In this example, I have added the accesskey attribute to three input
    elements.
    • The idea is to enable users who are regular users of a page or site to
    use keyboard shortcuts to move between commonly used elements.
    • The key combination required to trigger the accesskey setting differs
    between platforms—for Windows, it is the Alt key and the accesskey
    value pressed together.
    The accesskey Attribute Example
    • You can see the effect of the accesskey attribute.
    • I press Alt+n to focus on the first input element and enter my name.
    • I then press Alt+p to focus on the second input element and enter my
    password.
    • Alt+s presses the Log In button, which submits the form.
    The class Attribute
    • The class attribute is used to classify or categorize elements. You usually do this so that
    you can locate elements in the document that belong to a given class or to apply a CSS
    style.
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Example</title>
    </head>
    <body>
    <a class="class1 class2" href="http:// WebName.com">web site</a>
    <p/>
    <a class="class2 otherclass" href="http://w3c.org">W3C web site</a>
    </body>
    </html>
    The contenteditable Attribute
    • The contenteditable attribute is new in HTML5 and allows the user to change the
    content in the page.
    • Setting the attribute value to true allows the user to edit the element contents, and
    setting it to false disables this feature.
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Example</title>
    </head>
    <body>
    <p contenteditable="true">It is raining right now</p>
    </body>
    </html>
    The contextmenu Attribute
    • The contextmenu attribute allows you to define context menus for
    elements. These menus pop up when the user triggers them (for
    example, when a Windows PC user right-clicks). At the time of this
    writing, no browser supports the contextmenu attribute.
    The dir Attribute
    • The dir attribute specifies the direction of an element’s text. The two
    supported values are ltr (for leftto- right text) and rtl (for right-to-left text).
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Example</title>
    </head>
    <body>
    <p dir="rtl">This is right-to-left</p>
    <p dir="ltr">This is left-to-right</p>
    </body>
    </html>
    The draggable and dropzone Attribute
    • The draggable Attribute
    The draggable attribute is part of the HTML5 support for drag
    and drop, and it is used to indicate whether an element can be
    dragged.
    • The dropzone Attribute
    The dropzone attribute is part of the HTML5 support for drag and
    drop. It is the counterpart to the draggable attribute I just described.
    The hidden Attribute
    • The hidden attribute is a Boolean attribute that indicates an element is not
    presently relevant. Browsers interpret this attribute by hiding the element from
    view. When the hidden attribute is applied to an element, the browser doesn’t
    render it at all. It is as though it were not contained in the HTML.
    <body>
    <button onclick="toggleHidden()">Toggle</button>
    <table>
    <tr><th>Name</th><th>City</th></tr>
    <tr><td>Adam Freeman</td><td>London</td></tr>
    <tr id="toggle" hidden><td>Joe Smith</td><td>New York</td></tr>
    <tr><td>Anne Jones</td><td>Paris</td></tr>
    </table>
    </body>
    The id Attribute
    • The id attribute is used to assign a unique identifier to an element. These identifiers
    are commonly used to apply styles to an element or to select an element with
    JavaScript.
    <body>
    <a href="http:// WebName.com">web site</a>
    <p/>
    <a id="w3clink" href="http://w3c.org">W3C web site</a>
    </body>
    • Tip The id attribute can also be used to navigate to a particular section in a document.
    If you imagine a document called example.html that contains an element with an id
    attribute value of myelement, you can navigate directly to the element by requesting
    example.html#myelement. This last part of the URL (the # plus the element id) is
    known as the URL fragment identifier.
    The lang Attribute
    • The lang attribute is used to specify the language of an element’s
    contents.
    • The value for the lang attribute must be a valid ISO language code.
    <body>
    <p lang="en">Hello - how are you?</p>
    <p lang="fr">Bonjour - comment êtes-vous?</>
    <p lang="es">Hola - ¿cómo estás?</p>
    </body>
    The spellcheck Attribute
    • The spellcheck attribute is used to specify if the browser should check
    the spelling of an element’s content. Using this attribute makes sense
    only when it is applied to an element the user can edit.
    • The permitted values for the spellcheck attribute are true (spellchecking
    is enabled) and false (spellchecking is disabled). The way that
    spellchecking is implemented differs between browsers. Other browsers
    require the user to explicitly perform a spellcheck.
    <body>
    <textarea spellcheck="true">This is some mispelled text</textarea>
    </body>
    The style Attribute
    • The style attribute allows you to define a CSS style directly on an
    element
    <body>
    <a href="http://WebName.com" style="background: grey; color:white;
    padding:10px;“>
    Visit the site
    </a>
    </body>
    The tabindex Attribute
    • The tabindex attribute allows you to control the order in which the Tab key moves the focus
    through the HTML page, overriding the default order.
    • A tabindex value of -1 ensures that an element will not be selected when the user presses
    the Tab key.
    <body>
    <form>
    <label>Name: <input type="text" name="name" tabindex="1"/></label>
    <p/>
    <label>City: <input type="text" name="city" tabindex="-1"/></label>
    </p>
    <label>Country: <input type="text" name="country" tabindex="2"/></label>
    </p>
    <input type="submit" tabindex="3"/>
    </form>
    </body>
    The title Attribute
    • The title attribute provides additional information about an element,
    which is commonly used by the browser to display tool tip
    information.
    <body>
    <a title=”Book Publishing" href="http://WEBName.com">Visit the
    WebSite</a>
    </body>
    Using HTML Entities
    • As you can see from the examples in this chapter, there are some
    characters that have special meaning in HTML document—the
    obvious ones being the < and > characters. You will sometimes need
    to use these characters in your content without wanting them to be
    interpreted as HTML. To do this, you use HTML entities. An entity is a
    code the browser substitutes for the special character.
    HTML Entities
    Character Entity Name Entity Number
    < &lt; &#60;

    > &gt; &#62;

    & &amp; &#30;

    € &euro; &#8364;

    £ &pound; &#163;

    § &sect; &#167;

    © &copy; &#169;

    ® &reg; &#174;

    ™ &trade; &#8482;

    You might also like