Download presentation
Presentation is loading. Please wait.
1
Introduction to HTML
2
Contents Getting Started.. What is HTML? How to create and View an HTML document? Basic HTML Document Format The HTML Basic tags
3
What the following term mean:
Web server: a system on the internet containing one or more web site Web site: a collection of one or more web pages Web pages: single disk file with a single file name Home pages: first page in website Think about the followings before working your Web pages. Think about the sort of information(content) you want to put on the Web. Set the goals for the Web site. Organize your content into main topics. Come up with a general structure for pages and topics.
4
What is HTML? Telling the browser what to do, and what properties to use. A series of tags that are integrated into a text document. Tags are ; surrounded with angle brackets like this: <B> or <I>. Most tags come in pairs exceptions: <P>, <br>, <li> tags … The first tag turns the action on, and the second turns it off.
5
The second tag(off switch) starts with a forward slash.
For example ,<B> text </B> can be embedded, for instance, to do this: <HEAD><TITLE> Your text </HEAD></TITLE> it won't work. The correct order is <HEAD><TITLE> Your text </TITLE></HEAD> not case sensitivity. Many tags have attributes. For example, <P ALIGN=CENTER> centers the paragraph following it. Some browsers don't support the some tags and some attributes.
6
Basic HTML Document Format
<HEAD> <TITLE>WENT'99</TITLE> </HEAD> <BODY> Went'99 </BODY> </HTML> See what it looks like:
7
How to Create and View an HTML document?
1.Use an text editor such as Notepad to write the document. 2.Save the file as filename.html on a PC. This is called the Document Source. 3.Open Internet Explorer (or any browser) Off-Line. 4.Click on File, Open File and select the filename.html document that you just created. 5.Your HTML page should now appear just like any other Web page in explorer.
8
7.You may now switch back and forth between the Source and the HTML Document
switch to Notepad with the Document Source make changes save the document again switch back to explorer. click on REFRESH and view the new HTML Document switch to Notepad with the Document Source......
9
Tags in head <HEAD>...</HEAD>-- contains information about the document <TITLE>...</TITLE>-- puts text on the browser's title bar.
10
Tags in Body Heading: <H1> </H1>
Center:<Center> </Center> Line Break <P> ,<Br> Phrase Markups: <I></I> ,<B></B> Moving Text: <marquee></marquee> Information tag: <meta></meta> Horizontal line: <hr></hr> Create a List Unordered list : <UL><li> Ordered list: <OL><li> Nested
11
Hyperlink <a href = "
12
Internal Linking <h1 id = "bugs“> Favourite Bugs</h1>
<a href = "#bugs">Go to Favourite Bugs</a>
13
Embedding Images <IMG> tag – SRC = “url” – BORDER = n
– WIDTH=n (in pixels) – HEIGHT=n (in pixels) – ALT=“Alternate Text” <IMG SRC =“deitel.gif“ WIDTH="100" HEIGHT=“100“ align= “right” ALT= “image not present” >
14
Images as link Images when put in the anchor tag act as hyperlinks.
<A HREF=“Mypage.html"> <IMG SRC=“deitel.gif“ > </A>
15
<BODY BACKGROUND=bgimg.gif >
How to make colors changes? Hexadecimal number : Color names : <Font color=white> Changing the Background color <BODY BGCOLOR=#19378a> Changing Text color <BODY BGCOLOR=#19378a TEXT=#ffffff LINK=#ffff VLINK=#66ffff> Image Background <BODY BACKGROUND=bgimg.gif >
16
HTML Frames The Frameset Tag
The <frameset> tag defines how to divide the window into frames Each frameset defines a set of rows or columns The values of the rows/columns indicate the amount of screen area each row/column will The Frame Tag The <frame> tag defines what HTML document to put into each frame
17
Example:1 <frameset cols="25%,75%"> <frame src="frame_a.html“ noresize=“noresize” scrolling=“yes”> </frameset> <noframes> This browser is not supporting frames </noframes>
18
Example:2 <HTML> <FRAMESET COLS="40%,*">
<FRAMESET ROWS="35%,*"> <FRAME SRC="Cell1.htm"> <FRAME SRC="Cell2.htm"> </FRAMESET> <FRAME SRC="Cell3.htm"> </HTML>
19
HTML Tables <table border="1"> <thead> <tr>
<th>Heading</th> <th>Another Heading</th> </tr> </thead> <tbody> <td>row 1, cell 1</td> <td>row 1, cell 2</td> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </tbody> </table>
20
How it looks in a browser:
Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 <th rowspan=“2”>xyz </th> <th colspan=“4”>xyz </th> Row Spanning Column Spanning
21
HTML Forms and Input Forms Text Fields
HTML Forms are used to select different kinds of user input. Forms <form> <input> </form> Text Fields First name: <input type="text" name="firstname“ size=“10” value=“ abc” maxlength=“8”> <br> Last name: <input type="text" name="lastname" value=“xyz”>
22
Radio Buttons Checkboxes <form>
<input type="radio" name="sex" value="male"> Male <br> <input type="radio" name="sex" value="female"> Female </form> In above code both radio buttons have same name so at a time we can select only one button among these two. Checkboxes <input type="checkbox" name="bike">I have a bike <input type="checkbox" name="car">I have a car In checkbox multiple selection is allowed
23
Form's Action Attribute and the Submit Button
<form name="input" action="html_form_action.asp“ method="get"> <input type=“button" value=“button1"> <input type="submit" value="Submit"> <input type=“reset" value=“Reset"> <input type=“hidden" value=“Hide"> <input type=“password" value=“pswd"> </form>
24
Option <html> <body> <form>
<select name="cars"> <option value="volvo“ selected>Volvo <option value="saab">Saab <option value="fiat">Fiat <option value="audi">Audi </select> <textarea rows=“4” cols=“5”>abcxyz</textarea> </form> </body> </html>
25
Some other tags: <del> <strong> <sup> <sub>
<-> lass than >-> greater than ©-> © &-> &
26
Thank You
Similar presentations
