prdelgobbo/crash_course.html

## crash_course.html
<!DOCTYPE html>
<html>
<body>

<h1><center>HTML Crash Course for WRT 205</center></h1>

<h3>How Does HTML Work?</h3>

<p>HTML is what we call a "markup language." Basically this means that you cannot just type whatever text you want and expect it to show up properly formatted in your web browser: you have to <em>mark it up</em> first. The main way we do this is through "tags," which look something li,e this:</p>

<blockquote><code>&lt;em&gt;sample text&lt;/em&gt;</code></blockquote>

<p>Tags come in pairs: one to start the tag and one to end it, usually by adding a forward slash (/). Any text that appears between the tags has been "tagged." The <code>&lt;em&gt;</code> tag above adds <em>em</em>phasis to text. Here is what the example code above would look like in a web browder:</p>

<blockquote><em>sample text</em></blockquote>

<p>When you're on the internet and you click a link, your web browser asks the website to send it the HTML text. This text is all marked up and isn't as easy for humans to read, so your web browser formats the text based on what the HTML tags tell it to do.</p>

<h3>Some Useful Tags</h3>

<ul>
	<li><code>&lt;em&gt;</code>: text with emphasis (italic)</li>
	<li><code>&lt;strong&gt;</code>: text with strong emphasis (bold)</li>
	<li><code>&lt;code&gt;</code>: text that looks like computer code (monospace)</li>
	<li><code>&lt;h1&gt; - &lt;h6&gt;</code>: six different levels of headings</li>
	<li><code>&lt;p&gt;</code>: begins and ends a paragraph</li>
	<li><code>&lt;br&gt;</code>: inserts a line break</li>
	<li><code>&lt;blockquote&gt;</code>: inserts a block quote</li>
	<li><code>&lt;a&gt;</code>: inserts a link</li>
	<li><code>&lt;img&gt;</code>: inserts a video</li>
	<li><code>&lt;ul&gt;</code>: begins and ends an unordered list (bullets)</li>
	<li><code>&lt;ol&gt;</code>: begins and ends an ordered list (numbers)</li>
	<li><code>&lt;li&gt;</code>: a list item</li>
</ul>

<p>You can find a more complete list of tags at <a href="http://www.w3schools.com/tags/">w3schools.com</a>. It's also worth noting that tags can be nested within each other. For example, this code:</p>

<blockquote><code>&lt;a href="http://www.google.com"&gt;&lt;em&gt;&lt;strong&gt;sample text&lt;/strong&gt;&lt;/em&gt;&lt;/a&gt;</code></blockquote>

<p>Would look like this:</p>

<blockquote><a href="http://www.google.com"><em><strong>sample text</strong></em></a></blockquote>

<p>Nesting tags can get very confusing very fast, and it's important to remember to always close your tags!</p>

<h3>Attributes: When a Simple Tag Is Not Enough</h3>

<p>Sometimes a tag all by itself doesn't contain enough information to tell a web browser how to interpret it. In this case, you have to define "attributes" within the tag. The two most common examples are the <code>&lt;a&gt;</code> tag and the <code>&lt;img&gt;</code> tag:</p>

<blockquote><code>&lt;a href="http://wrt-205.blogspot.com/"&gt;Check out my awesome blog!&lt;/a&gt;</code></blockquote>

<p>In this example, &lt;a&gt; is the main tag and &lt;href&gt; is the attribute, which we've set as <code>"http://wrt-205.blogspot.com/"</code>. The text between the tags is what the user will see as a hyperlink:</p>

<blockquote><a href="http://wrt-205.blogspot.com/">Check out my awesome blog!</a></blockquote>

<p>Here's an example of an <code>&lt;img&gt;</code> tag:</p>

<blockquote><code>&lt;img src="http://i.imgur.com/FsjcPBd.jpg"&gt;</code></blockquote>

<p>What is the tag here, and what is the attribute? Here's what the code will look like to the user:</p>

<blockquote><img src="http://i.imgur.com/FsjcPBd.jpg"></blockquote>

<h3>Want to Learn More?</h3>

<ul>
	<li><a href="http://www.w3schools.com/html/DEFAULT.asp">w3schools.com</a></li>
	<li><a href="http://www.codecademy.com/tracks/web">Codecademy</a></li>
	<li><a href="http://www.htmldog.com/guides/html/beginner/">HTML Dog</a></li>
	<li><a href="http://en.wikipedia.org/wiki/HTML">Wikipedia</a></li>
</ul>

<p>Have fun!!!</p>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<body>

	<h1><center>HTML Crash Course for WRT 205</center></h1>

	<h3>How Does HTML Work?</h3>

	<p>HTML is what we call a "markup language." Basically this means that you cannot just type whatever text you want and expect it to show up properly formatted in your web browser: you have to <em>mark it up</em> first. The main way we do this is through "tags," which look something li,e this:</p>

	<blockquote><code><em>sample text</em></code></blockquote>

	<p>Tags come in pairs: one to start the tag and one to end it, usually by adding a forward slash (/). Any text that appears between the tags has been "tagged." The <code><em></code> tag above adds <em>em</em>phasis to text. Here is what the example code above would look like in a web browder:</p>

	<blockquote><em>sample text</em></blockquote>

	<p>When you're on the internet and you click a link, your web browser asks the website to send it the HTML text. This text is all marked up and isn't as easy for humans to read, so your web browser formats the text based on what the HTML tags tell it to do.</p>

	<h3>Some Useful Tags</h3>

	<ul>
	<li><code><em></code>: text with emphasis (italic)</li>
	<li><code><strong></code>: text with strong emphasis (bold)</li>
	<li><code><code></code>: text that looks like computer code (monospace)</li>
	<li><code><h1> - <h6></code>: six different levels of headings</li>
	<li><code><p></code>: begins and ends a paragraph</li>
	<li><code><br></code>: inserts a line break</li>
	<li><code><blockquote></code>: inserts a block quote</li>
	<li><code><a></code>: inserts a link</li>
	<li><code><img></code>: inserts a video</li>
	<li><code><ul></code>: begins and ends an unordered list (bullets)</li>
	<li><code><ol></code>: begins and ends an ordered list (numbers)</li>
	<li><code><li></code>: a list item</li>
	</ul>

	<p>You can find a more complete list of tags at <a href="http://www.w3schools.com/tags/">w3schools.com</a>. It's also worth noting that tags can be nested within each other. For example, this code:</p>

	<blockquote><code><a href="http://www.google.com"><em><strong>sample text</strong></em></a></code></blockquote>

	<p>Would look like this:</p>

	<blockquote><a href="http://www.google.com"><em><strong>sample text</strong></em></a></blockquote>

	<p>Nesting tags can get very confusing very fast, and it's important to remember to always close your tags!</p>

	<h3>Attributes: When a Simple Tag Is Not Enough</h3>

	<p>Sometimes a tag all by itself doesn't contain enough information to tell a web browser how to interpret it. In this case, you have to define "attributes" within the tag. The two most common examples are the <code><a></code> tag and the <code><img></code> tag:</p>

	<blockquote><code><a href="http://wrt-205.blogspot.com/">Check out my awesome blog!</a></code></blockquote>

	<p>In this example, <a> is the main tag and <href> is the attribute, which we've set as <code>"http://wrt-205.blogspot.com/"</code>. The text between the tags is what the user will see as a hyperlink:</p>

	<blockquote><a href="http://wrt-205.blogspot.com/">Check out my awesome blog!</a></blockquote>

	<p>Here's an example of an <code><img></code> tag:</p>

	<blockquote><code><img src="http://i.imgur.com/FsjcPBd.jpg"></code></blockquote>

	<p>What is the tag here, and what is the attribute? Here's what the code will look like to the user:</p>

	<blockquote><img src="http://i.imgur.com/FsjcPBd.jpg"></blockquote>

	<h3>Want to Learn More?</h3>

	<ul>
	<li><a href="http://www.w3schools.com/html/DEFAULT.asp">w3schools.com</a></li>
	<li><a href="http://www.codecademy.com/tracks/web">Codecademy</a></li>
	<li><a href="http://www.htmldog.com/guides/html/beginner/">HTML Dog</a></li>
	<li><a href="http://en.wikipedia.org/wiki/HTML">Wikipedia</a></li>
	</ul>

	<p>Have fun!!!</p>

	</body>
	</html>