HTML

Web Systems HTML
INTRODUCTION TO HTML & HTML FORMATTING TAGS
What is HTML?
HTML is the standard markup language for creating web pages. HTML stands for HyperText Markup
Language. HTML describes the structure of Web pages using markup. Thus, HTML is not a
programming language but it is a meta language to describe and identify the structure or content
of web pages.
HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML
specification which was published in 1995. HTML 4.01 was a major version of HTML and it was
published in late 1999. Though HTML 4.01 version is widely used but currently we are having HTML 5
version which is an extension to HTML 4.01, and this version was published in 2012.
HTML elements are the building blocks of HTML pages. HTML elements are represented by tags.
Browsers do not display the HTML tags, but use them to render the content of the page.
HTML page file ends with “.htm” or “.html” extension.
A Simple HTML Document

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
contents
</body>
</html>
The <!DOCTYPE html> declaration defines this document to be HTML5.
The <html> element is the root element of an HTML page.
The <head> element contains meta information about the document.
The <title> element specifies a title for the document.
The <body> element contains the visible page content.
HTML Tags
HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>
HTML tags normally come in pairs like <p> and </p>
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, but with a forward slash inserted before the tag name.
HTML tags are not case sensitive: <P> means the same as <p>.
Tip: The start tag is also called the opening tag, and the end tag the closing tag.
College of Comp. & IT – Hadhramout Univ. 1 Mr. Khaled Abdulaziz Bawazir

Web Systems HTML
HTML Elements
An HTML element usually consists of a start tag and end tag, with the content inserted in between:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag:
<p>My first paragraph.</p>
Nested HTML Elements

HTML elements can be nested (elements can contain elements).
All HTML documents consist of nested HTML elements.
Empty HTML Elements

HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break).
Empty elements can be "closed" in the opening tag like this: <br />.
HTML Main Sections: head & body

<html>
<head></head>
<body></body>
</html>
− Head: contains all non-visual elements (title, meta data, embedded and external style,
fonts, etc.)
o <meta charset="utf-8">
Meta charset specifies the character encoding of the website.
o <title>Page Title</title>
Defines the title of the webpage, and acts as the title of the search result that's
displayed in search engines such as Google, Bing and Yahoo. I'd recommend using
no more than 70 characters, as anything over will be cut-off.

Web Systems HTML
o <meta name="description" content="Page description">
A short snippet of text describing what the webpage is about — this snippet appears
as the description of the webpage in search results, and should be no more than 150
characters. Like with the title, characters over 150 will be cut-off.
o <meta name="viewport" content="width=device-width, initial-scale=1">
Known as the responsive design meta tag, Meta viewport describes how the layout
and content adapts to the mobile viewport — the content= attribute accepts many
different values, however the snippet above is relatively standard.
o <meta name="application-name" content="Application Name">
Specifies an "app name" so that the website can be used like a web-app — this
name appears underneath the app icon on mobile devices when the user selects
the "Add to Home Screen" function in their web browser.
<html>
<head>
<title>Web Systems</title>
<meta name="description" content="This is Web Systems Website">
<meta name="keywords" content="html, css, javascript">
<meta name="author" content="Khaled Bawazir">
<meta charset="utf-8">
</head>
</html
− Body: contains all visual elements (h1, p, hr, br, li, etc…).
HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading (largest). <h6> defines the least important heading
(smallest).
<h1>This is heading 1</h1>

HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal
rule.
The <hr> element is used to separate content.

Web Systems HTML
HTML Paragraphs
The HTML <p> element defines a paragraph:
<p>This is a paragraph.</p>
HTML Line Breaks

The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:
<p>This is<br>a paragraph<br>with line breaks.</p>
HTML <abbr> tag

This tag is used to define abbreviation.
<html>
<body>
<abbr title="HyperText Markup Language">HTML</abbr>is a small markup
</body>
</html>
HTML <marquee> tag

This tag is used to let the text move horizontally from right to left.
<html>
<body>
<marquee>
As you can see this text is moving from right to left…
</marquee>
</body>
</html>
HTML Formatting Elements

Formatting elements were designed to display special types of text:
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
<pre>- display text as it is written in the Editor

Web Systems HTML
HTML <small> Element

The HTML <small> element defines smaller text:
<h2>HTML <small>Small</small> Formatting</h2>
HTML <mark> Element

The HTML <mark> element defines marked or highlighted text:
<h2>HTML <mark>Marked</mark> Formatting</h2>
HTML <del> Element

The HTML <del> element defines (removed) text.
<p>My favorite color is <del>blue</del> red.</p>
<del> tag is similar to <strike> and <s> tags.
HTML <ins> Element

The HTML <ins> element defines inserted (added) text.
<p>My favorite <ins>color</ins> is red.</p>
HTML <sub> Element
The HTML <sub> element defines subscripted text.
<p>This is <sub>subscripted</sub> text.</p>
HTML <sup> Element
The HTML <sup> element defines superscripted

text.
<p>This is <sup>superscripted</sup> text.</p>
HTML <pre> Element

Display text as it is written in the Editor.
<html>
<body>
<pre>Welcome to
My Website
!!!
</pre>
</body>
</html>

Web Systems HTML
HTML Comment Tags

You can add comments to your HTML source by using the following syntax:

The HTML Style Attribute

The HTML style attribute has the following syntax:
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
HTML Background Color

The background-color property defines the background color for an HTML element.
<body style="background-color:powderblue;">
HTML Text Color

The color property defines the text color for an HTML element:
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
HTML Fonts
The font-family property defines the font to be used for an HTML element:
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
HTML Text Size

The font-size property defines the text size for an HTML element:
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML element:
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Inserting Single Spaces in HTML Text

— non-breaking space is about the width of one normal space.
&ensp; — the en space is about the width of two normal spaces.
&emsp; — the em space, roughly four normal spaces.

Web Systems HTML
HTML LINKS
Link Structure
Like all tags, links follow a structure, and have start tags and end tags.
<a href="url">link text</a>

Explanation:
• a: a stands for Anchor, which means Link. This is the tag that makes it all happen.
• href: Means Hypertext REFerence. The href part is another attribute, with the location of the
other page as its value. Don’t forget the quotation marks (“ ”)
Example
<a href="http://www.google.com"> Visit Google </a>
Local Links
The example above used an absolute URL (full web address).
A local link (link to the same web site) is specified with a relative URL (without http://www....).
<a href="html_images.asp">HTML Images</a>
Linking to email addresses
If you want to let people email you by clicking a link, you use this code:
<a href="mailto:bruce@example.com">mail me</a>
to create this — mail me — which will open the users email program with your address in
the To: box.
Linking to pictures
Linking to a picture file is practically the same as to a html file. Just include the name of the file,
and do not forget the correct suffix — i.e. if it is a gif or a jpg.
<a href="default.asp">
<img src="smiley.gif"style="width:42px;height:42px;border:0;">
</a>
Linking to files
You link to a file just like a picture. The only difference is that it won’t open in a browser, but instead
will be downloaded onto a specified place on the reader’s hard drive. An example:
<a href="ambient.mp3">download the song (2.6MB mp3)</a>

Web Systems HTML
HTML Links - The target Attribute
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
• _blank - Opens the linked document in a new window or tab

• _self - Opens the linked document in the same window/tab as it was clicked (this is
default)
<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Some URL Shorthand
A relative link can be used to link to any other file at the same URL. If your directory structure looks
something like the one at the right, a relative link can be written from index.html to any file in the
root directory (genealogy_html), or any of the subdirectories in that directory:
a href="aboutme.htm"
a href="documents/obituaries.html"
a href="families/brown/surnames.html"
How do you link from one of those subdirectories back

to index.html?
We use dot-dot-slash ( ../ ). Dot-dot-slash tells the browser to

move one level back toward the root directory before looking for
the path to the file. To link from obituaries.html to index.html, the
browser must move up one level
from documents to genealogy_html to find the file. The relative
link is written like this:
a href="../index.html"
You can write a relative link from one subdirectory to another.
To link from brown/surnames.html to jones/surnames.html, the browser must move back one level
to the families directory to find the jones directory:
a href="../jones/surnames.html"
Need to move back two directory levels? No problem.
From "jones/surnames.html" back through families to your home page in genealogy_html:
a href="../../index.html"
Just add one dot-dot-slash for every directory level you need to move back, until you find the
path to the file.

Web Systems HTML
HTML IMAGES
Example 1:
<img src="Flower.jpg" alt="Flower" />
All you need do is first tell the browser that you want to insert an image (img) and then where it is
located (src, short for "source").
Notice how the img element is opened and closed using the same tag. Like the <br/> tag, it is not
tied to a piece of text.
" Flower.jpg" is the name of the image file you want to insert in your page. ".jpg" is the file type of
the image. Just like the extension ".htm" shows that a file is an HTML document, ".jpg" tells the
browser that a file is a picture. There are three different types of image file types you can insert into
your pages:
• GIF (Graphics Interchange Format)

• JPG / JPEG (Joint Photographic Experts Group)
• PNG (Portable Network Graphics)
GIF images are usually best for graphics and drawings, while JPEG images are usually better for
photographs. This is for two reasons: first, GIF images only consist of 256 colours, while JPEG images
comprise of millions of colors and second, the GIF format is better at compressing simple images,
than the JPEG format which is optimized for more complex images. The better the compression,
the smaller the size of the image file, the faster your page will load.
Traditionally, the GIF and JPEG formats have been the two dominant image types, but lately, the
PNG format has become more and more popular (primarily at the expense of the GIF format).The
PNG format contains in many ways the best of both the JPEG and GIF format: millions of colors
and effective compressing.

Web Systems HTML
There are a few more things you should know about images.
First, you can easily insert pictures located in other folders, or even pictures that are located on
other websites:
Example 2:
<img src="images/logo.png" />
Example 3:
<img src="http://www.html.net/logo.png" />
Second, images can be links:
Example 4:
<a href="http://www.html.net">
<img src="logo.png" /></a>
Are there any other attributes I should know about?
You always need to use the attribute src, which tells the browser where the image is located.
Besides that, there are a number of other attributes which can be useful when inserting images.
The alt attribute is used to give an alternate description of an image in case the image is not shown
to the user. This is especially important if the page is loaded very slowly. Therefore, always use
the alt attribute.
Example 5:
<img src="logo.gif" alt="HTML.net logo" />
Some browsers let the text of the alt attribute appear as a small pop-up box when the user places
their cursor over the picture. Note that when using the alt attribute, the aim is to provide an
alternative description of the picture. The alt attribute should not be used to create special pop-
up messages for the user.

Web Systems HTML
The title attribute can be used to add information to the image:
Example 6:
<img src="logo.gif" title="Learn HTML from HTML.net" />
Will look like this in the browser:
If you, without clicking, place the cursor over the image, you will see the text "Learn HTML from
HTML.net" appear as a pop-up box.
Two other important attributes are width and height:
Example 7:
<img src="logo.png" width="141px" height="32px" />
The width and height attributes can be used to set the height and width of an image. The value
that is used to set the width and height is pixels. Pixels are the units of measurement used to measure
the resolution of screens. (The most common screen resolution is 1024x768 pixels). Unlike
centimetres, pixels are relative units of measurement which depend on the resolution of the screen.
To a user with a high screen resolution, 25 pixels may correspond to 1 centimetre, while the same
25 pixel in a low screen resolution may correspond to 1.5 centimetres on the screen.If you do not
set the width and height, the image will be inserted in its actual size. But with width and height you
can manipulate the size:
Example 8:
<img src="logo.gif" width="32px" height="32px" />
However, it is worth keeping in mind that the actual size in kilobytes of the image file will remain the
same so it will take the same time to load the image as it did before, even though it appears smaller
on the screen. Therefore, you should never decrease the image size by using the width and height
attributes. Instead, you should always resize your images in an image-editing program to make
your pages lighter and faster.
It is still a good idea to use the width and height attributes because the browser will then be able
to detect how much space the image will need in the final page layout before the image is fully
downloaded. This allows your browser to set up the page nicely in a quicker way.

Web Systems HTML
HTML LISTS
HTML offers web authors three ways for specifying lists of information. All lists must contain one or
more list elements. Lists may contain:
• <ul> An unordered list. This will list items using plain bullets.
• <ol> An ordered list. This will use different schemes of numbers to list your items.
• <dl> A definition list. This arranges your items in the same way as they are arranged in a
dictionary.
HTML Unordered Lists

An unordered list is a collection of related items that have no special order or sequence. This list is
created by using HTML <ul> tag. Each item in the list is marked with a bullet.
Example
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

Web Systems HTML
The type Attribute

You can use type attribute for <ul> tag to specify the type of bullet you like. By default, it is a disc.
Following are the possible options:
<ul type="square">
<ul type="disc">
<ul type="circle">
Example
Following is an example where we used <ul type="square">
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
HTML Ordered Lists
If you are required to put your items in a numbered list instead of bulleted, then HTML ordered list
will be used. This list is created by using <ol> tag. The numbering starts at one and is incremented
by one for each successive ordered list element tagged with <li>.
Example
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

Web Systems HTML
This will produce the following result:

1. Beetroot
2. Ginger
3. Potato
4. Radish
The type Attribute

You can use type attribute for <ol> tag to specify the type of numbering you like. By default, it is a
number. Following are the possible options:
<ol type="1">
<ol type="I">
<ol type="i">
<ol type="a">
<ol type="A">
Example
Following is an example where we used <ol type="I">
<html>
<head>
</head>
<body>
<ol type="I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
I. Beetroot
II. Ginger
III. Potato
IV. Radish

Web Systems HTML
The start Attribute
You can use start attribute for <ol> tag to specify the starting point of numbering you need.
Following are the possible options:
<ol type="1" start="4"> Numerals starts with 4.

<ol type="I" start="4"> Numerals starts with IV.
<ol type="i" start="4"> Numerals starts with iv.
<ol type="a" start="4"> Letters starts with d.
<ol type="A" start="4"> Letters starts with D.
Example
Following is an example where we used <ol type="i" start="4" >
<html>
<head>
</head>
<body>
<ol type="i" start="4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
iv. Beetroot
v. Ginger
vi. Potato
vii. Radish

Web Systems HTML
HTML Definition Lists

HTML and XHTML supports a list style which is called definition lists where entries are listed like in a
dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or
other name/value list.
Definition List makes use of following three tags.
• <dl> Defines the start of the list

• <dt> A term
• <dd> Term definition
• </dl> Defines the end of the list
Example
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>
HTML
This stands for Hyper Text Markup Language
HTTP
This stands for Hyper Text Transfer Protocol

Web Systems HTML
HTML TABLES
Basic table code:
<table border="1">
<tr>
<td>cell 1</td><td>cell 2</td>
</tr>
<tr>
<td>cell 3</td><td>cell 4</td>
</tr>
</table>
The code above would create this:
• <table> holds all the other table-related elements inside of it. It has a border attribute, which
can be set to a number. This defines how wide the table’s border is — set it to zero for no
border.
• <tr> starts a new Table Row. Rows are ended with a closing </tr>.
• <td> means Table Data, but we will always call them “table cells”. Each box you see in the
resulting HTML page is a cell. tds are closed similarly with a </td>.
• </table> ends the table.
Cells resize themselves if the text you put into the tds is too big, and each row in a table must
contain the same amount of cells, unless you use special attributes. You cannot put anything in a
table that is not within a td and a /td — i.e. you can't start writing after an opening tr tag, you must
open the td first.
Be careful that you close all your elements. Since the tds are contained in the trs, and they are
contained in the <table>, if you forget any end tags, your whole table might be messed up
(especially in the more recent browsers who are clamping down on this).
Table Attributes
• border can be set to any value, for bigger borders around your tables and between your
cells. Note that most tables have their border set to 0 — i.e. invisible, with background colors
used to define the edges of the cells.
• align just like most elements, whole tables can be aligned to the center, left or right.
• width is used to specify how wide the table is, either in pixels or in a percentage of the
screen width. For example, you could specify width="400" or width="80%".

Web Systems HTML
cellpadding Attribute
The cellpadding attribute specifies the space, in pixels, between the cell wall and the cell
content.
<table cellpadding="10">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
cellspacing Attribute
The cellspacing attribute specifies the space, in pixels, between cells.
<table cellspacing="10">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Cell Alignment
Not only can you align the entire table to either side or to the middle, you can also align the text,
or images, or whatever, inside a cell to either side, middle, or to the top or bottom. For instance:
center right
You simply put the align attribute in the td element (or in the tr if you want to affect the whole
row). Like <td align="right">.
valign means Vertical Align. In the first cell below the valign is set to bottom and in the
second valign="top".

Web Systems HTML
top
middle
bottom
left is the default for align and middle for valign.
Table and Cell Width
You can add the width="x" attribute into either your table element or into individual cells. If you put
it into the table element, you’ll be specifying how wide the table is on the screen, in pixels or as
a percentage of the screen. Try to keep the widths under 750 pixels at most, so that it fits into the
width of most people’s monitors. If you’re setting it as a percentage, don’t forget the % mark.
Usually cells resize themselves depending on what you have put into them, but you can directly
specify how wide you want them by putting the width attribute in. This way you’re specifying their
width in pixels as before, or their percentage of the table that they’re in. Once you’ve set one, the
others will sort the remaining space out themselves.
Remember, anything can go inside a table cell. Images, text: the lot. You could put all your content
in a table and use it to align things up or lay out charts and graphs. See what you can come up
with.
Examples:
An HTML table with a width of 400 pixels:
<table width="400">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>

Web Systems HTML
Table cells with a predefined width:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td width="70%">January</td>
<td width="30%">$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Table Headers
The <th> tag defines a header cell in an HTML table. An HTML table has two kinds of cells:
• Header cells - contains header information (created with the <th> element)
• Standard cells - contains data (created with the <td> element)
The text in <th> elements are bold and centered by default.
The text in <td> elements are regular and left-aligned by default.
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Background Color and Images
The original two attributes used to give background colors and images to your tables will look
familiar, as they are the same as the ones used in the body element: bgcolor and background.
They could both be placed in any one of the td, th, tr or table tags, affecting those specific areas.
So, for instance, to get a row with a red background with one cell having a starry background
(tiled as usual), the code would be:
<table>
<tr bgcolor="#ff0000">
<td>cell 1</td>
<td background="stars.gif">cell 2</td>
</tr>
</table>
You could specify the colors in either HEX format or as a named color. However, using CSS to apply
background colors and images is a much better option. For example, to set the background of a
cell to yellow, you would write this CSS code:
td {background: yellow; }

Web Systems HTML
colspan
The colspan attribute allows you to have a single cell spanning multiple table columns. Here’s an
illustration:
See, we got one cell running along the top, spanning 3 columns, while Man, how are you?
three other cells are below it in the same space. Here'’s the code for you Hi I’m Fine
to study:
<table width="200" align="right" border="1">

<tr><th colspan="3">Man, how are you?</th>
</tr>
<tr><td>Hi</td><td>I’m</td><td>Fine</td>
</tr>
</table>
We can have had it spanning only two of the columns and had another cell at the top:
<table width="200" align="right" border="1">

Did I lose weight? Hmm
<tr><td colspan="2">Did I lose weight?</td><td>Hmm</td>
</tr> We’re still here
<tr><td>We're.</td><td>still</td><td>here</td>
</tr>
</table>
rowspan
The rowspan attribute specifies the number of rows a cell should span.
<table border="1" align="right" width="200">

<tr>
Umm... top right
<td rowspan="2">Umm...<br>yep.</td>
Yep. bottom right
<td>top right</td>
</tr>
<tr>
<td>bottom right</td>
</tr>
</table>
Now read that one carefully — the first row is put in, then the first cell takes up both its own position
and the position of the cell that would have been below it. Then the second cell is put in still in the
top row. Then, and here’s the science part, the second row starts and only one cell is used.

Web Systems HTML
Another example:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Both colspan and rowspan can be used together in the same table.

Web Systems HTML
HTML LAYOUTS
A webpage layout is very important to give better look to your website. It takes considerable time
to design a website's layout with great look and feel.
Nowadays, all modern websites are using CSS and JavaScript based framework to come up with
responsive and dynamic websites but you can create a good layout using simple HTML tables or
division tags in combination with other formatting tags.
HTML Layout - Using Tables

The simplest and most popular way of creating layouts is using HTML <table> tag. These tables are
arranged in columns and rows, so you can utilize these rows and columns in whatever way you like.
Example:
For example, the following HTML layout example is achieved using a table with 3 rows and 2
columns but the header and footer column spans both columns using the colspan attribute:
<html>
<head>
<title>HTML Layout using Tables</title>
</head>
<body>
<table width="100%" border="0">
<tr>
<td colspan="2" bgcolor="#b5dcb3">
<h1>This is Web Page Main title</h1>
</td>
</tr>
<tr valign="top">
<td bgcolor="#aaa" width="50">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor="#eee" width="100" height="200">
Technical and Managerial Tutorials
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#b5dcb3">
<center>
Copyright © 2020 Tutorialspoint.com
</center>
</td>
</tr>
</table>
</body>
</html>

Web Systems HTML
HTML Layouts - Using DIV, SPAN

The <div> element is a block level element used for grouping HTML elements. While the <div> tag
is a block-level element, the HTML <span> element is used for grouping elements at an inline level.
Although we can achieve pretty nice layouts with HTML tables, but tables weren't really designed
as a layout tool. Tables are more suited to presenting tabular data.
Note: This example makes use of Cascading Style Sheet (CSS).
Example
Here we will try to achieve same result using <div> tag along with CSS, whatever you have
achieved using <table> tag in previous example.
<html>
<head>
<title>HTML Layouts using DIV, SPAN</title>
</head>
<body>
<div style="width:100%">
<div style="background-color:#b5dcb3; width:100%">
<h1>This is Web Page Main title</h1>
</div>
<div style="background-color:#aaa; height:200px;width:100px;float:left;">
<div><b>Main Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style="background-color:#eee; height:200px;width:350px;float:left;">
<p>Technical and Managerial Tutorials</p>
</div>
<div style="background-color:#aaa; height:200px;width:100px;float:right;">
<div><b>Right Menu</b></div>
HTML<br />

Web Systems HTML
PHP<br />
PERL...
</div>
<div style="background-color:#b5dcb3;clear:both">
<center>
Copyright © 2020 Tutorialspoint.com
</center>
</div>
</div>
</body>
</html>
Another example of <div>:
<html>
<body>
<p>This is some text.</p>
<div style="color:#0000FF">
<h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>
<p>This is some text.</p>
</body>
</html>

Web Systems HTML
Another example of <span>:
<html>
<body>
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my
father has <span style="color:brown;font-weight:bold">brown</span> eyes.</p>
</body>
</html>

Web Systems HTML
HTML FRAMES
HTML frames are used to divide your browser window into multiple sections where each section
can load a separate HTML document. A collection of frames in the browser window is known as
a frameset. The window is divided into frames in a similar way the tables are organized: into rows
and columns.
Creating Frames
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag
defines, how to divide the window into frames. The rows attribute of <frameset> tag defines
horizontal frames and cols attribute defines vertical frames. Each frame is indicated by <frame>
tag and it defines which HTML document shall open into the frame.
Example
Following is the example to create three horizontal frames (Note: you need to create: top.html,
main.html and bottom.html files to be displayed in the frames):
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="10%,20%,10%">
<frame name="top" src="top.html" />
<frame name="main" src="main.html" />
<frame name="bottom" src="bottom.html" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>

Web Systems HTML
Now change the frameset rows to cols to create three vertical frames.
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols="10%,20%,10%">
<frame name="top" src="top.html" />
<frame name="main" src="main.html" />
<frame name="bottom" src="bottom.html" />
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>

Web Systems HTML
One of the most popular uses of frames is to place navigation bars in one frame and then load
main pages into a separate frame.
Let's see the following example where a test.html file has the following code:
<html>
<head>
<title>HTML Target Frames</title>
</head>
<frameset cols="200, *">
<frame src="menu.html" name="menu_page" />
<frame src="main.html" name="main_page" />
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>
Following is the content of menu.html file
<html>
<body bgcolor="#4a7d49">
<a href="http://www.google.com" target="main_page">Google</a>
<br /><br />
<a href="http://www.microsoft.com" target="main_page">Microsoft</a>
<br /><br />
<a href="http://news.bbc.co.uk" target="main_page">BBC News</a>
</body>
</html>
Following is the content of main.html file:
<html>
<body bgcolor="#b5dcb3">
<h3>This is main page and content from any link will be displayed here.</h3>
<p>So now click any link and see the result.</p>
</body>
</html>

Web Systems HTML
This will produce the following output:

Web Systems HTML
HTML FORM CONTROLS
There are different types of form controls that you can use to collect data using HTML form:
• Text Input Controls
• Checkboxes Controls
• Radio Box Controls
• Select Box Controls
• Clickable Buttons
• Submit and Reset Button
Text Input Controls

There are three types of text input used on forms:
• Single-line text input controls - This control is used for items that require only one line of user
input, such as search boxes or names.
• Password input controls - This is also a single-line text input but it masks the character as
soon as a user enters it.
• Multi-line text input controls - This is used when the user is required to give details that may
be longer than a single sentence.
Single-line text input controls

Example
<form >
First name: <input type="text" name="first_name" />
<br>
Last name: <input type="text" name="last_name" />
</form>
This will produce following result:

Web Systems HTML
Attributes
Following is the list of attributes for <input> tag for creating text field.
Attribute Description
type Indicates the type of input control and for text input control it will be set
to text.
name Used to give a name to the control which is sent to the server to be
recognized and get the value.
value This can be used to provide an initial value inside the control.
Password input controls

Example
<form >
User ID : <input type="text" name="user_id" />
<br>
Password: <input type="password" name="password" />
</form>
Attributes
Following is the list of attributes for <input> tag for creating password field.
type Indicates the type of input control and for password input control it will be
set to password.
value This can be used to provide an initial value inside the control.

Web Systems HTML
Multiple-Line Text Input Controls

This is used when the user is required to give details that may be longer than a single sentence.
Multi-line input controls are created using HTML <textarea> tag.
Example
<form>
Description : <br />
<textarea rows="5" cols="50" name="description">
Enter description here...
</textarea>
Attributes
Following is the list of attributes for <textarea> tag.
rows Indicates the number of rows of text area box.
cols Indicates the number of columns of text area box

Web Systems HTML
Checkbox Control
Checkboxes are used when more than one option is required to be selected. They are also
created using HTML <input> tag but type attribute is set to checkbox.
Example
Here is an example HTML code for a form with two checkboxes:
<form>
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on"> Physics
</form>
Attributes
Following is the list of attributes for <checkbox> tag.
type Indicates the type of input control and for checkbox input control it will be set
to checkbox.
name Used to give a name to the control which is sent to the server to be recognized and
get the value.
value The value that will be used if the checkbox is selected.
checked Set to checked if you want to select it by default.

Web Systems HTML
Radio Button Control

Radio buttons are used when out of many options, just one option is required to be selected. They
are also created using HTML <input> tag but type attribute is set to radio.
Example
Here is example HTML code for a form with two radio buttons:
<form>
<input type="radio" name="subject" value="maths"> Maths
<input type="radio" name="subject" value="physics"> Physics
</form>
Attributes
Following is the list of attributes for radio button.
type Indicates the type of input control and for checkbox input control it will be set
to radio.
name Used to give a name to the control which is sent to the server to be recognized and
get the value.
value The value that will be used if the radio box is selected.
checked Set to checked if you want to select it by default.

Web Systems HTML
Select Box Controls

The <select> element is used to create a drop-down list. The <option> tags inside the <select>
element define the available options in the list.
Example
Here is example HTML code to create a drop-down list with four options:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Button Controls
There are various ways in HTML to create clickable buttons. You can also create a clickable button
using <input> tag by setting its type attribute to button. The type attribute can take the following
values:
Type Description
submit This creates a button that automatically submits a form.
reset This creates a button that automatically resets form controls to their initial values.
button This creates a button that is used to trigger a client-side script when the user clicks that
button.
Example
Here is example HTML code for a form with three types of buttons:
<form>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
</form>

Web Systems HTML
Another Example:
<input type="button" name="about" value="About"

onclick="window.location='pages/about.html';return false;" />
When you click on this button, it will direct you to about.html page.
More on HTML forms:
An HTML form with three input fields; two text fields and one submit button:
<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
The action attribute defines the action to be performed when the form is submitted. Normally, the
form data is sent to a web page on the server when the user clicks on the submit button.
In the example above, the form data is sent to a page on the server called "/action_page.php">
If the action attribute is omitted, the action is set to the current page.
The Method Attribute
The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form
data:
<form action="/action_page.php" method="get">
or:
<form action="/action_page.php" method="post">

Web Systems HTML
When to Use GET?

The default method when submitting form data is GET. However, when GET is used, the submitted
form data will be visible in the page address field:
/action_page.php?firstname=Mickey&lastname=Mouse
Note: GET must NOT be used when sending sensitive information! GET is best suited for short, non-
sensitive, amounts of data, because it has size limitations too.
When to Use POST?

Always use POST if the form data contains sensitive or personal information. The POST method does
not display the submitted form data in the page address field.
POST has no size limitations, and can be used to send large amounts of data.
The Name Attribute

Each input field must have a name attribute to be submitted. If the name attribute is omitted, the
data of that input field will not be sent at all.
This example will only submit the "Last name" input field:
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
</form>
Grouping Form Data with <fieldset>
The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.
Example
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
</fieldset>
</form>
For more HTML input attributes (checked, disabled, maxlength, required, etc…), refer to:
https://www.w3schools.com/tags/tag_input.asp
Web Systems HTML
HTML MULTIMEDIA
HTML Multimedia
Multimedia on the web is sound, music, videos, movies, and animations. Multimedia comes in many
different formats. It can be almost anything you can hear or see. Examples: Images, music, sound,
videos, records, films, animations, and more. Web pages often contain multimedia elements of
different types and formats.
Multimedia Formats
Multimedia elements (like audio or video) are stored in media files. The most common way to
discover the type of a file, is to look at the file extension. Multimedia files have formats and different
extensions like: .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
Only MP4, WebM, and Ogg video are supported by the HTML standard
Only MP3, WAV, and Ogg audio are supported by the HTML standard.
Example
<html>
<body>
<h2>My Video</h2>
<video controls>
<source src="18.MP4" type="video/mp4" >
</video>
<br>
<h2>My Audio</h2>
<audio controls>
<source src="Forever.mp3" type="audio/mp3">
</audio>
<br>
<h2>My File</h2>
<a href="HTML.pdf">download the file</a>
<br>
<iframe src="HTML.pdf" width="100%" height="100%"></iframe>
</body>
</html>
The controls attribute adds video/audio controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height and width are not set, the
page might flicker while the video loads.
The <source> element allows you to specify alternative video/audio files which the browser may
choose from. The browser will use the first recognized format.
To start a video/audio automatically use the autoplay attribute in the <video> or <audio> tags.

Web Systems HTML
HTML V/S HTML5
HTML or Hyper-Text Markup Language can be referred to as the Worldwide Web’s primary
language. HTML has seen many updates over time, and currently, the newest HTML version is
HTML5.
Some of the major differences between the two versions:
Comparison HTML HTML5

Criteria
Video and Video and Audio are not part of Video and Audio both are integral parts of
Audio HTML HTML5 specifications.
Vector Vector Graphics is possible in HML Vector Graphics is an integral
Graphics with the help of various technologies part of HTML5 such as SVG and
such as VLM, Silverlight, Flash, etc. canvas.
Storage Browser cache (cookies) can be Application cache. Web SQL database and
used as temporary storage. web storage is used
JavaScript HTML does not allow JavaScript to HTML5 provides full support for JavaScript to
run within the web browser. run in the background.
Web HTML works smoothly with all old Modern web browsers supports HTML5
Browser browsers. specifications such as Chrome, Firefox, etc.
Support
Elements Some tags are removed: It contains lot of new tags like:
Tags <b><font><frame><center><big> <canvas><header><footer><summary>
<frameset> <time><date><number><calendar><range>
<details> <article><nav><figcaption>
<figure><section><embed><menu><figure>
<source><audio> <video> <output>
Other main differences are:
• Doctype declaration: In HTML, it is too longer as compared to that in HTML5

− HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
− HTML5:
<!DOCTYPE html>
• Character encoding: in HTML, it is more complex as compared to that in HTML5

− HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
− HTML5:
<meta charset="UTF-8">
To learn more about “HTML5 New Elements”, refer to the tutorial & examples at:
https://www.w3schools.com/html/html5_new_elements.asp

Web Systems HTML
References
• Cook, C., Garber, J. (2012). Foundation HTML5 With CSS3. A Modern Guide and Reference. 1st
Ed. Apress Media, USA.
• Jennifer Niederst Robbins (2012). Learning Web Design. A Beginner’s Guide to HTML, CSS,
JavaScript, and Web Graphics. 4th Ed. O’Reilly Media, Inc., USA.
• Lane, Jonathan, et. al. (2012). Foundation Website Creation with HTML5, CSS3, and JavaScript.
1st Ed. Apress Media, USA.
• Tutorialspoint.com. (2020). HTML Tutorial. [online] Available at:

https://www.tutorialspoint.com/html/index.htm [Accessed 2 Jan 2020].
• W3schools.com. (2020). HTML Tutorial. [online] Available at:

https://www.w3schools.com/html/default.asp [Accessed 2 Jan 2020].
• W3schools.com. (2020). HTML5 Introduction. [online] Available at:

https://www.w3schools.com/html/html5_intro.asp [Accessed 4 Jan 2020].

HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

Web Systems HTML

INTRODUCTION TO HTML & HTML FORMATTING TAGS

HTML page file ends with “.htm” or “.html” extension.

A Simple HTML Document

The <!DOCTYPE html> declaration defines this document to be HTML5.

The <html> element is the root element of an HTML page.

The <head> element contains meta information about the document.

The <title> element specifies a title for the document.

The <body> element contains the visible page content.

<tagname>content goes here...</tagname>

HTML tags normally come in pairs like <p> and </p>

College of Comp. & IT – Hadhramout Univ. 1 Mr. Khaled Abdulaziz Bawazir

<tagname>Content goes here...</tagname>

<p>My first paragraph.</p>

Nested HTML Elements

All HTML documents consist of nested HTML elements.

Empty HTML Elements

HTML Main Sections: head & body

Meta charset specifies the character encoding of the website.

College of Comp. & IT – Hadhramout Univ. 2 Mr. Khaled Abdulaziz Bawazir

o <meta name="description" content="Page description">

o <meta name="viewport" content="width=device-width, initial-scale=1">

o <meta name="application-name" content="Application Name">

<h1>This is heading 1</h1>

HTML Horizontal Rules

The <hr> element is used to separate content.

College of Comp. & IT – Hadhramout Univ. 3 Mr. Khaled Abdulaziz Bawazir

HTML Line Breaks

<p>This is<br>a paragraph<br>with line breaks.</p>

HTML <abbr> tag

HTML <marquee> tag

HTML Formatting Elements

College of Comp. & IT – Hadhramout Univ. 4 Mr. Khaled Abdulaziz Bawazir

HTML <small> Element

<h2>HTML <small>Small</small> Formatting</h2>

HTML <mark> Element

<h2>HTML <mark>Marked</mark> Formatting</h2>

HTML <del> Element

<p>My favorite color is <del>blue</del> red.</p>

<del> tag is similar to <strike> and <s> tags.

HTML <ins> Element

HTML <sub> Element

The HTML <sub> element defines subscripted text.

<p>This is <sub>subscripted</sub> text.</p>

HTML <sup> Element

The HTML <sup> element defines superscripted

<p>This is <sup>superscripted</sup> text.</p>

HTML <pre> Element

College of Comp. & IT – Hadhramout Univ. 5 Mr. Khaled Abdulaziz Bawazir

HTML Comment Tags

The HTML Style Attribute

The property is a CSS property. The value is a CSS value.

HTML Background Color

HTML Text Color

HTML Text Size

HTML Text Alignment

Inserting Single Spaces in HTML Text

College of Comp. & IT – Hadhramout Univ. 6 Mr. Khaled Abdulaziz Bawazir

<a href="url">link text</a>

<a href="http://www.google.com"> Visit Google </a>

The example above used an absolute URL (full web address).

<a href="html_images.asp">HTML Images</a>

Linking to email addresses

<a href="mailto:bruce@example.com">mail me</a>