HTML (Hyper Text Markup Language)

HTML (Hyper Text Markup Language)
HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages HTML markup tags are usually called HTML tags HTML tags are keywords surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag Start and end tags are also called opening tags and closing tags. HTML documents describe web pages HTML documents contain HTML tags and plain text HTML documents are also called web pages
Creating/editing HTML For creation and editing we use a plain text editor (like Notepad) to edit HTML. However, professional web developers often prefer HTML editors like FrontPage or Dreamweaver, instead of writing plain text. File name of HTML files When you save an HTML file, you can use either the .htm or the .html extension. We use .htm in our examples. It is a habit from the past, when the software only allowed three letters in file extensions. With new software it is perfectly safe to use .html.
First Tags

Every document should have starting tag <HTML> and ending tag </HTML> HTML document is divided into to divisions Header (Start with <HEAD> end with </HEAD>) Defines Header portion Body (Start with <BODY> end with </BODY>) Define Body portion
e.g. <html> <head> <Title>My First Page</Title> </head> <body> Content of My First Page </body> </html>
HTML TAGS
HTML TAGS
Basic Tags
<html></html> Creates an HTML document <head></head> Sets off the title and other information that isn't displayed on the Web page itself <body></body> Sets off the visible portion of the document
Header Tags
<title></title> Puts the name of the document in the title bar <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML, MY, ASP"> To define the special keyword for searching or other purpose <meta http-equiv="refresh" content="10"> This tag sequence is used to refresh the current page after specified seconds.
Body Attributes
<body bgcolor=?> Sets the background color, using name or hex value <body background=?> Sets the background with given image <body text=?> Sets the text color, using name or hex value <body link=?> Sets the color of links, using name or hex value <body vlink=?> Sets the color of followed links, using name or hex value <body alink=?> Sets the color of links on click <body topmargin="50"> Sets the top margin of the page <body leftmargin="50"> Sets the left margin of the page
HTML TAGS
Text Tags
<b></b> Creates bold text <u></u> Creates underlined text <i></i> Creates italic text <h1></h1> Creates the largest headline <h2></h2> <h3></h3> <h4></h4> <h5></h5> Creates the different size headline <h6></h6> Creates the smallest headline <pre></pre> Creates preformatted text <tt></tt> Creates teletype, or typewriter-style text <cite></cite> Creates a citation, usually italic <em></em> Emphasizes a word (with italic or bold) <strong></strong> Emphasizes a word (with italic or bold) <font size=?></font> Sets size of font, from 1 to 7) <font color=?></font> Sets font color, using name or hex value
Graphical Elements
<img src="name"> Adds an image <img src="name" alt="Picture detail"> Adds an image. The alt attribute specifies alternate text to be displayed if for some reason the browser cannot find the image. <img src="name" height=? width=?> Resize image with specified height and width <img src="name" align=?> Aligns an image: left, right, center; bottom, top, middle <img src="name" border=?> Sets size of border around an image
HTML TAGS
<hr> Inserts a horizontal rule <hr size=?> Sets size (height) of rule <hr width=?> Sets width of rule, in percentage or absolute value <hr noshade> Creates a rule without a shadow
Formatting
<div align=?> The <div> tag defines a division or a section in an HTML document. A generic tag used to format large blocks of HTML, also used for stylesheets. alignment can be left / right / center / justify. <p></p> Creates a new paragraph <p align=?> Aligns a paragraph to the left, right, or center <br> Inserts a line break <blockquote></blockquote> Indents text from both sides <dl></dl> Creates a definition list <dt> Precedes each definition term <dd> Precedes each definition e.g.
The Code: <dl> <dt>Aardvark <dd>An anteater. Animal with a very long snout. <dt>Orangutan <dd>A monkey with very long arms. <dt>Zebra <dd>A pony with stripes. </dl> Definition list: Aardvark An anteater. Animal with a very long snout. Orangutan A monkey with very long arms. Zebra A pony with stripes.
HTML TAGS
<ol></ol> Creates a numbered list <li></li> Precedes each list item, and adds a number
Ordered list: 5. Write a Business Plan 6. Obtain Licensing 7. Obtain Financing The Code: <ol type="1" start="5"> <li>Write a Business Plan <li>Obtain Licensing <li>Obtain Financing </ol> Ordered list: e. Write a Business Plan f. Obtain Licensing g. Obtain Financing The Code: <ol type="a" start="5"> <li>Write a Business Plan <li>Obtain Licensing <li>Obtain Financing </ol>
<ul></ul> Creates a bulleted list

Unordered list: The unordered list The ordered list The definition list The Code: <ul type="disc"> <li>The unordered list <li>The ordered list <li>The definition list </ul> Unordered list: The unordered list The ordered list The definition list The Code: <ul type="square"> <li>The unordered list <li>The ordered list <li>The definition list </ul>
Links
<a href="URL">Text</a> Creates a hyperlink <a href="URL" target="_blank">Text</a> Creates a hyperlink and link will be opened in new window <a href="mailto:EMAIL"></a> Creates a email link <a name="NAME"></a> Creates a target location within a document <a href="#NAME"></a> Links to that target location from elsewhere in the document
HTML TAGS
Tables
<table></table> Creates a table <tr></tr> Sets off each row in a table <td></td> Sets off each cell in a row <th></th> Sets off the table header (a normal cell with bold, centered text)
Table Attributes
<table border=#> Sets width of border around table cells <table cellspacing=#> Sets amount of space between table cells <table cellpadding=#> Sets amount of space between a cell's border and its contents <table width=# or %> Sets width of table in pixels or as a percentage of document width <tr align=?> or <td align=?> Sets alignment for cell(s) (left, center, or right) <tr valign=?> or <td valign=?> Sets vertical alignment for cell(s) (top, middle, or bottom) <td colspan=#> Sets number of columns a cell should span <td rowspan=#> Sets number of rows a cell should span (default=1) <td nowrap> Prevents the lines within a cell from being broken to fit
Frames
<frameset></frameset> Replaces the <body> tag in a frames document; can also be nested in other framesets <frameset rows="value,value"> Defines the rows within a frameset, using number in pixels, or percentage of w idth <frameset cols="value,value"> Defines the columns within a frameset, using number in pixels, or percentage of width <frame>
HTML TAGS 6
Defines a single frame or region within a frameset <noframes></noframes> Defines what will appear on browsers that don't support frames
Frames Attributes
<frame src="URL"> Specifies which HTML document should be displayed <frame name="name"> Names the frame, or region, so it may be targeted by other frames <frame marginwidth=#> Defines the left and right margins for the frame; must be equal to or greater than 1 <frame marginheight=#> Defines the top and bottom margins for the frame; must be equal to or greater than 1 <frame scrolling=VALUE> Sets whether the frame has a scrollbar; value may equal "yes," "no," or "auto." The default, as in ordinary documents, is auto. <frame noresize> Prevents the user from resizing a frame e.g. <HTML> <frameset rows="10%,50%"> <frame src="a.htm"> <frame src="b.htm"> </frameset><NOFRAMES></NOFRAMES> </HTML>
HTML TAGS
Forms
For functional forms, you'll have to run a CGI script. The HTML just creates the appearance of a form. A form is an area that can contain form elements. Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form. A form is defined with the <form> tag. <form> . . . </form> Creates forms Input The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly used input types are explained below. Text Fields Text fields are used when you want the user to type letters, numbers, etc. in a form. <form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form> How it looks in a browser:
First name: Last name:
Note that the form itself is not visible. Also note that in most browsers, the width of the text field is 20 characters by default. Password Input <input type="password" name="password"> Radio Buttons
HTML TAGS
Radio Buttons are used when you want the user to select one of a limited number of choices. <form> <input type="radio" name="sex" value="male"> Male <br> <input type="radio" name="sex" value="female"> Female </form> How it looks in a browser: Male Female Note that only one option can be chosen. Checkboxes Checkboxes are used when you want the user to select one or more options of a limited number of choices. <form> Hobbies : <input type="checkbox" name="chb1" value="Sports">Sports <br> <input type="checkbox" name="chb2" value="Reading">Reading <br> <input type="checkbox" name="chb3" value="Travelling">Travel </form>
How it looks in a browser:
Hobbies : Sports Reading Travel
HTML TAGS
Textarea (Multiple line text box) A multi-line text input control. A user can write text in the text-area. In a text-area you can write an unlimited number of characters. <form> <textarea rows="10" cols="30">The cat was playing in the garden. </textarea> </form>
The cat w as playing in the gard
Submit Button When the user clicks on the "Submit" button, the content of the form is sent to the server. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input. <form name="input" action=" submit.asp" method="post"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form> How it looks in a browser:
Username:
Submit
If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "submit.asp". The page will show you the received input. Reset Button <input type="reset"> Creates a Reset button
HTML TAGS 10
Simple Button Creates a button <form action=""> <input type="button" value="Hello world!"> </form> <input type="image" border=0 name="NAME" src="name.gif"> Creates a Submit button using an image Drop-Down / Combo (Selection from a List) <select name="NAME"></select> Creates a scrolling menu. Size sets the number of menu items visible before you need to scroll. <option value="Ajmer">Ajmer</option> Sets off each menu item
<form> Choose Car: <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form>
Choose Car :
Volvo
Fieldset This example demonstrates how to draw a border with a caption around your data.
<fieldset> <legend>Health information:</legend> <form action=""> Height <input type="text" size="3"> Weight <input type="text" size="3"> </form> </fieldset>
HTML TAGS
11
Sending Email
<form action="MAILTO:someone@w3schools.com" method="post" enctype="text/plain"> This form sends an e-mail to W3Schools.<br> Name:<input type="text" name="name" value="amit"><br> Mail:<input type="text" name="mail" value="A@b.com"><br> Comment:<input type="text" name="comment" value= "Text"><br> <input type="submit" value="Send"> <input type="reset" value="Reset"> </form>
HTML TAGS
12
Sample Registration Page
<HTML> <HEAD> <TITLE>Registration Page</TITLE> </HEAD> <BODY> <FORM NAME="form1" METHOD="post" ACTION="thanks.htm"> <P><B><FONT SIZE="4">Registration Form </FONT></B></P> <TABLE BORDER="1"> <TR><TD>Name</TD><TD><INPUT TYPE="text" NAME="Name" SIZE="50"></TD></TR> <TR><TD>Sex</TD><TD><INPUT TYPE="radio" NAME="Sex" VALUE="Male">Male <INPUT TYPE="radio" NAME="Sex" VALUE="Female">Female</TD></TR> <TR><TD>Address</TD><TD><TEXTAREA NAME="Address"></TEXTAREA></TD></TR> <TR><TD>City</TD><TD><SELECT NAME="City"> <OPTION VALUE="Ajmer">Ajmer</OPTION> <OPTION VALUE="Jaipur">Jaipur</OPTION> <OPTION VALUE="Bikaner">Bikaner</OPTION> </SELECT></TD></TR> <TR><TD>Email</TD><TD><INPUT TYPE="text" NAME="Email" SIZE="25"></TD></TR> <TR><TD>Hobbies</TD><TD><INPUT TYPE="checkbox" NAME="chb1" VALUE="Sports">Sports <INPUT TYPE="checkbox" NAME="chb2" VALUE="Travelling">Travelling <INPUT TYPE="checkbox" NAME="chb3" VALUE="Reading">Reading <INPUT TYPE="checkbox" NAME="chb4" VALUE="Other">Other </TD></TR> <TR><TD>Photo</TD><TD><INPUT TYPE="file" NAME="file"></TD></TR> </TABLE> <P><INPUT TYPE="submit" NAME="Submit" VALUE="Submit"> <INPUT TYPE="reset" NAME="Reset" VALUE="Clear Form"></P> </FORM> </BODY> </HTML>
HTML TAGS
13
Misc
Entities < is the same as < > is the same as > © is the same as Other Elements  Indent <blockquote> Text quoted from some source. </blockquote> Address <address> Address 1<br> Address 2<br> City<br> </address>
HTML TAGS
14

HTML (Hyper Text Markup Language)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML (Hyper Text Markup Language)

Uploaded by

Copyright:

Available Formats

HTML (Hyper Text Markup Language)

<ul></ul> Creates a bulleted list

Hobbies : Sports Reading Travel

Sample Registration Page

You might also like