Lab-8-HTML Basics
Lab-8-HTML Basics
Laboratory Manual
CS-100: Fundamentals of ICT
Fall 2017
Class: BEEnv2017
Dr. Hassan Khaliq
List of Experiments
Lab8: HTML Basics ..................................................................................................................... 3
2
Lab 8: HTML Basics
3
Lab 8: HTML Basics
Objective
This lab will introduce students with some basic information html. The purpose of this session is
to gather knowledge of HTML basics. The students will be able to design a basic form and table
using html.
4
Start your Internet browser. Select "Open" (or "Open Page") in the File menu of your browser. A
dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file you just
created - "page.html" - select it and click "Open". Now you should see an address in the dialog
box, for example "C:\MyFolder\page.html". Click OK, and the browser will display the page.
Example Explained
The first tag in your HTML document is <html>. This tag tells your browser that this is the start
of an HTML document. The last tag in your document is </html>. This tag tells your browser
that this is the end of the HTML document. The text between the <head> tag and the </head> tag
is header information. Header information is not displayed in the browser window. The text
between the <title> tags is the title of your document. The title is displayed in your browser’s
caption. The text between the <body> tags is the text that will be displayed in your browser. The
text between the <b> and </b> tags will be displayed in a bold font.
HTML Tags
HTML documents are text files made up of HTML elements.
HTML elements are defined using HTML tags.
HTML tags are used to mark-up HTML elements
HTML tags are surrounded by the two characters < and >
The surrounding characters are called angle brackets
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 text between the start and end tags is the element content
HTML tags are NOT case sensitive, <b> means the same as <B>
HTML Elements
5
Within <HTML>, the document has two sections to it: <HEAD>and <BODY ...>. <HEAD> is
like the cover page of the document. Just as the cover page of a book contains information about
the book (such as the title), the <HEAD> section contains information about the document.
<TITLE> states the title of the document. <TITLE> always goes in the <HEAD> section.
The title of the webpage goes into <title> tag and the content of the page goes into <body> tag.
Any text you want to show on the page will appear within the body tag. For example: if you want
to say “It’s a wonderful day.” you put this sentence into the body tag. The title of an HTML
document is typically displayed at the top of the browser window.
An html element consists of three essential pieces: an opening tag, the content, and a closing tag.
<html>
</html>
<html>
<head>
<title>My Web Page!</title>
</head>
</html>
<html>
<head>
6
<title>My Web Page!</title>
</head>
<body>
<p>Once upon a time...</p>
</body>
</html>
<html>
<head>
<title> My website</title>
</head>
<body>
It’s a wonderful day
</body>
</html>
7
Paragraph tags are used to mark paragraphs within HTML documents.
<p>Avoid losing floppy disks with important school...</p>
<p>For instance, let's say you had a HUGE school...</p>
Paragraphs can be aligned in html, the same way in word processing program.
<p align="justify">For instance, let's say you had a HUGE school or work...</p>
<p align="center">For instance, let's say you had a HUGE school or work...</p>
<p align="right">For instance, let's say you had a HUGE school or work...</p>
The <font> tag is used to change the style, size, and color of HTML text elements. The size, color,
and face attributes can be used all at once or individually, providing users with the ability to create dynamic
font styles for any HTML element.
Font Size
<p>
<font size="5">Here is a size 5 font</font>
</p>
Font Color
<font color="#990000">This text is hex color #990000</font>
8
<br />
Font face
<p>
<font face="Georgia, Arial, Garamond">This paragraph
has had its font...</font>
</p>
Example code with size color and face attribute of the font tag
<p><font size="7" face="Georgia, Arial" color="maroon">C</font>customize
your font to achieve a desired look.</p>
Style Attribute
The style attribute is a new HTML attribute. It introduces CSS to HTML. The purpose of the
style attribute is to provide a common way to style all HTML elements. Style attribute was
introduced with HTML 4, as the new and preferred way to style HTML elements. With HTML
styles, styles can be added to HTML elements directly by using the style attribute, or indirectly
by in separate style sheets (CSS files).
HTML Style Examples
9
Using style in your code: <p style=”background-color: yellow; font-size: 10px”> text here </p>
Try following:
style ="background-color: yellow"
style="font-size:10px"
style="font-family: Times"
style="text-align: center"
style=”text-decoration: underline”
style=”color: red”
The src attribute tells the browser where to find the image i.e. the location or URL of image
The alt attribute specifies an alternate text for an image. This specifies text to be used in case the
browser/user agent can't render the image.
10
(b) Adding image from file (computer)
<html>
<body>
<img
src="http://www.w3schools.com/images/lamp.gif"
alt="Lamp" width="15" height="15" />
</body>
</html>
<html>
<head>
<title>HTML is a markup language</title>
</head>
<body>
<img src="xyz.jpg">
</body>
</html>
11
<html>
<body>
<p>
An image that is a link:
<a href="http://www.w3schools.com">
<img src="smiley.gif" alt="Go to
W3Schools!" width="42" height="42"
border="0" />
</a>
</p>
</body>
</html>
Unordered List
Ordered List
Definition List
12
<html>
<head>
<title>HTML is a markup
language</title>
</head>
<body>
<h1>Example of HTML List. </h1>
<h3>Unordered List</h3>
<ul>
<li>Java</li>
<li>PHP</li>
<li>.NET</li>
</ul>
<h3>Ordered List</h3>
<ol>
<li>Java</li>
<li>PHP</li>
<li>.NET</li>
</ol>
</body>
</html>
13
<html>
<head>
<title>HTML is a markup
language</title>
</head>
<body>
<a
href="http://www.w3schools.com/">
W3 SCHOOLS website</a>
</body>
</html>
14