Scribd Logo
Upload

Welcome to Scribd!

  • Demo HTML5 Basics

    Uploaded by

    Ranjan Sharan
    48 views4 pages
    This demo will provide an overview of the semantic approach that is the structural essence of HTML5. It will also show how CSS3 enhances the look and feel of the page. Every HTML5 document starts with the doctype declaration.

    Original Description:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This demo will provide an overview of the semantic approach that is the structural essence of HTML5. It will also show how CSS3 enhances the look and feel of the page. Every HTML5 document starts with the doctype declaration.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    48 views4 pages

    Demo HTML5 Basics

    Uploaded by

    Ranjan Sharan
    This demo will provide an overview of the semantic approach that is the structural essence of HTML5. It will also show how CSS3 enhances the look and feel of the page. Every HTML5 document starts with the doctype declaration.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    Demo: HTML5 Basics

    Textual & visual action details Show opening screen. Narration text

    Welcome to the HTML5 Fundamentals demo. This demo will provide an overview of the semantic approach that is the structural essence of HTML5, introduce some of the new tags, and show how CSS3 enhances the look and feel. Type of transition: Barn Cube Rotate We are going to design a page called the Musical Muse as outlined in this diagram. The main flow of the page will consist of a page header, a navigation menu, a main article that contains two sections and an aside, and finally the footer. There will also be two asides that are not part of the main page flow.

    Transition here Transition here Show completed web page diagram.

    As you talk about the diagram, zoom/highlight in on the components. Transition here Show completed web page itself. [Record actual page. As you talk about the page, zoom/highlight in on the sections. Click one or two of the buttons to show how they work.]

    Type of transition: Fade Here is the Musical Muse web page. The header area contains the logo, the page title, and a sub-title. It is followed by a navigation menu. Below the navigation is the article area, with its two sections and an aside. The aside contains a video about the Greek muses. The article area is followed by the footer. The left aside contains a stylized image of the muse Euterpe, the muse of music. The right aside contains buttons that, when clicked, tell you more about the other eight muses, who are not actually part of this article.

    Demo: HTML5 Basics


    Transition here Zoom in on <!doctype> to the end of <head>. Show page segments code here: <!doctype>, <html>, <head>. Type of transition: ?? Now that we know how the page is organized and how it is rendered, lets begin to analyze the code that actually creates the page. Every HTML5 document starts with the doctype declaration. Note that the type is not html5, just html. Just as in previous versions of HTML, the doctype declaration is followed by the <html> tag, and then the <head> tag, which contains the title as well as any link information that is required to bring in JavaScript, CSS3, etc. Transition here Zoom in on <body>, <header>, and <nav>. Show page segments code here: <body>, <header>, and <figure>. Type of transition: ?? The head element is followed by the <body> tag. As you know, the body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, and so on. The <body> tag is followed by the new <header> tag. This header element contains the page header information. The header element typically contains the h1 to h6 elements, but it can also contain the new hgroup element as well as the new figure element, as shown here, or even the <paragraph> tag. The <hgroup> tag should be used when more than one heading level is grouped together, such as the title and sub-title used here. The <figure> tag inside the header element contains the logo image, which is called using the <image> tag. The figure element can also contain a figure caption. We will see how the figure caption is used in just a minute. Transition here CSS3 for <body>, <hgroup>, <h1>, <h2>, <figure> Zoom in on each definition. Type of transition: ?? Here are the CSS3 definitions for the HTML5 elements weve just seen. First, the font family for the page is defined. Then, the body definition is used to set the width and the margins. The body definition is followed by a definition for each tag used in the header section, including a definition for the <figure> tag. The fonts and sizes are set for the <h1> and <h2> tags contained in the hgroup, and a left float is placed on the logo. Transition here Type of transition: ?? This is the content created with the HTML5 code and rendered using the CSS3 definitions.

    Demo: HTML5 Basics


    Transition here Zoom in on the <nav> area. Type of transition: ?? Now that we have our page heading created, lets take a look at the navigation for our site. The <nav> tag is designed to handle the main site navigation. The navigation in this example uses an unordered list. The <nav> tag is the only tag that should be used to create the main site navigation. Transition here Zoom in on the nav code. Type of transition: ?? Here is the CSS3, which provides the formatting for the <nav> tag. Note that each type of list item is defined. The nav ul definition provides the overall structure of the list. The nav ul li specifies that the list should display inline and the nav ul li a designs the font appearance for the hyperlinks. Transition here Zoom in on the navigation bar. Transition here <article> header area Zoom in on each tag section as it is discussed. Type of transition: ?? This is how the navigation appears on the web page. Type of transition: ?? Next is the new <article> tag. The <article> tag specifies independent, selfcontained content. An article should be created to make sense on its own. You should be able to take the contents of an article, place them in a new context, and the article should still make sense. The article element includes its own header element. There is one h1-level heading. No need for an hgroup this time, because there is only one heading level. The next element used is the new <section> tag. A section can be contained in an article, and it can also contain an article. However, a section is not complete on its own. When placed in a new context, it may not make complete sense or give a complete understanding of any concepts presented. The two sections contained in the article also have their own <header> tags. The second section in the article contains an aside. This aside contains a video about the nine Greek muses. The new <video> tag is used here, with the control and loop attributes. The control attribute displays the video with user controls that turn the video on and off. The loop attribute instructs the video to play in a continuous loop. Transition here Zoom in on each definition as it is discussed. Type of transition: ?? Here are the CSS3 definitions for the <article> tag. Note that the definition for the paragraph, header, and section areas are all defined for the <article> tag in which they are contained. The <h1> tags defined here and the <h1> tag defined for the page are not the same.

    Demo: HTML5 Basics


    Transition here Zoom in on the footer. Type of transition: ?? The <footer> tag is next. The <footer> tag can be used for a page, an article, or a section. In this instance, it is the footer for the page. The <small> tag is used to reduce the size of the page footers font. Transition here Zoom in on <aside> left. Zoom in on <aside> right. Type of transition: ?? There are two asides defined at the end of the HTML file: one for the left aside, and one for the right. The left aside, which contains an image of the muse Euterpe, uses the new <figure> tag, which we also used for the logo. This time, the <figure> tag contains a figure caption below the image, which is created using the <figcaption> tag. The right aside contains buttons with the names of the other eight muses. Euterpe is not listed here. The right aside contains the new <menu> tag. The <menu> tag was deprecated in 4.01 but has been reborn in HTML5. The <menu> tag is used to create context menus, toolbars, and for listing form controls and commands. The <menu> tag should not be used for the main site navigation. Only the <nav> tag should be used for that purpose. When you click one of the buttons, it provides a brief description of the muse. [Pause to allow time for button click.] Transition here Zoom in on each definition as it is discussed. Transition here Review the page in light of the code review. Side by side Transition here Type of transition: ?? Here is the CSS3 markup that renders the format for the contents of the <aside> tags. Both the left and right asides use absolute positioning to place the aside on the page. Type of transition: ?? Lets take another look at our page. Based on our analysis, we can clearly discern how each component of the page was created. Thank you. Type of transition: ??

    You might also like