If you want to create your own website you have two options: use some kind of site building tool or WYSYWYG editor or hand code it in HTML and CSS. Both are valid options and which one you choose will depend on your personal preferences. Using a site builder is usually easier, but some of them cost money and produce sites that have a lot of unnecessary code in them. Learning HTML and CSS on the other hand is free and enables you to create sites that have clean code, but it will take some time before you get good at using them. Now let’s take a look at how to create a basic HTML page.
<html>
<head>
<title>This is an example HTML page</title>
</head>
<body>
<p>This is an example paragraph</p>
</body>
</html>The example above shows a basic HTML page. The first tag is the opening <html> tag. It tells the browser where the HTML document begins. You will notice that at the bottom there is another html tag that looks like this: </html>. This is the closing tag that belongs with the first one, marking the end of the html page.
Next, there are the <head> and </head> tags. Everything contained between these will not be displayed on the page itself, but may contain extra information about the page that browsers and search engines can read and use. In this case, there is only the page’s title, contained between <title> tags. It will show up in browsers and search results.
The <body> tags contain the actual content of a web page. All of your text, images and videos have to be placed here. In this example, there is only a single paragraph, contained between <p> tags.
Here are some other HTML tags that are commonly used in web pages:
- <a> tag: Is used to create links. As an example, to create a link to Google you would write:
<a href=”http://www.google.com”>Google</a>- <img> tag: Is used to insert an image into your page. Example:
<img src=”/images/example.jpg”/>- <h1> – <h6> tags: Are used to create a header on your page. H1 is the main header, the others are meant for sub-headings. Example:
<h1>This is a header</h1>- <ol> and <ul> tags: Are used to create ordered (<ol>) and unordered (<ul>) lists. Example:
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>- <br> tag: Creates a line break.
HTML is meant to create the structure and content of your web page. In the past it was also used to create its look and layout, however these days this is mostly done with a separate language called CSS. I will cover the basics of CSS in a separate article.
To learn more about HTML, I highly recommend the tutorials at www.codecademy.com or the book HTML & CSS by Jon Duckett.
