"Hypertext Markup Language" or "HTML" as it is often referred to, is the predominent language used to create web pages. A Web browsers purpose is to read HTML documents and its 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.
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 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.
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.
There are lots of tags available to format your text and content 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 basic 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. On the odd occasion however It may be easier to just add your style in HTML if for example you are only changing small amounts of content. 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 it but will give you a few examples to give you an idea.
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.
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. Also please note the American spelling of "Color" when adding the attribute otherwise this will not work.
You can also change the colour of your text using HTML by adding an attribute to the font tag. For example <font color="#0047B2">this text is a different colour </font>. You will need to add the closing tag to tell the browser when to stop applying that colour to your text.
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.
So I couldnt write a page on HTML withought mentioning the new version of the language!
HTML5 is the fifth version of HTML and has been modernised in line with current technologies and requirements. It has been designed with the increased use of mobile in mind and includes new elements like <video> for example, which lets you embed video directly into your code without having to use third party plug ins like flash. If you have ever tried to view a video on you mobile only to be told your device does not support it, this will be due to a third part plug in.
There are many new elements included in HTML5 of which I will not list out here, however here is a link to the W3schools website that will give you all the info you need to know about HTML including all the new elements of HTML5. Happy learning!