Computer Reviewer (3rd Q)

LESSON 1: Creating divisions in a Web page

Good Web Design

The Basics The basic idea behind a good web design is to partition your web page into various
sections and columns to give it a professional appeal and to make it more user-friendly. This
technique is also helpful in the following:

• Creating a template that you can use on all your web pages to render a familiar look every time
a visitor goes to a different part of your site. A website should be like your home in that yo want
visitors to feel welcome and at ease throughout their stay. You don't want them to be
completely disoriented and wondering where they are the minute, they decide to move around
l.e move to another page on your site.
• Creating a header section that runs across the top of your page in order to designate a
prominent place for your website's logo, slogan, graphic, etc. The top of your web page is
prime real esta In web design terms and is the part of the page that will have the greatest
impact on you visitors. You want to make sure that you use this space wisely.
• Creating multiple columns that clearly divide your web page into various logical sections such
as

− A menu column- should contain a list of links to other pages on your website. This will help
your visitors get around regardless of what page they are in.
− A main content column (holds the text you are currently reading) - This column should render
the main text and graphics which define what your web page is about. This should be kept
narrow enough to facilitate easy reading. A computer screen is typically much wider than a
page in a book or a column in a newspaper or magazine. A lot of text spanning across the entire
screen quickly becomes tiresome to read and comprehend.
• Creating a footer section to hold copyright information and important links. This helps to crem
a visual ending to your web page and can help direct visitors to other important sections of
your website.

Thinking Division

The most popular way of structuring a web page is by creating tables. . This method of partitioning a
web page has become obsolete. Web designers today are geared towards a more appealing way of
separating content into sections which is called the division-based layout.

A division-based layout defines the area of a page with <div> tags. Each part of the page you want!!
format separately should be a division.

Advantages of the Division-based Layout:

1. You can place layout styles externally, and then make style changes to many pages at once
simply by modifying the style sheet.
2. It reduces the number of lines of code needed to produce a page.

What is a <div> tag?

The <div> tag is used to establish separate divisions or areas of your page. Look at the sample web
page. Can you tell how many divisions this web page has?

if you layout the web page using <div> tags, you might break down this page in general similar to this
the masthead/header, the top navigation bar, the content body text, the bottom navigation var, and
the copyright notices.

What is a Masthead?

A masthead is used as the title of a newspaper or periodical as it appears across the first page, front
cover, or title page of each issue. On the Internet, a masthead is a graphic image or text title at the top
of the web page that identifies the website or particular sections of the site. Aside from the title of the
website, it includes other elements such as image, text, and navigational links.

The id attributes
The id attribute can be used with any tag element. When used along with the <div> tag, it will iden-
tify and define an area of your page.
The truth about id's:
1. As a unique identifier, the id's value should only be used once on your page.
2. The value is case-sensitive.
<div id="title"> is different from <div id="Title">
3. Start the id value with a letter followed by any of these: letters, number digits (1-9), dashes (_),
and underscore). Don't use spaces or any other special characters
. To create a division for a web page, use the <div> tag together with its unique id value just like the
syntax shown below:
<div id="masthead">...</div>
<div id="top-navigation">...</div>
<div id="web-contentbody">...</div>
<div id="bottom-navigation">...</div>
<div id="copyright-section">...</div>

Exercise on Comp Lab:

Page layout with <div> Tags

Putting a style in the <div> tag will allow you to set the appearance or how your division of your web
page behaves on the screen. You can put various style attributes such as the following:
• Border
• Background
• Margin
• Width
• Height
Exercise on Comp Lab:
Simple color-coded layout to your web page using the <div> tag. Starting from top to bottom:
1. Open the webpage-division.html in your Notepad.

2. Add the following style attributes inside the masthead: <div id="masthead" style="width:
1350px; height: 100px; border: 1px solid blue; background-color: aqua; margin-left: 70px">
<p style="text-align: center; font-size: 36px"> Masthead </p>
</div>

3. For the top navigation, add the following:

<div id="top-navigation" style="width: 1200px; height: 40px; border: 1px solid maroon; background-
color: silver; margin-left: 70px">
<p style="text-align: center; font-size: 20px"> Top Navigation </p>
</div>

4- For the content body, add the following:

<div id="web-contentbody" style="width: 1200px; height: 300px; border: 1px solid green; background-
color: lime; margin-left: 70px">
<p style="text-align: center; font-size: 36px"> Web Content </p>
</div>

5. For the bottom navigation, add the following:

<div id="bottom-navigation" style="width: 1200px; height: 40px; border: 1px solid red; background-
color: fuchsia; margin-left: 70px">
<p style="text-align: center; font-size: 20px"> Bottom Navigation </p>
</div>
6. For the copyright, add the following:
<div id="copyright-section" style="width: 1200px; height: 80px; border: 1px solid purple; background-
color:yellow; margin-left:70px">
<p style="text-align: center; font-size: 36px"> Copyright </p>
</div>
7. Save the file.
8. Test it on a browser.
Sample output:

As you can see from the sample output, the <div> tag is a general-purpose tag. Though, without the id
attribute of each <div> tag, it's hard to tell what section of the document each <div> tag represents.
The tag itself gives no indication of the type of content it is intended to represent. This is why the new
HTML5 has something great to offer.
The HTML5 Approach provides a set of tags that clearly define blocks of content that make up your
web page. As a review, the new HTML5 tags are:
Header - This is for your web titles, taglines, logos, etc.
Section - This is meant to identify substantial portions of content on the web page.
Article - This identifies major segments of content within a web page.
Aside -This tag can be used in two different contexts. (Please see the box "Set Aside")
Footer - This is for the copyright section; it can include navigational links, or contact information.
Nav- This is intended for navigational links.
Set <aside>
The <aside> tag is a new element for HTML5. The context of this element is whether to use it inside or
outside the <article> element.
<aside> element being used inside the <article> element:
You often see info-boxes pulled away from the actual content of the article in magazines or
newspapers, highlighting something with relevance to the article such as pull-quotes. When this is
the scope of your aside element, then it has to be placed inside the article element because it has a
relationship to the content of the article.
<aside> element being used outside the <article> element:
This element can also be used to mark up content which is related to your page as a whole containing
blog rolls, additional navigation, even ads-and when this is the scope of your <aside> element, it has
to be placed outside of the article section.
Exercise Comp lab:
1. Open the webpage-division.html file in your Notepad.
2. Replace the <div> tags with the corresponding HTML5 tags similar to this:
<div id="masthead" style="width: 1350px; height: 100px; border: 1px solid blue;
background-color: aqua; margin-left: 70px">
<p style="text-align: center; font-size: 36px"> Masthead </p>
</div>
-Replace with-
<header style="width: 1350px; height: 100px; border: 1px solid blue; background-color: aqua; margin-
left: 70px">
<p style="text-align: center; font-size: 36px"> Masthead </p>
</header>
3. Do the same to the remaining <div> tags.
4. Save your file as htmls-layout.html.
5. Test your file in a browser.

Positioning a Division
There are two ways of positioning a division (either using the <div> tags or the new HTML5 tags)
These are the float style rule and the position style rule.

Float Style
If you insert an additional <aside> division to your web page layout, and place your division beside
another either to the right or left,

<aside style="width: 300px; height: 400px; border: 1px solid white;

background-color: orange; margin-right: 78px; float: right">
<p style="text-align: center; font-size: 36px"> Aside </p>
</aside>

Position Style
If you want to place a division on a specific spot of your page, you can use the position style rule.
Three possible values for a position style rule
: 1. Absolute value - This value specifies a fixed position with respect to its parent element or tag
Usually, the <body> tag is used to be the parent element unless specified.
2. Relative value- This value is compensated from the element's natural position. Other elements on
the page are not affected, even if the new position causes elements to overlap.
3. Fixed value- This value specifies a fixed position within the browser window that doesn't change
even when the display is scrolled up or down.
Note:
You must use each of these values in combination with a top, right, bottom, and/or left style rule that
specifies the location to which the position style rule refers. Example: to position a section at exactly
100 pixels from the top of the page and 200 pixels from the left side, the syntax should be:
<section style= "top: 100px; left: 200px; position: absolute">

Note:
Sometimes, you may want to create a division for another purpose which is not defined in the HTML5
semantics. It's fine to use a <div> tag and mix it up with HTML5 semantic tags in your web page layout.
The <div> tag is not deprecated in HTML5; it should still work perfectly.

Horizontal lines
Horizontal Lines can be useful as visual dividers between sections of text in a web page. For example,
you may want to add a horizontal line after your header then add another horizontal line before your
footer. This will clearly show your division in your web page.

To add a horizontal line, simply add the following one-sided <hr> (horizontal rule) tag where you want
the line to appear. By default, the line runs the entire width of the browser window, is two pixels in
height, and is black with a chiseled effect. You can change these characteristics by applying
attributes within the tag.

Most of the original attributes for <hr> tags are obsolete such as color, align, width, and size are not
supported by HTML5 anymore. You should set the appearance of this tag using styles (style=
"attributes") The attributes you can apply are color, background-color, width, and height, For
example, to insert a blue Ine that is 2 pixels thick and spans 75% of the window's width, you should
write:
<hr style="color: blue; background-color: white; height: 2; width: 75%">

Division-based layout - This kind of layout defines the area of a page with <div> tags.
<div>- This tag is used to establish separate divisions or areas of your page
Id attribute - This attribute can be used with any tag element.
Masthead - This is a graphic image or text title at the top of the web page that identifies the website
or particular sections of the site.
Float style - This is used to place your elements either to the left or right of the web page. Position
style-This is used to place a division on a specific spot of your page.
Absolute value - This value specifies a fixed position with respect to its parent element or tag.
Relative value - This value is compensated from the element's natural position.
Fixed value - This value specifies a fixed position within the browser window that doesn't change
even when the display is scrolled up or down.
<hr> tag -was used to create a visual division to your page.
LESSON 2: Create Hyperlinks and Anchors
What is Hyperlink?
A hyperlink is any graphic or piece of text document that can connect readers to another web page,
or another portion of a document. Web users will usually find at least one hyperlink on every web
page. The simplest form of these is called an embedded text or an embedded link
In HTML, no matter what type of hyperlink you want to create, the basic syntax would be the same.
starts with the <a> tag, and then uses the href= attribute, which will direct the URL or the path to the
destination. It then closes with the </a> tag. For example, an opening tag might look like this: <a
href="http://www.itworkscentral.com"> www.itworkscentral.com</a>
When viewed in a browser, this will display a text-based hyperlink similar to the example below:
Hyperlinked text
To find more please visit www.itworkscentral.com web site.
Hyperlinks are underlined by default.
Tag- combination of attributes and value

Linking to another Web Page

The essence of a web page is to create a link from one page to another and back again. You can also
link to pages on other sites, whether they are your own or from others.
To create a link to another page, you should use the <a> tag, as mentioned earlier. This tag defines
the hyperlink. By default, links will be displayed in all browsers as follows:
• Unvisited link is blue with an underline
• Visited link is purple with an underline
• Active link is red with an underline
Attribute Value Description
Charset Char encoding Not supported in HTML 5.
Specifies the character set
of a linked document
Coords coordinates Not supported by HTML 5.
Specifies the coordinates of
a link
href URL Specifies URL of the page
the link goes to
hreflang language code Specifies the language of
the linked document
media media-query Specifies what
media/device the linked
document in optimized for
name section_name Not supported by HTML 5.
Specifies the name of an
anchor.
rel Alternate, author, Specifies the relationship
bookmark, help, license, between the current
next, nofollow, noreferrer, document and thr linked
prefetch, prev, search, tag document
rev text Not supported in HTML 5.
Specifies the relationship
between the linked
document and the current
document
shape Default, rect, circle, poly Not supported in HTML 5.
Specifies the shape of a link
target Blank, parent, self, top, Specifies where to open the
framename linked document
type MIME_type Specifies the MIME type of
the linked document
The href attribute
The href attribute specifies the URL of the page that the link goes to. The <a> tag is not a hyperlink if
there is no href attribute, but rather as a placeholder for a hyperlink.
Syntax: <a href="URL">...</a>
Attribute Values
Using Relative and Absolute URL values
Absolute URL value - This value has a path that contains the complete address that the user can use
to go to a specific page. This value is very reliable, but it is sometimes too long and difficult to type.
Example: <a href="http://science.nationalgeographic.com/science/archaeology/lost-city-
petra.html"> Lost City of Petra </a>
This will link you to the "lost-city-petra.html" page of nationalgeographic.com site.
Relative URL value - This value has a path in which the destination is relative to the current file
location. For instance, when you are linking to a file in the same website as the link itself, you simply
provide the name. If it is in the same folder, you just provide the file name.
Example: For comments, <a href= "contacts.html"> Contact Us</a> please.
This should be in the same location relative to your website location.
Hyperlink Used as Anchors
An anchor is a marker within an HTML document. When you define a specific location in the
document with an anchor name, you can jump directly to that anchor. Anchors are most valuable in
long documents with multiple sections, so the users will not have to read or scroll the entire
document before they can reach to their topics or articles of interest.
Then, to refer to this anchor point, include its name in the href= attribute. The name should be
preceded with a pound (#) sign. You may use a relative reference if the anchor point is in the same
page document as the hyperlink:
<a href="#achievements"> Achievements </a>
Otherwise, include the file name of the file in which the anchor is placed.
<a href= "biography.html#achievements"> Achievements </a>
Note:
The text-indent: value is adjustable.
The list-style: none will allow you to remove the bullets in the item.
Tip:
 To remove the underline in the hyperlinked text, the style="text-decoration:none" can be inserted
inside the <a> tag
Hyperlink - This is any graphic or a piece of text document that can connect readers to another web
page or another portion of a document.
Href - This attribute specifies the URL of the page that the link goes to.
<a> tag - This tag is used to define the hyperlink
.Anchor - This is used as a marker within an HTML document.
Absolute value - This value has a path that contains the complete address that the user can use to go
to a specific page.
Relative value - This value has a path in which the destination is relative to the current file location.
mailto - This is used to create a hyperlink to an email address.
Navigation bar - This is a section of a website or online page intended to help visitors in exploring
through the online document. Usually, web pages will have a primary and a secondary navigation bar
on all pages of the web document. These sections of the web page will include links to the most
important sections of the site. The application and design of navigation bars is a vital aspect of web
design and usability
A website is composed of hyperlinks. You can go from one web page to another using this. You can
easily jump to any topic of your article within a web page or within other pages of your site using an
anchor. You can even link an email address to send and receive messages. Finally, you can explore
your website using a hyperlinked navigational bar.
It is easy to create a hyperlink. The <a> tag is used to define text as hyperlink. The href= attribute is
used to determine the location and destination of the hyperlink. The new HTML5 <nav> tag is used to
hold codes for your navigation bar.