Scribd
Upload
8 views

Lecture 2 - HTML

This document provides an introduction to HTML and describes common HTML tags and their usage. It explains that HTML files are text files containing markup tags that tell browsers how to display pages and consists of elements defined by opening and closing tags. Examples of basic tags like <html>, <head>, <body>, <h1>, <p> and others are given along with their purpose.

Uploaded by

imannurumairah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

Lecture 2 - HTML

This document provides an introduction to HTML and describes common HTML tags and their usage. It explains that HTML files are text files containing markup tags that tell browsers how to display pages and consists of elements defined by opening and closing tags. Examples of basic tags like <html>, <head>, <body>, <h1>, <p> and others are given along with their purpose.

Uploaded by

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

HTML

Introduction to HTML

Computer Science Department


HTML INTRODUCTION
⦿ HTML stands for Hyper Text Markup
Language. An HTML file is actually a text file
containing small markup tags
⦿ The markup tags tell the Web browser how
to display the page
⦿ An HTML file must have an htm or html file
extension (e.g. about.html, faculty.html)
⦿ An HTML file can be created using a simple
text editor (e.g. Notepad)
HTML AT A GLANCE

HTML code written using Hello.html page as


Notepad. It is saved as interpreted by the web
browser. Eg: Internet
“hello.html”
Explorer
Hello.html is indicated in web
browser file
HTML
⦿ HTML documents are text files made up of
HTML elements.
⦿ HTML elements are defined using HTML tags.
⦿ HTML Tags
◼ HTML tags are surrounded by angle brackets, < and
>
◼ HTML tags usually come in pairs like <p> which is
the start tag and </p> which is the end tag.
◼ You will write the element content between the
two tags.
◼ HTML tags are not case sensitive. <p> will be
treated as <P>.
HTML TAGS
“hello.html” has five HTML tags:
<html>
<head>
<title>
<body>
<h1>

⦿ The highest hierarchy is <html>. <html> tags has a few child tags such as
<head> and <body>.
⦿ Child tags must be placed inside the parent tag. As you see <title> is
placed inside the <head> tag.
⦿ <body> tags can contains most of other tags such as <h1>, <table>, <p>,
and many more.
⦿ Inside <title>… </title> you can write any text as a title of home page.
⦿ The purpose of the <body> tag is to define the HTML element that
contains the body of the HTML document.
HTML BASIC TAGS
⦿ <body>…</body>
<body bgcolor = “colorname”> - default color
is white
<body background = “image.gif/.png/.jpg”>
The image must be located in the same
location as the HTML file.
Image file named ‘cat’ is located
on the desktop. This is a JPEG
file, its extension is .jpg.
<body background="cat.jpg">
Small image will be
tiled to fit the
browser window size
A large image will
fit nicely in the
browser window size

<body
background="catbg.gif">
OTHER TAGS
⦿ Headings
For header of a page, to indicate title
<h1> … <h6>
Eg: <h1>Welcome</h1>
⦿ Paragraph
<p>Welcome to my homepage</p>
⦿ Line break
<br>
⦿ Comment
<!– This is a welcome page -->
<H1>… <H6>
<h1>Hello</h1>
<h2>Hello</h2>
<h3>Hello</h3>
<h4>Hello</h4>
<h5>Hello</h5>
<h6>Hello</h6>

Welcome to my homepage
⦿ <pre>…</pre>
To preserve the appearance of information
<pre>
Name : Hana
Course: Computing
</pre>
⦿ <blockquote>… </blockquote>
Used to indicate quotation
OTHER TAGS
⦿ <hr> Horizontal line
width, size, align
Eg: <hr size= “3”> <hr width=“50%”>
<hr align = “right”>
<hr size=“3” align=“left”>

Default: Size=“2”, Align=“Center”,


Width=“100%”
TEXT FORMATTING
⦿ <b>This is bold</b>
⦿ <i> This is italic </i>
⦿ <strong> This is strong </strong>
⦿ <sub> … </sub>
⦿ <sup> … </sup>
FONT FORMATTING
⦿ <font> … </font>
⦿ Attribute: size, face, color
⦿ Eg: <font face=“Arial” color=“blue”
size=“5”>
IMAGES
⦿ <img src=“img.gif”>
Attributes Description
src The location of image
width Width of the desired image
height Height of an image
alt Is used to give label to image

⦿ <imgsrc="home.jpg" width="100"
height="100" alt="Back to Home" >
<html>
<head>
<title>My First Homepage</title>
</head>

<body bgcolor="yellow">
<h1>Hello</h1>
Welcome to my homepage
<br>
<img src="cat.jpg">

</body>
</html>
EXERCISES
⦿ Write the code to produce this page:
ANSWER

<html>
<head><title>Exercise</title>
</head>
<body>
<img src = "fblogo.jpg">
</img>
</body>
</html>
EXERCISES
<html>
<head><title>Exercise</title>
</head>
<body>
<img src = "fblogo.jpg"
align="right">
</img>
</body>
</html>

You might also like