Learn HTML Part 1.3: Code, Links, and Images

11/09/18 - Unit 1's final lesson, for now

Review

Previously, we learned about:

You should have by now a page like this:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf=8">
</head>
<body>
<h1>Hello, world!</h1>
<p>Oi, spaceman!</p>
<h2>And this is a sub heading!</h2>
</body>
</html>

Code and Other Styles

So you can write an article now, but what if you want to write an article about code? What if you want to display a text file?

Use the code and pre tags. <code> and </code> represent the beginning and end of a monospaced segment.

So try adding this inside the paragraph from last lesson:

Oi spaceman! <code>Some code goes here.</code>

The result should be something like:

Oi, spaceman! Some code goes here.

Trying to copy text files?

If you're writing some code, or using a text editor, you might find that trying to copy it into your website turns it from this:

|------------------------|
|Neatly                  |
|  spaced                |
| as all things should be|
|------------------------|

to this:

|------------------------| |Neatly | | spaced | | as all things should be| |------------------------|

That's because in HTML, lines break between certain tags, but not with a new line. Luckily, there's a solution: the <pre> tag.

Try adding this to your page now:

<pre>
|------------------------|
|Neatly                  |
|  spaced                |
| as all things should be|
|------------------------|
</pre>

It should appear properly!

Line Breaks

So, what if you aren't copying a text file, but maybe you're writing a poem and the spacing between paragraphs is too big? Simply add <br> to the end of the line you wish to partially break.

Or maybe you want to draw a line through the page. Use <hr>.

Images

The last thing needed for a decent document is an image. HTML's tag for images is the <img> tag.

Opening tags can have additional "attributes" - things about how to display the tag. An example is the charset="utf-8" part of <meta charset="utf-8"> from the necessary piece of HTML.

The <img> tag is uses the src= attribute to determine which image to display. The SRC property takes a URL or a path to file, relative to the folder the HTML file is in.

The URL: https://picsum.photos/300/200?random provides a random image that is 300x200, so let's use that as an example. Add this to your page:

<img src=https://picsum.photos/300/200?random>

There should now be a small image on the page.

Links

Another type of tag that uses attributes is <a> tag - a link, The href= attribute of this tag defines where the link points - a URL, or a path to another HTML file, relative to the folder the document is in. Inside the tag is the text of the link.

Let's try this with https://example.com:

<a href=https://example.com>Example</a>

Conclusion

If everything works, you can move on to Learn CSS or read the addendum.

Subscribe to me with RSS!