LIDE Learning Center, Inc.

Isabel, Leyte

Notes in Computer 9
SY: 2023 – 2024

NAME: Example:
SECTION:
<div id = “header”>
Good Web Design Basics
In previous versions of HTML, these semantic ways of
Like publication article layout, dividing your web page placing tags helped developers describe the tags within
into partition of sections and columns is a good idea to the code.
have a better web design. It will give your created web
page a professional appeal and make it more user- HTML5 adds semantic tags to define layouts in more
friendly. this method is also helpful in the following: natural ways. It helps both developers and browsers get
the purpose of the markup tags. The new HTML5
1. You should create a template that you can use on all semantic tag is one in which the name of a tag reflects its
your web pages for your visitors to have a familiar purpose.
look every time they go to a different part of your
created site. Here are the major semantic tags that you should know:
2. You should create header section that runs across
the top of your page in order to designate a
prominent place for your websites logo, slogan, 1. <header> - The section that contains an
graphics and so on. introduction or a group of navigation elements;
3. You should create multiple columns that will clearly 2. <footer> - Defines the text at the bottom of a
divide your web page into numerous logical sections, page, such as the copyright or contact
such as: information. It is typically repeated on every
a) A menu column that should contain a list of links page of the site;
to other pages on your website that will help the 3. <article> - The section that contains and
visitors of your website to get around whatever independent item of content, such as a
page they are in; and magazine article or a forum post;
b) A main content column that should render the 4. <aside> - Defines a block of text that is
main text and graphics which will define what tangential to the main discussion as a note, a
your web page is all about. It should be narrow tip, or a warning. It can be distinguished from
enough to facilitate easy reading since the other text because it could be pulled out and
computer screen is wider than any page in a discarded without disrupting the main
book or a column in a newspaper. Having a lot of document where it happens;
text spanning across the entire screen will be 5. <section> - Defines generic content or an
tiresome to read and comprehend. application section. Examples of sections could
4. If your layout of the web page uses tags, you may be book chapters or the numbered sections of a
want to break down the page generally similar to thesis. A sites home page could be split into
this: top and bottom navigation bar, content, and the sections such as the Introduction, News, and
copyright information. Contact Information;
6. <nav> - The section that contains navigation
HTML5 Semantics links;
7. <details> - The section that contains additional
Semantic means the relationship of meanings of a sign details that the user can view or hide using an
or a set of signs. HTML can be used in a semantic way to interactive widget; and
reinforce structural meaning. It is about using tags, class 8. <hgroup> - The section of headings, using <h1>
names, and IDs that will support the meaning of the to <h6>, where the largest is the main heading
content within the tags. For example, if you are using the of the section, and the others are subheadings.
<div tag (DIV tag is a division or section of web page
content), web developers have to use an ID or class name
along with the tag to convey meaning more.

pg. 1
Positioning the HTML5 tags c. Fixed value – This value specifies a fixed
position within the browser window that does
These are the two ways of positioning a division (either not change even when the display is scrolled up
using the <div> tags or the new HTML5 tags). These are or down; and
the float style rules and position style rules. d. Static value – It is a default value that specifies
elements render in order, or as they appear in
1. Float style – is used to insert an additional <aside>
the document flow.
division to your web page layout, and will place
your division beside another either to the right or
left.
2. Position Style – is used to place a division on You must use each of these values in combination with
specific spot of your page. There are three possible a top, right bottom, and/or left style rule that specifies
values for a position style rule: the location to which the position style rule refers.
a. Absolute value – This value specifies a fixed Example: to position a section at exactly 100 pixels from
position with respect to its first positioned the top of the page and 200 pixels from the left side,
element or tag. Usually, the <body> tag is used the syntax should be: <section style = “top: 100px; left:
to be the parent element unless specified; 200px position: absolute”>.
b. Relative value – This value is compensated
from the elements natural position. Other
elements on the page are not affected, even if
the new position causes elements to overlap;

html5layout.html Code:
<!DOCTYPE html>
<html>
<head>
<title>Web Page Divisions</title>
<meta charset="utf-8">

<body>
<header style ="width: 1200px; height: 100px; border: 3px solid lime;
background-color: red; margin-left: 70px">
<p style="text-align: center; font-size: 36px"> BIOGRAPHY OF ZANE FLORES </p>
</header>

<nav style ="width: 1200px; height: 50px; border: 3px solid maroon;
background-color: silver; margin-left: 70px">
<p style="text-align: center; font-size: 20px"> Top Navigation </p>
</nav>

<aside style="width: 300px; height: 300px; border: 3px solid gray;

<section style ="width: 900px; height: 300px; border: 3px solid green;
background-color: aqua; margin-left: 70px">
<p style="text-align: center; font-size: 36px"> Personal Information </p>
<h2> Basic Personal Information </h2>

</section>

<nav style ="width: 1200px; height: 40px; border: 3px solid red;
background-color: lime; margin-left: 70px">
<p style ="text-align: center; font-size: 20px"> Bottom Navigation </p>
</nav>

pg. 2
 <footer style ="width: 1200px; height: 80px; border: 3px solid purple;
background-color: fuchsia; margin-left: 70px">
<p style ="text-align: center; font-size: 36px">Copyright</p>
</footer>
</body>
<head>
</html>

References:

 D-Whiz (Web Design) Rex Publishing

pg. 3