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 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:
<title>My first web page</title>
<p>This is a paragraph and will be shown on my webpage</p>
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
- The <h> Heading tags are used for all headings and subheadings. These range from<h1> to <h6> with the smallest number being the largest heading. All heading tags come in pairs, for example<h1>This is a large heading</h1> so just remeber to use the same number in your opening and closing tags!
- The<p> tag denotes a basic paragraph and again comes in pairs <p>This is s paragraph </p>. Paragraphs break down chunks of your text and leaves one line space between the previous and next set of tagged content.
- If you want to go to the next line within a paragraph or want more than one line space between paragraphs to seperate content then you can use the </br> tag. The<br/> tag is one of the exceptions to the tag pair rule and is a stand alone tag. It does not need a closing tag as it includes a forward-slash(there are a few exceptions to the "tag pair" rule).
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
- You can emphasise text on your page by adding the <b></b> tags around it. This should be used inline rather than around <h> or <p> tags for example, <p>Hello this is a paragraph and I want this <b>word</b> to be bold on my page</p>.
- You can also use the<i></i> tags to make your text italic and again should be used inline rather than around other tags. For example<p>Hello this is a paragraph and I want this <i>word</i> to be italic on my page</p>.
- There is a further tag you can use to underline text however I would not recommend using it as this often denotes a hyperlink in websites. The tag is <ul> and again should be used with a closing </ul>tag.
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.
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.