Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Html

•Download as ODP, PDF•
•
I
irshadahamed

HTML is a markup language used to define the structure and layout of web pages. The document describes several key HTML elements (such as headings, paragraphs, links, images, tables), tags (like <p> and <a>), and attributes (including href and src) that are used to structure and style web page content. It also provides examples of how to apply styles, colors, and basic forms in HTML documents.

1 of 14
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 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>
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=&quot;value&quot; Attribute Example: HTML links are defined with the <a> tag. The link address is specified in the href attribute: <a href=&quot;http://www.w3schools.com&quot;>This is a link</a>
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>
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>
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
HTML Styles: Style Example - Background Color <html> <body style=&quot;background-color:yellow&quot;> <h2 style=&quot;background-color:red&quot;>This is a heading</h2> <p style=&quot;background-color:green&quot;>This is a paragraph.</p> </body> </html> Style Example - Font, Color and Size <html> <body> <h1 style=&quot;font-family:verdana&quot;>A heading</h1> <p style=&quot;font-family:arial;color:red;font-size:20px;&quot;>A paragraph.</p> </body> </html> Style Example - Text Alignment <html> <body> <h1 style=&quot;text-align:center&quot;>This is a heading</h1> <p>The heading above is aligned to the center of this page.</p> </body> </html>
HTML Links: Syntax <a href=&quot;url&quot;>Link text</a> Example: <a href=&quot;http://www.w3schools.com/&quot;>Visit W3Schools</a> The target Attribute: The example below will open the linked document in a new browser window: <a href=&quot;http://www.w3schools.com/&quot; target=&quot;_blank&quot;>Visit W3Schools!</a> The name Attribute: Example: A named anchor inside an HTML document: <a name=&quot;tips&quot;>Useful Tips Section</a> Create a link to the &quot;Useful Tips Section&quot; inside the same document: <a href=&quot;#tips&quot;>Visit the Useful Tips Section</a>
HTML Images: Syntax for defining an image: <img src=&quot;url&quot; alt=&quot;some_text&quot;/> The Alt Attribute : <img src=&quot;boat.gif&quot; alt=&quot;Big Boat&quot; /> Note: 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.
HTML Tables: <table border=&quot;1&quot;> <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
HTML Lists: Unordered Lists: <ul> <li>Coffee</li> <li>Milk</li> </ul> Here is how it looks in a browser: Coffee
Milk Ordered Lists: <ol> <li>Coffee</li> <li>Milk</li> </ol> Here is how it looks in a browser: Coffee
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).
Forms: Text Fields: <form> First name: <input type=&quot;text&quot; name=&quot;firstname&quot; /> <br /> Last name: <input type=&quot;text&quot; name=&quot;lastname&quot; /> </form> <form> <input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;male&quot; /> Male <br /> <input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;female&quot; /> Female </form> Male : Female : First name: Last name: Radio Buttons:

More Related Content

Html

  • 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=&quot;value&quot; Attribute Example: HTML links are defined with the <a> tag. The link address is specified in the href attribute: <a href=&quot;http://www.w3schools.com&quot;>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=&quot;background-color:yellow&quot;> <h2 style=&quot;background-color:red&quot;>This is a heading</h2> <p style=&quot;background-color:green&quot;>This is a paragraph.</p> </body> </html> Style Example - Font, Color and Size <html> <body> <h1 style=&quot;font-family:verdana&quot;>A heading</h1> <p style=&quot;font-family:arial;color:red;font-size:20px;&quot;>A paragraph.</p> </body> </html> Style Example - Text Alignment <html> <body> <h1 style=&quot;text-align:center&quot;>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=&quot;url&quot;>Link text</a> Example: <a href=&quot;http://www.w3schools.com/&quot;>Visit W3Schools</a> The target Attribute: The example below will open the linked document in a new browser window: <a href=&quot;http://www.w3schools.com/&quot; target=&quot;_blank&quot;>Visit W3Schools!</a> The name Attribute: Example: A named anchor inside an HTML document: <a name=&quot;tips&quot;>Useful Tips Section</a> Create a link to the &quot;Useful Tips Section&quot; inside the same document: <a href=&quot;#tips&quot;>Visit the Useful Tips Section</a>
  • 9. HTML Images: Syntax for defining an image: <img src=&quot;url&quot; alt=&quot;some_text&quot;/> The Alt Attribute : <img src=&quot;boat.gif&quot; alt=&quot;Big Boat&quot; /> Note: 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.
  • 10. HTML Tables: <table border=&quot;1&quot;> <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. HTML Lists: Unordered Lists: <ul> <li>Coffee</li> <li>Milk</li> </ul> Here is how it looks in a browser: Coffee
  • 12. Milk Ordered Lists: <ol> <li>Coffee</li> <li>Milk</li> </ol> Here is how it looks in a browser: Coffee
  • 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=&quot;text&quot; name=&quot;firstname&quot; /> <br /> Last name: <input type=&quot;text&quot; name=&quot;lastname&quot; /> </form> <form> <input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;male&quot; /> Male <br /> <input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;female&quot; /> Female </form> Male : Female : First name: Last name: Radio Buttons:
  • 15. Checkboxes: <form> I have a bike: <input type=&quot;checkbox&quot; name=&quot;vehicle&quot; value=&quot;Bike&quot; /> <br /> I have a car: <input type=&quot;checkbox&quot; name=&quot;vehicle&quot; value=&quot;Car&quot; /> <br /> I have an airplane: <input type=&quot;checkbox&quot; name=&quot;vehicle&quot; value=&quot;Airplane&quot; /> </form> The Form's Action Attribute and the Submit Button: <form name=&quot;input&quot; action=&quot;html_form_submit.asp&quot; method=&quot;get&quot;> Username: <input type=&quot;text&quot; name=&quot;user&quot; /> <input type=&quot;submit&quot; value=&quot;Submit&quot; /> </form> Username: I have a bike: I have a car: I have an airplane: submit
  • 16. <html> <body> <p style=&quot;background-color:#FFFF00&quot;> Color set by using hex value </p> <p style=&quot;background-color:rgb(255,255,0)&quot;> Color set by using rgb value </p> <p style=&quot;background-color:yellow&quot;> Color set by using color name </p> </body> </html> HTML Colors: