HTML for dummies

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 langauge.
It can now have images,animations,multimedia contents and even interactive application.

html for dummies

 

What is HTML ?
Most HTML tags have two parts the strarting tag that indicates the start of text or formatting and the closing tag that indicates the end of text of formatting .
The closing tag is the same as the starting tag,the only differneces is that it begins with a / just after the < sign

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 TagClosing TagUse
<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.

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 propeties.
Propeties                           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                        width Width of line in pixel or percent
align alignment[left,center and right]
Color Color or line(IE only)
size size of the Horizontal line
<Font> Tag                     Font face
Font size
Font color

List tags and their us

Opening TagClosing TagUse
<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>noneInsert 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 ro justify)

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

<body>
<p><strong>Computer Course</strong> </p>
<ol start=”5″ type=”i”>
<li>Java</li>
<li>Oracle</li>
<li>C++</li>
<li> HTML</li>
<li>Javascript</li>
</ol>
</body>
</html>


img tag properties

PropertyValue
SRCLocation of the image(e.g.”c:\windows\circle.gif”)
WIDTHWidth of the image in pixel
HEIGHTHeight of the image in pixel
ALTAlternate or tool-tip text
VSPACESpace to the right and left of image in pixels
HSPACESpace to the right and left of image in pixels
NAMEName of the image.
LOWSRCLocation of a lower resolution image
ALIGNAlignment of text with imag.(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 </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).
Tables are used in web pages to arrange the layout and /or to display tabular data.

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

PropertyValue
WIDTHWidth of table /cell in pixel or percent
HEIGHTHeight of table/cell in pixel or percent
BGCOLORBackground color of table/cell
BACKGROUNDBackground image of table/cell

<Table> Tag only

PropertyValue
BORDERThickness of table border in pixel
BORDERCOLORColor of table border
CELLSPACNINGSpace between cells in pixel
CELLPADDINGSpace between cell border and 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 from

From Element<INPUT>Tag TypeDescription
Text BoxTextField where the user can enter any text
Password BoxPasswordField where the user can enter password
Text AreaTextareaField where the user can enter multiple line of text
Check boxCheckboxFiled where the user can check one or more of available option
Radio ButtonRadioFiled where the user can select any one of available option
ButtonButtonCommand buttton used to enter a command
Submit ButtonSubmitCommand button used to submit the form
Reset ButtonResetCommand button used to reset the form
Drop Down BoxFiled where the user can select an item from the drop down menu
List BoxField where the user can select one or more 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

PropertyValue
NAMEName of the Form
METHODHow the form data will be sent(Get or Post)
ACTIONThe script or program file that will handle the form data

Text Field/Password Field/File Field

PropertyValue
NAMEName of the Field
SIZEWidth of field in number of characters
MAXLENGTHThemaximum number of character allowed (Including space)

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

PropertyValue
NAMEName of the check box/radio button
VALUEValue to pass when checked
CHECKEDDoesnot have a value,the box will appear checked initially

BUTTON /SUBMIT BUTTON /RESET BUTTON

<input type=”button”>/<input type=”submit”>/<input type “reset”>

PropertyValue
NAMEName of the Button(optional)
VALUEText on the button face

 

Hidden field <input type =”hidden”>

PropertyValue
NAMEName of the field
VALUEvalue of pass

 

 

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

<Select> Tag

PropertyValue
NAMEName of the field
SIZENumber of lines in the list box .

<option>Tag

PropertyValue
VALUEValue to be passed when selected
SELECTEDDoesnot have a value,appears selected initially

Text Area<textarea></textarea>

PropertyValue
NAMEName of the field
ROWSHeight of the field in number of line
COLSWidth of the field in number of characters
WRAPType of text wrapping[off,virtual or physical]

Frame

Until now wach web page when opend 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 realated ,operate independently of each other.

The <FRAMESET> Tag

The spliting 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 whethher the screen has to be divided into rows and columns.

ROWSThis 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
COLSThis 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 :

ProperyValue
SRCIndicates the URL of the document to be loaded into the frame.
MARGINHEIGHTSpecifies the amount the amount of white space to be left at top and bottom of the frame
MARGINWIDTHSpecified the amount of white space to be along the sides of the frame
NAMEGives the frame a unique name so it can be targeted by other documents.The name given must begin with an Alphanumeric character.
NORSIZEDisables the frames resizing capability
SCROLLINGControls the appearance of horizontall and vertical scrollbars in 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>

***

12,711 total views, 1 views today

Comments

comments

Don't be selfish...Share on Facebook13Tweet about this on Twitter0Share on Google+1Email this to someonePin on Pinterest0Share on StumbleUpon0Share on LinkedIn0