Scribd
Upload
13 views

HTML

Uploaded by

nurin atira
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
13 views

HTML

Uploaded by

nurin atira
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, 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 Hello.html
Hello.html page
page asas
HTML code
code written
written using
using
Notepad. interpreted by the web
interpreted by the web
Notepad. ItIt isis saved
saved as
as
“hello.html” browser.
browser. Eg:
Eg: Internet
Internet
“hello.html”
Explorer
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

 <img src="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