Scribd
Upload
4 views

HTML Note

Real html notes

Uploaded by

stupkc1
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
4 views

HTML Note

Real html notes

Uploaded by

stupkc1
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 12

What is a Web Page?

A web is a page with hypertext links that cross-reference text in the Internet .A web
page is also know as HTML pages because it is coded in HTML language.
Today web pages (HTML pages ) are the standard interface of the internet.

Power of HTML
Earlier HTML pages could only hold text. However, since the boom of Internet people
have added more and more capabilities to this language.
It can now have images, animations, multimedia contents and even interactive
application.

What is HTML ?
Most HTML tags have two parts the starting tag that indicates the start of text or
formatting and the closing tag that indicates the end of text of formatting .
1. Html Stands for Hyper Text Markup language
2. HTML is not programming language , it is Markup language.
3. A markup language is a set of markup tags.
4.HTML User markup tags to describe web pages

HTML Markup tags are usually called HTML Tags.

1. HTML tags are keywords surrounded by angle brackets like <html>


2. HTML tags normally come in pairs like <b> and </b>
3. The first tag in a pair is the start tag, the second tag is the end tags.
4. Start and end tags are also closing tags.
HTML Element syntax.
1. An HTML ELEMENT START WITH a start tag / opening tag .
2. .an HTML element ends with an end tag/ closing tag
3. The element content is everything between the start and the end tag
4. Some HTML elements have empty content
5. Empty elements are closed in the start tag.
6. Most HTML element are can have attributes.
HTML output – useful tips .
1. You cannot be sure haw HTML will be displayed . Large or small screens and
resized windows will create different results.
2. With HTML , you cannot change the output by adding extra spaces or extr
lines in your HTML code.
3. The browser will remove extra spaces and extra lines when the page is
displayed . Any numbers of lines count as one line and any number of spaces
count as one space .

The purpose of web browser is to red HTML documents and display them as web
pages . The browser does not display the HTML tags , but users the tgs to interpret
the content of the page.

Creating and editing web pages


Since a web page is a text file it can be created or edited in any text editor.
However, there is application specially made for designing web pages. These
applications are known as HTML editors.
Use any editor of your choice to create web pages.

A blank HTML page


A blank HTML page has the following code:
<html>
<head>
<title>It appears in the title bar</title>
</head>
<body>
It appears in the page
</body>
</html>

Creating your first web page


The above written code is a blank web page.Copy it to Notepad.Write the title of the
page between the <TITLE> and </TITLE> tags.And write some one or two
paragraphs of the between the <BODY> and </BODY> tags.
Give the save command and in the file name box type the filename inside double
quotation("")with an extension of '.htm'. Now you can open the document in any
browser and view it.

Tags and their Properties:Most of the HTML tags have their properties. The
properties of every tag goes inside the opening tag .A tag can have any number of
properties separated by space .Most of the properties have a value. For example if
you are specifying the color property then its value will be the name of the color. A
tag with properties will be written like.
<tag property1="value" property2="value">

Body tags and their meaning

Opening Tag Closing Tag Use


<body> </body> Visible area of the HTML Page
<Font> </font> Formatting start and end.
<p> </p> Paragraph start and end
<hr> [None] Horizontal line
<br> [None] Line Break
<B> </B> Start and end bold text.
<I> </I> Start and end Italic text.
<u> </u> Start and end Underline text.
Del </del> Strikethrough to text
Small </small> Small to text comparing normal text
Strong </strong> To make text bold
Mark </mark> Highlight to text
Address </address> To take text quotation
Example
<html>
<head>
<title>First page</title>
</head>
<body>
<p align="center">
<font size="5" color="green" face="verdana"><b><i><u>Welcome to my
site</u></i></b></font>
</p>
<hr size="3" width="100%"color="red">
</body>
</html>

More tag properties.


Properties Value
<p> tag align Paragraph alignment[left,center,right and justify]

<h1>to<H6>Tag Heading one(It is the greatest font size)


<H2>....<h6>It is smallest font then the previous font size

<hr> tag Horizontal line Color


<Font> Tag Font face
Font size
Font color

List tags and their use

Opening Tag Closing Tag Use

<ul> </ul> Start and end of the bullet


list
<ol> </ol> Start and end of the
number list
<dir> </dir> Start and end of directory
list
<li> </li> Start and end of the list
item
<div> </div> Start and end of division or
paragraph

<img> none Insert image.


<a> </a> Hyperlink or anchor.

Tag Properties
<UL>tag
Type Type of bullet(circle,sqaure or disc)

<OL> tag
Type Type of numbering(1,A,a,I or i)
Start Beginning count of numbering (e.g.1,2,3,4 etc)

<div>tag
Align Alignment of paragraph(left,center,right or justify)

Example
<html>
<head>
<title>List </title>
</head>

<body>
<p><strong>Computer Course</strong> </p>
<ol start="5" type="i">
<li>Office Package </li>
<li>Diploma Package </li>
<li>Graphic Package </li>
<li> Accounting Package </li>
<li>Web Designer </li>
</ol>
</body>
</html>

img tag properties

Property Value
Location of the image(e.g."c:\windows\
SRC
circle.gif")
WIDTH Width of the image in pixel
HEIGHT Height of the image in pixel
ALT Alternate or tool-tip text
Space to the right and left of image in
VSPACE
pixels
Space to the right and left of image in
HSPACE
pixels
NAME Name of the image.
LOWSRC Location of a lower resolution image
Alignment of text with imag.
ALIGN
(top,middle,bottom etc)

Example
<html>
<head>
<title>Image</title>
</head>

<body>
<p align="center"><strong>Welcome to My site</strong></p>
<p align="center"><strong><img src="C:\scene.jpg" alt="Click here"
name="Image1" width="200" height="200" hspace="10" vspace="10"
id="Image1"></strong></p>
</body>
</html>

Anchor tag properties

Property Value
<A>Tag
Name Name of the anchor
HREF Location of the file that is referenced.
TARGET Name of the window or frame to open the target file.

NOTE: Hyperlink is the part of the references another document. When you click on a hyperlink the
referenced document is opened. Anchor is a reference point inside a document that can be referenced
by a hyperlink. When<A>tag is used as anchor it doesn't have a closing tag.

Table in an HTML document

In HTML a table begins with a <TABLE> tag and ends with a </TABLE>tag.
Between the <TABLE> tag there are the rows that are enclosed between <TR>and
</TR>tags. So there is one pair of <TR>and </TR>tags for each row.
Inside these rows are the cells, which are enclosed between the <TD> tag pairs
inside every row should be the same. The contents of the cell goes between the
<TD>and </TD> tags.

Example
<HTML>
<HEAD><TITLE>Table<off></TITLE>
</HEAD>
<BODY>
<table>
<tr>
<td>
Row 1, Col 1
</td>
<td>
Row 1, Col 2
</td>
</tr>
<tr>
<td>
Row 2, Col 1
</td>
<td>
Row 2, Col 2
</td>
</tr>
</table>
</BODY>
</HTML>

Contents of a cell
The context of a cell is written between the <TD>and </TD>tags.A cell of table can
contain any text,HTML,image or even another table(i.e.you can have a table inside
another table).bishal
Tables are used in web pages to arrange the layout and /or to display tabular data.

Table/cell Properties
<Table>and <TD>tag

Property Value
Width of table /cell in pixel or
WIDTH
percent
Height of table/cell in pixel or
HEIGHT
percent
BGCOLOR Background color of table/cell
BACKGROUND Background image of table/cell

<Table> Tag only

Property Value
BORDER Thikness of table border in pixel
BORDERCOLOR Color of table border
CELLSPACNING Space between cells in pixel
Space between cell border and
CELLPADDING
content in pixel

More tag properties


Property Value
<Td>tag only
ROWSPAN Number of rows the cell spans

Example

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<table border="1" align="center" cellpadding="3" cellspacing="2" width="60%"
height="80%">
<caption>Simple Table With Formatting</caption>
<tr>
<td>
Row 1, Col 1
</td>
<td>
Row 1, Col 2
</td>
</tr>
<tr>
<td>
Row 2, Col 1
</td>
<td>
Row 2, Col 2
</td>
</tr>
<tr>
<td colspan="2" rowspan="2" align="center" valign="center">
This is a double-width, double-height cell with centered contents.
</td>
</tr>
</table>
</BODY>
</HTML>

Images in HTML document


As we learnt earlier, a web page can only store text. So any images that appear
inside the page is not inside the HTML document.Actually the image is a different file
and there is a tag in the HTML page specifying the location of the image.The browser
displays the image in the page as if it were a part of that document.

Image Formats in a HTML page


There are two types of image formats used in web pages.GIF(Graphics
Interchangeable Format ".gif")and JPEG(Joint Photographics Expert Group
".jpg").The PNG(Portable Network Graphic ".png") format is still consideration and
most probably will be used as web graphic format in the future.

Inserting image into the HTML page


IF you have a JPEG or GIF image you can insert it into HTML page by inserting
the<IMG>tag.Refer to lecture 3 for the properties of the <IMG> tag looks like:
<IMG SRC="image surce" width="image width" height="image height">
Example <img src="images/picture.gif" width="150" Height="30>
The SRC property of the <IMG> tag is must.All other tags are optional.If you dono't
specify the width and height property the image dimesion is calculated
automatically.If you don't specify the width and height property the image resized in
the browser while displaying. If the width and height property is not specified then
the browser will take a little longer time to display the image as it has to calculated
the values, so it is better to specify them at design time.
Other properties the<IMG> tag are ALT and LOSRC.The ALT property is used to
specify the text that will appear if the image cannot be shown in the page or when
the mouse moves will be loaded before the actual high-resolution image is
loaded .This property is used when low source image instead of a blank page before
the large image appears.
The format will be something like this:
Example:
<IMG SRC="image/picture.gif width="150" height="30" ALT="Home Buttom"
lowsrc="images/smalliamge.gif">

Forms in a HTML document

Forms are used in a web page to collect information form the user .Generally user
cannot write or edit a web page in the browser but in a form he can type and enter
data,which can be collect by the web site owner.
For example a from can be used to accept the username and password of a user to
log him onto the system or to take his details for any other purpose.

Tags for inserting a form


A form is inserted into a web page using the <FORM> and</FORM>tag.All the
elements of a form tag are put between these tags inside the <INPUT >tag.The Type
property of the <INPUT>tag determines the type of form element it is.For example
<INPUT TYPE="text"> will be a text box and <INPUT TYPE="password">will be a
password box.The <INPUT>Tag doesnot have a closing tag.
All types of form fields are inserted using the <INPUT>Tag except the Drop Down
and list Box.These are enclosed between <Select> and </select>tags.The list items
are placed between these tags.Each list item is enclosed between a pair of <Option>
and </option>tags.

The type of elements in a form

<INPUT>Tag
From Element Description
Type
Text Box Text Field where the user can enter any text
Password Box Password Field where the user can enter password
Field where the user can enter multiple line of
Text Area Textarea
text
Filed where the user can check one or more of
Check box Checkbox
available option
Filed where the user can select any one of
Radio Button Radio
available option
Button Button Command buttton used to enter a command
Submit Button Submit Command button used to submit the form
Reset Button Reset Command button used to reset the form
Drop Down Box Filed where the user can select an item from the
drop down menu
Field where the user can select one or more
List Box
items from a list

Example

here is a blank web page with only a from

<HTML>
<HEAD>
<TITLE>Form Page</TITLE>
</HEAD>
<BODY>
<form>
Full Name:<INPUT TYPE="text" NAME="name"><br>
Gender:<INPUT type="radio" name="gender" value="male">Male<input
type="radio" name="Gender" value="female">Female<br>
Age Group:<select name ="age">
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
</select>
<Input type="submit" value="submit form"<input type="reset" value="reset
From">
</form>
</body>
</html>

From Elements and their properties

<FORM>Tag properties

Property Value
NAME Name of the Form
How the form data will be
METHOD
sent(Get or Post)
The script or program file that
ACTION
will handle the form data

Text Field/Password Field/File Field

Property Value
NAME Name of the Field
Width of field in number of
SIZE
characters
Themaximum number of
MAXLENGTH character allowed (Including
space)

Check BOX/Radio Button(INPUT TYPE="CHECKBOX"><INPUT TYPE="RADIO ">


Property Value
Name of the check box/radio
NAME
button
VALUE Value to pass when checked
Doesnot have a value,the box
CHECKED
will appear checked initially

BUTTON /SUBMIT BUTTON /RESET BUTTON

<input type="button">/<input type="submit">/<input type "reset">

Property Value
NAME Name of the Button(optional)
VALUE Text on the button face

Hidden field <input type ="hidden">

Property Value
NAME Name of the field
VALUE value of pass

Drop Down/List Box<select><option></select>

<Select> Tag

Property Value
NAME Name of the field
SIZE Number of lines in the list box .

<option>Tag

Property Value
Value to be passed when
VALUE
selected
Doesnot have a value,appears
SELECTED
selected initially

Text Area<textarea></textarea>
Property Value
NAME Name of the field
Height of the field in number of
ROWS
line
Width of the field in number of
COLS
characters
Type of text wrapping[off,virtual
WRAP
or physical]
Frame

Until now watch web page when opened takes over the entire browser screen. The
browser screen could not be split into separate(unique) sections, showing different
but related information.

The HTML tags that divide a browser screen into two or more HTML recognizable
unique region is the <FRAMESET></FRAMESET> tags. Each unique region is called a
frame. Each frame can be loaded with a different document and hence, allow
multiple HTML documents to be seen concurrently.

The HTML frame is a powerful feature that enables a web page to be broken into
different unique section that, although related ,operate independently of each other.

The <FRAMESET> Tag

The splitting of a browser screen into frames is accomplished with the <FRAMESET>
and </FRAMESET> tags embedded into the HTML document .The
<FRAMESET></FRAMESET>tags require one of the following two attributes
depending on whether the screen has to be divided into rows and columns.

ROWS This attribute is used to divide the screen into multiple rows. It
can be set equal to a list of values. Depending on the require
size of each row. The values can number of pixel, percentage
of screen resolution and the symbol of * which indicates the
remaining space of the screen
COLS This attribute is used to divide the screen into multiple
columns. It can be set equal to a list of values. Depending on
the require size of each Columns. The values can number of
pixel, percentage of screen resolution and the symbol of *
which indicates the remaining space of the screen

Example

<FRAMESET ROWS="33%,33%,33%>

<FRAMESET COLS="50 %,50%">

</FRAMESET>

<FRAMESET COLS="50%,50%">

</FRAMESET>

</FRAMESET>

The <FRAME> Tag

Once the browser screen is divided into rows(Horizontal sections)and columns


(Vertical Sections),Each unique section defined can be loaded with different HTML
documents.This is achieved by using the <FRAME>tag,which takes in the following
attributes :
Properly Value
SRC Indicates the URL of the document to be loaded into the frame.
Specifies the amount the amount of white space to be left at
MARGINHEIGHT
top and bottom of the frame
Specified the amount of white space to be along the sides of the
MARGINWIDTH
frame
Gives the frame a unique name so it can be targeted by other
NAME documents.The name given must begin with an Alphanumeric
character.
NORSIZE Disables the frames resizing capability
Controls the appearance of horizontall and vertical scrollbars in
SCROLLING
a frame.This takes the values YES/NO/AUTO

Example
<FRAMESET ROWS="30%,*">

<FRAMESET COLS="50%,50%">

<FRAME SRC="file1.htm">

<FRAME SRC="file2.htm">

</FRAMESET>

<FRAMESET COLS="50%,50%">

<FRAME SRC="file3,htm">

<FRAME SRC="file4.htm">

</FRAMESET>

</FRAMESET>

HTML is a language for designing

You might also like