Вы находитесь на странице: 1из 26

HTML BASICS

GROUP 2 - ASSESSMENT 4

November 18, 2011

CONTENT OVERVIEW
HTML Origin and Versions HTML Introduction HTML Tags HTML Elements HTML Headings, Paragraphs & Links HTML Formatting HTML Lists HTML Images HTML Tables HTML Forms HTML Media Conclusion
November 18, 2011

HTML ORIGIN & VERSIONS


Physicist Tim Berners-Lee, in 1990, proposed and prototyped a system for European Organization for Nuclear Research (CERN) researchers to use and share documents. Berners-Lee specified HTML and wrote the browser and server software for rendering HTML documents towards the end of 1990. In the mid 1990s, the popularity of HTML soared and standardization of the same was done. Popular versions: HTML 2.0 November 1995. HTML 3.2 January 1997. HTML 4.0 December 1997. HTML 5.0 January 2008.
November 18, 2011

HTML - INTRODUCTION
HyperText Markup Language (HTML) is the predominant markup language for web pages. HTML elements are the basic building-blocks of web pages. HTML is written in the form of HTML elements consisting of tags, enclosed in angle brackets. Example: <html>

A series of tags that are integrated into a text document form the content of all HTML codes. HTML tells the browser what to do, and what props to use. The browser uses the tags to interpret the content of the page.

November 18, 2011

HTML TAGS
They are surrounded with angle brackets. Example: <> . They come in pairs, mostly. Example: <p> and </p> . The first tag turns an associated action on, and the second turns it off. The second tag(off switch) starts with a forward slash. Example: </b>. Tags are not case sensitive, i.e., <b> and <B> start the same action. Many tags have attributes. For example, <P ALIGN=CENTER> centers the paragraph following it.

November 18, 2011

HTML ELEMENTS
An HTML element is everything from the start tag to the end tag. An HTML element starts with a start tag / opening tag. An HTML element ends with an end tag / closing tag. The element content is everything between the start and the end tag. Some HTML elements have empty content. Empty elements are closed in the start tag.
Start tag <p> <a href="default.htm" > <br /> Element content New Paragraph New Link Empty End tag </p> </a> (Not Needed)
November 18, 2011

HTML HEADINGS, PARAGRAPHS & LINKS


HTML Headings: Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading. HTML Paragraphs: Paragraphs are defined with the <p> tag. Browsers automatically add an empty line before and after a paragraph. Use the <br /> tag if you need a line break (a new line) without starting a new paragraph. HTML Links: The HTML code for a link is <a href="url">Link text</a> .
November 18, 2011

HTML ELEMENTS - EXAMPLE


HTML CODE
<h1>Sample heading</h1> <h2>Sample heading</h2> <h3>Sample Heading</h3>

BROWSER OUTPUT

Sample Heading
Sample Heading
Sample Heading

<h4>Sample Heading</h4>
Sample Heading <h5>Sample Heading</h5>
Sample Heading

November 18, 2011

HTML ELEMENTS - EXAMPLE


HTML CODE
<a href="http://google.co.in> Search Here</a> <p>Sample paragraph.</p> <p>This is<br /> a<p> para</p>graph with line breaks.</p>

BROWSER OUTPUT
Search Here

Sample Paragraph. This is a para graph with line breaks.


November 18, 2011

HTML FORMATTING
HTML CODE
<b>This text is bold</b> <i>This text is italic</i> <u>This text is underlined</u> <code>This is computer output</code> <b><i>This text is both bold and italic</b></i>

BROWSER OUTPUT
This text is bold This text is italic This text is underlined

This is computer output


This text is both bold and italic

November 18, 2011

10

HTML TEXT FORMATTING


HTML CODE
<strong>This text is strong</strong>

BROWSER OUTPUT
This text is strong

<big>This text is big</big>

This text is big

<em>This text is emphasized</em>

This text is emphasized

This is<sub> subscript</sub> and <sup>superscript</sup>

This is subscript and superscript


November 18, 2011

11

HTML LISTS
Lists are used to arrange items. The most common HTML lists are ordered and unordered lists. HTML Unordered Lists: An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items are marked with bullets (typically small black circles). HTML Ordered Lists: An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items are marked with numbers.

November 18, 2011

12

LISTS EXAMPLE

HTML CODE <ul> <li>Coffee</li> <li>Milk</li> </ul> <ol> <li>Coffee</li> <li>Milk</li> </ol>

BROWSER OUTPUT Coffee Milk

1. Coffee 2. Milk

November 18, 2011

13

HTML IMAGES
In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only, and has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display. Syntax for defining an image: <img src="url" alt="some_text"/> The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.The value of the alt attribute is an author-defined text. Syntax: <img src="boat.gif" alt="Big Boat" />

November 18, 2011

14

HTML TABLES
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc. Example: <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> </table> OUTPUT:

November 18, 2011

15

HTML FORMS
HTML forms are used to pass data to a server. A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. The <form> tag is used to create an HTML form: <form> input elements </form> The most important form element is the input element. An input element can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more.
November 18, 2011

16

HTML FORMS
<input type="text" /> defines a one-line input field that a user can enter text into: <form> First name: <input type="text" name="firstname" /><br /> Last name: <input type="text" name="lastname" /> </form>

<input type="password" /> defines a password field: <form> Password: <input type="password" name="pwd" /> </form>

November 18, 2011

17

BROWSER OUTPUT TEXT FIELD

November 18, 2011

18

BROWSER OUTPUT PASSWORD FIELD

November 18, 2011

19

HTML FORMS
<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices: <form> <input type="radio" name=gender" value="male" /> Male<br /> <input type="radio" name=gender" value="female" /> Female </form> <input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices. <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>
November 18, 2011

20

BROWSER OUPUT RADIO BUTTON

November 18, 2011

21

BROWSER OUTPUT - CHECKBOX

November 18, 2011

22

HTML MEDIA
Multimedia comes in many different formats. It can be almost anything you can hear or see like text, pictures, music, sound, videos, records, films, animations, and more. Multimedia elements (like sounds or videos) are stored in media files.The most common way to discover the media type is to look at the file extension. When a browser sees the file extensions .htm or .html, it will assume that the file is an HTML page. The .xml extension indicates an XML file, and the .css extension indicates a style sheet. Picture formats are recognized by extensions like .gif and .jpg. Multimedia elements also have their own file formats with different extensions like .swf, .wmv, .mp3, and .mp4.

November 18, 2011

23

HTML MEDIA
The MP4 format is the new and upcoming format for internet video. It is supported by YouTube, Flash players and HTML5. The other important formats are AVI, WMV, Quicktime, Realvideo, flash, MPEG. The commonly used sound formats are MIDI,Realaudio,wav, WMA,MP3. The WAVE is the most popular uncompressed sound format on the Internet, and it is supported by all popular browsers. If you want uncompressed sound (music or speech) to be available to all your visitors, you should use the WAVE format. The MP3 format is the newest format for compressed recorded music. The term MP3 has become synonymous with digital music
November 18, 2011

24

CONCLUSION LOOKING AHEAD


HTML, though is simple and easy to learn, but has serious inherent flaws in it. HTML is a very forgiving language, because it oversees many inconsistent and erroneous codes. This may result in different browsers interpreting HTML pages differently. Hence, eXtensible Hypertext Markup Language (XHTML) is used as an alternative.

XHTML has stricter rules, which causes less variance among browsers and more consistency in results.

November 18, 2011

25

Thank You