Scribd
Upload
36 views

Web Design

HTML is a markup language used to define the structure and layout of web pages through a variety of tags, and allows the inclusion of text, hyperlinks, images, tables, lists, and other objects within documents. Key HTML tags include <html> for overall page structure, <head> for metadata, <title> for the page title, <body> for content, and other tags for text formatting, images, links, tables, lists, and frames. HTML documents can be created with a basic text editor and contain HTML code and tags to control text formatting and page layout when displayed in a web browser.

Uploaded by

Ramesh Kalyankar
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
36 views

Web Design

HTML is a markup language used to define the structure and layout of web pages through a variety of tags, and allows the inclusion of text, hyperlinks, images, tables, lists, and other objects within documents. Key HTML tags include <html> for overall page structure, <head> for metadata, <title> for the page title, <body> for content, and other tags for text formatting, images, links, tables, lists, and frames. HTML documents can be created with a basic text editor and contain HTML code and tags to control text formatting and page layout when displayed in a web browser.

Uploaded by

Ramesh Kalyankar
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 35

HTML

Web Page Development


What is HTML?

 HTML is a language for describing web pages.


 HTML stands for Hyper Text Markup
Language
 HTML is not a programming language, it is a
markup language
 A markup language is a set of markup tags
 HTML uses markup tags to describe web
pages
HTML Tags
 HTML markup tags are usually called HTML tags
 HTML tags are keywords surrounded by angle brackets like
<html>
 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
 Start and end tags are also called opening tags and closing
tags.
HTML Documents - Web Pages
 HTML documents describe web pages
 HTML documents contain HTML tags
and plain text
 HTML documents are also called web
pages
Sample Program
<html>
<head>
<title>Title of page </title>
</head>
<body>
This is my first Web page.
</body>
</html>
<HTML> - Begins your HTML document.
<HEAD> - Contains information about the page such as the TITLE,
META tags for proper Search Engine indexing, STYLE tags, which
determine the page layout, and JavaScript coding for special effects.
<TITLE> - The TITLE of your page. This will be visible in the title bar
of the viewers’ browser.
</TITLE> - Closes the HTML <TITLE> tag.
</HEAD> - Closes the HTML <HEAD> tag.
<BODY> - This is where you will begin writing your document and
placing your HTML codes.
</BODY> - Closes the HTML <BODY> tag.
</HTML> - Closes the <HTML> tag.
<BODY> TAG

<BODY [attributes] >


Content to be displayed on Web Page.
</Body>
Attributes-
ALINK=Color
BACKGROUND= “path “
BGCOLOR=Color
LINK=Color
SCROLL=Option ("NO" | "YES")
TEXT=Color
Text Formatting Tags
 Headings
<h1>This is a heading1 </h1>
<h2>This is a heading2 </h2>
<h3>This is a heading3 </h3>
<h4>This is a heading4 </h4>
<h5>This is a heading5 </h5>
<h6>This is a heading6 </h6>
 Paragraph
<p>This is First paragraph</p>
<p>This is Second paragraph</p>
 Line Break
This is First line.<br>This is second line<br>
 <CENTER>Text </CENTER>

 <FONT face=“ “ color=“” size= > text </FONT>

example:
<font face=“arial” color=“red” size=7>
How are you?
</font>

Example for font face:


arial, arial black, comic sans ms, courier, courier new,
georgia,helvetica, impact, palatino, times new roman,
trebuchet ms, verdana
 use the <B></B> tags to make text Bold
<B>bold</B>
 use the <EM></EM> tags to emphasise text
<EM>emphasise text</EM>
 use the <U></U> tags to underline
<U>underline text</U>

 use the <I></I> tags to make italic


<I>italic text</I>
 use the <BIG></BIG> tags to Big
<BIG>increase the font size by +1</BIG>
the maximum font size is 7

 use the <SMALL></SMALL> tags to small


<SMALL>decrease the font size by -1</SMALL>
the minimum font size is 1
Horizontal Line
<HR>
 <HR SIZE="2" WIDTH="50%">
 <hr size="20" width="50">
 <HR SIZE="20" WIDTH="50%">
 <hr size="20" width="50%" noshade>
Contd….
(Align)
 <HR ALIGN="LEFT" SIZE="3" WIDTH="50%"
NOSHADE>
 <HR ALIGN="CENTER" SIZE="3"
WIDTH="50%" NOSHADE>
 <HR ALIGN="RIGHT" SIZE="3" WIDTH="50%"

NOSHADE>
Contd……
<HR COLOR="#0099FF">
or
<hr color=“red”>
Inserting Images
<img [Attributes] >

Example:
<img src=“d:\web\image1.jpg” align=“left” >

<img height = 200 width=200 border = 1


src=“d:\web\image1.jpg”>
HTML links (Anchor Tag)
<a> tag
<a href=“path”></a>

Example
<a href="nextpage.html">click here</a>
Link to another website

 use a html hyper reference but use the other


websites full address

<a href="http://www.yahoo.com">yahoo</a>
(this is called an absolute URL)
Making Image As Link

<a href="index.html"><img src="picture.gif"></a>

<a href="spaceman.jpg">spaceman.jpg</a>
Animated Text
 <Marquee> Tag

Example:
<MARQUEE bgcolor=#CCCCCC loop="-1"
scrollamount="7" width=100%
direction=“right”> Example
Marquee</MARQUEE>
Note: Direction can be: right ,left, up, down
Creating List
 Ordered List
 Un-ordered list

Ordered List: <OL> <LI></OL>


Example 1:
<OL>
<LI>List item number 1
<LI>List item number 2
<LI>List item number 3
</OL>
Options
 The OL tag allows the following options:
 TYPE=I use capital Roman numerals

 TYPE=A use capital letters

 TYPE=a use lowercase letters

 TYPE=i use lowercase Roman numerals

 TYPE=1 use numeric character

You can also do this:


 TYPE=I START=1 start with capital Roman numeral I

 TYPE=A START=2 start with capital letter B

 TYPE=a START=4 start with lowercase letter d

 TYPE=i START=6 start with lowercase roman number vi

 TYPE=1 START=3 start with the number 3


Ordered List Contd….
Example 2:
<OL TYPE=1 start=6>
<LI>1st listing
<LI>2nd listing
<LI>3rd listing
</OL>
Note: Type can be A,a,I,1 etc
Unordered List
<UL> Tag
Example:
<UL>
<LI>list item number 1
<LI>List item number 2
<LI>List item number 3
</UL>
<UL Type=“ ”>
 <UL TYPE=SQUARE>
<LI>1st listing
<LI>2nd listing
</UL>

Type can be disc,circle,square


Tables in HTML
A table is made with the following tags
<TABLE> table tells the browser to start drawing a
table
<TR> tr stands for 'table row'
<TD> td stands for 'table definition'
</TD> tells the browser that the first table cell has
ended
</TR> tells the browser that the first table row has
ended
</TABLE> tells the browser that the table has
ended
Simple Table Creation

<table width=200 border="2">


<tr>
<td></td>
</tr>
</table>
Multiple rows and column
<table width="200" border="1">
<tr>
<td width=100>Text</td>
<td width=50>Text</td>
<td width=50>Text</td>
</tr>
<tr>
<td width=100>Text</td>
<td width=50>Text</td>
<td width=50>Text</td>
</tr>
</table>
Table attributes:
<table width="400" border="2"
bordercolor="#000000" bgcolor="#00FFFF">
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
</table>
Adding image as Background
<table width="399" height="96" border="1"
bordercolor="#4D4D4D"
background="file:///D|/Web page/Images/2.jpg" >
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
Background color in cells
<table width="540" height="194" border="3">
<tr>
<td bgcolor="#00FFFF">&nbsp;</td>
<td bgcolor="#0000FF">&nbsp;</td>
<td bgcolor="#9933CC">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#990000">&nbsp;</td>
<td bgcolor="#99FFCC">&nbsp;</td>
<td bgcolor="#336666">&nbsp;</td>
</tr>
</table>
Rowspan And Colspan
<tr>
<td colspan=2>text</td>
</tr>

<tr>
<td>rowspan=2>text</td>
</tr>
Frames:
With frames, you can display more than one
HTML document in the same browser window.
Each HTML document is called a frame, and
each frame is independent of the others.
The disadvantages of using frames are:
 The web developer must keep track of more
HTML documents
 It is difficult to print the entire page
The Frameset Tag
 The <frameset> tag defines how to divide the
window into frames
 Each frameset defines a set of rows or
columns
 The values of the rows/columns indicate the
amount of screen area each row/column will
occupy
The Frame Tag
The <frame> tag defines what HTML
document to put into each frame

Example:
<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>
Inserting Videos
<EMBED> Tag
Example:
<embed src="video.wmv" width="300"
height="200"
autostart="false"></embed>

You might also like