TOPIC 3: HTML CODING
HTML stand for Hyper Text Markup Language. HTML itself is not a programming
language. This is because;
Most programming languages use logic and conditions to control content. HTML is does
not use such logic and conditions.
HTML uses tags to control how texts appears on a web page. Programing languages uses
set of instructions called codes instead.
Programming language used English like structured language/ statements to presents its
instructions. HTML does not understand such statements
HTML is made up of tags. A tag is a generic term for a language element descriptor. Tags can
also be defined as texts that are used to distinguish special text of a webpage. Each tag tells the
browser to display what is inside the tag in special ways. The set of tags for a document or
other unit of information is sometimes referred to as markup.
Markup refers to the sequence of characters or other symbols that you insert at certain places in
a text or word processing file to indicate how the file should look when it is printed or displayed
or to describe the document's logical structure. The markup indicators are often called "tags."
For example, this particular paragraph is preceded by a:
Uses of HTML
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements the help in formatting texts displayed on a
webpage
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading"
Sitemap
Note: When designing a website, it is important to develop a sitemap first. A sitemap tells
Google which pages and files the designer think is important in their site e.g., when the site was
last updated, the author of the page and alternative language versions provided the website. It
also provides valuable information about these files.
Structure of HTML
<!DOCTYPE html>
<html Lang = “en - US”>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>My Webpage</title>
</head>
<body>
<h1>This is a Heading</h1> <!.. This is a comment...>
<p>This is a paragraph</p>
</body>
</html>
Explanation
The <!DOCTYPE html> declaration defines that this document is an HTML document
The <html> element is the root element of an HTML page
Lang = “en-us” Language used is US – English.
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title
bar or in the page's tab)
<meta charset="UTF-8"> - UTF-8 (Unicode Transformation Format - 8-bit) is a character
encoding standard used to represent text in computers, databases, and the internet. It is
capable of encoding all possible characters (code points) in Unicode
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - Ensures the
page is responsive i.e., the web page/ Entire website fits in any kinds of the screen used to
access or view the website.
<link rel="stylesheet" href="[Link]"> - Links to an external CSS file
<title>My Webpage</title>
The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph
How to save an HTML document
Saving any type of a file requires a file name and an extension. File extension indicate the
file type. HTML fille can be of two types. HTM and HTML. The .htm extension comes
from the past when some of the commonly used software only allowed three letter
extensions. It is perfectly safe to use either .html or .htm, but be consistent. [Link] and
[Link] are treated as different files by the browser.
How to View HTML Source
A good way to learn HTML is to look at how other people have coded their html pages. To
find out, simply click on the View option in your browser’s toolbar and select Source or Page
Source. This will open a window that shows you the actual HTML of the page. Go ahead and
view the source html for this page.
Inspect HTML code
Inspecting an HTML code highlights a particular tag or style used in a webpage. This helps
the designers to learn more of specific features or tags used by other programmers. To find
out, simply click on the Inspect option in your browser’s toolbar and select Source or Page
Source.
Comments in HTML
Comments are non-executable text or codes in a text editor. They are useful because the explain
what a line of code means or the function it performs. Comments make it possible for other
programmers to follow through a code that has been done by someone else. In HTML comments
are represented as follows; <!.. This is a comment..>
HTML Tags
Tags
A tag is a generic term for a language element descriptor. The set of tags for a document or
other unit of information is sometimes referred to as markup. HTML tags are the hidden
keywords within a web page that define how your web browser must format and display the
content. HTML markup tags are usually called HTML tags.
HTML tags are keywords (tag names) surrounded by angle brackets like <html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, with a forward slash before the tag
name.
Start and end tags are also called opening tags and closing tags
Elements
"HTML tags" and "HTML elements" are often used to describe the same thing.
But strictly speaking, an HTML element is everything between the start tag and the end
tag, including the tags: For instance;
HTML Element: <p>This is a paragraph. </p>
HTML Heading elements
HTML defines six levels of headings. A heading element implies all the font changes,
paragraph breaks before and after, and any white space necessary to render the heading.
The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or
most important) level and H6 the least.
It is important to note that texts, Images, audio, video, and animations are all
multimedia elements that can be added into a web page. The appearance of texts can be
controlled by the above stated headings.
In HTML, text size can be controlled by using Heading elements by using the <font> tag
and the size attribute.
HTML Attributes
Attributes provide additional information about HTML elements. For example;
1. In the above element we can add the following attributes.
<p bgcolor= “red”>This is a paragraph. </p>. The bg-color here is an
attribute. It gives more feature/information about this element. There are a number of
attributes used by various HTML elements.
2. HTML links are defined with the <a> tag. The link address is specified in the href
attribute: e.g. <a href="[Link]">This is a link</a>
Note:
HTML elements can have more than one attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"
Types of Tags
a) Paired tags. These tags exist in two. Opening and closing Tags. The browser display
what is in between these two tags. Paired tags are given as follows; < Opening tag>text
to be displayed</closing tag>
Open tags are tags before the phrase/text to be displayed in the browse
Close tags are tags after the phrase/text to be displayed in the browse
b) Unpaired Tags. These tags are also called void tag. These tags do not need a closing tag.
They work as a single tag. For example, <strong>
c) Tags Based on their utility
We can differentiate tags based on the purpose they are used for. Basically we have three types
here
Formatting tags
We manage the size of the font, underline part of the text, make the text bold etc by using tags
like <font>, <u>,<b> etc.
Page Structure tags
Description, title, head, body etc. are part of the page structure tags. They are part of the basic
html page and does not directly affect the formatting of text or image.
Control tags
Form tags, Script tags, Radio buttons etc are part of the control tags
There are some basics tags that can be used within the head tag. These tags are not displayed on
the web page but control the appearance of texts on the browser. Some of such tags includes;
a) Meta tag - <Meta> tag defines metadata about an HTML document. Metadata gives
more information about data. <meta> tags always go inside the <head> element.
Uses of Meta tags
Use to specify character set, Show the author of the document as
Use to specify page description, well as
Indicates keywords, viewport settings
common meta tags
<meta charset = “utf -8” > This helps translate letters, symbol and texts used in coding
into bytes used by computers. It can also be thought as inbuilt dictionary translating
human language into computer language.
<meta name = “viewpoint” = "width=device-width, initial- scale=1">. This simply refers
to viewpoint meta tag. It is used to make the website pages responsive. Responsive means
the website can be displayed in all the devices ranging from desktop to mobile device
without misbehaving. It is usually set to 1 by default, to prevent zooming of the website.
b) Title – A <title> tag is a paired tags that goes inside the head tag. It is not displayed
inside the webpage but at the top of the browser tab. Title tag specifies a title for the
HTML page (which is shown in the browser's title bar or in the page's tab)
Common tags used to control the texts within the body
Style tags
These tags add style to the texts. They include; bold, italic, underline, strong, and emphasized
tags. These tags are all paired tags.
Horizontal rule tag <hr>
It adds horizontal line across the entire page. It is a void or unpaired tag.
Link tag <a></a>
Connect one page to another. The a here stands for anchor. <a> tag has attributes href that stands
for hyperlink Reference. This point to the exact location where the links should take you to. An
attribute gives additional function of a given tag. It highlights distinguishable functionalities that
in a tag. Another attribute of <a> tag target. Target attribute controls if the link should open on
the same page or new tab in the browser. E.g. <a href = “[Link]” target = “_blank”>
Roles of common tags in a link
a) The <link> tag defines the relationship between the current document and an
external resource.
b) The HTML <body> vlink Attribute is used to specify a color of a visited link in a
Document.
c) The HTML <a> tag defines a hyperlink
Image tag
Images
Images are used in HTML documents to one: make the page visually effective and two:
display information. Images can also be used as links, but this is discussed in the topic on
linking.
Although images are good for a number of things, a page with too many images often
looks too cluttered and can take too long to load, which can be frustrating, and as a
business aspect it could lose clients.
An image - <img src="url">
To display an image you need to specify the URL of the image using the src attribute,
replacing url with the filename of your image. There are several ways this can be done:
src="[Link]" - the filename if the image is in the same directory as the html
file.
src="images/[Link]" - a relative path when the image is in another
directory.
src="[Link] - a full
URL can also be used.
Alternate Text - <img ... alt="?">
The alt attribute defines the text shown in place of an image when the image cannot
load. This is actually a required attribute for valid html, and should briefly describe what
the image normally would.
Image Size - <img ... width="?" height="?">
An image will normally be shown actual size, but by using the width and height
attributes you can change the displayed size. You can specify the size in pixels or as a
percentage. Tip: specify the size using the actual size of the image in pixels to force
browsers to allocate space for the image before it is even loaded, ensuring you page
layout remains the same with or without images displayed.
Border - <img ... border="?">
Add a border by specifying the thickness in pixels. You can also set border="0" to
remove the border added when images are used as links. (*)
Image Alignment - <img ... align="?">
By default an image appears at the place specified in the html code(as with any other
tag). However, you can align an image with the surrounding text or paragraph by setting
any of align="left | right | top | bottom | middle". (*)
Spacing - <img ... vspace="?" hspace="?">
Adjust the whitespace (or runaround space) around an image, in pixels. Use vspace to
adjust the vertical spacing above and below, or hspace for the left and right sides. (*)
Example:
Show an image using html
<html>
<body>
<p><img src="[Link]" alt="parakeet"></p>
</body>
</html>
Similar to link tag, the image tag also uses attribute called src = “url” with url. Src stands for
source. You can use the file name instead of url. For example; <img src = “file name”>. can also
add the border attribute to an image tag. This attribute will add the border around the image. For
example; <img src = “file name” border = “10”>.
Note: Some these attributes are comfortable done in CSS so you don’t need to get worried once
you are conversant with CSS.
List tag
This exists in two types; ordered and Unordered. Ordered list appears with numbers and
unorder list appear with bullets.
Order list tag is represented with <ol></ol> and unordered list with <ul></ul>. In between
should be a tag list <li></li> to mark the first list. This should be repeated several times to
depending on the number of lists you want to create.
You can also create a list inside another list. This is called Nested list. Any elements placed
inside another element is called a Child element while the one outside is called parent element.
Indentations in a text editor helps in differentiating the child element from parent elements.
Table tag
Table tags helps us in organizing texts into rows and columns in a web page. <table> tag has
table row <tr></tr> and table data <th></th> as child elements. Table data <th> contains the
column headers. <th> is added inside <tr> tags. To add the data under each header, we use
<td></td> tags. These are called table cell or data. A table cell is where the content goes. Cells
must exist within rows, where the number of cells in a row determines the number of columns in
the table. Cell properties can be
set using the attributes. Make sure you enter same number of <td> as the <th> but on a separate
<tr>
Table tags also work with several attributes. Such attributes include border, cellpadding, cells-
spacing.
Sections, Divisions & Lines
These are the tags used to divide your page up into sections. Effective use of these tags
will mean that the page has a good structure and layout, making it more user friendly and
easier to read.
Division - <div> </div>
The div tag defines a section or division within a HTML file. It typically contains
headings, paragraphs, tables or other elements that need to be grouped together.
Commonly used with css by setting the <div class="?"> attribute to set the look
and feel of a section of your web page.
Paragraph - <p> </p>
Used to define paragraphs of text, much like you would see in a book. A lot of text can
appear within the <p> and </p> tags, and browsers will automatically wrap the text
onto the next line once it reaches the edge of the screen. When another <p> tag is used
to start the next paragraph, the browser will add some blank space between the
paragraphs. It has the following attributes:
align="?" - Alignment of text in the paragraph: left, center or right (*)
width="?" - Paragraph will occupy a fixed width or percentage of the page, default 100%
Span - <span> </span>
Used to group inline elements together, such as a few words within a sentence, in order
to apply a css style to those words only. The span tag can be used within div and p
tags as it does not create a new horizontal block boundary.
Line Break - <br>
Equivalent to one carriage return, it is used to start text on a new line. Multiple <br>
tags in a row will create a large vertical space on a web page.
Text Formatting Tags
The following HTML tags are used to format the appearance of the text on your web
page. This can jazz up the look of the web page, however, too much variety in the text
formatting can also look displeasing.
Header - <h?> </h?>
There are 6 levels of headings available, from h1 for the largest and most important
heading, down to h6 for the smallest heading.
Bold - <b> </b>. The text in between the tags will be bold, and stand out against text around it,
the same as in a word processor.
Italic - <i> </i>
Also working the same way as a word processor, italics displays the text at a slight angle.
Underline - <u> </u>
Again, the same as underline in a word processor. Note that html links are already
underlined and don't need the extra tag.
Strike-out - <strike> </strike>
Puts a line right through the centre of the text, crossing it out. Often used to show that
text is old and no longer relevant. Also works by using <s> </s> instead.
Pre - The <pre> HTML element represents preformatted text which is to be presented exactly
as written in the HTML file. For example; below image will appear just as it under
<pre></pre> tag. For instance, the text below will be displayed in html just as it is by using
preformatted texts
Source Code - <code> </code>
Text is displayed in a fixed-width font, commonly used when showing source code. I
have used it on this site, along with stylesheets, to show all tag
Typewriter Text - <tt> </tt>
The text appears to have been typed by a typewriter, in a fixed-width font. (*) for example; I
<tt> love this type of texts </tt>
Block Quote - <blockquote> </blockquote>
Defines a long quotation, and the quote is displayed with an extra wide margin on the
left hand side of the block quote.
Small - <small> </small>
Instead of having to set a font size, you can use the small tag to render text slightly
smaller than the text around it. Useful for displaying the 'fine-print'.
Font Colour - <font color="#??????"> </font> (*)
Change the colour of a few words or a section of text. The 6 question marks represent
the hex color code, see this list of colours and codes for some samples. (*)
Font Size Change - <font size="+/-?"> </font>
For an immediate change of font size with respect to the font size preceding it, this tag
increase or decreases the size of the font by the number you specify. Eg: <font
size="-1">Some Text</font> (*)
Change Font Face - <font face="?"> </font>
To show text in a particular font, use the font name such "Helvetica" or "Arial" or
"Courier". Be aware that using some fancy font from your computer means that the
person viewing that page must also have that font installed on their computer too,
otherwise it will look totally different to them. (*)
Centre - <center> </center>
A useful tag, as it says, it makes everything in between the tags centred (in the middle of
the page).
Emphasis - <em> </em>
Used to emphasize text, which usually appears in italics, but can vary according to your
browser.
Strong Emphasis - <strong> </strong>
Used to emphasize text more, which usually appears in bold, but can vary according to
your browser.
Html List.
Learn how to create lists on a web page. Lists are the preferred way to display items one
after the other, instead of using <br> tags. Lists have a tag to start and end the list itself,
as well as a tag for each item in the list.
There are three types of lists, ordered, unordered and definition lists.
Unordered Lists
An unordered list is a bulleted list, similar to the menu on the right (although the menu
has been altered using stylesheets to use images instead of the standard bullets.)
Define Unordered List - <ul> ... </ul>
Use the <ul> tags to define the start and end of an unordered list. A number of list
items (li elements) will go within the ul tags.
Unordered List Item - <li> some item </li>
Add the text for each item in between some <li> and </li> tags. Each list item must
have its own li tags.
Bullet Type <ul type="disc | circle | square">
By default a browser will show a round bullet. This can be changed by using the type
attribute of the ul tag, which will change the bullet type for the entire list.
Item Type <li type="?">
You can set the type of bullet for an item in the middle of the list by setting the type
attribute of an li tag.
Example:
<html>
<body>
<ul>
<li>An item</li>
<li>Another item</li>
</ul>
</body>
</html>
Ordered Lists
This list is used to create and indexed list, such as a numbered or alphabetical list.
Define Ordered List - <ol> ... </ol>
Use the <ol> tags to set the start and end of the list. A number of list items will then go
between the ordered list tags.
Ordered List Item - <li> an item </li>
Each item must use the <li> tags the same as with an unordered list. But this time the
browser will number each item automatically, instead of showing bullets.
List Type <ol type="A | a | I | i | 1">
Set the type of list index by using the type="?" attribute. The default style is numeric,
and you can also choose from upper or lowercase, alphabetic or roman numerals.
List Starting Position <ol start="?">
Set the starting number (or letter) if you dont want the list to start at 1 or A.
Item Value <li value="?">
You can set the value of an item in the middle of the list manually, if you do not want it
to follow the previous letter or number. Simply set the value attribute of the item you
wish to change. Note: subsequent items will follow the new value
Definition Lists
This type of list is used to define and describe terms, much like a dictionary. Typically an
entry in the list consists of a term, and a definition of that term. A browser will usually
bold the term, and indent the definition.
Define a Definition List - <dl> </dl>
Set the start and end of a definition list. All entries go within the dl tags. Each entry will
usually consist of one dt and one dd element.
Definition Title - <dt> </dt>
The title of a term being defined. Note: you may have a term with no definition, or
multiple terms with the same definition.
Definition Description - <dd> </dd>
The definition of a term. Note: you can have multiple definitions for a single term.
Example:
<html>
<body>
<dl>
<dt>Term 1</dt>
<dd>Definition of term 1</dd>
<dt>Term 2</dt>
<dd>Definition of term 2</dd>
</dl>
</body>
</html>
HTML TABLES
Table tags are used for displaying spreadsheet-like data neatly formatted in rows and
columns. They can also be used to design page layouts by placing content into invisible
rows and columns of a 'table'.
Table - <table> ... </table>
Table attribute
d) Cell spacing- The space (in pixels) between each cell, eg. between rows or
columns
e) Cell padding - The space, or margin, between the content of a cell and its border
f) Table border - The size of the border (in pixels) surrounding the table
g) Align - Alignment of text in the cell: left, center or right (*)
h) valign - Vertical alignment of the cell: top, middle or bottom.
i) Width - Specify a fixed width of a cell, by default they will only take up as much
j) Space as they need.
k) Colspan - Column spanning allows a cell to take up more than one column, in
order to match layouts of other rows. Replace? with the number of columns to
span.
l) Rowspan="?" - Row spanning, similar to column spanning, forces a cell to
occupy more than one row.
m) Table size - Use the style attribute width the width or height properties to specify the
size of a table, row or column.
Vertical Table Headers - To use the first column as table headers, define the first cell in each
row as a <th> element.
HTML Frames
Frames allow you to have multiple sections of the browser window, called frames, each
showing their own .html file within the frame. This used to be common practice when trying to
show separate sections of a site in separate sections of the browser window, such as a header at
the top, navigation at the side, and the rest was page content that someone could scroll down
without making the header and navigation disappear.
Frame sets are rarely used these days, as the introduction of server-side scripting languages such
as php and asp allow you to create content pages dynamically. The introduction of HTML5 has
also provided new methods of doing page layouts without having to use frames.
Frame Set - <frameset> ... </frameset>
Used instead of the body tag, the frameset tag defines a group of frames. Setting the
rows and cols attribute allow you to create the number of frames needed for your
layout.
rows="??,??" - To set up multiple frames in rows, replace the question marks by the
size of each row, either in pixels or as a percentage. A * can be used as a wild card, for
instance: rows="100,*" would give you a top frame of 100 pixels high, and a bottom
frame using the rest of the screen.
cols="??,??" - Similar to rows, a number of frames can be set out in columns.
border="?" - Frame border thickness in pixels.
bordercolor="?" - Colour of border between frames. (*)
Frame - <frame>
Each frame within a set will need a frame tag to tell it which web page to load in the
frame. It uses the attribute:
src="url" - Filename or URL of page to show in the frame
noresize="noresize" - The frame will not be able to be resized by a visitor
scrolling="auto" - Each frame will have vertical and horizontal scroll bars appear
automatically when needed. You can change this by setting the scrolling attribute
to yes, no, or auto.
frameborder="auto" - Individual Frame Border. Set to 0, 1 to specify whether or
not that frame must have a border.
Unframed Content - <noframes> ... </noframes>
Very old browsers are unable to display frames, and in this case we need to specify what
these browsers should display instead of the frames. Even though this is not much of a
problem anymore, it is still suggested that you specify unframed content when using
frames. Anything between the noframes tags will not be shown in modern browsers
that show framed content.
Example:
A frame example with one header row, a left & right side column, and the content in the
center.
<html>
<head>
<title>Example - Frames</title>
</head>
<frameset rows="100,*">
<frame name="top" src="frames_top.html">
<frameset cols="50,*,50">
<frame name="left" src="frames_left.html">
<frame name="mid" src="frames_middle.html">
<frame name="right" src="frames_right.html">
</frameset>
<noframes>
<i>error to display to those who cannot see frames</i>
</noframes>
</frameset>
</html>
Forms in html
An HTML form is used to collect user input. The user input is most often sent to a server for processing.
Example of a form
The HTML <form></form> element is used to create an HTML form for user input. The <form>
element is a container for different types of input elements, such as: text fields, checkboxes,
radio buttons, submit buttons. Below is a list of common form elements that we have;
<input> <button> <output>
<label> <fieldset> <option>
<select> <legend> <optgroup>
<textarea> <datalist>
Input element is the mostly used form element. An <input> element can be displayed in many
ways, depending on the type attribute. Here are some examples:
Style
Font face - face Attribute is used to specify the font family of the text in a page. Font family
defines the font type that will affect the nature of a text in a webpage. For example; sans-Serif
It is an attribute so, it is used inside other tags line body tags, paragraph tags, div tags etc.
Syntax: <font face="font_family"> text </font>
<!DOCTYPE html>
<html>
<head>
<title>
HTML font face Attribute
</title>
</head>
<body>
<font size="6" face="verdana">
GeeksforGeeks!
</font>
<br>
<font size="6" face="arial">
GeeksforGeeks!
</font>
<br>
<font size="6">
GeeksforGeeks!
</font></body></html
Favicon A small image displayed at the left of a web page title in a
browser tab. This is used inside head tag.
Frame in HTML
Iframe – The HTML <iframe> tag specifies an inline frame. An inline frame is used to embed
another document within the current HTML document.
Note: It is a good practice to always include a title attribute for the <iframe>. This is used by
screen readers to read out what the content of the iframe is.
tbody tag - The <tbody> tag is used to group the body content in an HTML table. For example;
The <tbody> element is used in conjunction with
the <thead> and <tfoot> elements to specify each part of a table (body,
header, footer).
<table style="width:100%">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody style="text-align:right">
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Class vs Id
class attribute is often used to point to a class name in a style sheet. Class is
used to manipulate elements in an HTML page. It is used in the style tag and
can be two more elements with the same class name. In the stylesheet, class is
preceded by a period (dot.)
using a class
The class attribute is often used to point to a class name in a style sheet. It can
also be used by a JavaScript to access and manipulate elements with the
specific class name.
In the following example we have three <div> elements with a class attribute
with the value of "city". All of the three <div> elements will be styled equally
according to the .city style definition in the head section:
<div class="trial">
<p>
This is an example of a class
</p>
</div>
In the stylesheet, we point to as follows;
<style>
.trial {
Color: green;
</style>
ID
The HTML id attribute is used to specify a unique id for an HTML element.
You cannot have more than one element with the same id in an HTML
document. The id attribute specifies a unique id for an HTML element. The
value of the id attribute must be unique within the HTML document.
The id attribute is used to point to a specific style declaration in a style sheet. It
is also used by JavaScript to access and manipulate the element with the
specific id.
The syntax for id is: write a hash character (#), followed by an id name. Then,
define the CSS properties within curly braces {}.
In the following example we have an <h1> element that points to the id name
"myHeader". This <h1> element will be styled according to the #myHeader style
definition in the head section:
