<html>
document block is the entirety of the HTML code for a webpage. In the example, the tags defining this block--<html>
and </html>
—are located towards the top and bottom of the document. The document is prefaced with a DOCTYPE
declaration, which tells browsers which specification to parse your webpage against. If you are following the strict conventions of the HTML5 specification, you should use the declaration shown above. Otherwise it can be left off, but it defaults to a 'quirks' mode. Refer to the HTML5 specification for more on document validation types.<head>
block defines a block of metadata about the webpage. In this case, you can see the webpage has a <title>
element within it. The title is the text that is displayed at the top of a web browser window. The <head>
block also can contain a variety of other metadata, such as externally linked CSS style sheets (using the link
tag) and sets of JavaScript functions. This block should always contain at least the title, and should always be external to the body content.<body>
block should be used to specify style parameters for the entirety of the content. <body>
block. They include:<h1>
and </h1>
tags, this defines the header for a following block of content. The headers can be of six different sizes, ranging from a very large first-level heading (defined with the <h1>
and </h1>
tags) down to a small sixth-level heading (defined with the <h6>
and </h6>
tags). It should contain only brief text—other content such as large text blocks, images, and movies should be embedded in other appropriate block elements such as paragraphs and divisions.<p>
and </p>
tags, this is one of the fundamental block elements for web content. Each individual paragraph should contain the inline text content that defines the readable content of a webpage and should not enclose any other block elements. Generally, paragraph blocks are for text only. https://yellowpizza365.weebly.com/note-writing-app-mac.html. An alternative to the paragraph is the division, and that is the most appropriate block element for other media types such as images and movies.<div>
and </div>
tags, the division is designed to contain all kinds of content, including text, images, and other multimedia. It also can encompass other block elements such as paragraphs, though enclosing divisions within other divisions is generally not recommended. Generally, division blocks are used to define unified styles for blocks of content. In the example above, the division block contains the heading image for the webpage.<ol>
and </ol>
tags) and the unordered list (specified by the <ul>
and </ul>
tags), as in the example above. An ordered list tags each list element (specified by the <li>
and </li>
tags) with an incremental number (1, 2, 3, and so on). An unordered list tags each list element with a bullet, though this marker can be changed using CSS styling.<a>
and </a>
hyperlink tags, you can link your reader to the Apple website as shown in Listing A-4.title
attribute provides an alternate description of the link. In Safari, holding the mouse over the hyperlink for a couple of seconds reveals this value as a tooltip. It's a great way to provide information about a link before the user clicks it, letting them decide if they want to leave your webpage or not. Additionally, this information is used by screen readers and other accessibility devices, so by using this attribute, you help extend your content to a larger community.<img>
tag. It's important to note that an image is an inline element, so needs to be placed within a block element such as a paragraph. It is also a little different from some other inline elements in that it doesn't require a closing tag. Listing A-5 shows how to add an image to the travel journal entry.src
attribute defines the URL to the image (with the same rules for relative versus absolute URLs as in the hyperlink), and the alt
attribute defines a block of alternate text—this text can also be read by screen readers, or can be shown by some browsers when images are turned off in the browser.<br>
line break element. Remember that an image is an inline element, just like text. Without a forced line break, the image would display and the text would follow directly after, left to right, one after the other. That's a little awkward for a travel journal, but useful when you have small images (like mathematical equations) that you want integrated into the text. Add the line break to force the next line of text to a new line.<table>
block. You can add a <table>
block to display any kind of tabular data. To the previous example, let's add a table of temperatures that the journal writer experienced on their day in Cupertino. For the information to be useful, you'll also want to add something about the time at which the temperature was recorded. Both the time and temperature can be labeled using table headers, specified by the <th>
and </th>
tags. Notice that the order of the table headers and table cells (specified by the <td>
and </td>
tags) match within their particular row (specified by the <tr>
and </tr>
tags) in Listing A-6.<script>
block of the webpage's <head>
block, or even inline with the elements, using the various JavaScript delegates provided by the browser. For example, if you want to display an alert when the user clicks a button, add the code (or the function call, if the code is defined elsewhere) to the button's onClick
delegate: