Sie sind auf Seite 1von 34

Introduction to HTML

Short History
In 1980, physicist Tim Berners-Lee, who was an independent contractor at European Organization for Nuclear Research, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents.

In 1989, Berners-Lee wrote a memo proposing an Internet-based Hypertext system


Berners-Lee specified HTML and wrote the browser and server software in the last part of 1990.

Version History of HTML


November 1995 - HTML 2.0 January 1997 - HTML 3.2 December 1997 - HTML 4.0 December 1999 - HTML 4.01 May 2000 ISO HTML 4.01 January 2008 - HTML 5.0

What is HTML?
Hyper Text Markup Language, is the predominant markup language for web pages. A markup language used to structure text and multimedia documents and to set up hypertext links between documents, used extensively on the World Wide Web. HTML is a markup language (the ML in HTML) that uses a fixed set of markup tags.

HTML Editor
An HTML editor is a software application for creating web pages. many HTML editors work not only with HTML, but also with related technologies such as CSS, XML and JavaScript or ActionScript / VB Script.

List of HTML Editors


Notepad gEdit jEdit TextEdit TextMate UltraEdit CrimsonEditor DOS Edit JCreator FrontPage Mozilla Composer

HTML Elements
HTML elements are tags, as well as text, which act as indicators to a web browser as to how the document is to be interpreted by the browser and ultimately presented on the user's computer screen.

2 Types of Elements
Container elements are constructed with: a start tag (<tag>) marking the beginning of an element, which may incorporate:
any number of attributes (including their values);

some amount of content (text, other elements); an end tag, in which the element name is prepended with a forward slash: </tag>. (note: In some forms of HTML the end tag is optional for some container elements.)

Empty elements consist of only a single tag, with any attributes. (The tag may have a slash appended: <tag /> in XHTML this is required.)

Attributes
define desired behavior or indicate additional element properties. Element (and attribute) names may be written in either upper or lower case in HTML, but must be in lower case in XHTML. Upper-case is the older usage, and is used in HTML standards, but lowercase is more common

Documents Structure Elements


<html>...</html> - The Root Element of an HTML document; all other elements are contained in this.
The HTML element delimits the beginning and the end of an HTML document. Standardised in HTML 2.0; still current.

<head>...</head> - Container for processing information and metadata for an HTML document.
Standardized in HTML 2.0; still current. - Indicates the beginning and end of a section of the document used for the title and other document header information

<title>..</title>

- Provides descriptive information about a document that will be displayed at the title bar.

<body>...</body> - Indicates the beginning and end of the web page body. - Container for the displayable content of an HTML document.
Standardized in HTML 2.0; still current.

<link> - Specifies links to other documents, such as previous and next links, or alternate versions.

<a></a> - an anchor can be either the origin or the target (destination) end of a hyperlink.
With the attribute href (hypertext reference), the anchor becomes a hyperlink to either another part of the document or another resource using an External URL. Alternatively (and sometimes concurrently), with the name or id attributes set, the element becomes a target.

Sample HTML Document


<!doctype html> <html> <head> <title>Hello HTML</title> </head> <body> <p>Hello World!</p> </body> </html>

<p></p> - Creates a paragraph, perhaps the most common block level element. The closing tag is required for XHTML.
P existed in HTML Tags, and was standardized in HTML 2.0; still current.

<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> - <h1> delimits the highest-level heading, <h2> the next level down (sub-section), <h3> for a level below that, and so on to <h6>.

<li></li> - A list item in ordered (ol) or unordered (ul) lists.


LI existed in HTML Tags, and was standardised in HTML 2.0; still current.

<ol></ol>

- An ordered (enumerated) list. The type attribute can be used to specify the kind of ordering, but stylesheets give more control: {list-style-type: foo}. The default is Arabic numbering or lettered points. was standardized in HTML 2.0; still current.

<ul></ul> - An unordered (bulleted) list. Stylesheets can be used to specify the list marker: {liststyle-type: foo}. The default marker is a disc.
was standardised in HTML 2.0; still current.

<LI></LI>
-Lists is used to structure your text in an outline format and helps to itemized information. - Indicates that the item that follows the tag is an item within a list.

Unordered List
<H3>Unordered Lists</H3> <UL TYPE=disc> <LI>First Item type disc</LI> <LI>Second item type disc</LI> </UL> <UL TYPE=square> <LI>First Item type square</LI> <LI>Second item type square</LI> </UL> <UL TYPE=circle> <LI>First Item type circle</LI> <LI>Second item type circle</LI> </UL>

Ex1
<html> <body> The content of the body element is displayed in your browser. </body> </html>

Ex2
<html> <body> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </body> </html>

Ex3
<html> <head> <title>Microsoft Office 2010</title> </head> <body> Microsoft Office 2010 Microsoft has established a position as the most efficient Suite of application for document creation, Communications And business information analysis. </body> </html>

Ex4
<html> <body> <p> This paragraph contains a lot of lines in the source code, but the browser ignores it. </p> <p> This paragraph contains a lot of spaces in the source code, but the browser ignores it. </p> <p> The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change. </p> </body> </html>

Ex5(Use of Line Break


<html> <body> <p>This is<br />a para<br />graph with line breaks</p> </body> </html>

Ex6 (Center Align Heading)


<html> <body> <h1 style="text-align:center">This is heading 1</h1> <p>The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page.</p> </body> </html>

Ex7 (using comments


<html> <body> <!--This comment will not be displayed--> <p>This is a regular paragraph</p> </body> </html>

Ex8(Using Background color)


<html> <body style="background-color:yellow"> <h2>Look: Colored Background!</h2> </body> </html>

Thank you!

Das könnte Ihnen auch gefallen