0% found this document useful (0 votes)
20 views

Lab-8-HTML Basics

The document provides information about HTML basics including HTML tags, elements, and attributes. It explains how to create basic HTML pages and includes examples of formatting text, headings, paragraphs and adding images. The document also covers deprecated tags and adding styles.

Uploaded by

Mujtaba Saleem
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
20 views

Lab-8-HTML Basics

The document provides information about HTML basics including HTML tags, elements, and attributes. It explains how to create basic HTML pages and includes examples of formatting text, headings, paragraphs and adding images. The document also covers deprecated tags and adding styles.

Uploaded by

Mujtaba Saleem
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

Department of Computing

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.

What is an HTML File?


HTML stands for Hyper Text Markup Language
It consists of a set of markup tags. The purpose of these tags is to describe page content. It has
been around since the very beginning of the web, and has changed a bit over that time, although
it hasn't really gotten any more complicated. It is used to write web pages. It simply describes a
web page's content and its structure.

Three basic concepts in HTML are


 Tag - used to specify the regions of the HTML document, which a browser will read
later. Tags will look like this: <tag>
 Element - is a complete tag, having an opening <tag> and a closing </ tag>.
 Attribute - is used to change the value of an element in HTML. Usually an element has
several attributes

Try Following example


If you are running Windows, start Notepad.
Type in the following text:

Save the file as "page.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.

A Complete HTML Element

<p>Once upon a time...</p>

HTML Element Code

<html>
</html>

HTML Head Element Code


<html>
<head>
</head>
</html>

HTML Title Element Code

<html>
<head>
<title>My Web Page!</title>
</head>
</html>

HTML Body Element Code

<html>
<head>

6
<title>My Web Page!</title>
</head>
<body>
<p>Once upon a time...</p>
</body>
</html>

So Basic HTML Format is

<html>
<head>
<title> My website</title>
</head>
<body>
It’s a wonderful day
</body>
</html>

Formatting HTML Text


The heading and paragraph tags are the most common tags found within the body of a Web
document. The heading tags are used to specify document headings. These headings are used to
organize Web documents into sections and subsections. HTML supports six heading levels.
First-level headings are identified by the <H1> and </H1> tags, second-level headings are
identified by the <H2> and </H2> tags, and so on. Sixth-level headings are identified by
the <H6> and </H6> tags
<h1> defines the most important heading
<h6> defines the least important heading

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>

Paragraph formatting tags


<p><b>Bold Text</b></p>
<p><em>Emphasized Text</em></p>
<p><strong>Strong Text</strong></p>
<p><i>Italic Text</i></p>
<p><sup>superscripted Text</sup></p>
<p><sub>subscripted Text</sub></p>
<p><del>struckthrough Text</del></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 color="red">This text is red</font>

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>

Text Formatting Tags


Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<s> Deprecated. Use <del> instead
<strike> Deprecated. Use <del> instead
<u> Deprecated. Use styles instead

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”

Deprecated Tags and Attributes


In HTML 4, some tags and attributes are defined as deprecated. Deprecated means that they will
not be supported in future versions of HTML and XHTML. The message is clear: Avoid the use
of deprecated tags and attributes.

Adding images in HTML


The img tag is used to put or embed an image in an HTML document
 Attributes of IMG tag
 Src
 width, height
 Alt
 Align

So it looks like this


<img src=http://www.htmldog.com/images/logo.gif width="157" height="70" alt="HTML
Dog logo" />

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.

Example code for adding images

(a) Loading image from a website

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>

Loading Website by clicking on the image (an image that is a link)

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>

Adding Lists in HTML


List is an easy and effective way to itemize things in documents and Webpages.
HTML offers authors several mechanisms for specifying lists of information. All lists must
contain one or more list elements. Lists may contain:

 Unordered List
 Ordered List
 Definition List

HTML Unordered List Type Code:


<ul type="square">
<ul type="disc">
<ul type="circle">

HTML Unordered List Types:


type="square" type="disc" type="circle"
 Milk  Milk o Milk
 Toilet  Toilet o Toilet Paper
Paper Paper o Cereal
 Cereal  Cereal o Bread
 Bread  Bread

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>

HTML Code: ordered List


<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">

Ordered List Types:


Lower-Case Letters Upper-Case Letters Lower-Case Numerals Upper-Case Numerals
a. Find a Job A. Find a Job i. Find a Job I. Find a Job
b. Get Money B. Get Money ii. Get Money II. Get Money
c. Move Out C. Move Out iii. Move Out III. Move Out

Link to Website using html


The html code for link is<a href="url">Link text</a>
Example code for linking to a website

13
<html>
<head>
<title>HTML is a markup
language</title>
</head>
<body>
<a
href="http://www.w3schools.com/">
W3 SCHOOLS website</a>
</body>
</html>

HTML <body> Background Color


The bgcolor attribute is used to apply color to html background.
Example code for bgcolor is
<html>
<body bgcolor="Pink">
<h1>Hello world!</h1>
<p>
<a
href="http://www.w3schools.com">Vi
sit W3Schools.com!</a></p>
</body>
</html>

14

You might also like