Introduction to Html
- 1. HTML What is HTML? Designing a webpage is static or dynamic. Hypertext Markup Language. What is Hypertext? It is a text that links to other information so clicking a link then user can quickly jump to different content. What do you mean Markup Language? Standard Markup Language used to create web pages. Basically, tells your browser how to display web page. Example: Chrome, Firefox etc. What does HTML look like? HTML uses a tags and elements to enclose different parts of the content. It informs the browser that the document type is HTML. It wraps all content of our page like open tags to close tags. <head> ………</head> puts content here that shouldn’t be shown to visitors. <title> …..….. </title> top of a page is name inside only in head tag. <body> ……... </body> all tags like <div>, <p>, etc., It contains all the content you want to show visitors and it is child of the body tags. Example: <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <meta name="viewport" content="width=device-width"> <title>Divya</title> </head> <body> Hello world </body> </html> It isbasic to all webpagesusingthisheadertag.
- 2. What is meta? It is a tag inside only in <head> element is used to specify character set, page description, keywords, author of the document, and viewport settings. It will not be displayed on the page but is machine parsable. Let web designers take control over the viewport, through the <meta> tag. It specifies the value associated with the name attribute. Example: It link to style sheets or javascript file likes meta tags, style tags and javascirpt tags. <head> <meta charset="UTF- 8"> <style> . . </style> </head> What is UTF-8? It is a HTML5 Standard Unicode and last version of a HTML. The default character encoding in HTML-5 is UTF-8. Example: <meta charset="UTF-8"> What is charset IS0-8859-1? It is a default character in HTML 4.01. ISO (International Standards Organization) defines the standard character sets for different alphabets/languages. Example: <meta charset="ISO-8859-1"> Setsthe character set.Usuallysetto ‘utf-8’whichincludesmostcharacters.
- 3. Tags inside <body> tag: <p>……</p> it is a paragraph <!--------> it is a comment tag Example: <p>This is a good way to use bottle gourds. Ensure that you squeeze out any excess water from the cooked bottle gourd.</p>. <!-- It is a separage paragraph--> <p>This is a good way</p> <!-- It is a separage paragraph with white space--> <p> This is a good way </p> <strong>……..</strong> and <b> …..</b> both are same as bold a text. <em>……</em> and <i>…..</i> both are same as slashing a text. <u>……</u> it is a text underling. Ordered List: It is used a numbering library <ol>…….</ol> Unordered List: It is used a bullets library <ul>……</ul> Both listhaslisttags inside alistlike <li>……..</li>. It isnestedinside alistoranotherparagraph text.
- 4. Example: <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <meta name="viewport" content="width=device-width"> <title>Assignment1</title> </head> <body style="background-color:silver;"> <!--Centre Alignment of Heading--> <p><h2><center>Bottle Gourd Raita</center></h2></p> <p>This is a good way to use bottle gourds. Ensure that you squeeze out any excess water from the cooked bottle gourd.</p> <!--Unordered List with using a sublist--> <ul> <li><b>Ingredients</b></li> <ul> <!--Paragraph text with whitespace and using italic and emphasize it is slashing a text--> <p> <li><em>250 g bottle gourd</em></li> <li><i>Pinch of Salt</i></li> <li><em>375g curd</em></li> <li><em>Pinch of red chilli powder</em></li> <li><em>Pinch of roasted cumin powder</em></li> </p> </ul> </ul> <!--Ordered List with strong and bold like text is brighter than other like boldly--> <ol><p><h3><u>Explanation:</u></h3></p> <ol> <li>Peel and grate the <strong>bottle gourd</strong> and boil the grated <strong>bottle gourd</strong> with the salt for 5 minutes.</li> <li>Drain and allow to cool and Whisk the chilled yogurt and add the red chilli powder.</li> <li>Add the <strong>bottle gourd</strong> and mix well.</li> <li>Serve sprinkled with cumin powder.</li> </ol></ol> </body> </html>