Objective: We will be creating an HTML file with basic code and then previewing it in a web browser.
HTML code used in this lesson:
<strong> bolds text
<em> italicizes text (“em†is short for “emphasisâ€)
<p> shows where a paragraph starts and ends
<br> starts a new line
<img src> brings in a picture
<a href> creates a link
The HTML file we’ll create is going to be extremely basic. Later we’ll add information that meets the standards of the World Wide Web Consortium (W3C) and is coded better.
1. Open up a text editor like Text Edit or Notepad.
2. Save it as sample.html. If you don’t put the .html as the file extension, it may not load properly in the browser.
3. In your new text file, type:
This is the sample file. How exciting.
4. Let’s make that “exciting†really exciting. We can make the word “exciting†bold by adding the <strong> tag around it.
This is the sample file. How <strong>exciting</strong>.
<strong> lets the browser know that what follows will be bold. </strong> lets the browser know where to stop. If you leave off the </strong>, the rest of the page will be one big, bold mess.
5. Preview the HTML file in your browser. Open up Safari/Firefox/Chrome/Opera/Whatever . Choose File->Open and then select your HTML file. Check to make sure “exciting†is bold.
6. Now let’s add emphasis to the word “this†using the <em> tag.
<em>This</em> is the sample file. How <strong>exciting</strong>.
Notice how, just like with <strong>, you need to close out <em> with </em> or else it never ends.
7. We’re going to insert a picture, but I don’t want it to be on the same line as the text. Mark the text that we have as a paragraph by adding the <p> tag to the text.
<p><em>This</em> is the sample file. How <strong>exciting</strong>.</p>
You can also use the <br> code to start a new line, but when we get into CSS, using the <p> will allow you to do cooler stuff with the paragraph.
8. Insert a photo using the <img src> code. After the src part, you’ll be telling the browser where the file is stored online. For the sample, we’ll use an image from my site that’s found at http://briangriggs.com/wp-content/uploads/tech.jpg.
<p><em>This</em> is the sample file. How <strong>exciting</strong>.</p>
<img src=â€http://briangriggs.com/wp-content/uploads/tech.jpgâ€>
Pay attention to the equals sign and the quotation marks. Whatever’s inside the “†is the direct address for the image. = tells the browser that what’s coming next is the source (src) of the image.
9. Save the HTML file and run it in your browser to check if the HTML file is working.
10. The last thing we’ll go over in this lesson is the <a href> tag. <a href> stands for “anchor hypertext referenceâ€. Anchors are placeholders within a document. <a href> lets the browser know that a reference, a link, is coming.
Make the word “sample†a link to briangriggs.com by adding the <a href> tag.
<p><em>This</em> is the <a href=â€http://briangriggs.comâ€>sample</a> file. How <strong>exciting</strong>.</p>
<img src=â€http://briangriggs.com/wp-content/uploads/tech.jpgâ€>
Like with the <img src> tag, we use the =â€â€ to point to a location. Just like the <strong> and <em> tags, we close it out or else the rest of the document will be a link.
11. Save it and run sample.html in your browser.
