1.1 html lec 1
1 like85 views
The document provides a comprehensive overview of HTML, covering basic elements such as tags, attributes, and structure for creating web pages. It discusses text formatting, hyperlinks, images, and includes examples of HTML code. Important topics also include comments and documentation practices for writing HTML.
![HTML: COMMENTS
Comments
<!-- Write your comments here -->
Conditional Comments
<!--[if IE 9]>
.... some HTML here ....
<![endif]-->](https://image.slidesharecdn.com/1-190203123830/85/1-1-html-lec-1-22-320.jpg)
1.1 html lec 1
- 2. IoT Code LabS M A R T T E C H L I F E iotcodelab.com RESEARCH DEVELOPMENT TRAINING
- 3. HTML: LEC 1 H T M L B A S I C , H E A D I N G , T E X T F O R M AT T I N G , L I N K , I M A G E , C O M M E N T
- 4. HTML HyperText Markup Language Represent Content ofWeb Page Tag Attribute
- 5. TAG OpenTag Close Tag Tag Element <h2> This is heading 2 </h2> Close Tag Tag Element Open Tag
- 6. ATTRIBUTE Additional information of Elements Define in the Open tag Written as Name=“Value” Pair Attribute <p title=“Paragraph 1”> This is Paragraph </p>
- 10. HTML BASIC STRUCTURE <!DOCTYPE html> <html> <head> </head> <body> </body> </html>
- 11. START CODING <!DOCTYPE html> <html> <head> <title> My First Web Page</title> </head> <body> Hello, I am Learning HTML </body> </html>
- 12. HEADING <body> <h1>This is heading 1</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>
- 13. TEXT FORMATTING Paragraph <p> This is Sample Paragraph </p> Bold <b> </b> Important <strong> </strong> Underline <u> </u> Insert <ins> </ins> Italic <i> </i> Emphasized <em> </em> Address <address> </address> Work Title <cite> </cite>
- 14. TEXT FORMATTING StrickThrough <del> </del> Mark <mark> </mark> Small <small> </small> Subscript <sub> </sub> Superscript <sup> </sup> Quotation <q> </q> Block Quote <blockquote> </blockquote> Abbreviation <abbr title="title">abbr text</abbr>
- 15. TEXT FORMATTING Preformatted <pre> </pre> Line Break <br> Horizontal Rule <hr> Computer Code <code> </code> Keyboard Input <kbd> </kbd> Computer Output <samp> </samp> Variable <var> </var> Text Direction <bdo dir=“rtl”> </bdo>
- 16. HYPER LINK Internal <a href=“index.html”> Home </a> External <a href=“https://www.google.com”> Go To Google </a>
- 17. LINK : TARGET _self <a href=“index.html” target=“_self”> Home </a> _blank <a href=“https://www.fb.com” target=“_blank”> GoTo Facebook </a>
- 18. IMAGE <img src=“logo.png”> <img src=“logo.png” alt=“Text if image not displayed”> <img src=“logo.png” height=“200” width=“200”> <img src=“logo.png” alt=“Text if image not displayed” height=“200” width=“200”>
- 19. IMAGE <img src="logo.png" style="width:128px;height:128px;"> <img src="images/logo.png "> <img src="https://www.google.com/images/...">
- 20. IMAGE AS LINK <a href=“index.html”> <img src=“logo.png”> </a>
- 21. FIGURE: IMAGE <figure> <img src="banner.jpg" alt=“Banner"> <figcaption>Banner</figcaption> </figure>
- 22. HTML: COMMENTS Comments <!-- Write your comments here --> Conditional Comments <!--[if IE 9]> .... some HTML here .... <![endif]-->
- 23. DOCUMENTATION We will use always the “Lower Case” letter to write the HTML document. We use necessary indentation in the document
- 24. TOPIC COVERED : HTML Tag & Attribute Head title link style script meta base Body Heading Text Formatting Link Image Comment
- 25. ANY QUESTION?
- 27. IoT Code LabS M A R T T E C H L I F E iotcodelab.com RESEARCH DEVELOPMENT TRAINING