HTML- Hyper Text Markup Language
•
2 likes•223 views
What is HTML? How to begin writing your first lines of code in HTML.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to HTML- Hyper Text Markup Language
Similar to HTML- Hyper Text Markup Language (20)
More from Codewizacademy
More from Codewizacademy (20)
Recently uploaded
Recently uploaded (20)
HTML- Hyper Text Markup Language
- 1. HTML
- 3. HTML Code • HTML file is saved with a .html extension • Written in a text editor • Can be directly executed on web browser
- 4. Tags • Code is written within markup tags <> • Paired and Unpaired Tags – <>....</> – <.../> • Tags can be hierarchically placed within a tag • Tag that starts first ends last <html> <head> </head> </html>
- 5. DOCTYPE • Before the code for page begins, need to define what type of document it is. <!DOCTYPE html>
- 6. HTML Tag • <HTML> </HTML> • Parent tag • All other tags reside within opening and closing of this tag
- 7. HEAD Tag • Head tag contains the: – Page Title – Meta Information – Links to external CSS – Links to JS code
- 8. BODY Tag • Body tag contains the: – Content displayed on page • Text • Images • Audio • Video • Links
- 9. Outline of HTML code <!DOCTYPE html> <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>
- 10. Head <HEAD> <title> My first web page </title> </HEAD>
- 11. Head <HEAD> <title>My first web page</title> <meta name="description" content="Online Education"> <meta name="description" content="Language teaching"> <meta name="keyword" content="learning english"> <meta name="author" content="harry"> </HEAD>
- 12. Meta Information • Meta information is not visible on the web page • It is meant for the search engine to analyse and understand the use of website • To be search engine friendly, it is important to specify this information
- 13. Body of web page <body bgcolor="green" text="white"> This content will be displayed as plain text since there is no formatting </body> Body tag can have attribute to specify Bgcolor=background color of web page Text=font color of web page Background=background image for web page
- 14. Paragraph <body> <p>This content will be displayed as plain text since there is no formatting</p> </body> <p> is a paragraph tag, which displays plain text in the form of paragraph.
- 15. Bold and Italics <body> <p>This <b>content</b> will be displayed as plain text since there is no <i>formatting</i></p> </body> <b></b>, <i></i> used for bold and italics respectively.
- 16. Heading <body> <h1>Begin with heading</h1> <p>This <b>content</b> will be displayed as plain text since there is no <i>formatting</i></p> </body> Headings range from h1 to h6. H1 being the largest and H6 being the smallest heading. They are predefined set of formatting. As per SEO there should be only one H1 tag and multiple H2, H3 tags for search engine to analyse the content.
- 17. Anchor <body> <h1>Begin with heading</h1> <p>This <b>content</b> will be displayed as plain text since there is no <a href="format.html"> formatting</a></p> </body> Anchor tag is used to create a hyper link between two documents or content within the same document. "a" is for anchor "href" is for reference to document it needs to link to.
- 18. Image <body> <h1>Begin with heading</h1> <p>This <b>content</b> will be displayed as plain text since there is no formatting <img src="d:imagesrose.jpg" alt="image of rose" height="150" width="200"/> </p> </body> <img/> tag is used for inserting an image. Attributes src=path to the image file Alt=alternate text if image is not displayed Height, width= image dimensions
- 19. Break <body> <h1>Begin with heading</h1> <p>This <b>content</b> will be displayed as plain text since there is no formatting <img src="d:imagesrose.jpg" alt="image of rose" height="150" width="200"/> <br> You can add more content here. </p> </body> <br> tag is used for inserting a line break.
- 20. For more tutorials and courses please visit: www.codewizacademy.com