1. 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
2. HTML Elements: The <p> element: <p>This is my first paragraph.</p> The <body> element: <body> <p>This is my first paragraph.</p> </body The <html> element: <html> <body> <p>This is my first paragraph.</p> </body> </html>
3. HTML Attributes: * HTML elements can have attributes * Attributes provide additional information about an element * Attributes are always specified in the start tag * Attributes come in name/value pairs like: name="value" Attribute Example: HTML links are defined with the <a> tag. The link address is specified in the href attribute: <a href="http://www.w3schools.com">This is a link</a>
4. HTML Headings: Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading. Examples: <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> HTML Lines: The <hr /> tag creates a horizontal line in an HTML page. The hr element can be used to separate content: <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p>
5. HTML Paragraphs: Paragraphs are defined with the <p> tag. Examples: <p>This is a paragraph</p> <p>This is another paragraph</p> HTML Line Breaks: Use the <br /> tag if you want a line break (a new line) without starting a new paragraph: <p>This is<br />a para<br />graph with line breaks</p>
6. HTML Formatting Tags: Tag Description <b> Defines bold text <big> Defines big text <em> Defines emphasized text <i> Defines italic text <small> Defines small text <strong> Defines strong text <sub> Defines subscripted text <sup> Defines superscripted text <ins> Defines inserted text <del> Defines deleted text
7. HTML Styles: Style Example - Background Color <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> Style Example - Font, Color and Size <html> <body> <h1 style="font-family:verdana">A heading</h1> <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> </body> </html> Style Example - Text Alignment <html> <body> <h1 style="text-align:center">This is a heading</h1> <p>The heading above is aligned to the center of this page.</p> </body> </html>
8. HTML Links: Syntax <a href="url">Link text</a> Example: <a href="http://www.w3schools.com/">Visit W3Schools</a> The target Attribute: The example below will open the linked document in a new browser window: <a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a> The name Attribute: Example: 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>
9.
10. HTML Tables: <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> How it looks in a browser: Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2
11.
12.
13. Milk An ordered list is also a list of items. The list items are marked with numbers. An unordered list is a list of items. The list items are marked with bullets (typically small black circles).
14. Forms: Text Fields: <form> First name: <input type="text" name="firstname" /> <br /> Last name: <input type="text" name="lastname" /> </form> <form> <input type="radio" name="sex" value="male" /> Male <br /> <input type="radio" name="sex" value="female" /> Female </form> Male : Female : First name: Last name: Radio Buttons:
15. Checkboxes: <form> I have a bike: <input type="checkbox" name="vehicle" value="Bike" /> <br /> I have a car: <input type="checkbox" name="vehicle" value="Car" /> <br /> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" /> </form> The Form's Action Attribute and the Submit Button: <form name="input" action="html_form_submit.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form> Username: I have a bike: I have a car: I have an airplane: submit
16. <html> <body> <p style="background-color:#FFFF00"> Color set by using hex value </p> <p style="background-color:rgb(255,255,0)"> Color set by using rgb value </p> <p style="background-color:yellow"> Color set by using color name </p> </body> </html> HTML Colors:
