WE'RE WEB DEVELOPERS IN CAPE TOWN, SOUTH AFRICA

From the Blog

Aug
23

HTML lesson 1: basics. how to build a website using html

Posted by robventer on August 23rd, 2011 at 7:43 am

Html is super easy! You can build your first webpage in 60 seconds flat. All you need is notepad which you’ll find on your computer already.

WHAT IS HTML?

Html is a language created for use with web browsers (eg. Internet Explore & Google Chrome), the purpose of html is to tell the web browser what you want it to do, like telling the browser to put an image here and a heading there.

THE BASICS OF HTML

You need to understand how html works first.

HOW TO MAKE AN HTML DOCUMENT

Right click on your desktop, choose New > Text document and rename it to webpage.html. Now double click it and you’ll see that it opens in your web browser. That’s because you saved it as a .html document. How easy was that? That’s your first webpage, even though it’s blank. Now to edit your webpage you need to open it in notepad and not your browser. So minimize your browser and go back to your desktop. This time right-click webpage.html and choose Open With > Notepad.

WHAT ARE HTML TAGS?

example: <p>This is a paragraph</p>
An html page is meant to be interpreted by a browser, like Internet Explorer,  Firefox, or Chrome. In your html you need to describe to your browser what everything on the page is, so that the browser can display it as such. If you want something to be a paragraph, put it within paragraph tags as above. The browser will display it using its built-in rules for displaying paragraphs. You can use this technique to describe headings and other things too.

THE GOLDEN RULE OF HTML

You open a tag like this <p> and close it like this </p>. These are the “opening” and “closing” tags for paragraphs. Almost every “element” has an opening and a closing tag, for the ones without a closing tag(eg. <img> & <br>) you should put a “/” just before the closing “>”, like this: “<br />”. There are lots of tags to learn, but the golden rule of html is to always close tags in the order that you open them, like this:

<p>This is my <strong>favourite paragraph.</strong></p>

How do you think your browser will display that? You got it: “This is my favourite paragraph.” because the <strong> tags indicate that the text should be bold.

It would be wrong to type: <p>This is my <strong>favourite paragraph.</p></strong> because you are not closing the tags in the order that you opened them.

HOW TO CREATE YOUR FIRST HTML WEBPAGE

In notepad, type, don’t copy and paste, the following:

<html>
<head>
<title>A rocking first attempt</title>
</head>
<body>
<h1>Hello World</h1>
<p>Not bad for my first site, ey? You should see me in a week!</p>
</body>
</html>

Now save that and refresh your browser, or if you closed your browser, go back to your desktop and double click the file webpage.html. It should say:

Hello World
Not bad for my first site, ey? You should see me in a week!

WHAT THE VARIOUS TAGS DO

First of all notice the order in which the tags are opened and closed. The whole document is wrapped in <html> tags to tell the browser that everything within those tags is html code.

<html> tells your browser what language you are working with. Hypertext Markup Language.

<head> The head section doesn’t display anything on your screen, it houses information about the page.

<title> is most important bit of info in the head section. You’ll see it displayed right at the top of your browser tab.

<body> is home to all the content that will displayed on your screen.

<h1> is the largest of the 6 heading tags. It marks the main heading of the page. Subheadings should be marked with <h2>. You can go down to <h6> for sub, sub…. headings.

<p> is a paragraph.

THAT’S IT!

You now know how to make a webpage. To learn about all the other tags you can use, have a look at www.w3schools.com. Don’t forget to follow us on twitter to get notified of all future coding lessons. And please comment to let us know if you liked this lesson or have a question.

Click here for Html Lesson 2: Links, images and lists in html

Leave a Reply

  1.  

    |