Essential Tags Web Design – Sec 3-3 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials
Objectives The Student will: Learn the basic tags required for all HTML documents and be able to create a blank HTML page with all of the essential tags in place.
HTML FACTS REVIEW Web pages are just plain text. You can view or edit the source code using any text editor. "Tags" provide web browsers with instructions about the web page, such as where to display images, and how the document is structured. Tags are always enclosed in angle brackets: < >. Tags are comprised of elements and attributes. An element is an object on a page (such as a heading, paragraph, or image), and attributes are qualities that describe that element (such as width and height).
HTML FACTS REVIEW Tags usually travel in pairs. An opening tag begins a section of page content, and a closing tag ends it. For example, to markup a section of text as a paragraph, you would open the paragraph with an opening paragraph tag <p> and close it with a closing paragraph tag </p> (closing tags always proceed the element with a /). A few tags are called non-container tags, because they don't contain any content - they stand alone. Examples are images and line breaks. XHTML requires that all open tags must be closed, even if they're non-container tags. Therefore, non-container tags end in />. For example, the tag for a line break is <br />.
HTML FACTS REVIEW Tags in HTML are not case sensitive, but in XHTML all tags must be in lower case. Even when coding in HTML, you should get in the habit of writing tags in lower case. White space is ignored by web browsers. So, if you hit the space bar multiple times within a document, only one of those spaces will actually be displayed by the browser. Tags can be nested. For example, <em> <strong>this text is italicized and bold</strong> </em>. Note that the order of nested tags is important: The container tags surrounding any content should be symmetrical.
Essential HTML There are some basic tags you must add to every HTML document you create. Previously you created a file called index.htm. Today you will add a few basic required tags to this file, thereby beginning the construction of your portfolio. These basic tags provide a skeleton for any web page.
Add the following to index.htm file
Essential HTML Tags The first line is the DOCTYPE. It specifies the version of HTML you are using. HTML5 has a very simple DOCTYPE. All prior versions of HTML and XHTML had much longer and complicated DOCTYPE statements. The DOCTYPE statement is necessary because it tells the browser which version of HTML you're using, so the browser knows how to process your code. A common mistake among web developers is neglecting to include a DOCTYPE statement. Without a DOCTYPE statement, browsers have to guess which version of HTML you're using, and sometimes they get it wrong.
Essential HTML Tags <html> is typed before all the text in the document. This marks the beginning of the html document. <head> Web pages are divided into two main sections: the head and the body. The head provides information about the document, including the author, description, keywords, title, and other information. In our "bare bones" document the only content in the head section of our web page is the title. </head> This marks the closing of the head section.
Essential HTML Tags <title> You must give your document a title. This title doesn't actually appear within the web page, but appears in the title bar of the browser window. This is also the title of the page that will be displayed by default in search engine results or in user's Favorites. </title> closes the title tag. <meta> is a tag that has many purposes, depending on what attribute it has. In our "bare bones" document, the attribute is charset, which is set to "utf-8". This is a required tag, which tells the browser which character set the web page is encoded in. There are many possible character sets, but "utf-8" is an international character set that is one of the most common. The <meta> tag is not a container tag. Therefore, it has no corresponding closing tag.
Essential HTML Tags <body> The body section contains the visible contents of your document. </body> closes the body tag. <!-- Comment --> Comments are intended solely for people reading the source code, and are not visible when someone views the web page in a browser. </html> ends the html document.
Note… You may find it easier to read if you add extra blank lines. Also, indenting content that is inside of other content helps you to see the relationship between all their parts of the page. Remember: Extra spaces and blank lines will be ignored when the HTML is displayed by a browser.
Summary Essential HMTL tags are required in every file… Tag Description <html>…</html> Begin and End an HTML document <head>…</head> The header section of the document, which contains information about the page. This is not displayed to the user. Contains meta tags. <title>…</title> Define a document title. This element is required in every HTML document. <body>…</body> Defines the body section of the document, which contains the visible content to be displayed on the page.
Rest of Today Complete the Homework from yesterday Add the text on Slide 7 to your index.htm file.
Rest of Today Now create the other files you will need for this class: accessibility.html graphics.html javascript.html usability.html tools.html Simply copy the code from index.html and paste it into the new pages. Each time you do this, change the <title> element to reflect the content of the new page. For example, change the title in graphics.html to something like "Web Portfolio: Your Name's Graphics Page". Show me the results when done.