Introduction to HTML What is HTML?

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
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

HTML Documents = 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

My First Html Page:

<html> <body> <h1>My First Webpage  </h1> </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

Making it Work :
Text editor (text pad) , save the file as .htm or .html Tool , Dreamweaver , Frontpage

Lesson Two : HTML Elements
An HTML element is everything from the start tag to the end tag:

Start tag <p> <a href="default.htm" > <br />
– –

Element content This is a paragraph This is a link

End tag </p> </a>

The start tag is often called the opening tag. The end tag is often called the closing tag.

HTML Element Syntax
• •

An HTML element starts with a start tag / opening tag An HTML element ends with an end tag / closing tag

<html> <body> <h1>This <h2>This <h3>This <h4>This <h5>This <h6>This </body> </html> is is is is is is a a a a a a heading heading heading heading heading heading h1</h1> h2</h2> h3 </h3> h4</h4> h5</h5> h6</h6> HTML Paragraphs HTML paragraphs are defined with the <p> tag. Empty elements can be closed in the start tag. <html> <body> <p>This is a paragraph.</p> </body> . Lesson Three: HTML Basics HTML Headings HTML headings are defined with the <h1> to <h6> tags.</p> <p>This is another paragraph. <br> is an empty element without a closing tag (the <br> tag defines a line break).• • • • • 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 Most HTML elements can have attributes HTML elements can be nested Empty HTML Elements • • HTML elements with no content are called empty elements.

info">Dr.jpg" width="104" height="142" /> </body> </html> HTML Lines The <hr /> tag creates a horizontal line in an HTML page.This is a comment --> HTML break <br /> Inserts a single line break HTML Text Formatting . <html> <body> <img src="Ajman.drmossab. Comments are ignored by the browser and are not displayed. <html> <body> <a href="http://www. The hr element can be used to separate content: HTML Comments Comments can be inserted into the HTML code to make it more readable and understandable.</html> HTML Links HTML links are defined with the <a> tag. Comments are written like this: <!-. Mossab Website </a> </body> </html> HTML Images HTML images are defined with the <img> tag.

It preserves both spaces This is preformatted text. both spaces The pre tag is good for displaying computer code: for i = 1 to 10 print i next i and line breaks. </pre> <p>The pre tag is good for displaying computer code:</p> <pre> for i = 1 to 10 . It preserves and line breaks.<html> <body> <p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><big>This text is big</big></p> <p><em>This text is emphasized</em></p> <p><i>This text is italic</i></p> <p><small>This text is small</small></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> </body> </html> This text is bold This text is strong This text is big This text is small This text is emphasized This text is italic This is subscript and superscript <html> <body> <pre> This is preformatted text.

<p><b>Note:</b> These tags are often used to display computer/programming code.</p> </body> </html> <html> .print i next i </pre> </body> </html> <html> <body> Computer code Keyboard input Teletype text <code>Computer code</code> <br /> <kbd>Keyboard input</kbd> <br /> <tt>Teletype text</tt> <br /> <samp>Sample text</samp> <br /> <var>Computer variable</var> <br /> Sample text Computer variable Note: These tags are often used to display computer/programming code.

UAE <br /> Phone: +971500500 </address> Written by Ajman University Email us Address: Box 564. Ajman . Ajman.ac.<body> <address> Ajman University<br /> <a href="mailto:us@ajman. Can I get this ASAP? <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.ae">Email us</a><br /> Address: Box 564.</p> </body> </html> . UAE Phone: +971500500 </body> </html> <html> <body> The WHO was founded in 1948.</p> The title attribute is used to show the spelledout version when holding the mouse pointer over the acronym or abbreviation. <p>Can I get this <acronym title="as soon as possible">ASAP</acronym>?</p> <p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.

<html> <body> If your browser supports bi-directional override (bdo). This is a long quotation. It also insert margins. This is a long quotation. A short quotation: This is a short quotation Notice that the browser inserts quotation marks around the short quotation (Does not work in IE). the next line will be written from the right to the left (rtl): </p> <bdo dir="rtl"> Here is some Hebrew text </bdo> </body> </html> <html> <body> A long quotation: This is a long quotation. This is a long quotation. This is a long quotation. A long quotation: <blockquote> This is a long quotation. This is a long quotation. the next line will be written from the right to the left (rtl): txet werbeH emos si ereH <p> If your browser supports bi-directional override (bdo). Note: The browser inserts white space before and after a blockquote element. </blockquote> <p><b>Note:</b> The browser inserts white space before and after a blockquote element. It also insert margins. This is a long quotation.</p> . This is a long quotation. This is a long quotation.

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p> <p>Notice that browsers will strikethrough deleted text and underline inserted text.</p> </body> </html> <html> <body style="backgroundcolor:PowderBlue."> Look! Styles and colors This text is in Verdana and red This text is in Times and green <h1>Look! Styles and colors</h1> This text is 30 pixels high .</b></p> </body> </html> <html> <body> My favorite color is blue red! Notice that browsers will strikethrough deleted text and underline inserted text.A short quotation: <q>This is a short quotation</q> <p><b>Notice that the browser inserts quotation marks around the short quotation (Does not work in IE).

Deprecated means that they will not be supported in future versions of HTML and XHTML. styles can be added to HTML elements directly by using the style attribute. or indirectly in separate style sheets (CSS files). several tags and attributes are deprecated. With HTML styles.color:green"> This text is in Times and green</p> <p style="font-size:30px">This text is 30 pixels high</p> </body> </html> The HTML Style Attribute The purpose of the style attribute is: To provide a common way to style all HTML elements. as the new and preferred way to style HTML elements. Styles was introduced with HTML 4. Deprecated Tags and Attributes In HTML 4.<p style="font-family:verdana.color:red"> This text is in Verdana and red</p> <p style="font-family:times. These tags and attributes should be avoided: Tags <center> <font> <basefont> <s> <strike> <u> Attributes Description Defines centered content Defines HTML fonts Defines strikethrough text Defines underlined text Description .

Color and Size .Background Color The background-color property defines the background color for an element: <html> <body style="background-color:yellow"> <h2 style="background-color:red">This is a heading</h2> <p style="background-color:green">This is a paragraph.</p> </body> </html> <html> This is a heading This is a paragra This is a heading This is a paragraph. use styles instead:</p> </body> </html> HTML Style Example . use styles instead: <body bgcolor="yellow"> <h2>This is a heading</h2> <p>This is a paragraph. The old bgcolor attribute only works on the body element.</p> <p>For future proof HTML. For future proof HTML.</p> <p>The old bgcolor attribute only works on the body element.align bgcolor color Defines the alignment of text Defines the background color Defines the text color For all of the above: Use styles instead! HTML Style Example .Font.

</font></p> </body> </html> HTML Style Example . color. <h1 style="text-align:center">This is a heading</h1> .color:red. A heading A paragraph.The font-family. <h1><font face="verdana">A heading</font></h1> <p><font size="5" face="arial" color="red">A paragraph. color.">A paragraph.Text Alignment The text-align property specifies the horizontal alignment of text in an element: <html> <body> This is a heading The heading above is aligned to the center of this page. and size of the text in an element: <html> <body> <h1 style="font-family:verdana">A heading</h1> <p style="font-family:arial.</p> </body> </html> <html> <body> A heading A paragraph.fontsize:20px. and font-size properties defines the font.

</p> </body> </html> Examples Summary: HTML Text Formatting Tags Tag <b> <big> <em> <i> <small> <strong> <sub> <sup> <ins> <del> Description Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text HTML "Computer Output" Tags Tag <code> Description Defines computer code text . <h1 align="center">This is a heading</h1> <p>The heading above is aligned to the center of this page.</p> </body> </html> <html> <body> This is a heading The heading above is aligned to the center of this page.<p>The heading above is aligned to the center of this page.

or image that you can click on to jump to a new document or a new section within the current document. To create a link to another document.mossab. by using the name attribute HTML Link Syntax The HTML code for a link is simple.info homepage. Tip: The "Link text" doesn't have to be text. the arrow will turn into a little hand. Links are specified in HTML using the <a> tag.<kbd> <samp> <tt> <var> <pre> Defines keyboard text Defines sample computer code Defines teletype text Defines a variable Defines preformatted text HTML Citations. group of words. You can link from an image or any other HTML element. and Definition Tags Tag <abbr> <acronym> <address> <bdo> <blockquote> <q> <cite> <dfn> Description Defines an abbreviation Defines an acronym Defines contact information for the author/owner of a document Defines the text direction Defines a long quotation Defines a short quotation Defines a citation Defines a definition term HTML Links (hyperlinks): A hyperlink (or link) is a word.info/"> Dr Mossab</a> which will display like this: Dr. by using the href attribute 2. It looks like this: <a href="url">Link text</a> The href attribute specifies the destination of a link. Quotations. To create a bookmark inside a document. The <a> tag can be used in two ways: 1. Mossab Clicking on this hyperlink will send the user to Dr. .drmossab. When you move the cursor over a link in a Web page. Example <a href="http://www.

<p>An image <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32" /> with align="middle". Src stands for "source".</p> An image before the text.</p> <p><b>Tip:</b> align="bottom" is default! . with align="bottom". images are defined with the <img> tag. if the imad ge cannot be displayed.HTML The <img> Tag and the <Src> Attribute In HTML.gif" alt="Smiley face" align="bottom" width="32" height="32" /> with align="bottom". The value of the alt attribute is an author-defined text: <img src="boat. Tip: align="bottom" is default! <p>An image <img src="smiley. The value of the src attribute is the URL of the image you want to display. An image with align="top". An image after the text.</p> An image with align="middle". which means that it contains attributes only. and has no closing tag. To display an image on a page. The <img> tag is empty. you need to use the src attribute.gif" alt="Big Boat" /> <html> <body> An image <p>An image <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32" /> with align="top". <img src="url" alt="some_text"/> HTML The Alt Attribute The required alt attribute specifies an alternate text for an image.

<img src="smiley. The image will float to the left of this text. <p> <img src="smiley.</p> <p><img src="smiley. The align attribute of the image is set to "right". The align attribute of the image is set to "left".gif" alt="Smiley face" width="32" height="32" /> An image before the text. The image will float to the right of this text. The align attribute .</p> <p>An image after the text. A paragraph with an image. The image will float to the left of this text. </p> <p> <img src="smiley.gif" alt="Smiley face" width="32" height="32" /></p> </body> </html> <html> <body> A paragraph with an image. The align attribute of the image is set to "left".gif" alt="Smiley face" align="right" width="32" height="32" /> A paragraph with an image.gif" alt="Smiley face" align="left" width="32" height="32" /> A paragraph with an image.

but still a link: <p>Create a link of an image: <a href=" http://www. </p> </body> </html> <html> <body> Create a link of an image: No border around the image. Each table data starts with a td tag. The image will float to the right of this text.of the image is set to "right".drmossab.drmossab. but still a link: <a href="http://www. . Each table row starts with a tr tag.info"> <img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32" /> </a></p> </body> </html> Tables and Cells <html> <body> Each table starts with a table tag.gif" alt="HTML tutorial" width="32" height="32" /> </a></p> <p>No border around the image.info "> <img src="smiley.

<p> Each table starts with a table tag. Each table data starts with a td tag. Each table row starts with a tr tag. </p> One column: 100 One row and three columns: 10 20 30 0 0 0 Two rows and three columns: 10 20 30 0 0 0 40 50 60 0 0 0 <h4>One column:</h4> <table border="1"> <tr> <td>100</td> </tr> </table> <h4>One row and three columns:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <html> <body> With a normal border: First Row Secon Row d .

<h4>With a normal border:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> With a thick border: First Row Secon Row d With a very thick border: First Row Secon Row d <h4>With a thick border:</h4> <table border="8"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With a very thick border:</h4> .

cell 1</td> <td>row 2. cell 2</td> </tr> </table> Header 1 Header 2 row 1. cell 1 row 1. cell 2 <html> <body> Without cellpadding: First Row Secon Row d <h4>Without cellpadding:</h4> . cell 2 row 2. cell 1 row 2.<table border="15"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html> <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1. cell 1</td> <td>row 1. cell 2</td> </tr> <tr> <td>row 2.

<table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> With cellpadding: First Secon d Row Ro <h4>With cellpadding:</h4> <table border="1" cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> .

The first list item 2.white cold drink</dd> </dl> An unordered list: • • • List item List item List item • • Coffee Milk 1. Milk – – Coffee Milk <html> <body> A nested List: • • Coffee Tea ○ ○ • Mil Black tea Green tea <h4>A nested List:</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> . Coffee 2.</html> HTML Lists An ordered list: 1. The third list item <ul> <li>Coffee</li> <li>Milk</li> </ul> <ol> <li>Coffee</li> <li>Milk</li> </ol> <dl> <dt>Coffee</dt> <dd>.black hot drink</dd> <dt>Milk</dt> <dd>. The second list item 3.

textarea. fieldset. submit buttons and more. radio-buttons. A form can also contain select lists. A form can contain input elements like text fields. checkboxes. and label elements. The <form> tag is used to create an HTML form: <form> First name: <input type="text" name="firstname" /><br /> Last name: <input type="text" name="lastname" /> </form> How the HTML code above looks in a browser: Top of Form First name: Last name: Bottom of Form . legend.</li> <li>Milk</li> </ul> </body> </html> HTML List Tags Tag <ol> <ul> <li> <dl> <dt> <dd> Description Defines an ordered list Defines an unordered list Defines a list item Defines a definition list Defines an item in a definition list Defines a description of an item in a definition list HTML forms Html forms are used to pass data to a server.

Radio Buttons <input type="radio" /> defines a radio button. <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> How the HTML code above looks in a browser: Top of Form I have a bike I have a car Bottom of Form . Password Field <form> Password: <input type="password" name="pwd" /> </form> How the HTML code above looks in a browser: Top of Form Password: Bottom of Form Note: The characters in a password field are masked (shown as asterisks or circles).Note: The form itself is not visible. Radio buttons let a user select ONLY ONE 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 the HTML code above looks in a browser: Top of Form Male Female Bottom of Form Checkboxes <input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices. Also note that the default width of a text field is 20 characters.

asp". The file defined in the action attribute usually does something with the received input: <form name="input" action="html_form_action. and click the "Submit" button. Dropdown List <html> <body> <form action=""> <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> </body> </html> . the browser will send your input to a page called "html_form_action. A submit button is used to send form data to a server.Submit Button <input type="submit" /> defines a submit button. The page will show you the received input. The data is sent to the page specified in the form's action attribute.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form> How the HTML code above looks in a browser: Top of Form Submit Username: Bottom of Form If you type some characters in the text field above.

Text Area <html> <body> </p> <textarea rows="10" cols="30"> The cat was playing in the garden. </textarea> </body> </html> Button <html> <body> <form action=""> <input type="button" value="Hello world!"> </form> </body> </html> .

Sign up to vote on this title
UsefulNot useful