CHAPTER 2_ Get Started with HTML Module
- 1. WELCOME TO LEARN at FLIGNO
- 2. 2 HTML & CSS BASICS CHAPTER 2: GET STARTED WITH HTML LOGO
- 3. 3 CHAPTER 2: GET STARTED WITH HTML Learning Objectives At the end of this chapter you should be able: 1. Learn HTML basic syntax on creating an HTML file 2. Learn HTML basic elements and tags 3. Learn about nesting HTML elements 4. Learn basic HTML attributes
- 5. 5 HTML SYNTAX HTML Syntax HTML is used to create web pages and web applications. ● The <!DOCTYPE> Declaration ● HTML Headings ● Web Browsers ● HTML page structure Main Topic
- 6. 6 HTML SYNTAX The <!DOCTYPE> Declaration Is a declaration that tells the browser what version of HTML the document is written in. SubTopic HTML View
- 7. 7 HTML SYNTAX HTML page structure The <html>, <head>, <title> and <body> tags make up the basic skeleton of every web page. SubTopic
- 9. 9 HTML ATTRIBUTES About HTML Attributes Attributes usually come in name/value pairs like: name="value" ● The href Attribute ● The src Attribute ● The width and height Attributes ● The alt Attribute Main Topic
- 10. 10 HTML ATTRIBUTES The href Attribute The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to. SubTopic HTML View
- 11. 11 HTML ATTRIBUTES The href Attribute The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to. SubTopic Web View
- 12. 12 HTML ATTRIBUTES The src Attribute The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed. SubTopic HTML View
- 13. 13 HTML ATTRIBUTES The src Attribute The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed. SubTopic Web View
- 14. 14 HTML ATTRIBUTES The width and height Attributes The <img> tag should also contain the width and height attributes, which specify the width and height of the image (in pixels). SubTopic HTML View
- 15. 15 HTML ATTRIBUTES The width and height Attributes The <img> tag should also contain the width and height attributes, which specify the width and height of the image (in pixels). SubTopic Web View
- 16. 16 HTML ATTRIBUTES The alt Attribute The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. SubTopic HTML View
- 17. 17 HTML ATTRIBUTES The alt Attribute The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. SubTopic Web View
- 18. LESSON 3 HTML ELEMENTS AND TAGS
- 19. 19 HTML ELEMENTS AND TAGS HTML Elements An element in HTML usually consists of a start tag (or opening tag) <tag name>, end tag (or closing tag) </tag name> and content inserted between them. Main Topic
- 20. 20 HTML ELEMENTS AND TAGS HTML Element ● opening tag ● content ● closing tag SubTopic
- 21. 21 HTML ELEMENTS AND TAGS Nesting Html Elements 1. <!DOCTYPE> 2. <html> 3. <body> 4. <h1> 5. <p> SubTopic HTML View 1 2 3 4 5
- 22. 22 HTML ELEMENTS AND TAGS HTML Headings Defines a large heading SubTopic HTML View
- 23. Any Questions?
Editor's Notes
- #8: The <html> element is the root element of an HTML page The <head> element contains meta information about the HTML page The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
- #23: 2. Paragraph Element - <p> 3. Formatting Element: <b> - Bold text <strong> - Important text <i> - Italic text <em> - Emphasized text (same on italic) <mark> - Marked text (Parang highlighted) <small> - Smaller text <del> - Deleted text (strike a line) <ins> - Inserted text (underline text) <sub> - Subscript text (char below line) <sup> - Superscript text (footnote) 4. HTML Quotation: In this chapter we will go through the <blockquote> - quoted from other source, <q> - short quotation, <abbr>- abbrevation, <address>- information of a document, <cite> - title of a creative work (book,poem,song), and <bdo>- Bi-Directional Override used override the current text direction. 5. Table - HTML tables allow to arrange data into rows and columns.