Scribd
Upload
13 views

3 HTML+-+Basic

The document discusses HTML elements for structuring content, including headings, sections, and asides. It provides examples of using heading elements like <h1> to <h6> to proclaim and group content. It demonstrates how to create a complete document framework with a heading, main content, and footer. It also shows how to use <section> tags to arrange content and <aside> tags to include supplemental related content.

Uploaded by

bappeda.provgtlo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

3 HTML+-+Basic

The document discusses HTML elements for structuring content, including headings, sections, and asides. It provides examples of using heading elements like <h1> to <h6> to proclaim and group content. It demonstrates how to create a complete document framework with a heading, main content, and footer. It also shows how to use <section> tags to arrange content and <aside> tags to include supplemental related content.

Uploaded by

bappeda.provgtlo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Course :-

Effective Period : -

HTML - Basic
Proclaim & Group Headings

• HTML heading elements are created using <h1>,


<h2>, <h3>, <h4>, <h5>, and <h6> tags. These are
ranked in importance by their numeric value – where
<h1> has the greatest importance, and <h6> has the
least importance.

• The <h1> element is by far the most important


heading, and should ideally appear only once to
proclaim the document heading. Often, this can be a
succinct version of the document title. Below that, a
number of <h2> headings can proclaim topical
headings for long documents.

• Each topic might contain individual article headings


within <h3> elements, followed by paragraph <p>
elements containing the actual article content.
Proclaim & Group Headings

• Create an HTML document, Within the body


section, insert code as follows :

Fig 1. Example of Heading


Proclaim & Group Headings

Fig 2. Result of Heading view


Complete Framework

• Just as a typical HTML document may contain a


document heading or header group it may also contain
a footer, or footer group, at the bottom of the page.
The content of each footer is contained between
<footer> </footer> tags and provides information
about that part of the document.

• Typically, a <footer> element might contain the


author’s name, the author’s contact details within an
<address> element, or copyright and legal disclaimers
within a <small> element. Like a <header> element, a
<footer> element can also contain hyperlinks for page
and site navigation within a nested <nav> element.
Complete Framework

1. Create an HTML document (as Session 1.


Fig 3.2)
2. Within the body, insert a document
heading
<h1 id=”top”>Interesting Articles</h1>

3. Next, add a main content container


<main>
<!-- Page content to be inserted here. -->
</main>
Complete Framework

4. In the main content container, insert two


articles that are the main page content
<article>
<h2 id=”art-1”>Sally’s Article</h2>

<p>Article content...</p>
</article>

<article>
<h2 id=”art-2”>Terry’s Article</h2>

<p>Article content...</p>
</article>
Complete Framework

5. Finally, within the body, insert a document footer


containing page navigation hyperlinks, copyright
details, and a URL address
<footer>

<nav> <h3>Information</h3>
<a href=”#art-1”>Sally’s Article</a> -
<a href=”#art-2”>Terry’s Article</a> -
<a href=”#top”>Top of Page</a>
</nav>
<small>Copyright &copy; Example Corporation</small>
<address>www.example.com</address>

</footer>
Complete Framework

6. Save the HTML document, then open the web page in your
browser to see that the document structure comprises a
heading, page content, and footer area

Fig 4. Result of HTML Document with Complete Framework


Section & Asides

Create Section
• In HTML all content within the <body> element is
considered to be part of a “section”. Section limits
are defined implicitly by correctly sequenced
headings in the document outline. Section limits
are defined explicitly by placing content within the
<header>, <main>, and <footer> framework
elements demonstrated on before this pages.

• Page content within the document body or


<main> element can also be arranged in sections
between <section> </section> tags.
Section & Asides

Create Section
• Create an HTML document (as Session 1. Fig 3.2)
• Within the body, insert code like Fig 5.
• Save the HTML document then open it in your
browser to see the article content displayed in
sections. See Fig 6
Section & Asides

Fig 5. Example HTML Document with Section


Section & Asides

Fig 6. Result of HTML Document with Section


Section & Asides

Provide Asides
• HTML usefully provides <aside> </aside> tags that
can be nested within an <article> element in order to
incorporate content that is somewhat related to the
main content of that article. These allow for
supplemental yet separate content to be included –
typically displayed as a sidebar or footnote.

• Content within an <aside> element should be stand-


alone information that is related to the article, such as
pull-quotes extracted from an affiliated article, a
glossary of terms used within the article, or even
hyperlinks to pages providing further reading
associated with the article.
Section & Asides

Provide Asides
• Examples of using Aside:

Fig 7. Result of HTML Document with Asides


References
• Mike McGrath. (2020). HTML, CSS & Javascript. In Easy
Steps. Warwickshire. ISBN: 9781840788785. Chapter 2-3
• https://www.youtube.com/watch?v=MDLn5-zSQQI
• https://www.w3schools.com/html/
Thank You

You might also like