6. <html>
<head>
<title>Simple Website</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is a demonstration.</p>
</body>
</html>
• The Head provides information about the
document
7. <html>
<head>
<title>Simple Website</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is a demonstration.</p>
</body>
</html>
• Body contains everything that we want to
show up in the browser window.
10. How Browser Displays Images
1. Loads HTML
2. Looks through HTML for image tags
3. Asks Server for each image it finds in HTML
peanut-butter.jpg
HTML
11. Empty Elements
• Don’t have text content
• Don’t have a closing tag
• They end with “ /> ”
– This is called terminating (or closing) the element
<img src=“peanut-butter.jpg” />
<h1 />
12. Element Attributes
• Instructions that clarify or modify an element.
• src (short for source) is example of attribute
• For img tags, src attribute is required
<img src=“peanut-butter.jpg” alt=“Google” />
14. Summary
<img src=“peanut-butter.jpg” />
• Tells the browser to get an graphic file from
Server and insert it into page
• Empty Elements
• Element Attributes
15. Tags for adding emphasis
• <em> … </em>
– Emphasized text
• <strong> … </strong>
– Strongly emphasized text
• Used only for text!
17. Block Elements
• Paragrahs <p> … </p>
• Headings <h1> … </h2>
• Lists <ol> … </ol>
• Block-level element begins on a new line, and
some space is also usually added above and
below the entire element by default.
18.
19. Inline Elements
• <em> … </em>
• <strong> … </strong>
• <img src=“test” />
• Go with the flow
20. Block vs Inline
• Block elements are the major building blocks
of your Web page
• Inline elements for small pieces of content
