Html notes with Examples
html example html tutorial for beginners html basics html tutorial pdf basic html page template what is html html tags basic html tags list 1. 1 Introduction to HTML What is an HTML File? HTML stands for Hyper Text Markup Language An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor If you are running Windows, start Notepad. Type in the following text: <html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html> Save the file as "mypage.htm". Start your Internet browser. Select "Open" (or "Open Page") in the File menu of your browser. A dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file you just created - "mypage.htm" - select it and click "Open". Now you should see an address in the dialog box, for example "C:MyDocumentsmypage.htm". Click OK, and the browser will display the page. Example Explained The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. The last tag in your document is </html>. This tag tells your browser that this is the end of the HTML document. The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window. The text between the <title> tags is the title of your document. The title is displayed in your browser's caption. The text between the <body> tags is the text that will be displayed in your browser. The text between the <b> and </b> tags will be displayed in a bold font.
Recomendados
Mais conteúdo relacionado
Mais procurados
Semelhante a Html notes with Examples
Semelhante a Html notes with Examples (20)
Último
Último (20)
Html notes with Examples
- 2. HYPERTEXT MARKUP LANGUAGE • Not a programming language but it is a Markup Language • Programming Language VS Markup Language • Programming: • Conditions i.e. if, if else, nested if. • Loops i.e. for, while, Do-while. • Logics. • Markup: • We create document structure. • That documents are our Web-Pages.
- 3. HTML REQUIREMENTS • Text Editor • Notepad/Notepad++/Dreamweaver/Atom • File Extension:- • .htm/.html • Web browser:- • Any Web browser but Firefox is for best uses.
- 4. HTML FILE STRUCTURE <html> <head> </head> <body> </body> </html> Starting of HTML. Root of Web Page Documents. Invisible Part(the content in this tag, we write, is not visible on the Web Browser). It links the CSS file, Javascript file , Bootstrap, font- awesome, Jquery or any other file that we want to link. It contains the title of the web page Visible Part(the content in this tag is visible on the Web Browsers).
- 5. HEAD - TAGS • <title></title> • <meta/> It is only for SEO(Search Engine Optimize). • <link/> Link the CSS files • <style></style> contains the CSS properties and Values • <script></script> It is for JavaScript and Jquery file. • <base/> Note:- For the Description of theses tags Checkout the HTML5 Videos.
- 6. Base tag in details • It set the default path for files Example:- with base tag <html> <head> <base href=“d:images” target=“_blank” / > </head> <body> <img src=“pic1.png”/> <img src=“pic2.jpg”/> </body> </html> Example:- Without Base tag <html> <head> </head> <body> <img src=“d:imagespic1.png”/> <img src=“d:imagespic2.jpg”/> </body> </html>
- 7. BODY TAGS - 1 • Headings • <h1> Heading 1 </h1> • <h2> Heading 2 </h2> • <h3> Heading 3 </h3> • <h4> Heading 4 </h4> • <h5> Heading 5 </h5> • <h6> Heading 6 </h6> • Bold • <b> </b> • <strong> </strong> • Italic • <i> </i> • <em> </em> • Underline • <u> </u> • Paragraph • <p> </p> • Image • <img/> • Break Line • <br/> • Pre Formatted Tag • <pre> </pre> Example: <pre width=“150”></pre> • Horizontal Line • <hr/>
- 8. BODY TAGS - 2 • Blockquote • <blockquote> it give the Left and right margin </blockquote> • Quote • <q> it add the “double inverted comma” </q> • Font • <font color=“red”>Red font</font> • Strikethrough • <s> Line between the text like THIS </s> • Big text • <big> </big> • Monotype font or Typewriter Text • <tt> </tt> • Abbreviation Tag • <abbr title=“Hypertext Markup Language>HTML</abbr> • Blink Tag • <blink> </blink> • Superscript • <sup> </sup> • Subscript • <sub> </sub> • Small Text • <small> </small>
- 9. BODY TAGS - 3 • Center • <center> </center> • Bi- directional Override • <bdo dir=“ltr”> </bdo> • <bdo dir=“rtl”> </bdo> • Special Tag | Unicode Character • |   Space • © | © Copyright© • ® | ® Register ® • Form • <form> </form> • Ordered List • <ol> <li></li> </ol> • Unordered List • <ul> <li></li> </ul> • Definition List • <dl> <dt> definition Title </dt> <dd> definition data </dd> </dt>
- 10. BODY TAGS - 4 • Anchor tag |URL tag • <a href=“www.google.com”> Google </a> • <a href=“www.google.com” target=“_blank” tittle=“it will open in new tab”> Google </a> • <a href=“www.google.com” target=“_self”> Google </a> • Link color Change • Link Color Name • alink Active color Name • vlink Visited color link Example: <body link=“blue” alink=“yellow” vlink=“red”> </body>
- 11. BODY TAGS - 5 • Table tag with example <table> <caption> Demo table</caption> <thead> <tr><td> this is the Table Heading</td></tr></thead> <tfoot> <tr><td> this is the Table Footer </td></tr></tfoot> <th></th> <tr> <td> </td> <td> </td> </tr> </table>
- 12. BODY TAGS - 6 • Other Attributes of Table tag • Cellspacing outer space of the Cells • Cellpadding inner space of the Cells • Rowspan merge multiple Rows • Colspan merge multiple Columns
- 13. Note To see all other tags with their examples Checkout My HTML5 tutorials Videos in my Playlist.