Welcome to Simpleeggdesign.com

What is HTML?

"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 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 theTexttags, 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:

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 tag denotes a basic paragraph and again comes in pairs This is s paragraph . 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 tag. The 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 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.

Formatting Text with HTML

You can emphasise text on your page by adding the tags around it. This should be used inline rather than around <h> or tags for example, Hello this is a paragraph and I want this word to be bold on my page.

You can also use the tags to make your text italic and again should be used inline rather than around other tags. For exampleHello this is a paragraph and I want this word to be italic on my page.

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.

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.

Changing the Background Colour

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.

Changing the Text Colour

You can also change the colour of your text using HTML by adding an attribute to the font tag. For example this text is a different colour . You will need to add the closing tag to tell the browser when to stop applying that colour to your text.

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.

HTML4 to HTML5

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!