Learn HTML Part 1.3: Code, Links, and Images
Review
Previously, we learned about:
-
How to add paragraphs and headings
-
HTML's cascading nature
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.