Further steps in HTML ⛰


Paragraphs - p

<p>
  This is a whole paragraph of text.
</p>

The whitespace inside the paragraph doesn't matter. It will be all printed on one line in the web browser. If the line is too long, the web browser will wrap it for us.

HTML - Element attributes

All HTML elements have some attributes you can add to provide more meaning to them. Attributes are written after the element name, but inside the tags (< and >). Here we've got an attribute called id on the p tag we created above so that we can easily identify it:

<p id="my-first-paragraph">
  This is a whole paragraph of text.
</p>

Links - a

Linking to other web pages are done with <a> element. The a stands for anchor ⚓. To link from your hello.html page to another page called world.html, you do:

<a href="world.html">Click here to go to world.html</a>

Try this for yourself: create a new file called world.html and write something inside it. Now, in hello.world, add the link above. When you click on the link in your browser, you should end up on the world.html page.

The important bit here is the href attribute. This can be just a file name like above or a complete web address. This is how you create a link that will take the user to Google:

<a href="http://google.com">Click here to go to google.com</a>

HTML - Empty elements

Some elements are empty. That means they neither contain any other elements nor do they contain any text. If they're empty, we close them in the start element itself like this: <br/>.

Images - img

<img
  src="fish.jpg"
  alt="Tihs is a picture of a blowfish"
/> 

Lists - ol, ul & li

There are two kind of lists: ordered lists (with numbers) <ol>, and unordered lists (with dots) <ul>. The list items in both kind of lists are inside list item elements, <li>.

These items will have a number in front of them, 1, 2 and so on:

<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>

While these items will have a big fat dot in front of them:

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

Well done

That's it, you've now learned to create a fairly rich web page with head lines, paragraphs, images, links and lists. Next, we'll learn how to make the page look good too by using another language called CSS (cascading style sheets).

Example screenshot of code and result

Exercise

Using what you've learned, create a page that mimics this recipe for spaghetti and meat balls It should have a head line, have sub headings for each sub section (ingredients, sauce, meatballs and so on), show a picture of the dish, list the ingredients and have numbered step by step instructions on how to prepare it. Finally, add a link to the original recipe.


Licensed under CC BY Creative Commons License ~ ✉ torstein.k.johansen @ gmail ~ 🐘 @skybert@hachyderm.io ~ 🐦 @torsteinkrause