File 2 HTML

HTML BASICS 5 to 12
 Hypertext markup language

Web documents are defined by the Hypertext Markup Language (HTML). It is a language of tags.
A tag is a special letter or key word enclosed in angular brackets. HTML is case independent. It
has a fixed number of tags and attributes.
 A Simple HTML document
<HTML>
<HEAD>
<TITLE> BC200411460 </TITLE>
</HEAD>
<Body>
My name is Talha
</Body>
</HTML>
 Text Formatting
Paragraph <p> and </p>
<p>Education provides a better understanding of life</p>
<p Align=“Center”>e-commerce</p>
You can also use Left or Right
Line break <br>

<center>Education provides a better understanding of life </center>
• Bold <b> and </b>
• Italics <i> and </i>
• Underlined <u> and </u>
• BIG <big> and </big>
• small <small> and </small>
Font
Font face
<font face=“Arial”>internet</font>
Font size from 1 to 7
<font size=5>and</font>
Font color
<font color= red>e-commerce</font>
<font size=5 color=red face=Arial>internet and e-commerce</font>
 Example Code
<HTML>
<HEAD></HEAD>
<BODY>
<H1>This is my main title</H1>
<p>Here is the first paragraph. This is some <b><i>bold text</i></b></p>
<p><font face=“Arial”>This text is in the Arial font.</font>
</BODY> </HTML>
 Heading in HTML
<H1> Level 1 – largest text </H1>
<H2> Level 2 </H2>
<H3> Level 3 </H3>
<H4> Level 4 </H4>
<H5> Level 5 </H5>
<H6> Level 6 – smallest text </H6>
 `List in HTML
<UL> and </UL> are used to create unordered list. <OL> and </OL> are used to create the
ordered list. Use <LI> and </LI> tags in between as shown below:
<HTML><Body>
<UL>
<LI>Item1</LI>
<LI>Item2</LI>
<LI>Item3</LI>
</UL><P>
<OL>
<LI>Item1</LI>
<LI>Item2</LI>
<LI>Item3</LI>
</OL>
<P>
<hr width=50% size=5 Align= center noshade>
</Body></HTML>
New
<UL Type=“Square”>Square</UL>.
<OL Type=“a”><LI>First></LI><LI>second</LI></OL> <p>
 Applying images in HTML
<HTML>
<Body>
<h1> MIDDLE CLASS </h1>
<image Src = “cassette.gif”> <Img Src=“cassette.jpg” width=“80%” height=“50%”
Align=“Middle”>
</Body>
</HTML>
 Links in HTML <A HREF=mailto:vtv@hotmail.com> email address</A>

Website code
<HTML>
<BODY>
<H1>Computer Science</H1>
Welcome to <A HREF=http://www.vu.edu>Virtual University</A> in Pakistan
</BODY>
<HTML>

 Changing Colors in a Page
a. <BODY bgcolor=“Green” text=“white” link=“red”>

b. ‘bgcolor’ refers to a six digit code based on hexadecimal numbers, e,g, #00FF00 (Green)
i. _ _ _ _ _ _
ii. Red Green Blue
c. <BODY background=“filename”>
d. ‘filename’ refers to the image file name in .gif or .jpg etc. format
 Title and Meta Tags
<html>
<head>
<Title>Introduction to e-commerce</title>
<Meta name=“description” content=“E-commerce is a newly emerging field that uses internet as a medium of
communication”>
<Meta name=“keyword” content=“e-commerce, internet, medium, communication”>
</head>
<body>Page goes here</body>
</html>
 Table Basic tags

1. Tables use following basic tag:
a. <Table>
b. </Table>
2. <TR> (table row tag) and </TR> are used to create/add a row
3. <TD> (table data tag) and </TD> are used to divide a row into number of columns to create cells
4. <TH> (table header tag) and </TH> labels each column as a heading
5. <caption>Caption of the table</caption>
 A basic 2 row, 2 column table
<HTML><BODY> <Table Border=1>
<TR>
<TD>Cell1</TD>
<TD>Cell2</TD>
</TR>
<TR>
<TD>Cell3</TD>
<TD>Cell4</TD>
</TR> </Table> </BODY></HTML>
Table attributes
Attributes ‘colspan’ and ‘rowspan’ are used in <TD> tag for spanning the cells to a particular no.
of columns or rows, respectively,
Attributes for <td> tag
– Width - <td width=“50%”>
– Align - <td align=“center”>
– Valign- <td valign=“top”>
 Forms
-<form> and </form>
<Form action=http://www.forms.com Method=post>
Types 1. Submit/Reset button 2. Text boxes 3.Text area

3. Check boxes 4.Radio buttons 5.Lists
Text Area Example
<T EXTAREA NAME="Answer" ROWS="10" COLS="60">
</TEXTAREA> FIRST NAME
First Name: <INPUT TYPE="TEXT" NAME="First"><P>
Last Name: <INPUT TYPE="TEXT" NAME="Last">
 Check boxes
Check boxes are normally used to get yes/no or true/false information from a reader.
<INPUT TYPE="CHECKBOX" NAME=“Water">Fear of water<BR>
 Radio buttons
Instead of yes/no choices, you might want your readers to have one choice out of many options.
<input type=“radio” Name=“field name” value=“value”>
 Selection lists
General format <select name=“field name” size=“no. of items”> between the <select> and </select>
tags are the <option> and </option> tags which define the list items.
<SELECT NAME=“Nationality" SIZE="4">
<OPTION>American</OPTION>
<OPTION>Australian</OPTION> <OPTION>Hungarian</OPTION>
 General format
<Frameset> and <Frame> are the two basic tags. This concept uses two different types of pages –
Frameset page and content pages
Dividing the screen horizontally
<HTML>
<HEAD>
<TITLE>Horizontal Frames</TITLE>
</HEAD>
<FRAMESET ROWS="25%,75%">
<FRAME>
<FRAME>
</FRAMESET>
</HTML>
<HTML> <HEAD><TITLE>Nested
Frames</TITLE> </HEAD> <FRAMESET
ROWS="25%,75%"> <FRAME SRC="1.htm"
NAME="upper">
<FRAMESET COLS="50%,50%"> <FRAME SRC="2.htm" NAME="lower"> <FRAME
SRC="3.htm" NAME="right"> </FRAMESET>
</FRAMESET> </HTML>
 Images can be links, too
<A HREF=“main.htm"><IMG SRC="home.gif"></A>
 determine the map coordinates
<A href=“whatever”><Img src=“imagename” ISMAP></A>
 Use <Map> to define the image map
<Map Name=“Testmap”> <Area shape=“Rect” coords=“0,0,199,99” href=“a.htm”> </Map>
 <Area> tag attributes
<Area shape=“circle” coords=“70,45,25” href=“a.htm” alt=“a.htm” target=“upper” nohref>
 Sound Files
Sound file formats are: AU,WAV,MP3,MIDI.
<A href=“song.wav”>Click here for some greeting!</A>.
<EMBED SRC="Skylar.MP3">
<EMBED> tag also supports these attributes: 1. Autostart=“False” 2. Loop=“value” 3.
Hidden=“True”
 Animated GIF images
<Marquee>Tag
Text that we put between <Marquee> and </Marquee> tags scrolls across the screen. Attributes and
their values: Align=“top” or “bottom” Direction=“”left” or “right” Behavior=“Scroll” or “Slide” or
“Alternate”
<MARQUEE ALIGN="BOTTOM" BGCOLOR="SILVER" WIDTH="200" SCROLLAMOUNT="4"> Islam
and Modern Science </MARQUEE>!
 Style sheets
<HTML>
<head>
<style>
 </style> </head> <body><h1>An Example of Embedded Method</h1> </body></html>
 Linking to an external style sheet
Example <HTML> <head> <Link Rel="stylesheet" Type="text/css" href="mystyles.css"> </head>
<body><h1>This heading will appear red</h1>
<p> This line has a 34pt font</p></body>
</html>
 Inline styles
<h1 style="font-size:40pt">This heading has font-size 40-point</h1>
 <DIV>
<HTML>
<body>
<DIV style=“font-size:30pt”>
<h1>This heading uses a 30-point font</h1>
This sentence will have 30-point font
<h2>This heading, too</h2>
</DIV>
</body></html>
 <Span> </Span>
<HTML> <body> <h1> This
<Span style="font-size:40pt">heading </Span> has font-size 40-point </h1> </body> </HTML>
 style classes
style classes <HTML> <HEAD><TITLE>Style Sheets: Style Classes</TITLE> </HEAD>
<STYLE>  </STYLE> <BODY> <DIV CLASS="Text1"><h1>This text is in
red</h1></DIV> <DIV CLASS="Text2"><h2>This text is in green</h2></DIV> </BODY> </HTML>
 Font family styles
<STYLE>

</STYLE>
 Font weight styles
<SPAN STYLE="font-weight: 200">Math</SPAN>
 Indenting the first line of a paragraph
<STYLE>

</STYLE>
 Aligning the text
<TD WIDTH="25%" STYLE="text-align: center">? </TD>
 Text decoration styles
<H2 STYLE="text-decoration: none">Introduction to E-commerce</H2> <H2 STYLE="text-
decoration: line-through">Introduction to E-commerce</H2>
<H2 STYLE="text-decoration: overline">Introduction to E-commerce</H2>
<H2 STYLE="text-decoration: underline">Introduction to E-commerce</H2>
 Working with the upper case and lowercase letters
<H2 STYLE="text-transform: capitalize"> We love Pakistan</H2> <H2 STYLE="text-transform:
lowercase"> We love Pakistan</H2> <H2 STYLE="text-transform: none"> We love Pakistan</H2>
<H2 STYLE="text-transform: uppercase"> We love Pakistan</H2>
 Coloring the web page with color styles
background-color: blue
background-color:#0000FF
background-image:URL(filename)
<DIV STYLE="background-color: green; color: white"> Pakistan </DIV>
 PARAGRAPH STYLE
<HTML>
<STYLE>

</STYLE>
<BODY>
<P>This is some text contained in a box.
<P STYLE="height: 100px">This paragraph is contained in a box 100 pixels high.
<P STYLE="width: 100px">This paragraph is contained in a box 100 pixels wide.
</BODY>
</HTML>
 Pending
Pending – general property that applies to all four padding properties in this order: ‘padding top,
padding-right, padding-bottom, padding-left’
<DIV STYLE="padding-top: 15px; padding-bottom: 15px"> </DIV>
 Border vs Style vs
border-width: specifies the width of all borders in the order ‘border-top-width, border-right
width, border-bottom-width, border-left-width’
border-style: specifies the style of all borders in the order ‘border-top-style, border-right
style, border-bottom-style, border-left-style’
border border-color: specifies the color of all borders in the order ‘border-top-color, border-right-
color, border-bottom-color, border-left-color’
<DIV STYLE="border-width: 10px;border-color:red green yellow blue; border-style: ridge">
 Position styles
<DIV STYLE="position: absolute; left: 700px; top: 200px">Books Section</DIV>
 Positioning in the 3rd dimension
We can use the property ‘z-index’ for positioning in the third dimension.
<DIV STYLE="z-index: 1; position: absolute; left: 10px; top: 60px">

File 2 HTML

Uploaded by

Copyright:

Available Formats

File 2 HTML

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

File 2 HTML

Uploaded by

Copyright:

Available Formats

HTML BASICS 5 to 12

 Hypertext markup language

You can also use Left or Right

Line break <br>

 Links in HTML <A HREF=mailto:vtv@hotmail.com> email address</A>

a. <BODY bgcolor=“Green” text=“white” link=“red”>

<Meta name=“keyword” content=“e-commerce, internet, medium, communication”>

<body>Page goes here</body>

 Table Basic tags

Attributes for <td> tag

– Width - <td width=“50%”>

– Align - <td align=“center”>

– Valign- <td valign=“top”>

-<form> and </form>

<Form action=http://www.forms.com Method=post>

Types 1. Submit/Reset button 2. Text boxes 3.Text area

Text Area Example

<T EXTAREA NAME="Answer" ROWS="10" COLS="60">

</TEXTAREA> FIRST NAME

First Name: <INPUT TYPE="TEXT" NAME="First"><P>

Last Name: <INPUT TYPE="TEXT" NAME="Last">

<INPUT TYPE="CHECKBOX" NAME=“Water">Fear of water<BR>

You might also like