Scribd
Upload
9 views

HTML Layouts

Uploaded by

umairalih6
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

HTML Layouts

Uploaded by

umairalih6
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

ICT-LAB

HTML Layouts

HTML layouts provide a way to arrange web pages in well-mannered, well-


structured, and in responsive form or we can say that HTML layout specifies a way
in which the web pages can be arranged. Web-page layout works with arrangement
of visual elements of an HTML document.

Web page layout is the most important part to keep in mind while creating a website
so that our website can appear professional with the great look. You can also use
CSS and JAVASCRIPT based frameworks for creating layouts for responsive and
dynamic website designing.

Every website has a specific layout to display content in a specific manner.

SAGAR
FACULTY COMPUTER SCIENCE

DHA-SUFFA UNIVERSITY, KARACHI


Following are different HTML5 elements which are used to define the different parts
of a webpage.

o <header>: It is used to define a header for a document or a section.


o <nav>: It is used to define a container for navigation links
o <section>: It is used to define a section in a document
o <article>: It is used to define an independent self-contained article
o <aside>: It is used to define content aside from the content (like a sidebar)
o <footer>: It is used to define a footer for a document or a section
o <details>: It is used to define additional details
o <summary>: It is used to define a heading for the <details> element

NOTE: HTML layouts create an individual space for every part of the web page.
So that every element can arrange in a significant order.

Description of various Layout elements


HTML <header>

The <header> element is used to create header section of web pages. The header
contains the introductory content, heading element, logo or icon for the webpage,
and authorship information.

Example:
1. <header style="background-color: #303030; height: 80px; width: 100%">
2. <h1 style="font-size: 30px; color: white;text-align: center; padding-
top: 15px;">Welcome to MyFirstWebpage</h1>
3. </header>

SAGAR
FACULTY COMPUTER SCIENCE

DHA-SUFFA UNIVERSITY, KARACHI


HTML <nav>

The <nav> elements is a container for the main block of navigation links. It can
contain links for the same page or for other pages.

Example:
1. <nav style="background-color:#bcdeef;">
2. <h1 style="text-align: center;">Navgation Links</h1>
3. <ul>
4. <li><a href="#">link1</a></li>
5. <li><a href="#">link2</a></li>
6. <li><a href="#">link3</a></li>
7. <li><a href="#">link4</a></li>
8. </ul>
9. </nav>

HTML <section>

HTML <section> elements represent a separate section of a web page which contains
related element grouped together. It can contain: text, images, tables, videos, etc.

Example:
1. <section style="background-
color:#ff7f50; width: 100%; border: 1px solid black;">
2. <h2>Introduction to HTML</h2>
3. <p>HTML is a markup language which is used for creating attractive web
pages with the help of styling, and which looks in a nice format on a web br
owser..</p>
4. </section>

SAGAR
FACULTY COMPUTER SCIENCE

DHA-SUFFA UNIVERSITY, KARACHI


HTML <article>

The HTML

tag is used to contain a self-contained article such as big story, huge article, etc.
Example:
1. <article style="width: 100%; border:2px solid black; background-
color: #fff0f5;">
2. <h2>History of Computer</h2>
3. <p>Write your content here for the history of computer</p>
4. </article>

HTML <aside>

HTML <aside> define aside content related to primary content. The <aside> content
must be related to the primary content. It can function as side bar for the main content
of web page.

Example:
1. <aside style="background-color:#e6e6fa">
2. <h2>Sidebar information</h2>
3. <p>This conatins information which will represent like a side bar for a we
bpage</p>
4. </aside>

HTML <footer>

HTML <footer> element defines the footer for that document or web page. It mostly
contains information about author, copyright, other links, etc.

Example:
1. <footer style="background-color: #f0f8ff; width: 100%; text-
align: center;">
2. <h3>Footer Example</h3>
3. <p>© Copyright 2018-2020. </p>
SAGAR
FACULTY COMPUTER SCIENCE

DHA-SUFFA UNIVERSITY, KARACHI


4. </footer>
HTML <summary>

HTML <summary> element is used with the <details> element in a web page. It is
used as summary, captions about the content of <details> element.

Example:
1. <details>
2. <summary>HTML is acronym for?</summary>
3. <p style="color: blue; font-
size: 20px;">Hypertext Markup Language</p>
4. </details>

SAGAR
FACULTY COMPUTER SCIENCE

DHA-SUFFA UNIVERSITY, KARACHI

You might also like