HYPER TEXT MARKUP LANGUAGE

What is HTML?
y y y y y HTML is a language for describing web pages. 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 Tags y y y y y 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 = Web Pages y y y HTML documents describe web pages HTML documents contain HTML tags and plain text HTML documents are also called web pages

The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:
Example

<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
Example Explained

The text between <html> and </html> describes the web page The text between <body> and </body> is the visible page content The text between <h1> and </h1> is displayed as a heading The text between <p> and </p> is displayed as a paragraph

.HTM or .HTML File Extension? When you save an HTML file, you can use either the .htm or the .html file extension.

<title> The <title> tag defines the title of the document. provide meta information. tables. Syntax: <body background="value"> BGCOLOR: The bgcolor attribute specifies the background color of a document. <head> The head element is a container for all the head elements. Syntax: <body text="value"> LINK: The link attribute specifies the default color of unvisited links in a document. lists. <font> . images. <!--This is a comment. instruct the browser where to find style sheets. <link>. etc. <script>.The following are the different tags used in a HTML page 1.Syntax: <body vlink="value"> 6. Elements inside <head> can include scripts. <html> The <html> tag tells the browser that this is an HTML document. The title element: y defines a title in the browser toolbar y provides a title for the page when it is added to favorites y displays a title for the page in search-engine results 5. and <title>. and more.--> The comment tag is used to insert a comment in the source code. which can help you when you edit the source code at a later date. Syntax : <body bgcolor="value"> TEXT: The text attribute specifies the color of the text in a document. <meta>. Attributes of BODY TAG: BACKGROUND: The background attribute specifies a background image for a document. The html element is the outermost element in HTML and XHTML documents. hyperlinks. Syntax: <body link="value"> VLINK: The vlink attribute specifies the color of visited links in a document . <style>. such as text. <body> The body element defines the document's body. 3. 2.The body element contains all the contents of an HTML document. You can use comments to explain your code. 4. The following tags can be added to the head section: <base>. The html element is also known as the root element. A comment will be ignored by the browser.

Syntax : <font face="value"> SIZE: The size attribute specifies the size of the text inside a font element. Heading tags (<h1>to<h6>) The <h1> to <h6> tags are used to define HTML headings. Syntax : <font color="value"> FACE: The face attribute specifies the font of the text inside a font element. Emphasized words appear in italics when Web-page is shown.The font tag specifies the font face. font size. Pre-formatting Text(<pre>&</pre>) . 10. Syntax: <sup>text</sup> 9. The µp¶ element automatically creates some space before and after itself. Attributes of FONT TAG: COLOR: The color attribute specifies the color of the text inside a font element. Paragraphs(<p>&</p>) The <p> tag defines a paragraph. Emphasis(<em>&</em>) To emphasis certain words in paragraphs. 13. The space is automatically applied by the browser. or you can specify it in a style sheet. Subscript text can be used for chemical formulas. Syntax: <font size="value"> 7. Non-Breaking Spaces(&nbsp) When you want to keep words together. simply enclose them between an <em> tag and an </em> tag. Superscript text can be used for footnotes. Line Breaks(<br />) The <br> tag inserts a single line break. like WWW[1]. Subscript text appears half a character below the baseline. You indicate a nonbreaking space character by placing ³&nbsp´. <h1> defines the largest heading and <h6> defines the smallest heading. The <br> tag is an empty tag which means that it has no end tag. even though a space character separates them in that case use a non-breaking space in place of normal space character. Superscript text appears half a character above the baseline. like H2O. Scripting tags Subscript: The <sub> tag defines subscript text. 12. 8. Syntax : <sub>text</sub> Superscript: The <sup> tag defines superscript text. 11. in your HTML page. and font color of text.

white cold drink</dd> </dl> HTML code above looks in a browser as follows: OUTPUT: Coffee . Ordered lists and Definition lists.The <pre> tag defines preformatted text.The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list) EX: <dl> <dt>Coffee</dt> <dd>. Text in a pre element is displayed in a fixedwidth font (usually Courier). EX: <ol> <li>Coffee</li> <li>Milk</li> </ol> HTML code above looks in a browser as follows: OUTPUT: 1. Creating Lists In HTML there are 3 different types of Lists: Unordered lists. Each list item starts with the <li> tag. EX: <ul> <li>Coffee</li> <li>Milk</li> </ul> HTML code above looks in a browser as follows: OUTPUT: y y Coffee Milk HTML Ordered Lists An ordered list starts with the <ol> tag.white cold drink .black hot drink</dd> <dt>Milk</dt> <dd>. Milk HTML Definition Lists A definition list is a list of items. Each list item starts with the <li> tag. with a description of each item.black hot drink Milk . Coffee 2. 14. The list items are marked with numbers. HTML Unordered Lists An unordered list starts with the <ul> tag. The list items are marked with bullets (typically small black circles). The <dl> tag defines a definition list. and it preserves both spaces and line breaks.

HTML Hyperlinks (Links) A hyperlink (or link) is a word.The target Attribute The target attribute specifies where to open the linked document. The "Link text" doesn't have to be text. create a link to the "Useful Tips Section" from another page: <a href="http://www.Clicking on this hyperlink will send the user to W3Schools' homepage.The <a> tag can be used in two ways: 1. 16. group of words. EX: A named anchor inside an HTML document: <a name="tips">Useful Tips Section</a> Create a link to the "Useful Tips Section" inside the same document: <a href="#tips">Visit the Useful Tips Section</a> Or. When you move the cursor over a link in a Web page. by using the href attribute 2. HTML The <img> Tag and the Src Attribute . EX: <a href="http://www.The name Attribute The name attribute specifies the name of an anchor. HTML Link Syntax: The HTML code for a link is simple. You can link from an image or any other HTML element.w3schools. the arrow will turn into a little hand.com/html_links. Links are specified in HTML using the <a> tag. HTML Links . by using the name attribute 1. or image that you can click on to jump to a new document or a new section within the current document.15. it goes to the top of the document. They are invisible to the reader. HTML Links . It looks like this: <a href="url">Link text</a> The href attribute specifies the destination of a link. To create a bookmark inside a document. Bookmarks are not displayed in any special way.w3schools.htm#tips"> Visit the Useful Tips Section</a> NOTE: If a browser does not find the named anchor specified.com/">Visit W3Schools</a> which will display like this: Visit W3Schools. The name attribute is used to create a bookmark inside an HTML document. 2. To create a link to another document. No error occurs.

other tables. cell 2</td> </tr> </table> The HTML code above looks in a browser as follows: OUTPUT: row 1. The value of the src attribute is the URL of the image you want to display. The value of the alt attribute is an author-defined text: EX: <img src="boat. The Src Attribute To display an image on a page. if the image cannot be displayed. and each row is divided into data cells (with the <td> tag). which means that it contains attributes only. The <img> tag is empty. links. cell 1</td> <td>row 2. EX: <table border="1"> <tr> <td>row 1. cell 1 row 1. etc. an error in the src attribute. The Alt Attribute The required alt attribute specifies an alternate text for an image.gif. cell 2</td> </tr> <tr> <td>row 2." and holds the content of a data cell. forms.A table is divided into rows (with the <tr> tag). images are defined with the <img> tag.w3schools. images. or if the user uses a screen reader). Src stands for "source". you need to use the src attribute. cell 1</td> <td>row 1.com" has the URL: http://www. 17. and has no closing tag. located in the "images" directory on "www.w3schools. Syntax: <img src="url" alt="some_text"/> The URL points to the location where the image is stored. EX: An image named "boat. cell 1 row 2. lists. cell 2 row 2. td stands for "table data.gif".gif" alt="Big Boat" /> The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection.In HTML.com/images/boat. A <td> tag can contain text. cell 2 HTML Table Headers . HTML Table(<table>&</table>) Tables are defined with the <table> tag.

cell 1</td> <td>row 2. the table will be displayed without borders. Sometimes this can be useful. cell 2</td> </tr> </table> The HTML code above looks in a browser as follows: OUTPUT: The Border Attribute If you do not specify a border attribute. textarea. Syntax: The <form> tag is used to create an HTML form: <form> . input elements .The Input Element . </form> HTML Forms . cell 2</td> </tr> <tr> <td>row 2. we want the borders to show. EX: <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1. radio-buttons. The text in a th element will be bold and centered. fieldset and label elements.A form can contain input elements like text fields. EX: <table border="1"> HTML Forms HTML forms are used to pass data to a server. but most of the time. cell 1</td> <td>row 1. A form can also contain select lists.Header information in a table are defined with the <th> tag. checkboxes. submit buttons and more.

EX: <form> Password: <input type="password" name="pwd" /> </form> The HTML code above looks in a browser as follows: OUTPUT: Note: The characters in a password field are masked (shown as asterisks or circles). . Radio Buttons <input type="radio" /> defines a radio button. checkbox. submit button. Also note that the default width of a text field is 20 characters.The most important form element is the input element. depending on the type attribute. radio button. An input element can be of type text field. The most used input types are described below: Text Fields <input type="text" /> defines a one-line input field that a user can enter text into. An input element can vary in many ways. The input element is used to select user information. password. EX: <form> First name: <input type="text" name="firstname" /><br /> Last name: <input type="text" name="lastname" /> </form> The HTML code above looks in a browser as follows: OUTPUT: Note: The form itself is not visible. Radio buttons let a user select ONLY ONE one of a limited number of choices. and more. Password Field <input type="password" /> defines a password field.

.EX: <form> <input type="radio" name="sex" value="male" /> Male<br /> <input type="radio" name="sex" value="female" /> Female </form> The HTML code above looks in a browser as follows: OUTPUT: Check Boxes <input type="checkbox" /> defines a checkbox. EX: <form> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /> <input type="checkbox" name="vehicle" value="Car" /> I have a car </form> The HTML code above looks in a browser as follows: OUTPUT: Submit Button <input type="submit" /> defines a submit button. Checkboxes let a user select ONE or MORE options of a limited number of choices.

In the example below we have a frameset with two columns: The first column is set to 25% of the width of the browser window. you can display more than one HTML document in the same browser window. The document "frame_a. Each HTML document is called a frame.75%"> <frame src="frame_a. and one of the columns can be set to use the remaining space. The second column is set to 75% of the width of the browser window.htm" is put into the second column: <frameset cols="25%. and the document "frame_b. The file defined in the action attribute usually does something with the received input. with an asterisk (cols="25%.A submit button is used to send form data to a server.500").htm" is put into the first column. CASCADING STYLE SHEETS (CSS) .*").htm" /> </frameset> Note: The frameset column size can also be set in pixels (cols="200. The HTML frameset Element The frameset element holds two or more frame elements. The data is sent to the page specified in the form's action attribute. and each frame is independent of the others. The HTML frame Element The <frame> tag defines one particular window (frame) within a frameset. The frameset element states only HOW MANY columns or rows there will be in the frameset. Each frame element holds a separate document. EX: <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form> The HTML code above looks in a browser as follows: OUTPUT: HTML Frames With frames.htm" /> <frame src="frame_b.

and stored in a separate CSS file. 2. To solve this problem. all formatting could be removed from the HTML document. Each declaration consists of a property and a value.0 to solve a problem External Style Sheets can save a lot of work External Style Sheets are stored in CSS files. The property is the style attribute you want to change. In HTML 4.2 specification. and one or more declarations: 1. Development of large web sites. and color attributes were added to the HTML 3.0. Each property has a value. like: <h1>This is a heading</h1> <p>This is a paragraph. What is CSS? y y y y y CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.HTML was intended to define the content of a document. the World Wide Web Consortium (W3C) created CSS. became a long and expensive process. where fonts and color information were added to every single page. CSS Syntax A CSS rule has two main parts: a selector. CSS Example . it started a nightmare for web developers.HTML was never intended to contain tags for formatting a document. 3.</p> When tags like <font>. All browsers support CSS today. The selector is normally the HTML element you want to style.

} Three Ways to Insert CSS There are three ways of inserting a style sheet: .text-align:center.</p> </body> </html> OUTPUT: Hello World! This paragraph is styled with CSS. and may help you when you edit the source code at a later date. A CSS comment begins with "/*". and declaration groups are surrounded by curly brackets: EX: p{color:red. like this: /*This is a comment*/ EX: p{text-align:center.CSS declarations always ends with a semicolon. you can put one declaration on each line. like this: p { color:red. CSS Comments Comments are used to explain your code. } EX: <html> <head> <style type="text/css"> p{color:red.} To make the CSS more readable. text-align:center.text-align:center. Comments are ignored by browsers. and ends with "*/".} </style> </head> <body> <p>Hello World!</p> <p>This paragraph is styled with CSS./*This is another comment*/color:black.font-family:arial.

like this: <head> <style type="text/css"> hr {color:sienna.} body {background-image:url("images/back40. Internal Style Sheet An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page.gif").} p {margin-left:20px.} </style> </head> Inline Styles .css extension.} Do not leave spaces between the property value and the units! "margin-left:20 px" (instead of "margin-left:20px") will work in IE.css" /> </head> An external style sheet can be written in any text editor. Each page must link to the style sheet using the <link> tag.gif"). An example of a style sheet file is shown below: hr {color:sienna. by using the <style> tag. you can change the look of an entire Web site by changing one file. Your style sheet should be saved with a .} body {background-image:url("images/back40.y y y External style sheet Internal style sheet Inline style External Style Sheet An external style sheet is ideal when the style is applied to many pages.} p {margin-left:20px. The <link> tag goes inside the head section: <head> <link rel="stylesheet" type="text/css" href="mystyle. but not in Firefox or Opera. With an external style sheet. The file should not contain any html tags.

An inline style loses many of the advantages of style sheets by mixing content with presentation. font-size:20pt. text-align:right. The example shows how to change the color and the left margin of a paragraph: EX: <p style="color:sienna. Grouping Selectors .Inline style uses the style attribute in the relevant tag. For example. the values will be inherited from the more specific style sheet. text-align:left.</p> Multiple Style Sheets If some properties have been set for the same selector in different style sheets.margin-left:20px">This is a paragraph. The color is inherited from the external style sheet and the text-alignment and the fontsize is replaced by the internal style sheet. } And an internal style sheet has these properties for the h3 selector: h3 { text-align:right. an external style sheet has these properties for the h3 selector: h3 { color:red. The style attribute can contain any CSS property. font-size:8pt. } If the page with the internal style sheet also links to the external style sheet the properties for h3 will be: color:red. font-size:20pt.

p { color:green. In the example below we have grouped the selectors from the code above: h1.} p{color:green.In style sheets there are often elements with the same style. h1{color:green.h2. Separate each selector with a comma. } .} h2{color:green.} To minimize the code. you can group selectors.

Sign up to vote on this title
UsefulNot useful