Scribd Logo
Upload

Welcome to Scribd!

  • 22 views

    Lecture 3: HTML5: HTML History, Tags, Element

    Uploaded by

    Aditya Kishan
    This document provides an overview of HTML5 elements and tags. It discusses the history and structure of HTML, common tags like <html>, <head>, <title>, <body>, and <p>, empty elements, attributes, headings, comments, paragraphs, text formatting, hyperlinks, and images. The document is intended as a lecture on basic HTML5 concepts.

    Copyright:

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

    Lecture 3: HTML5: HTML History, Tags, Element

    Uploaded by

    Aditya Kishan
    22 views22 pages
    This document provides an overview of HTML5 elements and tags. It discusses the history and structure of HTML, common tags like <html>, <head>, <title>, <body>, and <p>, empty elements, attributes, headings, comments, paragraphs, text formatting, hyperlinks, and images. The document is intended as a lecture on basic HTML5 concepts.

    Original Title

    2_HTML_class3

    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 overview of HTML5 elements and tags. It discusses the history and structure of HTML, common tags like <html>, <head>, <title>, <body>, and <p>, empty elements, attributes, headings, comments, paragraphs, text formatting, hyperlinks, and images. The document is intended as a lecture on basic HTML5 concepts.

    Copyright:

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

    Lecture 3: HTML5: HTML History, Tags, Element

    Uploaded by

    Aditya Kishan
    This document provides an overview of HTML5 elements and tags. It discusses the history and structure of HTML, common tags like <html>, <head>, <title>, <body>, and <p>, empty elements, attributes, headings, comments, paragraphs, text formatting, hyperlinks, and images. The document is intended as a lecture on basic HTML5 concepts.

    Copyright:

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

    Lecture 3: HTML5

    HTML HISTORY, TAGS, ELEMENT


    HTML: HyperText Markup Language
    <!DOCTYPE html>
    <html>
    <head>
    <title>Hello World</title>
    </head>
    <body>
    <p>Welcome to the world!</p>
    </body>
    </html>
    HTML Page Structure
    <html>

    <head>
    <title>Hello World </title>
    </head>

    <body>

    <p>Welcome to the World </p>

    </body>

    </html>
    Tree structure of HTML
    html

    head body

    title p
    History of HTML
    HTML, initially defined by a single person, Tim berner Lee in 1991
    ◦ A HTML document contains only text.

    HTML+, defined by Marc Andreeseen and Eric Bina, in 1993


    ◦ A HTML document can display images and play video clips as well as sounds.

    From 1993 to 1997, HTML was being defined by the elements that browser
    software developers chose to implement. - The “War” Years
    HTTP4
    Following the “war” years, the standards community pushes for further changes
    in HTML standards.
    ◦ In particular, the W3C has attempted to clean up the definition of HTML.

    World Wide Web Consortium (W3C) is the main international standards


    organization for the World Wide Web.

    HTTP4 is defined in 1999


    HTTP5
    What is HTML5?
    ◦ In 2012, HTML5 is defined, which is the new standard for HTML.
    ◦ It can display everything you want including text, images, music and movies, and
    animations.
    ◦ It is cross-platform. It will display content on a desktop computer, laptop, a tablet,
    smartphone, a notebook or a Smart TV.
    ◦ All major browsers support many of the HTML5 elements.
    HTML5 <!DOCTYPE>
    Tells browser which HTML standard to expect.
    Must appear first in the HTML document.

    HTML5 has a very simple <!DOCTYPE> element.


    ◦ <!DOCTYPE html>

    HTML4 <!DOCTYPE> element


    ◦ <!DOCTYPE html
    PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
    http://www.w3.org/TR/html4/loose.dtd>
    Basics of HTML5
    Every HTML document (web page) consists of tags and character data
    ◦ <html>, <body>, <title>, <a>.
    ◦ Starting (opening) tag and ending (closing) tag.
    ◦ </html>, </body>, </title>, </a>
    ◦ Opening and ending tags must be used together.

    Character data is the content between an opening and closing tag


    ◦ E.g., <title>Hello World</title>
    HTML Element
    We can also say that a HTML document are made of elements.

    An element is a combination of a tag and its character data.


    ◦ <title>Hello World</title>
    ◦ <body><p>Welcome to the world></p></body>
    ◦ <a></a>
    ◦ <br/>
    HTML Element
    Nested Element: an element contain other HTML elements

    Empty Element: an element with no content/character data

    Tips of writing HTML elements:


    ◦ Don’t forget the End tag.
    ◦ Use lowercase Tags:
    ◦ <a> and <A> are the same. This is called case insensitive.
    ◦ Better use <html>, <body>, <title>, <p>, </html>
    ◦ Not <HTML>, <BODY>, <TITLE>, <P>, </HTML>
    Start to write a HTML document.
    Now, let us try to write a HTML document.
    Attributes
    Attributes provide information about HTML elements
    An element can have one or more attributes
    ◦ id
    ◦ class
    ◦ style
    ◦ href

    An attribute comes in name/value pairs.

    e.g., <a href=“www.yahoo.com”>go to yahoo’s website</a>


    Attributes
    Some attributes that can be used on any HTML element:
    ◦ class: specifies one or more classnames for an element (refers to a class in a style sheet)
    ◦ id: specifies a unique id for an element
    ◦ style: specifies an inline CSS style for an element
    ◦ title: specifies extra information about an element (tool tip)

    HTML Global Attributes Reference


    Headings
    Heading are used to show the document structure.
    <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

    <h1> defines the most important heading and <h6> defines the least important
    heading.

    Browsers automatically add some empty space before and after each heading.
    Comment
    Comments can be added into the HTML code to make it readable and
    understandable.

    Browser will not display any comments.

    Syntax: <!-- -->


    ◦ E.g., <!-- This is my comment -->
    Paragraph
    Paragraphs are defined with the <p> tag.

    <p> can have many attributes.


    ◦ <p style=“”>

    Line Break: <br>


    ◦ Use <br> if you want a new line without starting a new paragraph.
    Special Symbol
    You cannot change the output by adding extra spaces or lines in HTML code.

    New horizontal line: <hr>


    New Line tag: <br>
    Whitespace: &nbsp
    Text Formatting
    Use tags for formatting output.
    ◦ E.g: bold or italic text

    A list of formatting tags:


    ◦ <b>: defines bold text
    ◦ <i>: defines italic text
    ◦ <sub>: defines subscripted text
    ◦ <sup>: defines superscripted text
    ◦ <mark>: defines marked/highlighted text
    Hyperlink
    The <a> tag defines hyperlink.
    A hyperlink is a word, group of words, or image that you can click on to jump to
    another web page.

    The href is the most important attribute, which indicates the link’s destination.
    ◦ E.g., <a href=“http://www.yahoo.com”>GO TO YAHOO</a>

    The target attribute specifies where to open the linked document.


    ◦ _blank: in a new window or tab
    ◦ _self: in the same frame as it was clicked (default)
    Images
    <img> tag is always an empty tag. It contains attributes only and no closing tag.

    You need to use the src attribute. The value of this attribute is the URL of the
    image.
    ◦ Syntax: <img src=“sampleImage.JPEG” alt=“hint”>

    alt defines the text for an image when the image cannot be displayed.

    The width and height attributes define the size of the image.
    Next Class
    Tables
    Lists
    Blocks
    ◦ Div and span

    Inline Style

    You might also like