Sunteți pe pagina 1din 6


What is web page? A web page is the individual page of web site that have the extension of .html or . htm when the html page is consider row from then it is called source code of a page . On all most every computer there is program called browser the enterprise the source code or HTML file where display. HTML (Hyper text Markup Language) : HTML is a natural Language of web . It is used to create and design static page for webpage. This is generally used in webpage designing. Tag : HTML tag is pre-defined tag. It is used to particular type of work in web page designing. There are two types of tag . a) Container Tag b) Empty tag. HTML Tags : 1. HTML Tag : This tag defines the top-most element identifying it as an html document. Example: <html> ............. ............ </html> 2. HEAD : This tag contain information about HTML file. It may also contain other tag that help you to identify your HTML file to out side world. HEAD tag every time comes after HTML tag . Example: <html> <head> .......... .......... </head> </html> <head><title>.............</title> </head> ..... ..... </html> 4. BODY: This tag is the compliment of the HEAD tag and contains all of the tags or elements that a browser actually display as the body of your html document. Example: <html> <head><title>.............</title></head> <body> .......... .......... </body> </html> How to write HTML Programs? 1. Start Note pad. 2. Type page design code. 3. Save this file 4. File save as filename.html 5. Open the internet explorer browser . 6. File open browse button. 7. Choose your file name. 8. Click on ok button. Adding comments: The comments tag is used to insert a comment in the html source code. A comment will be ignored by the by the browser an we can used comments to explain our code which can help us when use edit the source <! -. -- >

3. TITLE: This tag nested within the head tag. It identify your page to rest of the world. The tag output is displayed on your browser s title bar but does not appear as part of the page. Example: <html>

NIIT Kathmandu Centre

Listing tag: This tag are used to prepare a list as information. It is two types: a) Ordered listing tag b) Unordered Listing tag Ordered listing tag : By using the order listing tag used create the heading and subheading a number wise is called ordered listing tag. Eg. : - <ol> tag, <li> tag <ol> :- Ol tag is a containing tag and is used to create and ordered list. <li>:- Li tag is an empty tag and used to create the list item of on ordered list. Example: <html> <head><title>Using Ordered listing tag</title> </head> <body> <ol> <li> Math <li> Nepali <li>English </ol> </body> </html> a) <li> Graphic <li> Designing </ol> <li> Nepali <li>English </ol> </body> </html> Unordered Listing Tag: By using the unordered listing tag as created by using the bulleted style. <UL> :- The <ul> tag is a container tag. It is used to create an ordered listing . Eg.:- <ul type= circle > <ul type= rectangle > Example: <html> <head><title>Using unordered listing tag</title> </head> <body> <ul> <li> web page <li> Nepali <li>English </ul> </body> </html> To add color Bullet <DL> <DD><img src= file name.gif > Web page <DD> <img src= file name.gif > HTML <DD><img src= file name.gif > DHTML </DL>

[NOTE: Display a,b no. type <ol type= a > and <ol start=5>] Example: <html> <head><title>Using Ordered listing tag</title> </head> <body> <ol> <li> web pag <ol type= a >

NIIT Kathmandu Centre

To change background color Syntax: <body bgcolor= color name > <body background= picture file name >
Font type: It is a container tag . it is to define the text, color, size, face etc.
Syntax: <font size=number color= color name face= font name >

HTML Rules (Lines) <HR> Tag: The <HR> Tag is used to create an horizontal Rule (line) Example: <p> This is a paragraph </p> <hr> HTML Line breaks: Use the <br> tag if you want a line break (a new line) without starting a new paragraph. It is empty html tag . it is no end tag. Example: <p> WEL COME TO MY WEB PAGE<BR> NIIT Kathmandu Centre.</p> HTML formatting tag HTML used tag like <b>, <i> ,<u>,<sub>and <sup> for formatting output, like bold, italic, subscript and superscript. These tags are called formatting tags. Example: <p> <b> This text is bold </b></p> <p> <i> This text is italic </i></p> <p> <sup> This text is superscript </sup></p> <p> <sub> This text is subscript</sub></p> <p> <u> This text is underline </u></p> HTML Images: The image tag and the src attribute In HTML images are defined with the <img> tag. It is empty tag Syntax: <img src= url > Example: 1) <img src= c:\..........\...........\ imagefile ( . .jpg) > 2) <img src= c:\........\........\ .. .jpg width=145 height=125 alt= any text > HTML Links: A link is the address to a document(or a resource) on the web. The HTML anchor element. <a> is used to define both hyperlinks and

. </font>

Example: <html> <head> <title>use font</title></head> <body> <font size=7 color= blue face= arial > NIIT kathmandu centre, Jamal </font> </body> </html> HTML Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading .<h6> defines the smallest heading. Example: <h1>This is a heading </h1> <h6>This is a heading </h6> <p> tag: (Paragraph) HTML Paragraph The <p> tag is used to create paragraph. Example: <p> .. ..</p>

NIIT Kathmandu Centre

anchors. The href attribute defines the link address. example: <a href= c:\........\........\... .html > News</a> Tables: Tables are defined with the <table> tag. A table is divided in to rows (with the <TR> tag) , and each row is divided into data cells (with the <td> tag). example: <table border=1> <tr> <td>Name</td> <td>Address</td> <td>Phone</td> </tr> <tr> <td>rajesh</td> <td>Kathmandu</td> <td>985472214</td> </tr> <tr> <td>Pooja</td> <td>Dharan</td> <td>980425655</td> </tr> </table> Heading in a table -> Heading in a table are define with the <th> tag. <table border=1> <tr> <th>Name</th> <th>Address</th> <th>Photo</th> </tr> <tr> <td>rajesh</td> <td>Kathmandu</td> <td><img src=""></td> </tr> To avoid this, add a non breaking space (&nbsp;) to empty data cells , to make the borders visible. Like this, <tr> <td>Rajesh</td> <td>&nbsp;</td> </tr> Note: 1. Table with no border=<table border=0> 2. Table with caption= <caption> ..............</caption> 3. Row/column span in table=<th colspan=2>....</th> <th rowspan=2>....</th> 4. cell spacing =<table border=1 cellspacing=10> 5. cell padding = <table border=1 cellpadding=10> 6. Align =<td align="left">..........</td> <td align="right">..........</td> <td align="center">..........</td> The Marquee Element: --> The marquee element allows the author to create a scrolling text marquee. example: 1) <Marquee>.....................</marquee> 2) <Marquee behavior="alternate"> ................</marquee> 3)<Marquee direction="right"> ................</marquee> HTML forms & input Forms: A form is an area that can contain form elements. A form is defined with the <form> tag syntax: <form> .............

NIIT Kathmandu Centre

.......... </form> --> Input (text field) The most used form tag is the <input>tag. The type of input is specified with the type attribute. Example: <form> First Name: <Input type="text"><br> Last Name: <Input type="Text"> </form> Note : <input type= password > to insert password. Radio Button: --> Radio button are used when you want the user to select one of a limited number of choices. Like "Male" & "Female". Example: <form> <input type="radio" name="sex" value="male">Male <input type="radio" name="sex" value="Female">Female </form> Check boxes: --> Check boxes are used when you want the user to select one or more option of a limited number of choices. example: <form> Language: <Input type="Checkbox" value="Nepali"> Nepali<br> <Input type="Checkbox" value="English">English<br> <Input type="Checkbox" value="Hindi">Hindi </form> Drop Down Box:

A drop-down box is a selectable list. Example : <select Name= year > <option value= 2000 >2000</option> <option value= 2001 >2001</option> <option value= 2002 >2002</option> <option value= 2003 >2003</option> <option value= 2004 >2004</option> </select>

Text area: In a text area you can write an unlimited number of characters. Example: <textarea rows=10 cols=30> </textarea> Submit button: When the user click on the Submit button the content of the form in sent to the server. Example: <input type= submit value= submit > HTML Color: Colors are displayed combining Red, Green and Blue. The lowest value that can be given to one of the light sources is 0. The highest value is 255. Hex values are written as 3 double digit numbers, starting with a # sign. Color Values: Color color Hex color RGB Black #000000 rgb(0,0,0) Red #ff0000 rgb(255,0,0) Green #00ff00 rgb(0,255,0) Blue #0000ff rgb(0,0,255)

NIIT Kathmandu Centre

Yellow #ffff00 rgb(255,255,0) </frameset> </html>

HTML Frames: With frames , you can display more than one web page in the same browse window. Example: <html> <frameset cols= 30%, 70% > <frame src= file name > <frame src= > </frameset> </html>

Horizontal Frameset: <html> <frameset row= 25%,50%,25% > <frame src= file name >

NIIT Kathmandu Centre