HTML
A BOOK TO HELP YOU……(Basic ..Part I )
By Neha Chandel
HTML
Hypertext markup language.
Web pages can be created using Html, also called as the internet language. Hypertext refers to the content in a web page that including text, pictures and sound.
WEB BROWSER à Web browsers are capable of :
Displaying web pages containing text and pictures , playing sound and video files , Linking web pages.
Features of Web Browser
è Different web sites can be viewed at the same time by opening more than one web browser window.
è The frequently browsed web site addresses can be stored in the web browser.
è A web browser has options to move to the previous and next web pages.
è A web browser has options to save the web page and to print the web page.
Coding part……………………
An html document comprise of Html element. Html element are repersented by html tags. A web browser identifies each element by its tags. Tags are used to identify each element. Tqages enclose the name of elements with in angular brackets. Tags are not case sensitive. Html tags comprise of a left angular bracket or a less than symbol(<) followed by the name of the element and closed by a right angular bracket or a greater than symbol(>). For example, the HTML element tag will be written as <HTML>.
Structure of an HTML document
à Html
àHead
è Body
Html Element : <html >….<html>
Head element : <head>
<Title >Introduction to html </Title >
</head>
Body element : <body>…………</body>
=Setting backgrounds for a web page
To change background color = <body bg color=”blue” >
background color as images = <body bg color=”blue.jpg” >
Heading element
Html define six level of headings. A heading element can be used to specift all the font change
The heading sizes ranges from <H1> to <h6>. The codes given below will display the heading range.
<h1> heading 1</h1>
<h2> heading 2</h2>
<h3> heading 3</h3>
<h4> heading41</h4>
<h5> heading 5</h5>
<h6> heading 6</h6>
The Align Attribute
To align heading in center, left or right, html provide the align attribute. This attribute is specified with in the heading element the sample code given below will display the heading in the center
<h1 Align = “Center >” Heading 1 </h1>
The color attributeà < Font color =”Red”> this text is in red</font>
Line Break Element à <br>
Bold <b>this is bold text</b>
Underline element à <u> this is underline text</u>
Italics elementà <I>HTML </I>
Special effect ---- “<big> Tim burners –lee</big> at cern “
Subscript element:
H<SUB>2</SUB>o this show H2O
Superscript element: (power) 2<Sup>2</sup>=4
HORIZONTAL RULE ELEMENT
<hr Size = 5>
<hr width =45%>
<hr noshade>
<hr color =gray>
Comment à <comment> this is a comment entry and will not be displayed on the screen </comment>
Marquee
<body > <Marquee bgcolor=orange>welcome </marquee> </body>
<body > <Marquee Direction=left>welcome </marquee> </body>
<body > <Marquee Behavior= scroll >welcome </marquee> </body> (slide,alternate )
<body > <Marquee loop=2 > welcome </marquee> </body>
<body > <Marquee scrollamount=5> welcome </marquee> </body>
Creating Lists
Unordered List element :
<ul> OR <UL type = circle> ( square, fillround)
<Li>papaya
<Li>banana
<Li>apple
</ul>
ordered List element :
<OL> OR <OL type = 1> ( 1,a,I,i )
<Li>papaya
<Li>banana
<Li>apple
</OL>
Definition List element :
<DL> <DT> definition topic <DD> this this this and this is definition</DL>
HYPERTEXT:
<A Href =”My school.doc ”> School </A>
Image’s in web pages
Gif: Graphic Interchange formate.
Jpeg: joint photographic expert group.
à < Img src = “Globe.gif” align=left >
à < Img src = “Globe.gif” Border=5 >
Alt attribute:
The attribute is used for displaying alternate text that will be displayed in place of the image in case the image is not available.
à < Img src = “Globe.gif” ALT = “CANN’T Display” >
Audio in web pages
< Bgsound src =”barbie girl .mp3” >
< Bgsound src =”barbie girl .mp3” Loop=3>
< Bgsound src =”barbie girl .mp3” loop=Infinite>
Table
è Table Header: <TH>……….</th>
è Table row : <tr>…….</tr>
è Table data : <Td>……</td>
A simple data table codeing :
<.Table >
<tr>
<.Th>Name</th>
<th>class</th>
<th>section<./Th>
</tr>
<tr>
<.Th>neha</th>
<th>iv</th>
<th>a<./Th>
</tr>
<tr>
<.Th>amit</th>
<th>iii</th>
<th>b<./Th>
</tr>
</table>
NAME
|
Class
|
Section
|
Neha
|
iv
|
A
|
amit
|
III
|
B
|
Attributes of the table element :
è Align : <Table align=Center >(you can align the table to the left, right or center of the web pages. )
è Height : <Table align=Center Height=165 >
è Width : <Table align=Center Height=165 width =145 >
è BGCOLOR : <Table bgcolor =gray >
è Bordercolor : <Table bgcolor =gray border =4 bordercolor=red >
è Bordercolorlight: <Table bgcolor =gray border =4 bordercolor=red bordercolorlight=pink >
è Bordercolordark : <Table bgcolor =gray border =4 bordercolor=red bordercolordark=pink >
è Background : <table background =”sky.gif” >
Cellspacing attribute : <Table border=4 cellspacing=10>
Cellspacing attribute : <Table border=4 cellpadding=10>
Frames
Frames disply two or more web pages in a single web browser window. You need to create a frame document to create frames. A frame document resembles the HTML document except that the body element is replaced by a frameset container element. The structure of the frameset element is shown below.
<Html>
<Head>
<Title>this is my web</title>
</head>
<Frameset>……</frameset>
</html>
Frameset element
Rows : <frameset rows=”25%, 35%, 45%,45%”>….</frameset>
Cols : <frameset cols =”30%,25%,45%,60%”>….</frameset>
§ SRC – the src attribute accepts the url of an html document that need to be displayed within the frame.
<Frameset cols=”50%, 40%”>
<Frame src =”1st.html”>
<Frame src =”2st.html”>
</frameset>
§ Scrooling < frame src =”1st.html” scrolling=yes>
§ Noresize : when you want a frame not to be resized by the user. By default all frames are resizable.
Forms
the form element is a container element and its attributes are
1) Action – the action attribute is a URL that would refer to the program written to process the information .
2) Method – the method attribute is used for specifying how the contents in the form will be sent to the processing program.
In this we can add button lable textbox and so many other feature in this to make a beautiful web page.
A small code sample is as follow where we add a button which take us to a new page.
<FORM ACTION="http://url.you.want.to.go.to/" METHOD=GET>
<INPUT TYPE=submit VALUE="Text on button" NAME=foo>
</FORM>
<INPUT TYPE=submit VALUE="Text on button" NAME=foo>
</FORM>
The Web designing techniques
A part from HTML there are other techniques used to cerate Web pages. Many web sites support multimedia content and extensive user interactions. Elearning, Ecommerce and Egovernance have become common terms as Email. WEB Pages should be built using more powerful technology especially when the web sites support financial and commercial tracsactions. There are various web designing techniques prevalent in today’s Internet- driver world that effectively cater to multimedia requirements and user interactions.
è Dhtml
è Dreamweaver
è Flash
Web Publishing
The process by which web pages are made as part of the world wide web is called web publishing it also refers to the process of setting up a web site which will be a collection of HTML document as web pages. The web site is a set up on a server. This server is connected to the Internet. Different companies or organizations that own servers are called web hosts.
Prerequisites for web publishing
1) Setting the objectives
2) Identifying the target audience
Web hosting
One of the most important feature of web hosting company is to provide an address to the web page of site.
No comments:
Post a Comment