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).
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.
