<!DOCTYPE html>
<html lang = "en-us">
<head>
<title> A Crash Course in HTML... W3 School's Summarized HTML Tutorial </title>
<meta charset = "UTF-8">
<!-- Sample Internal Styling. See below -->
<!-- Add to the style tag below to modify the webpage.
body {background-color:black;}
h1 {color:red; font-family:verdana;}
h2 {color:white; font-family:verdana;}
h3 {color:white; font-family:verdana;}
h4 {color:white; font-family:verdana;}
h5 {color:white; font-family:verdana;}
h6 {color:white; font-family:verdana;}
p {color:white; font-family:courier; font-size:150%;}</style>-->
<style>
table, th, td {
border: 5px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
text-align:center;
}
th {background-color: red;}
td{background-color: pink;}
#header{
background-color:black;
color:white;
text-align:center;
padding:10px;
}
#nav {
text-align:left;
float:left;
width:15%;
height:11200px;
padding:10px;
}
#section{
text-align:left;
width:65%;
padding:20px;
float:left;
}
</style>
</head>
<body>
<div id="header">
<h1 id="top"> A Crash Course in HTML... <br>W3 School's Summarized HTML Tutorial </h1>
<h2> Basic HTML skills for Writing 135: Living in the Age of the Anti-hero!</h2>
</div>
<div id="nav">
<p> <a href="../index.html">Return</a> to the homepage. </p>
<h3> Index: Jump to a Topic</h3>
<a href ="#headings">1. Headings</a><br>
<a href="#paragraphs">2. Paragraphs</a><br>
<a href="#preformatted">3. Pre-formatted Text</a><br>
<a href="#htmlnotes">4. Notes about HTML</a><br>
<a href="#listsandtags">5. Lists and Tags</a><br>
<a href="#newdocument">6. Creating an HTML Document</a><br>
<a href="#links">7. HTML Links</a><br>
<a href="#attributes">8. Attributes</a><br>
<a href="#images">9. Images in HTML</a><br>
<a href="#quotations">10. HTML Quotation and Citation Documents</a><br>
<a href="#usefulelements">11. Other HTML Elements</a><br>
<a href="#styles">12. HTML Styles</a><br>
<a href="#formatting">13. HTML Formatting Elements</a><br>
<a href="#colors">14. HTML Colors</a><br>
<a href="#introcss">15. An Introduction to Applying CSS to HTML</a><br>
<a href="#bookmarks">16. Bookmark Navigation in HTML</a><br>
<a href="#tables">17. HTML Tables</a><br>
<a href="#divlayout">18. Webpage Layout and Formatting</a><br>
<a href="#validating">19. Validating your HTML Document</a><br>
<br>
</div>
<div id="section">
<h2 id="headings">Headings:</h2>
<p> There are 6 levels of headings. The level of a heading corresponds to its importance: </p>
<h1>This is the first level</h1>
<h2>This is the second level</h2>
<h3>This is the third level</h3>
<h4>This is the fourth level</h4>
<h5>This is the fifth level</h5>
<h6> This is the sixth and last level</h6>
<p> Heading tags should only be used to create actual headings. There are other ways to make text bigger or bolder in paragraphs. </p>
<hr>
<h2 id="paragraphs"> Paragraphs:</h2>
<p> This is a paragraph. Whenever you create a start tag, remember to close it as well by rewriting that tag with a '/' character. This second tag is called an end tag. With few exceptions, tags will always come in pairs. These exceptions are called <strong>Empty Elements</strong> because they include no content, and they include the <br> tag, which creates an empty line or <strong>line break</strong>. They do not need to be closed, but they can be in order to withstand stricter validation by writing them like this: <br/>. </p>
<hr>
<h2 id="preformatted"> Pre-formatted Text: </h2>
<p> The format of a paragraph in HTML cannot be modified by adding either extra spaces or skipped lines without adding line breaks (<br>) to the text. To add <strong>pre-formatted text</strong> to the webpage, the <strong><pre></strong> element must be used. This element will retain the format of the text added, and will display in a fixed-width font (with each character taking up the same amount of horizontal space) like Courier. Below is an E.E. Cummings poem that would lose its unique format if not bracketed by <pre> tags: </p>
<pre>
<b>The Sky Was</b>
<b>E.E. Cummings</b>
the
sky
was
can dy lu
minous
edible
spry
pinks shy
lemons
greens coo 1 choc
olate
s.
un der,
a lo
co
mo
tive s pout
ing
vi
o
lets
</pre>
<p> Another empty elment is the <strong><hr></strong> tag. This tag creates a horizontal line across the page, like so: </p>
<hr>
<p> <a href = "http://www.w3schools.com/tags/"> Here</a> is a link to W3 School's HTML tag reference. </p>
<br>
<hr>
<h2 id="htmlnotes"> Notes about HTML: </h2>
<h3> CITATION: All of the information in this document comes from the Tutorial at www.w3schools.com. Some information is quoted directly, but these quoted sections are individually noted. </h3>
<p> HTML is the acronym for Hyper Text Markup Language. HTML documents are broken up into content described by HTML tags, for example: paragraphs and headings. You can add comments to your HTML documents that won't be translated into text on a webpage by inserting comments between the following symbol series (without spaces): <br> < ! - - and - - >. </p>
<!-- Here are some sample comments -->
<!-- These won't appear in the webpage -->
<!-- But they are useful for making notes for yourself to be used later on -->
<!-- You can also use comments to debug your code by commenting out different lines to see where errors are occuring -->
<br>
<br>
<p> A <br> tag is a line break - adding one to your code will create an empty line in your webpage. Above, there are two line breaks. </p>
<hr>
<h2 id="listsandtags"> Lists and Tags: </h2>
<h3> NOTE: The following list is copied and pasted from W3 School's source code: </h3>
<p> There are different kinds of lists in HTML. One of these is an unordered, or bulleted list. Another type is the ordered, or numbered, list. Unordered lists are started and ended with <strong><ul></strong> tags, whereas ordered lists are started and ended with <strong><ol></strong> tags. Each item in a list is denoted with list item tags, <strong><li></strong>.</p>
<ul>
<li>The <strong>DOCTYPE</strong> declaration defines the document type to be HTML</li>
<li>The text between <strong><html></strong> and <strong></html></strong> describes an HTML document</li>
<li>The text between <strong><head></strong> and <strong></head></strong> provides information about the document</li>
<li>The text between <strong><title></strong> and <strong></title></strong> provides a title for the document</li>
<li>The text between <strong><body></strong> and <strong></body></strong> describes the visible page content</li>
<li>The text between <strong><h1></strong> and <strong></h1></strong> describes a heading</li>
<li>The text between <strong><p></strong> and <strong></p></strong> describes a paragraph</li>
<li><strong>Note:</strong> This is an <strong>unordered list</strong></li>
</ul>
<p> The <title> tag contains <strong>meta data</strong>, or information about the HTML page that will not be displayed. This information can include the page <strong><title></strong> element; the <strong><meta></strong> element (which can define the character set - here as UTF-8); and either the <strong><style> or <link></strong> elements which correspond to internal or external CSS style sheets, respectively. </p>
<h3> All HTML documents contain nested elements.</h3>
<p> The tags above each describe different amounts of content:</p>
<ol>
<li> The <html> tag describes the whole document</li>
<li> The <body> tag describes the document body</li>
<li><strong>Note:</strong> This is an <strong>ordered list</strong></li>
</ol>
<p> <strong>Note:</strong> When writing HTML, to include the < or > signs, instead of typing the sign itself you write out & l t ; (without spaces) or & g t ;. This is useful when you are writing out a tag (as seen above in the code copied from W3 Schools. </p>
<hr>
<h2 id="newdocument"> Creating a HTML document.</h2>
<p> Save your HTML file with an .html or .htm file name. This document is called W3_HTML_Tutorial.html. The preferred encoding for HTML files is UTF-8. W3 Schools described UTF-8 as: </p>
<blockquote>"A character in UTF8 can be from 1 to 4 bytes long. UTF-8 can represent any character in the Unicode standard. UTF-8 is backwards compatible with ASCII. UTF-8 is the preferred encoding for e-mail and web pages."</blockquote>
<p> The element shown above is a HTML blockquote which uses a <blockquote> tag (more information below). </p>
<hr>
<h2 id="links">HTML Links: </h2>
<p>HTML Links are created using an <a> tag. They look like this: < a href = "http://www.w3schools.com"> This is a link for W3 Schools </a>. The <strong>href</strong> attribute of the link designates its destinatin, and the <strong>link text</strong> is what will be visible to a website visitor. </p>
<p> Here is the same link, working this time, in a paragraph tag. <a href = "http://www.w3schools.com"> This is a link for W3 Schools</a>. The destination of the link is it's <strong>href atrribute</strong>.</p>
<p>The link text does not necessarily need to be text - it can be any HTML element, although images are a popular choice in lieu of text (copied from W3 Schools, a sample image link): </p>
<a href="http://www.jurassicworld.com/">
<img src="https://upload.wikimedia.org/wikipedia/pt/b/bc/Jurassic_Park_logo.png" alt="HTML tutorial" style="width:150px;height:103px;">
</a>
<p><strong>Local links</strong>, or links to pages on the same website, do not need to include the 'http://www...' portion of the URL. </p>
<p>The color and style of a link can be modified using style attributes like: <strong> color, background-color, and text-decoration</strong>. The style attributes can vary for a link based on its current status, or, whether it is un-visited, visited, active, or being hovered over. Copied from W3 Schools, the internal styling (see below) for a link may look like this: </p>
<pre>
<style>
a:link {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover {color:red; background-color:transparent; text-decoration:underline}
a:active {color:yellow; background-color:transparent; text-decoration:underline}
</style>
</pre>
<hr>
<h2 id="attributes">Attributes: </h2>
<p> An <strong>attribute</strong> is a piece of additional information about an element and are specified in the start tag (as seen above with the href attribute). They come in name/value pairs identifiable by an = sign between the two. The value of the attribute will be enclosed in quotation marks. One important type of attribute is the <strong>lang</strong> attribute. This attribute is included in the <html> tag, and it specifies first the language, then the dialect. This document is declared to be English(United States) using an attribute value of "en-us". <a href = "https://msdn.microsoft.com/en-us/library/ms533052(v=vs.85).aspx"> Here</a> is a list of language codes that can be applied to HTML documents. Declaring the <strong>lang</strong> attribute is important because search engines and screen readers will use that information. <br/><strong>Note:</strong> Always use lowercase attributes (ex: <title> vs. <Title>), and always enclose the attribute value in quotation marks. </p>
<p><a href = "http://www.w3schools.com/tags/ref_attributes.asp"> Here</a> is a link to W3 School's <strong> Attribute Reference</strong> table. </p>
<hr>
<h2 id="images">Images in HTML documents: </h2>
<p> Images can be added to HTML pages in a similar way to links; they are defined with an <strong><img></strong> tag. The attributes of this tag are the source file (<strong>src</strong>), the alternative text (<strong>alt</strong>) that will appear if the image cannot be displayed or the webpage is processed with a screenreader, and the size (<strong>width</strong> and <strong>height</strong>). </p>
<p>Images should be stored in the same folder as the HTML document, although they can be within a subfolder in that folder. If this is the case, then the folder name should be included in the 'src' image attribute. For example:</p>
<pre><img src = "/images/sampleimage.jpg" alt="This is not an image" style = "width:250;height:150;"></pre>
<p>Images can also be accessed from any web address if that web address is set as the value of the 'src' attribute. </p>
<p> IMG tags look like this: <img src = "http://healthstones.com/dinosaurdata/s/stegosaurus/stegosaurus.jpg" alt = "A picture of a stegosaurus" width = "500" height = "267">.</p>
<p> Here is the same image, this time using <img> tags: </p>
<img src = "http://healthstones.com/dinosaurdata/s/stegosaurus/stegosaurus.jpg" title = "Stegosaurus Picture" alt = "A picture of a stegosaurus" width = "500" height = "267">
<p> <img src="http://thetechjournal.com/wp-content/uploads/2011/10/1317572461-talking-rex-the-dinosaur-fun-app-for-iphone-1.png" alt = "Tyrannosaurus Rex" style = "float:left;width:100px;height:100px;padding-right:50px"> An image can be set to "float" to the left or right of text on a page (so that the text wraps loosely around the contour of the image) but adding a <strong>float</strong> property to the style attribute and including the image and text in paragraph tags. This is the case in this paragraph. </p>
<p>The <img> tag for this image and text combination looks like this: </p>
<br><br>
<pre>
<img src="http://thetechjournal.com/wp
content/uploads/2011/10/1317572461-talking-rex-the
dinosaur-fun-app-for-iphone-1.png" alt =
"Tyrannosaurus Rex" style = "<strong>float:left
</strong>width:100px;height:100px;padding
right:50px">
</pre>
<hr>
<h2 id="quotations">HTML Quotation and Citation Elements:</h2>
<p>These elements may be useful when writing and posting blog posts or essay content if your work includes any quotations or direct references to the current text.</p>
<p>There are two types of quotations in HTML: <strong>Short Quotations</strong> and <strong>Long/Block Quotations</strong>. The following two quotations are both given a style attribute: <strong>cite</strong> that sets the webpage source of the quotations as the source.</p>
<ul>
<li>Short Quotations are defined with <strong><q></strong> tags. From Virginia Woolf's <i>A Room of One's Own</i>: <q cite= "https://www.goodreads.com/work/quotes/1315615-a-room-of-one-s-own">Isn't it strange how a scrap of poetry works in the mind and makes the legs move in time to it along the road.</q></li>
<li>Long/Block quotations are defined with <strong><blockquote></strong> tags, and browswers will typically indent blockquote elements. From Virginia Woolf's <i>A Room of One's Own</i>: <blockquote cite= "https://www.goodreads.com/work/quotes/1315615-a-room-of-one-s-own">What is meant by “reality”? It would seem to be something very erratic, very undependable—now to be found in a dusty road, now in a scrap of newspaper in the street, now a daffodil in the sun. It lights up a group in a room and stamps some casual saying. It overwhelms one walking home beneath the stars and makes the silent world more real than the world of speech—and then there it is again in an omnibus in the uproar of Piccadilly. Sometimes, too, it seems to dwell in shapes too far away for us to discern what their nature is. But whatever it touches, it fixes and makes permanent. That is what remains over when the skin of the day has been cast into the hedge; that is what is left of past time and of our loves and hates.</blockquote></li>
</ul>
<hr>
<h2 id="usefulelements">Other HTML Elements: </h2>
<p>Other useful elements include <strong>abbreviations</strong>, <strong>addresses</strong>, and <strong>citations</strong>.</p>
<ul>
<li>Abbreviations define abbreviatins or acronyms using <strong><abbr></strong> tags in the following format: <br>
<pre><abbr title="United Nations">UN</abbr></pre><br>
<p><strong>Applying the <cite> tags:</strong></p>
The <abbr title="United Nations">UN</abbr> was founded in 1945.
<br>
</li>
<li>Addesses give contanct information for the author or owner of a document or article. They will usually be displayed in italics, with a line break added before and after the address. The information is defined using <strong><address></strong> tags in the following format: <br>
<pre>
<address>
Written by Eliza McNair.
Visit me at:
FakeWebAddress.com
Unit ####, Wellesley College
Wellesley, MA, USA
</address>
</pre>
<p><strong>Applying the <abbr> tags:</strong></p>
<address>
Written by Eliza McNair.<br>
Visit me at:<br>
FakeWebAddress.com<br>
Unit ####, Wellesley College<br>
Wellesley, MA, USA
</address>
<br>
</li>
<li>Citations define the title of a work and show the title of the work in italics. This HTML element uses <strong><cite></strong> tags in the following format: <br>
<pre><p><cite>Winter Harmony</cite> by John Henry Twachtman<br>depicts a pool on the arist's farm near Greenwich, Connecticut.</p>
</pre>
<p><strong>Applying the <cite> tags:</strong></p>
<cite>Winter Harmony</cite> by John Henry Twachtman depicts a pool on the arist's farm near Greenwich, Connecticut. </li>
</ul>
<hr>
<h2 id="styles">HTML Styles:</h2>
<p>The <strong>style</strong> of any HTML element can be set using <strong>style attributes</strong> that are formatted: </p>
<p><strong>style: "property:value;"</strong></p>
<p>The property and the value of the style are <strong>CSS properties and values</strong>. The style attributes that can be set and modified include <strong>background-color</strong>, <strong>text color</strong>, <strong> font-family</strong>, <strong>font-size</strong>, and <strong>text alignment</strong>. Some sample paragraph styles (both code and appearance) are: </p>
<p> <p style = "color:red; font-family:verdana; font-size:300%; text-align:right"> This is a stylized paragraph. </p> </p>
<p style = "color:red; font-family:verdana; font-size:300%; text-align:right"> This is a stylized paragraph. </p>
<p> <p style = "color:green; font-family:courier; font-size:50%; text-align:center"> This is a stylized paragraph. </p> </p>
<p style = "color:green; font-family:courier; font-size:50%; text-align:center"> This is a stylized paragraph. </p>
<hr>
<h2 id="formatting">HTML Formatting Elements:</h2>
<p>Just as style attributes can give HTML elements a particular look, <strong>formatting elements</strong> can be used to give sections of text particular meaning or emphasis. These formatting elements include:</p>
<ul>
<li><b>Bold elements without extra importance:</b> This formatting element is created with <strong><b> </strong> tags.</li>
<li><strong>Strong elements with added semantic importance:</strong> This formatting element is created with <strong><strong> </strong> tags.</li>
<li><i>Italicized elements without extra importance:</i> This formatting element is created with <strong><i> </strong> tags.</li>
<li><em>Emphasized elements with added semantic importance:</em> This formatting element is created with <strong><em> </strong> tags.</li>
<li><small>Small elements:</small> This formatting element is created with <strong><small> </strong> tags.</li>
<li><mark>Marked elements (or highlighted text):</mark> This formatting element is created with <strong><mark> </strong> tags.</li>
<li><del>Deleted elements removed from the text:</del> This formatting element is created with <strong><del> </strong> tags.</li>
<li><ins>Inserted elements added to the text:</ins> This formatting element is created with <strong><ins> </strong> tags.</li>
<li><sub>Subscripted elements:</sub> This formatting element is created with <strong><sub> </strong> tags.</li>
<li><sup>Superscripted elements:</sup> This formatting element is created with <strong><sup> </strong> tags.</li>
</ul>
<hr>
<h2 id="colors">HTML Colors: </h2>
<p>Colors can be described in three ways: by <strong>CSS name</strong> (ex: Red, Orange, Yellow, Cyan, Blue, etc.), by <abbr title = "Red, Blue, Green"><strong>RGB</strong></abbr> notation (where RGB is (Red, Green, Blue) and each value represents the intensity of that parameter on a scale of 0 to 255), and by <strong>hexadecimal color values</strong> in the form of #RRGGBB (where RR is the red value, GG is the green value, and BB is hte blue value). In hexadecimal notation, 00 is the lowest value, and FF the highest.</p>
<p> Click <a href= "http://www.w3schools.com/colors/colors_names.asp"> Here</a> for a list of 140 colors supported by all web browsers sorted by name, or <a href= "http://www.w3schools.com/colors/colors_hex.asp"> here</a> for those 140 colors sorted by hex value. </p>
<p> Another great resource for choosing colors is W3 school's <a href= "http://www.w3schools.com/colors/colors_picker.asp"> Color Picker</a>, which allows website visitors to explore different colors, as well as how those colors look with text on top of them and how variations in light/darkness, hue, saturation, and lightness will affect the colors. For every possibility presented, the color picker provides both the RGB and hex values. </p>
<p> These color values can be used as style attribute values to adjust either the color of text or the background color of the webpage. </p>
<hr>
<h2 id="introcss"> More on Style: A Crash Course in Applying CSS to HTML</h2>
<h3> What is CSS?</h3>
<p> CSS stands for Cascading Style Sheets. Style can be added to HTML in one of three ways (this unordered list is taken directly from W3 School's source code): </p>
<ul>
<li>Inline - using a <strong>style attribute</strong> in HTML elements</li>
<li>Internal - using a <strong><style> element</strong> in the HTML <head> section</li>
<li>External - using one or more <strong>external CSS files</strong></li>
</ul>
<p><strong>Inline styling</strong> is the method of Styling described above in 'HTML Styles' that designates a unique style to one HTML element. As described above, inline styling follows the format -- style: "property:value;". When multiple style attributes are being defined, all are enclosed by the same quotation marks and separated by semi-colons. </p>
<p><strong>Internal styling</strong> is used to set a style for one HTML page, and is defined in the <strong><head></strong> section of the code in a single <strong><style></strong> element. A simple, sample HTML page style written in this way may look like this: </p>
<pre>
<head><br>
<style><br>
body {background-color:black;}<br>
h1 {color:red; font-family:verdana;}<br>
h2 {color:white; font-family:verdana;}<br>
h3 {color:white; font-family:verdana;}<br>
h4 {color:white; font-family:verdana;}<br>
h5 {color:white; font-family:verdana;}<br>
h6 {color:white; font-family:verdana;}<br>
p {color:white; font-family:courier; font-size:150%;}<br>
</style><br>
</head>
</pre>
<p> <mark>This internal styling is commented out in the <head> section of this .html document. Try uncommenting and reloading the page to see how it changes. Experiment by substituting different colors, font-families, or font-sizes. </mark></p>
<p><strong>External styling</strong> is used to define the styles of many HTML pages. These style sheets contain all of the style information for multiple pages of a website. To use an external style sheet, the following line of code is added to the <head> section of the webpage (assume, for the moment, that a .css file with CSS style information exists on your computer under the name SampleStyleSheet.css): </p>
<p><head><br>
<link> rel = "stylesheet" href = "SampleStyleSheet.css">
</head></p>
<p>The <strong>rel</strong> attribute identifies the relationship between the HTML document and the CSS document being linked to it - in this case, a stylesheet. CSS style sheets should be written in a text editor program, and should not contain any HTML tags. A style sheet may look like this (copied from W3 Schools): </p>
<pre>
body {
background-color: lightgrey;
}
h1 {
color: blue;
}
p {
color:green;
}
</pre>
<p>In addition to color, font-family, and font-size, the <strong>CSS border, padding, and margin</strong> can also be modified. Every element on an HTML page exists in a box, whether not you can see that box, and the three properties listed above each affect how the box is situated on the page. The <strong>border property</strong> affects the visibility and density of the box's border, the <strong>padding property</strong> defines a space inside of the border between its edges and the text, and the <strong>margin property</strong> defines space outside of the border. <br><br>Applying the following inline styling to a paragraph: <br><br>
<p>style = "border: 5px solid black; padding: 10px; margin: 100px; text-align:center; background-color:black; color:white; font-family:courier; font-size: 90%;"</p></p>
<p style = "border: 5px solid black; padding: 10px; margin: 100px; text-align:center; background-color:black; color:white; font-family:courier; font-size: 90%;">
“[...]the only people for me are the mad ones, the ones who are mad to live, mad to talk, mad to be saved, desirous of everything at the same time, the ones who never yawn or say a commonplace thing, but burn, burn, burn like fabulous yellow roman candles exploding like spiders across the stars and in the middle you see the blue centerlight pop and everybody goes “Awww!” <br><br>
― Jack Kerouac, <i>On the Road</i>
</p>
<p>The <strong>id attribute</strong> and the <strong>class attribute</strong> can be used to apply CSS styles to HTML objects. By giving <i>one particular element</i> an id attribute, you can then define a style for that particular element using its id. Similarly, by creating a class of elements denoted by the class's name, you can define a style that will be applied to all elements of that class. The following code (copied from W3 Schools) demonstrates how these two attributes are applied:</p>
<pre>
<b>The id attribute:</b>
<p id="p01">I am different</p>
The style for that element, by id:
#p01 {
color: blue;
}
<b>The class attribute:</b>
<p class="error">I am different</p>
The style for that class, by class name:
p.error {
color: red;
}
</pre>
<hr>
<h2 id="bookmarks"> Bookmark Navigation: </h2>
<p> Bookmarks allow website visitors to quickly navigate through a page by topic. This is espeically practical when a website, such as this one, has long pages and specific topic division.</p>
<p> To make a bookmark, you first create a bookmark id, then add a link to it. At the top of this webpage, there is a list of links underneath and 'Index' heading that are associated with the different HTML topics covered. An example:</p>
<pre>
The bookmark for this section, Bookmark Navigation, is:
<h2 id="bookmarks"> Bookmark Navigation: <h2>
The link for this bookmark at the top of the page is:
<a href="#bookmarks">Using Bookmarks in HTML</a></pre>
<hr>
<h2 id="tables"> HTML Tables:</h2>
<p>In HTML, tables are defined with a <strong><table></strong> tag and are divided into <strong>table rows</strong> with <strong><tr></strong> tags. Table rows are divided into <strong>table data</strong> with <strong><td></strong> tags. Table rows are divided into <strong>table headings</strong> with <strong><th></strong> tags. </p>
<p> If borders are not specified in a <strong>border attribute</strong>, then no borders are included. Borders can also be added using the <strong>CSS border property</strong>. Tables also have a style attribute that sets the table's width, as a percentage. </p>
<p> A caption, or title, can be added above the table using a <strong><caption></strong> tag. This tag should be added below the <table> tag. </p>
<p>Using CSS, the background-color, border, border-collapse, padding properties, and text-align can be specified. Border referes to the lines drawn to define each box in the table, border-collpase will collpase the boxes drawn around each table element into single lines, padding adds extra space around each element in the table, and text-align changes the positioning of the text in the table. </p>
<p> A sample table with CSS formatting is formed from this internal styling and this <table> tag:</p>
<pre>
Internal Styling:
table, th, td {
border: 5px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
text-align:center;
}
th {
background-color: red;
}
td{
background-color: pink;
}
Table:
<table style="width:120%">
<caption>American Authors</caption>
<tr>
<th>Book</th>
<th>Author</th>
</tr>
<tr>
<td>Catcher in the Rye</td>
<td>J. D. Salinger</td>
</tr>
<tr>
<td>The Great Gatsby</td>
<td>F. Scott Fitzgerald</td>
</tr>
</table>
</pre>
<p> The corresponding table looks like this: </p>
<table style="width:50%">
<caption><strong>American Authors</strong></caption>
<tr>
<th>Book</th>
<th>Author</th>
</tr>
<tr>
<td>Catcher in the Rye</td>
<td>J.D. Salinger</td>
</tr>
<tr>
<td>The Great Gatsby</td>
<td>F. Scott Fitzgerald</td>
</tr>
</table>
<br>
<hr>
<h2 id="divlayout">Webpage Layout and Formatting</h2>
<p>A webpage can be broken up into different containers of HTML elements by creating <strong><div></strong> elements. Because <strong><div></strong> elements can have style and class attributes, each block of content can be stylized seperately on the page. <strong><div></strong> elements can be given style properties like background-color, text color, and padding. </p>
<p>If the formatting of multiple <strong><div></strong> elements on a webpage are the same, then that styling can be done by creating a <strong>class</strong> of <strong><div></strong> elements and denoting the internal styling in the <head> section of the code. </p>
<h3>HTML Layout With <div> Elements: </h3>
<p><strong><div></strong> elements can be combined to create multi-section layouts with columns, headers, footers, sidebars, and banners. The image below illustrates the following possible layout components of a webpage (unordered list copied from W3 School's source code and modified): </p>
<img src="http://www.w3schools.com/html/img_sem_elements.gif" alt="Website Layout Using HTML5 - image from W3 Images" style="width:219px; height:258px">
<p>The <div> elements can be differentiated by assigning an <strong>id</strong> to each. </p>
<ul>
<li><div id="header"> - Defines a header for a document or a section</li>
<li><div id="nav"> - Defines a container for navigation links</li>
<li><div id="section"> - Defines a section in a document</li>
<li><div id="article"> - Defines an independent self-contained article</li>
<li><div id="aside"> - Defines content aside from the content (like a sidebar)</li>
<li><div id="footer"> - Defines a footer for a document or a section</li>
</ul>
<p> Each block of content can be stylized in the <head> section using internal CSS styling. Properties including background-color, text color, text-alignment, padding, line-height (which controls the spacing between lines), float (left or right), and clear. Clear refers to whether or not floating elements are allowed on the left and right sides of content blocks; a property:value pair of <strong>clear:both</strong> indicates that no floating blocks can flank the content box being stylized. </p>
<p>Copied from W3 Schools, here is a sample of CSS internal styling for <div> elements: </p>
<pre>
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
section {
width:350px;
float:left;
padding:10px;
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</pre>
<hr>
<h2 id="validating">Validating your HTML Document</h2>
<p>Don't forget to <a href="https://validator.w3.org/#validate_by_input"> validate your HTML document</a>. It's important to check your code for errors. </p>
<br>
<hr>
<br>
<a href ="#top">Back to Top</a>
<p> <a href="../index.html">Return</a> to the homepage. </p>
</div>
</body>
</html>