Scribd
Upload
4 views15 pages

Lab2

The document serves as a lab guide for learning Hyper Text Markup Language (HTML) at Hamdard University. It covers the basics of HTML, including its structure, syntax, tags, and how to create web pages using simple text editors. The guide also provides examples of HTML elements, attributes, and formatting options to help students understand web design better.

Uploaded by

faheem.ahmed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views15 pages

Lab2

The document serves as a lab guide for learning Hyper Text Markup Language (HTML) at Hamdard University. It covers the basics of HTML, including its structure, syntax, tags, and how to create web pages using simple text editors. The guide also provides examples of HTML elements, attributes, and formatting options to help students understand web design better.

Uploaded by

faheem.ahmed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 15

FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY

Hamdard Institute of Engineering & Technology


Hamdard University

Lab # 02
Hyper Text Markup Language
Objective:

 To learn about HTML.

Theory:

What is HTML?
HTML stands for Hyper Text Markup Language. Hypertext is simply a piece of text that works as a link.
Markup Language is a way of writing layout information within documents. A markup language is a set
of markup tags. The tags describe document content

An HTML document is a plain text file that contains text and nothing else. When a browser opens an
HTML file, the browser will look for HTML codes in the text and use them to change the layout, insert
images, or create links to other pages.Since HTML documents are just text files they can be written in
even the simplest text editor.

Why Do We Study HTML?


It is possible to create webpages without knowing anything about the HTML source behind the page.
There are excellent editors on the market that will take care of the HTML parts. All you need to do is
layout the page. However, if you want to make it above average in webdesign, it is strongly
recommended that you understand these tags.

The most important benefits are:

 You can use tags the editor does not support.


 You can read the code of other people's pages, and "borrow" the cool effects.
 You can do the work yourself, when the editor simply refuses to create the effectsyou want.

You can write your HTML by hand with almost any available text editor, including notepad that comes as
a standard program with Windows. All you need to do is type in the code, then save the document,
making sure to put an .html extension or an .htm extension to the file.

HTML Tags:
HTML markup tags are usually called HTML tags. Basically, a computer sees an "A" as simply an "A" -
whether it is bold, italic, big or small. To tell the browser that an "A" should be bold we need to put a
markup in front of the A. Such a markup is called a Tag. All HTML tags are enclosed in < and >.

Hamdard Institute of Engineering & Technology, Hamdard University


SharaeMadinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University

Syntax:
<tagname>content</tagname>

HTML Page Structure:

<html>

<head></head>
<

<body></body>

</html>

 All webpages have an <html> tag at the beginning and the end, telling the browser where the
document starts and where it stops.
 The head is used for text and tags that do not show directly on the page.
 The body is used for text and tags that are shown directly on the page.

Head Section:
The head section of the webpage includes all the stuff that does not show directly on the resulting page.

The <title> and </title> tags encapsulate the title of your page. The title is what shows in the top of your
browser window when the page is loaded.
Another thing you will often see in the head section is Meta tags. Meta tags are used for, among other
things, to improve the rankings in search engines.
Quite often the head section contains JavaScript which is a programming language for more complex
HTML pages.
Finally, more and more pages contain codes for cascading style sheets (CSS).CSS is a rather new
technique for optimizing the layout of major websites.

Body Section:
The body of the document contains all that can be seen when the user loads the page.

In the rest of this lab you can learn in detail about all the different aspects of HTML, including:
 Text
o Formatting
o Resizing
o Layout
o Listing

Hamdard Institute of Engineering & Technology, Hamdard University


SharaeMadinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University
 Links
o To local pages
o To pages at other sites
o To bookmarks
 Images
o Inserting images (GIF and jpg)
o Adding a link to an image
 Backgrounds
o Colors
o Images
o Fixed Image
 Tables
 Frames
 Forms
 Metatags
 Hexadecimal Colors

The <!DOCTYPE>Declaration:

The <!DOCTYPE> declaration helps the browser to display a web page correctly.

There are many different documents on the web, and a browser can only display an HTML page 100%
correctly if it knows the HTML type and version used.

Example:
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
 The DOCTYPE declaration defines the document type
 The text between <html> and </html> describes the web page
 The text between <body> and </body> is the visible page content
 The text between <h1> and </h1> is displayed as a heading
 The text between <p> and </p> is displayed as a paragraph

Hamdard Institute of Engineering & Technology, Hamdard University


SharaeMadinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University
Writing HTML Using Notepad or TextEdit
HTML can be edited by using a professional HTML editor like:

 Adobe Dreamweaver
 Microsoft Expression Web
 CoffeeCup HTML Editor

However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit (Mac). We
believe using a simple text editor is a good way to learn HTML. Follow the 4 steps below to create your
first web page with Notepad.

Step 1:Start Notepad

To start Notepad go to:

Start
All Programs
Accessories
Notepad

Step 2:Edit Your HTML with Notepad

Type your HTML code into your Notepad:

Step 3:Save Your HTML

Select Save as..in Notepad's file menu.

When you save an HTML file, you can use either the .htm or the .html file extension. There is no
difference, it is entirely up to you.

Step 4: Run the HTML in Your Browser

Start your web browser and open your html file from the File, Open menu, or just browse the folder and
double-click your HTML file.

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

Example
<!DOCTYPE html>
<html>
<body> This is heading 1
<h1>This is heading 1</h1> This is heading 2
<h2>This is heading 2</h2>
Hamdard Institute of Engineering & Technology, Hamdard University
SharaeMadinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University
<h3>This is heading 3</h3>
<h4>This is heading 4</h4> This is heading 3
<h5>This is heading 5</h5>
This is heading 4
<h6>This is heading 6</h6>
This is heading 5
</body>
</html> This is heading 6

HTML Paragraphs
HTML paragraphs are defined with the <p> tag.

Example
<!DOCTYPE html> This is a paragraph.
<html>
<body> This is a paragraph.

<p>This is a paragraph.</p> This is a paragraph.


<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

HTML Links
HTML links are defined with the <a> tag.

Example
<!DOCTYPE html> This is a link
<html>
<body>
<a href="http://www.hamdard.edu.pk">
This is a link</a>

</body>
</html>

HTML Images
HTML images are defined with the <img> tag.

Hamdard Institute of Engineering & Technology, Hamdard University


SharaeMadinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University
<!DOCTYPE html>
<html>
<body>
<imgsrc="hamdard.jpg" width="104"
height="142"></body>
</html>

HTML Elements
An HTML element is everything from the start tag to the end tag.

Start tag * Element content End tag *

<p> This is a paragraph </p>

<a href="default.htm"> This is a link </a>

<br>

*The start tag is often called the opening tag. The end tag is often called the closing tag.

HTML Element Syntax

 An HTML element starts with a start tag / opening tag


 An HTML element ends with an end tag / closing tag
 The element content is everything between the start and the end tag
 Some HTML elements have empty content
 Empty elements are closed in the start tag
 Most HTML elements can have attributes

Example

<!DOCTYPE html>
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>

The example above contains 3 HTML elements: <html> element, <body> element and <p> element.

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).

Hamdard Institute of Engineering & Technology, Hamdard University


SharaeMadinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University
HTML Attributes
Attributes provide additional information about HTML elements.

 HTML elements can have 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"
 Attribute values should always be enclosed in quotes.
 Double style quotes are the most common, but single style quotes are also allowed.

HTML links are defined with the <a> tag. The link address is specified in the href attribute:

<!DOCTYPE html> This is a link


<html>
<body>
<a href="http://www.hamdard.edu.pk">
This is a link</a>

</body>
</html>
Below is a list of some attributes that can be used on any HTML element:

Attribute Description

Specifies one or more classnames for an element (refers to a class in a style


class
sheet)

id Specifies a unique id for an element

style Specifies an inline CSS style for an element

title Specifies extra information about an element (displayed as a tool tip)

HTML Lines
The <hr>tag creates a horizontal line in an HTML page. The hr element can be used to separate content:

<!DOCTYPE html> The hr tag defines a horizontal rule:


<html>
<body> This is a paragraph.
<p>The hr tag defines a horizontal rule:</p>
<hr> This is a paragraph.
<p>This is a paragraph.</p>
<hr> This is a paragraph.

Hamdard Institute of Engineering & Technology, Hamdard University


SharaeMadinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
</body>
</html>

HTML Comments
Comments can be inserted into the HTML code to make it more readable and understandable. Comments
are ignored by the browser and are not displayed. Comments are written like this:

<!DOCTYPE html> This is a regular paragraph


<html>
<body>

<!--This comment will not be displayed-->


<p>This is a regular paragraph</p>

</body>
</html>

HTML Text Formatting


Tag Description

<b> Defines bold text

<em> Defines emphasized text

<i> Defines a part of text in an alternate voice or mood

<small> Defines smaller text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

Example
<!DOCTYPE html> This text is bold
Hamdard Institute of Engineering & Technology, Hamdard University
SharaeMadinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University
<html>
<body>
This text is strong
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p> This text is italic
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p> This text is emphasized
<p>This is<sub> subscript</sub> and
<sup>superscript</sup></p> This is subscript and superscript
</body>
</html>

HTML Hyperlinks (Links)


The HTML <a> tag defines a hyperlink.

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another
document.

When you move the cursor over a link in a Web page, the arrow will turn into a little hand.

The most important attribute of the <a> element is the href attribute, which indicates the link’s
destination.

By default, links will appear as follows in all browsers:

 An unvisited link is underlined and blue


 A visited link is underlined and purple
 An active link is underlined and red

Syntax
The HTML code for a link is simple. It looks like this:

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

The href attribute specifies the destination of a link.

Example
<a href="http://www.hamdard.edu.pk/">Visit Hamdard</a>

which will display like this: Visit Hamdard

Clicking on this hyperlink will send the user to Hamdard's homepage.

Tip: The "Link text" doesn't have to be text. It can be an image or any other HTML element.

Hamdard Institute of Engineering & Technology, Hamdard University


SharaeMadinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University
HTML Links - The target Attribute
The target attribute specifies where to open the linked document.

The example below will open the linked document in a new browser window or a new tab:

<!DOCTYPE html> Visit Hamdard!


<html> If you set the target attribute to "_blank", the link
<body> will open in a new browser window/tab.

<a href="http://www.hamdard.edu.pk"
target="_blank">Visit Hamdard!</a>

<p>If you set the target attribute to "_blank", the


link will open in a new browser window/tab.</p>

</body>
</html>

HTML Links - The id Attribute


The id attribute can be used to create a bookmark inside an HTML document.

Tip: Bookmarks are not displayed in any special way. They are invisible to the reader.

Example

An anchor with an id inside an HTML document:

<a id="tips">Useful Tips Section</a>

Create a link to the "Useful Tips Section" inside the same document:

<a href="#tips">Visit the Useful Tips Section</a>


Or, create a link to the "Useful Tips Section" from another page:

<a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a>

HTML Tables
Tables are defined with the <table> tag.

A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td>
tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links,
images, lists, forms, other tables, etc.

<table border="1"> row 1, cell 1 row 1, cell 2


Hamdard Institute of Engineering & Technology, Hamdard University
SharaeMadinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University
<tr> row 2, cell 1 row 2, cell 2
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

HTML Tables and the Border Attribute


If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be
useful, but most of the time, we want the borders to show.

To display a table with borders, specify the border attribute:

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

HTML Table Tags


Tag Description

<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<caption> Defines a table caption

<colgroup> Specifies a group of one or more columns in a table for formatting

<col> Specifies column properties for each column within a <colgroup> element

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

Hamdard Institute of Engineering & Technology, Hamdard University


SharaeMadinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University
HTML Lists
An ordered list: An unordered list:

1. The first list item  List item


2. The second list item  List item
3. The third list item  List item

HTML Unordered Lists


An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items are marked
with bullets (typically small black circles).

<ul>  Coffee
<li>Coffee</li>  Milk
<li>Milk</li>
</ul>

HTML Ordered Lists


An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items are marked
with numbers.

<ol> 1. Coffee
<li>Coffee</li> 2. Milk
<li>Milk</li>
</ol>

HTML Definition Lists


A definition list is a list of items, with a description of each item. The <dl> tag defines a definition list.
The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item
in the list):

<dl> Coffee
<dt>Coffee</dt> - black hot drink
<dd>- black hot drink</dd> Milk
<dt>Milk</dt> - white cold drink
<dd>- white cold drink</dd>
</dl>

HTML List Tags


Tag Description

<ol> Defines an ordered list

<ul> Defines an unordered list

Hamdard Institute of Engineering & Technology, Hamdard University


SharaeMadinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University

<li> Defines a list item

<dl> Defines a definition list

<dt> Defines an item in a definition list

<dd> Defines a description of an item in a definition list

HTML Block and Inline Elements:

HTML Block Elements


Most HTML elements are defined as block level elements or as inline elements. Block level elements
normally start (and end) with a new line when displayed in a browser. Examples: <h1>, <p>, <ul>,
<table>

HTML Inline Elements


Inline elements are normally displayed without starting a new line. Examples: <b>, <td>, <a>, <img>

The HTML <div> Element


The HTML <div> element is a block level element that can be used as a container for grouping other
HTML elements. The <div> element has no special meaning. Except that, because it is a block level
element, the browser will display a line break before and after it.

When used together with CSS, the <div> element can be used to set style attributes to large blocks of
content.

Another common use of the <div> element, is for document layout. It replaces the "old way" of defining
layout using tables. Using tables is not the correct use of the <table> element. The purpose of the <table>
element is to display tabular data.

The HTML <span> Element


The HTML <span> element is an inline element that can be used as a container for text. The <span>
element has no special meaning.

When used together with CSS, the <span> element can be used to set style attributes to parts of the text.

HTML Grouping Tags

Tag Description

Hamdard Institute of Engineering & Technology, Hamdard University


SharaeMadinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University
<div> Defines a section in a document (block-level)

<span> Defines a section in a document (inline)

HTML Forms
HTML forms are used to pass data to a server. An HTML form can contain input elements like text fields,
checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea,
fieldset, legend, and label elements.

The <form> tag is used to create an HTML form:

<form>
.
input elements
.
</form>

Tasks:

Q1.CreateWebPages that display the timetable of eight semester of your discipline.

Q2.Create students registration form with all concerned fields that are used by the university.

Q3. Implement the different types of lists used in html to obtain following on web browser.(hint: use all
three lists)

Hamdard Institute of Engineering & Technology, Hamdard University


SharaeMadinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University
Note: Attach a snap shot of every above mentioned task.

Learning outcomes:

Hamdard Institute of Engineering & Technology, Hamdard University


SharaeMadinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan

You might also like