HTML Power Point Preesentation

ITC Lab 06
Engr Asma Ejaz

asmaejaz04@yahoo.com
University of Engineering and Technology(UET), Taxila,
Pakistan
Lab Objectives (PART-1)

Introduction to HTML
Learning HTML Basics
HTML Elements & Attributes
Text Formatting
Introduction
Stands for Hyper Text Markup Language.
A language for describing web pages.
It is not a programming language, it is a markup
language.
Uses markup tags to describe web pages. HTML
markup tags are usually called HTML tags.
HTML tags are keywords surrounded by angle
brackets like <html>.
The first tag in a pair is the start tag, the second
tag is the end tag. Start and end tags are also
called opening tags and closing tags.
Getting Started
You don't need any HTML editor, web server or web
site to learn HTML.

We use a plain text editor (like Notepad) to edit HTML.
However, professional web developers often prefer
HTML editors like FrontPage or Dreamweaver, instead
of writing plain text.
Open a notepad and save it with .htm or .html at the
end of its name.
When you save an HTML file, you can use either the
.htm or the .html extension. Using .htm is a habit from
the past, when the software only allowed three letters
in file extensions.
Basic
HTML headings are defined with the <h1> to <h6>
tags.
<h1>This is a heading</h1>
HTML paragraphs are defined with the tag.
This is a paragraph
This is another paragraph
HTML links are defined with the <a> tag.
<a href="http://www.uettelecom.com">This is a link</a>
HTML images are defined with the <img> tag.
<img src="d:\Users\Asad\Desktop\HTML\stuart_little.gif"
width="104" height="142">
Elements
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
HTML elements without content are called empty elements. Empty
elements can be closed in the start tag. is an empty element
without a closing tag (it defines a line break).
Most browsers will display HTML correctly even if you forget the end
tag.
HTML tags are not case sensitive: means the same as .
Elements Example
<html>
<body>
This is my first paragraph
</body>
</html>
The element defines a paragraph in the HTML
document
The <body> element defines the body of the HTML
document
The <html> element defines the whole HTML document
Attributes
HTML elements can have attributes.
Attributes provide additional information about
the element.
Attributes are always specified in the start tag.
Attribute values should always be enclosed in
quotes.
Attribute names and attribute values are caseinsensitive.
<a href="http://www.uettelecom.com">This is a
element
attribute
element content
link</a>
closing tag
Lines & Comments

The <hr/> tag is used to create horizontal line.
<hr />
<hr />
Comments can be inserted in the HTML code to make
it more readable and understandable. Comments are
ignored by the browser and are not displayed.

Text Formatting
Tag
Description

Bold Text
<big>
Big Text

Emphasized Text

Italic Text

Underlined Text

Small Text

Strong Text

Subscript Text

Superscript Text
Text Formatting Example

<html>
<body>
This text is bold
This text is strong
<big>This text is big</big>
This text is emphasized
This text is italic
This text is small
This is subscript and
superscript
</body>
</html>
Lab Objectives (PART-2)

Font Formatting
Links & Images
Tables
Lists
Head Part
End Lab Example
Uploading Website
Fonts
With HTML code like this, you can specify both the size and
the type of output.



This is a paragraph.




This is another paragraph.


Align & Move Text

Align attributes are used to align the text to left,
right and center:

This is a paragraph.
<h1 align="right">Heading 1</h1>
Marquee tag is used to move any text in any
direction.
<marquee scrollamount=10 scrolldelay=100
direction=right>Hello</marquee>
Links & Images

In web terms, a hyperlink is a reference (an address) to a
resource on the web.

<a href="http://www.uettelecom.com/">UET Telecom</a>
<a href=http://www.uettelecom.com/ target="_blank">UET
Telecom</a>
<a href="mailto:webmaster@uettelecom.com">Send e-mail</a>
In HTML, images are defined with the <img> tag. The <img>
tagis empty, which means that it contains attributes only and it
has no closing tag. The alt attribute is used to define an
"alternate text" for an image.
<img src="stuart_little.gif" alt=Stuart Little" />
<a href="http://www.uettelecom.com/"><img src="URL"
alt="Alternate Text"></a>
Tables
Tables are defined with the <table> tag.
A table is divided into rows with the <tr> tag.
Each row is divided into data cells with the <td> tag.
<table border="1">
<tr>
<td>row 1, column 1</td>
</tr>
<tr>
</tr>
</table>
Lists
Unordered Lists: An unordered list starts with the <ul>
tag. Each list item starts with the <li> tag.

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Ordered Lists: An ordered list starts with the <ol> tag.
Each list item starts with the <li> tag.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
Lists (contd)
Definition Lists: A definition list starts with a <dl>
tag (definition list). Each term starts with a <dt>

tag (definition term). Each description starts with
a <dd> tag (definition description).
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Head
The head element contains general information,
also called meta-information, about a document.

Meta means "information about".
The elements inside the head element should not
be displayed by a browser.
According to the HTML standard, only a few tags are
legal inside the head section. These are: <base>,
<link>, <meta>, <title>, <style>, and <script>.
<HEAD>
<TITLE>Hello</TITLE>
</HEAD>
End Lab Example

<html>
<head>
<title>Asma Ejaz</title>
</head>
<body bgcolor="#FFFF99">
<h1>Asma Ejaz</h1>
Student MSc Telecommunication Engineering 
<a href="http://www.uettaxila.edu.pk/">UET Taxila</a> 
House.abc, Street.xyz, Islamabad 
+92 51 000 0000 
<a href="mailto:asmaejaz04@yahoo.com">Email Me!</a> 
</body>
</html>
Uploading Website
Use any freeware FTP (file transfer protocol) client
like FileZilla etc.

The hostname is your website domain or server IP.
Username and password is provided to you by
your webhost.
Port number for FTP connections is 21.
The root directory is public_html. So, you have to
upload all files and folders to this directory.
Lets try uploading a page to uettelecom.com.
Lab Assignment 2
Using the tags defined in this lab, build a 3 page
HTML website which contains following pages:

Home Page
Education Info
Contact
Zip all the pages and images.

The final assignment file which you will mail
should be named as 09-TE-xx.zip.

Last date for submission of this assignment is

HTML Power Point Preesentation

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML Power Point Preesentation

Încărcat de

Drepturi de autor:

Formate disponibile

ITC Lab 06

Engr Asma Ejaz

Lab Objectives (PART-1)

site to learn HTML.

Lines & Comments

Text Formatting Example

Lab Objectives (PART-2)

the type of output.

Align & Move Text

right and center:

Links & Images

resource on the web.

tag. Each list item starts with the <li> tag.

tag (definition list). Each term starts with a <dt>

also called meta-information, about a document.

End Lab Example

like FileZilla etc.

HTML website which contains following pages:

Zip all the pages and images.

should be named as 09-TE-xx.zip.

S-ar putea să vă placă și