Visit my Blogg lifeofegg.blogspot


Follow me on Twitter

"Everything should be made as simple as possible, but not one bit simpler." Albert Einstein (1879 - 1955)

HTML


So what is HTML?

HTML or "Hypertext Markup Language" is the predominent language used to create web pages. A Web browser's purpose is to read html documents and it's content to make them into visible and audible information for web users. As you will learn, web design is all about the code, and html is the fundamental one you will need to know.

HTML's code consists of predefined tags (meaning someone has sat and made them all up), that allow you to create web pages and then "Markup" your contents with these tags, such as your text and images so it is then viewable on the web. You can also embed video and audio files into your HTML and add other codes such as CSS and Javascript.

HTML's predefined tags usually come in pairs and are surrounded by angled brackets. The tag pairs are called opening and closing tags as they tell the browser when to start and when to stop doing something. For example if you surround some text with the<p>Text</p>tags, the "Text" will be displayed as a paragraph on your page. All you need to do is add these tags around your content for a web browser to be able to read and display it.

Here I will detail just a little to give you the general idea of how it works. You only need to learn some of the basic tags to create a web page and to add content to it.


Creating a Web Page with HTML

To make a web page you only need three sets of tags. These tags will tell the browser that your document is a HTML document and for it to read and display it's contents.

An example of a "HTML Basic Page Layout" is as follows:

<html>

<head>
<title>My first web page</title>
</head>

<body>
<p>This is a paragraph and will be shown on my webpage</p>
</body>

</html>

Page layout tags explained:

HTML tags - Web pages always start and end with the <html> </html> tags. The "html" tags tell the web browser that the file is a html document and to display its contents. within the html document you have a further two sections, the head and body.

Head tags -The <head> </head> section/tags is for information not shown directly on your web page. You can enter the title of your page here that will be shown on the tab at the top of your web page for example.

Body tags - The <body> </body> section/tags contain the text and images for example that you want to be visible on your web page and that will be viewable by users.


Basic HTML tags

So now you know a bit about creating a basic HTML web page, you will also need to know how to add some content to it. Here I have listed some of the basic html tags required to markup some of your web content. Remember that all content you want to be displayed on your page should be added within the "<body></body>" section/tags of your html document.

Headings and Paragraphs


Formatting and Styling your HTML content

There are lots of tags available to format your text and fonts with HTML, however I will add at this point that generally web designers do not use these too much these day's. HTML is the basics building blocks that let you "add" content like text and images to your web pages, however when it comes to formatting and styling, this stuff is generally done seperately whith CSS. If your new to HTML then I would definitley reccomend reading up on it and getting an understanding of how it works. Therefore I wont go too much into but will give you a few examples to give you an idea.

Formatting Text with HTML

Changing the Background Colour with HTML

You can change the background colour of your HTML page by adding an attribute to the <body> tag. For example <body bgcolor="99CCFF">. You should always make sure that your font colour and background colour complement each other and that your page is easy to read.


Using Colours on the Web

When using colours in HTML you can use the name for basic colours like Black, Red and Blue for example, which helps keep things simple. However you can also use RGB (ie #41102255) or Hexadecimal (ie #22CCFF) colours, which are ways to tell the browser how much of red, green and blue should be used to make the colour. Take a look at this HTML color picker for a bit more info.

The RGB and Hexidecimal colours translate into all aspects of web coding so having a read up on this will definitely be beneficial to you when you go on to learn CSS for example.


Hyperlinks

Being able to add link's to pages and other sites on the web is probably one of the most important things you will need to know. Web browsing is all about linking information and generally how the World Wide Web works! The link tag in is basic form is the <a href> tag. You will need to add further stuff to it to make your links work so here I will give you a bit of info on how this simple tag works.

Hyperlinks for your Web Pages - To add a hyperlink to other pages on your site you will need to add the following to your <a href> tag; <a href="page2.html">Go to page 2</a>. The text "Go to page 2" will be the bit that you click on your page that will take you to the next one.

Hyperlinks to external sources - To add hyperlinks to other web sites for example you will need to add the following to your <a href> tag; <a href="http://www.anotherwebsite.co.uk">Go to another Web Site</a>. Again the text will be the bit that you click on your page that will take you to the web site.