Downloaded 15 times
More Related Content
Similar to Getting into HTML
![SHS_Core_CAE_Q3_LE1 FOR THIRD [FINAL].pdf](https://cdn.slidesharecdn.com/ss_thumbnails/shscorecaeq3le1final-251116055110-e3081055-thumbnail.jpg?width=640&height=640&fit=bounds)
Getting into HTML
- 1. HTML Hyper Text MarkupLanguage 1
- 2. First developed byTim Berners-Lee in 1990, HTML is short for HyperText Markup Language. HTML is used to create electronic documents (called pages) that are displayed on the World Wide Web. Each page contains a series of connections to other pages called hyperlinks. Every web page you see on the Internet is written using one version of HTML code or another. 2
- 3. HTML code ensuresthe proper formatting of text and images so that your Internet browser may display them as they are intended to look. Without HTML, a browser would not know how to display text as elements or load images or other elements. 3
- 4. Tag Description <html>...</html> Definesan HTML document <body>...<body> Defines the document's body <h1> to <h6> Defines HTML headings<h1> defines the largest heading. <h6> defines the smallest heading. <p>...</p> Paragraphs are defined with <p> tags. <center>...</center> It centers the text. <b>...</b>, <i>...</i>, <u>...</u> It defines bold, italic and underline text respectively. <hr/> Defines a horizontal line <br> the <br> tag defines a line break. It is an empty element without a closing tag . <!--> Defines a comment SOME IMPORTANT TAGS 4
- 5. Text Formatting Tags TagDescription <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 5
- 6. Start tag *Element content End tag * <p> This is a paragraph </p> <a href="default.htm" > This is a link </a> <br> HTML Elements An HTML element is everything from the start tag to the end tag: * The start tag is often called the opening tag. The end tag is often called the closing tag. 6
- 7. ā¢ Don't Forgetthe End Tag ā¢ Use Lowercase Tags ā¢ <br> is an empty element without a closing tag (the <br> tag defines a line break) ā¢ Use HTML headings for headings only. Don't use headings to make text BIG or bold. ā¢ <!-- This is a comment --> 7
- 8. <html> <body> Hello World!!! This ismy first website. </body> </html> 8
- 9. <html> <body> <h1>This is heading1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html> HTML Headings 9
- 10. HTML Paragraphs <html> <body> <p>This isa paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> </body> </html> 10
- 11. Center Texts <html> <body> <center> <p>This isa paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> </center> </body> </html> 11
- 12. Text Formatting <html> <body> <p><b>This textis bold</b></p> <p><big>This text is big</big></p> <p><i>This text is italic</i></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> </body> </html> 12
- 13. Hidden Comments Comments canbe inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed. Comments are written like this: <!-- This is a comment --> 13
- 14. <html> <body> <!--This comment willnot be displayed--> <p>This is a regular paragraph</p> </body> </html> 14
- 15. HTML Lines ā¢ The<hr/> tag creates a horizontal line in an HTML page. The hr element can be used to separate content: 15
- 16. <html> <body> <p>The hr tagdefines a horizontal rule:</p> <hr/> <p>This is a paragraph</p> <hr/> <p>This is a paragraph</p> <hr/> <p>This is a paragraph</p> </body> </html> 16
- 17. HTML Background color <html> <bodybgcolor= "red "> </body> </html> 17
- 18. HTML Background image <html> <bodybackground="images/back.gif" > </body> </html> 18
- 19. HTML Links <html> <body> <p><a href="http://www.google.com/">Visit Google</a></p> <p> <a href="http://www.google.com/" target="_blankā > Visit Google!</a> </p> </body> </html> 19
- 20. HTML Images <html> <body> <h2>Mehmet AkifCollege Prizren</h2> <img border="0" src="images/mac.jpg" alt= āMAC" width= " 500" height= "400" /> </body> </html> 20
- 21. HTML FONTS <html> <body bgcolor="yellow"> <p> <font size="5" face="arial" color="red"> This paragraph is in Arial, size 5, and in red text color. </font> </p> <p> <font size="3" face="verdana" color="blue"> This paragraph is in Verdana, size 3, and in blue text color. </font> </p> </body> </html> 21
- 22. <html> <body> <table border="1"> <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> </body> </html> HTML Tables 22
- 23. <html> <body> <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> </body> </html> HTML Tables <html> <body> <tableborder="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, cell 1</td> <td>row 2, cell 2</td> </tr> </table> </body> </html> 1 2 23
- 24. ORDERED LIST <html> <body> <h4>An OrderedList:</h4> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html> <html> <body> <h4>An Unordered List:</h4> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html> UNORDERED LIST 1 2
- 25. HTML Styles <html> <body style="background-color:PowderBlue;"> <h1>Look!Styles and colors</h1> <p style="font-family:verdana;color:red;"> This text is in Verdana and red</p> <p style="font-family:times;color:green;"> This text is in Times and green</p> <p style="font-size:30px;">This text is 30 pixels high</p> </body> </html> 25
- 26. Image Alignment-1 <html> <body> <p>An image <imgsrc= "images/smiley.gif" alt="Smiley face" align="bottom" width="32" height="32" /> with align="bottom".</p> <p>An image <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32" /> with align="middle".</p> <p>An image <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32" /> with align="top".</p> <p><b>Tip:</b> align="bottom" is default!</p> <p><img src="smiley.gif" alt="Smiley face" width="32" height="32" /> An image before the text.</p> <p>An image after the text. <img src="smiley.gif" alt="Smiley face" width="32" height="32" /></p> </body> </html> 26
- 27. Image Alignment-2 <html> <body> <p> <img src="images/smiley.gif" alt="Smiley face" align="left" width="32" height="32" /> A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text. </p> <p> <img src=" images/smiley.gif" alt="Smiley face" align="right" width="32" height="32" /> A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text. </p> </body> </html> 27
- 28. Image Alignment-3 <html> <body> <p>Create alink of an image: <a href="default.asp"> <img src=" images/smiley.gif" alt="HTML tutorial" width="32" height="32" /> </a></p> <p>No border around the image, but still a link: <a href="default.asp"> <img border="0" src=" images/smiley.gif" alt="HTML tutorial" width="32" height="32" /> </a></p> </body> </html> 28