W6 - Intro to HTML.pdf
- 1. 1
- 2. 2
- 3. Two ways to get started 3
- 4. The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly. Web Browsers A browser does not display the HTML tags, but uses them to determine how to display the document:
- 6. <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> Two Sections ï body ï head
- 7. <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> âą declaration defines that this document is an HTML5 document HTML Elements ï html ï title ï body ï h1 ï p ï head
- 8. <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> âąis the root element of an HTML page âąContains meta information about the HTML page âąSpecifies a title for the HTML page (shown in browserâs title bar/pageâs tab)
- 9. <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> âądefines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. âądefines a large heading âądefines a paragraph
- 10. An HTML element is defined by a start tag, some content, and an end tag: What is an HTML Element? <tagname>Content</tagname> Start Tag Element Content End Tag <h1> My First Heading </h1> <p> My First Paragraph </p> <strong> To Bold sentence </strong> <em> Emphasize/italic </em> <u> underline </u> <a href= âhttp://www.sample.comâ> This is a link </a> href = attribute specifies the URL of the page the link goes to. a = defines hyperlink
- 12. HTML Page Structure Note: The content inside the <body> section (the white area above) will be displayed in a browser. The content inside the <title> element will be shown in the browser's title bar or in the page's tab.
- 13. HTML Headings Start Tag Element Content End Tag <h1> My First Heading </h1> <h2> My First Heading </h2> <h3> My First Heading </h3> <h4> My First Heading </h4> <h5> My First Heading </h5> <h6> My First Heading </h6>
- 14. Empty Elements Self Closing Tags Define <br/> line break <img src /> HTML images <hr /> Horizontal line HTML images are defined with the <img> tag. The source file (src), alternative text (alt), width, and height are provided as attributes: ïSelf Closing Tags