Today we are going to use HTML to help us tell a story in the web browser that we can show our friends and family.
<p>HTML is a markup language that we can use to add structure and formatting to our story in web browsers, like Safari or Chrome. When we use HTML to tell a story in the web browser, we are creating a web page.</p>A web page is made up of many html elements, each a tag, or more commonly a set of tags, enclosed in angle brackets. The paragraph above is an example of how you mark a paragraph in html, by surrounding it in opening and closing <p> tags.
Description
To get started in web development we'll need to learn how to use html, so today we are going to:
- Start with a basic HTML template
- Tell our story and use HTML to add structure and formatting
Demo
This bit of code:
<!DOCTYPE html>
<html>
<head>
<title>My day at work</title>
</head>
<body>
<h1>My day at work</h1>
<p>I had a good day at work. I was able to accomplish my goals and mentor a colleague.</p>
<p>My goals included:</p>
<ul>
<li>Implement <strong>like</strong> feature</li>
<li>Test emplementation in staging</li>
<li>Deploy feature to production</li>
<li>Blog about building and shipping the <strong>like</strong> feature</li>
</ul>
<p>When I think about it, today was actually an excellent day!</p>
</body>
</html>
Will produce a web page that looks like this:
Check out the live demo to experiment yourself.
Tools
To get started you should open a blank project on CODEPEN: http://codepen.io/pen/
For now ignore the JS and CSS areas so uncheck the boxes next to them.
Now add the minimal amount of HTML to make the page work. Start by clicking in the HTML area and adding opening and closing <html> tags.
<html>
</html>Your screen should look like this now:
Next add the <head> and <body> tags. The <body> tags tell the web browser that this part of the page should be rendered (displayed). Now our HTML should look like this:
<html>
<head>
</head>
<body>
</body>
</html>Now you can start telling your story by typing it inside of the <body> tags! Here is an example:
<html>
<head>
</head>
<body>
Today I took the dogs to the park and we had a great time!
</body>
</html>
Now tell more of your story, what else happened?
<html>
<head>
</head>
<body>
Today I took the dogs to the park and we had a great time!
After the dogs played with their friends we took a walk around the track together.
</body>
</html>
Here you can see that I separated my paragraphs using new lines (on the right) but the rendered html (on the left) didn't get separated into paragraphs. This is because I did not use HTML to add paragraph (<p> tags) to my story.
Add the <p> around the paragraphs:
<html>
<head>
</head>
<body>
<p>Today I took the dogs to the park and we had a great time!</p>
<p>After the dogs played with their friends we took a walk around the track together.</p>
</body>
</html>
Now the paragraphs are displayed correctly!
Next add a title to your story. To do this add the <title> to the <head> and then add it to the <body> using <h1> tags.
<html>
<head>
<title>A day at the dog park</title>
</head>
<body>
<h1>A day at the dog park</h1>
<p>Today I took the dogs to the park and we had a great time!</p>
<p>After the dogs played with their friends we took a walk around the track together.</p>
</body>
</html>
This story would be a lot more interesting with pictures! Adding a picture to our story is simple, we just use the <img> tag and tell it where our image is.
The <img> tag has an attribute called src and this is where we tell it the url to the image we want to use in our story. Here is an example <img> tag:
<img src="http://f.cl.ly/items/2f473l1d233S0S1k3J3d/dogs-playing.jpg">Adding this to our story is easy:
<html>
<head>
<title>A day at the dog park</title>
</head>
<body>
<h1>A day at the dog park</h1>
<p>Today I took the dogs to the park and we had a great time!</p>
<img src="http://f.cl.ly/items/2f473l1d233S0S1k3J3d/dogs-playing.jpg">
<p>After the dogs played with their friends we took a walk around the track together.</p>
<img src="http://f.cl.ly/items/0o0T0V0g261C1R0I022z/walking-the-track.jpg">
</body>
</html>
Sometimes we want to bring more attention to parts of our story. One way we can do this is by using the <strong> tag to make certain parts of our story look bolder compared to other parts. Here is an example:
<html>
<head>
<title>A day at the dog park</title>
</head>
<body>
<h1>A day at the dog park</h1>
<p>Today I took the dogs to the park and <strong>we had a great time!</strong></p>
<img src="http://f.cl.ly/items/2f473l1d233S0S1k3J3d/dogs-playing.jpg">
<p>After the dogs played with their friends we took a walk around the track together.</p>
<img src="http://f.cl.ly/items/0o0T0V0g261C1R0I022z/walking-the-track.jpg">
</body>
</html>
We can bring emphasis to parts of our story by making them italic. We use the <em> tag for emphasis. Here is an example:
<html>
<head>
<title>A day at the dog park</title>
</head>
<body>
<h1>A day at the dog park</h1>
<p>Today I took the dogs to the park and <strong>we had a great time!</strong></p>
<img src="http://f.cl.ly/items/2f473l1d233S0S1k3J3d/dogs-playing.jpg">
<p>After the dogs played with their friends <em>we took a walk around the track together.</em></p>
<img src="http://f.cl.ly/items/0o0T0V0g261C1R0I022z/walking-the-track.jpg">
</body>
</html>
You can easily add a list to your story using <ul> and <li> tags. Here is an example:
<html>
<head>
<title>A day at the dog park</title>
</head>
<body>
<h1>A day at the dog park</h1>
<p>Today I took the dogs to the park and <strong>we had a great time!</strong></p>
<img src="http://f.cl.ly/items/2f473l1d233S0S1k3J3d/dogs-playing.jpg">
<p>After the dogs played with their friends <em>we took a walk around the track together.</em></p>
<img src="http://f.cl.ly/items/0o0T0V0g261C1R0I022z/walking-the-track.jpg">
<p>While we were at the dog park we saw many kinds of dogs, including:</p>
<ul>
<li>Poodles</li>
<li>Great Danes</li>
<li>Black Labs</li>
</li>
</body>
</html>The <ul> tag tells the browser this is a list of items. The <li> tags are used around each list item.
If you want the list to use numbers instead of bullet points you can change the <ul> tag (unordered list) to an <ol> tag (ordered list).
<html>
<head>
<title>A day at the dog park</title>
</head>
<body>
<h1>A day at the dog park</h1>
<p>Today I took the dogs to the park and <strong>we had a great time!</strong></p>
<img src="http://f.cl.ly/items/2f473l1d233S0S1k3J3d/dogs-playing.jpg">
<p>After the dogs played with their friends <em>we took a walk around the track together.</em></p>
<img src="http://f.cl.ly/items/0o0T0V0g261C1R0I022z/walking-the-track.jpg">
<p>While we were at the dog park we saw many kinds of dogs, including:</p>
<ol>
<li>Poodles</li>
<li>Great Danes</li>
<li>Black Labs</li>
</ol>
</body>
</html>
One of the things that makes web pages so amazing for telling stories is you can link things together with other web pages on the internet and it is really easy to do!
In the pervious example I included three kinds of dogs that we saw at the park, now I'm going to use hyperlinks (the <a> tag) to link the dog names to their descriptions on Wikipedia.
The <a> tag has an attribute called href and we will set that attribute equal to the url of the web page we want to link to. Here is an example where I link the word Poodles to the web page about Poodles on Wikipedia:
<a href="http://en.wikipedia.org/wiki/Poodle">Poodles</a>
Here is what it looks like in the context of our story:
<html>
<head>
<title>A day at the dog park</title>
</head>
<body>
<h1>A day at the dog park</h1>
<p>Today I took the dogs to the park and <strong>we had a great time!</strong></p>
<img src="http://f.cl.ly/items/2f473l1d233S0S1k3J3d/dogs-playing.jpg">
<p>After the dogs played with their friends <em>we took a walk around the track together.</em></p>
<img src="http://f.cl.ly/items/0o0T0V0g261C1R0I022z/walking-the-track.jpg">
<p>While we were at the dog park we saw many kinds of dogs, including:</p>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Poodle">Poodles</a></li>
<li><a href="http://en.wikipedia.org/wiki/Great_Dane">Great Danes</a></li>
<li><a href="http://en.wikipedia.org/wiki/Labrador_Retriever">Black Labs</a></li>
</li>
</body>
</html>If you want to write another story you don't have to start a whole new web page, you can use the same page you have been working on and use HTML to indicate where one story stops and the next begins. Typically we will use <article> tags to accomplish this. Here is an example:
<html>
<head>
<title>A day at the dog park</title>
</head>
<body>
<h1>Dog Stories</h1>
<article>
<h2>A day at the dog park</h2>
<p>Today I took the dogs to the park and <strong>we had a great time!</strong></p>
<img src="http://f.cl.ly/items/2f473l1d233S0S1k3J3d/dogs-playing.jpg">
<p>After the dogs played with their friends <em>we took a walk around the track together.</em></p>
<img src="http://f.cl.ly/items/0o0T0V0g261C1R0I022z/walking-the-track.jpg">
<p>While we were at the dog park we saw many kinds of dogs, including:</p>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Poodle">Poodles</a></li>
<li><a href="http://en.wikipedia.org/wiki/Great_Dane">Great Danes</a></li>
<li><a href="http://en.wikipedia.org/wiki/Labrador_Retriever">Black Labs</a></li>
</li>
</article>
<article>
<h2>Driving Across The Country With Leo and Bailey</h2>
<p>A year ago we drove across the country <em>with Leo and Bailey</em> when we moved from Indiana to California.</p>
<img src="http://cl.ly/image/3G2Z3x0G3Z46/content#.png">
<p>One time after stopping to eat lunch we found Leo in the front seat ready to drive. <strong>This made us laugh really hard :)</strong></p>
</article>
</body>
</html>You will notice a few new things in the html above. We added a second story, we enclosed both stories in <article> tags, we changed the story titles to use <h2> (Heading 2) tags, and we changed the <h1> (Heading 1) at the top to say Dog Stories.
In the next lesson we will start learning how to add style to our story using html attributes and css. Here is an example to help get you excited about the next lesson.
In Codepen we want to check the box next to CSS and then paste the following css code into the CSS box:
body {
font-family: Arial;
background-color: #eee;
color: green;
}
img {
border: 2px solid green;
padding: 2px;
}
Web browsers look for a document type tag at the beginning of an HTML document in order to determine how they should read and render the HTML. We can add the <!DOCTYPE html> tag to our web page to tell browsers that we are using the latest version of HTML.
<!DOCTYPE html>
<html>
<head>
<title>A day at the dog park</title>
</head>
<body>
<h1>A day at the dog park</h1>
<p>Today I took the dogs to the park and <strong>we had a great time!</strong></p>
<img src="http://f.cl.ly/items/2f473l1d233S0S1k3J3d/dogs-playing.jpg">
<p>After the dogs played with their friends <em>we took a walk around the track together.</em></p>
<img src="http://f.cl.ly/items/0o0T0V0g261C1R0I022z/walking-the-track.jpg">
<p>While we were at the dog park we saw many kinds of dogs, including:</p>
<ul>
<li>Poodles</li>
<li>Great Danes</li>
<li>Black Labs</li>
</ul>
</body>
</html>You can read more about document type here.