Cheat Sheet for the introduction to html class
Slides
- Navigate to the Anchorage Programming Workshop webiste.
- Right-click the page and select View Page Source.
- Open a text editor like Notepad or TextEdit.
- Choose 'Save As' and name your file 'index.html'
- Add the doctype
<!doctype html> - Add the html tags
<html></html> - Nest the head tag inside the html tag
<head></head> - Nest the title in the head tag and add some text in between the opening and closing of the tag. Kind of like this
<title>Text</title> - Nest the body tag inside the html tag
<body></body> - Write something inside the body
Should look something like this:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
Nice to meet ya!
</body>
</html>All these elements should be nested inside the body tag.
- Create a paragraph tag.
<p>Text</p>Add text in between the opening and closing tag. - Create several levels of headings, just add a number to h. Experiment!
<h1>Text</h1> - Bold some text.
<strong>Text</strong> - Italicize some text.
<em>Text</em>
Here's an example:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<p>Nice <strong>to</strong> meet <em>ya</em>!</p>
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h6>Heading Crazy</h6>
</body>
</html>- Add a link:
<a href='url'>Text</a> - Add an image:
<img src='url' />Use google image search to link to something good. - Add a line break:
<br />
Here's an example:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<a href='http://commuterchallenge.bicycleanchorage.org'>Commute!</a>
One <br/>Two<br/>
<img src="http://www.readcwbooks.com/books.jpg" />
</body>
</html>- Add an ordered list:
<ol><li>item</item></ol> - Add an unordered list:
<ul><li>item</li></ul> - Add a table:
<table><tr><td>Column</td></tr><tr><td>Value</td></tr></table>
Here's an example:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h3>Ordered List</h3>
<ol>
<li>Wake up.</li>
<li>Get dressed.</li>
<li>Bike!</li>
</ol>
<h3>Unordered List</h3>
<ul>
<li>Planes</li>
<li>Trains</li>
<li>Automobiles</li>
</ul>
<h3>Table</h3>
<table>
<tr>
<th>Name</th>
<th>Average Miles</th>
</tr>
<tr>
<td>Becky</td>
<td>500</td>
</tr>
<tr>
<td>Coral</td>
<td>5000</td>
</tr>
</table>
</body>
</html>Sign up for Code academy and take the web Fundamentals class!
Code Academy