HTML Basics

We started off by learning some background knowledge about html and it’s creator, Mr. Tim Berners-Lee – the man who basically developed the internet.

No big deal.

Mr. Berners-Lee had the opportunity to become an instant billionaire but instead he made the internet free for everyone to use which, in my eyes, makes him a true hero and an inspiring role model. Here’s a link to his biography if you’re interested:

http://en.wikipedia.org/wiki/Tim_Berners-Lee

Now here are a few basics that we’ve learnt:

Title

Command: <title>This is my page </title>

The title defines a title in the browser toolbar and in the search-engine results page.

Header

Command: <h>This is my header</h>

The header should be used to introduce a certain set of contents and can also be present more than once in your code.

Paragraph

Command: <p> Here is my new paragraph</p>

This is quite straightforward: it is just a paragraph of content which will be displayed on your webpage.

Image

Command: <img src = “putsourceinhere”/>

It is important to write the exact name of the image file in the “putsourceinher” bit of code. It makes it easier if the image is saved in the same folder that your html code is.

Link

Command: <a href = “insertURLhere” Link to site here </a>

In the “insertURLhere” you simply put the url of the link you want the page to link to. The underlined piece of code will be the actual link the user will be able to click on to be redirected to the link.

Ordered Lists

Command:

<ol>

<li> insertitemhere </li>

<li> insertitemhere </li>

</ol>

 Un-ordered Lists

Command:

<ul>

<li> insertitemhere </li>

<li> insertitemhere </li>

</ul>

The difference between these two is (a) the ordered list is numbered (b) if you wish to add a third item in between the two already existing list items, the ordered list re-orders and re-numbers your list automatically whilst the un-ordered one does not.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s