Web programming 3 Html content tags Subscribe Pub

Previous: Web programming 2 style and CSS.

Back in lesson 1 we had a quick example of writing some text in a page, in the HTML section... which contains the actual content of the page.

In fact, as we said before, this HTML is actually a language, which described the elements that we want on that page. Let's see how this language works and what basic types of elements we have there...

The first thing is to try to write on two lines:


Oops - well, that didn't work... and that's because HTML is a programming language and this is how we tell it to add a line-break:

Hacker <br>

That's more like it. The <br> is called a tag and it is an element of the HTML language.

There's more... here's how we make a list <ul> of items <li> :

Hacker <br>
<p>My favorite colors are:</p>
<li> blue </li>
<li> yellow </li>

That <p> starts a new paragraph, just like any good book you've read (probably that's how they did it too) - notice the difference between the <br> and <p> where the paragraph is nicely separated from the previous one.

Also, if you were paying attention, you noticed those closing tags like </li> that we have to use to tell it when an element starts and where it ends. Go on, click play and add some more items to the list above...

Quick html reference

Here are some of the most important of the simple html tags, as a reference:

<h2>Heading 2</h2>
<p>A paragraph</p>
A line <br> break.
<a href="http://www.google.ca">a link</a>
<button onclick="alert(document.location);">Hello</button> 
<div>a div</div>
<span>a span</span>
<ul>a list:
<li> blue </li>
<li> yellow </li>


I do not remember most of these tags either - it's important to know how to find them. Just google "html tags" and you'll find sites like http://www.w3schools.com/tags/ just look at the tags, get a feel for it.

From that website, learn how to and create a table, with two rows and two columns.

Then add a heading for the columns.

Continue to Web programming 4 Colors.

Was this useful?    

By: Razie | 2014-06-02 .. 2016-10-05 | Tags: post , html , lesson , hacker.factory

See more in: Cool Scala Subscribe

Viewed 1940 times ( | Print ) this page.

You need to log in to post a comment!