Scribd
Upload
5 views

File 2 HTML

The document provides an overview of HTML basics including tags for text formatting, headings, lists, images, links, tables, forms, frames, and style sheets. It describes various tags and attributes used to structure and style HTML pages.

Uploaded by

talhamajestichub.shop.pk
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

File 2 HTML

The document provides an overview of HTML basics including tags for text formatting, headings, lists, images, links, tables, forms, frames, and style sheets. It describes various tags and attributes used to structure and style HTML pages.

Uploaded by

talhamajestichub.shop.pk
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

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:[email protected]> 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>
<!--
H1{font-size:72pt}
--> </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> <!--.Text1{font-size: 20pt;color:red;text-align:center} .Text2{font-size:
16pt;color:green;text- align:center} --> </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>
<!--
.fonttype1 {font-size: 20pt; font-family: "Times New Roman"}
.fonttype2 {font-size: 20pt; font-family: Arial}
.fonttype3 {font-size: 18pt; font-family: "Courier New"}
-->
</STYLE>
 Font weight styles
<SPAN STYLE="font-weight: 200">Math</SPAN>
 Indenting the first line of a paragraph
<STYLE>
<!--
P {text-indent: 0.5in}
-->
</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>
<!--
P {border: thin solid}
-->
</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">

You might also like