web-design-tutorial-html-part-2

How to create a website – Web Design and Development Tutorial – HTML (Part 2)

So in the previous HTML Tutorial we looked at a lot of types of HTML tags and how HTML syntax works. In this post we’ll just put it all together into a simple HTML Page.

As explained in the previous post, HTML is used to define content and additional resources for the webpage to function normally.

Here’s what a usual HTML Document looks like:

HTML Structure

So let’s dig deeper into each of these sections.

The Head Section

This section is at the very top in all HTML documents. It includes information about the document like character encoding, linked resources, description for the page, title of the page etc. It is here that we would include all the additional CSS and JavaScript files needed for the page to function properly.

Here’s what a typical head section looks like

Now let’s look at each tag in detail

<!doctype html>

The <!doctype html> is not exactly a HTML tag. Its actually an instruction to the web browser informing it about what version of HTML is used. This tag declares HTML 5 as the HTML version of this document. Examples of other versions are as follows

HTML 4.01 Strick

HTML 4.01 Transitional

HTML 4.01 Frameset

Similarly there’s for more formats but we’ll go into detail a little later.

<HTML>

The HTML tag marks the start of the HTML content. It is within this tag that the code for the whole document will reside. Hence you see the HTML tag closing right at the end.

<head>

This  is where all the header content we’ve been talking about goes. As mentioned earlier this element includes content like the title of the page, links to CSS and JavaScript files etc.

Let’s have a look at the contents of the <head> tag in detail.

<meta charset=”utf-8″ />

This tag is used to define what encoding is used to the content. Encoding is basically a way different characters are stored in the system. Here’s a great article explaining this in great detail.

<title>

HTML Title

This section defines the title of the page. The title is the text that appears on the browser tab. As seen in the example above, “Edit Post ‹ Projectile Pixels….” is the title. In the code we have above the title would be “Sample Title of the Page”.

<link rel=”stylesheet” type=”text/css” href=”style.css” />

This tag creates a “Link” between the HTML file we are editing and another CSS File. Basically to keep things simple, all HTML code would be stored in the HTML file and all CSS code will be stored in a CSS file. These two files are then “linked” together so they can work as one single document.

The “rel” attribute

The “rel=”stylesheet” attribute defines the type of relation between the HTML file and the CSS file. In this example it’s quite straightforward that the linked file is a stylesheet for the HTML file. However in some cases it might not be so obvious, which is why this attribute is needed. As a example the <link> tag can be used to link to an alternative version of the file, in such cases we would declare the it as Link rel=”alternate”. This explains that the linked file is an alternate version of the current file.

The “type” attribute

In simple words, the type attribute states the file format of the linked document. I understand this might seem similar to the “rel” attribute and get confusing. Here’s how the two are different,let’s say we link to another HTML file which is an alternative version of this file. In such a case the rel value would be “alternate” however the type value would be “text/html” as the file itself is an HTML file. The values in the type attribute are knows as MIME types, which is just another term for file formats. Here’s a nice complete list of all MIME types there are.

The “href” attribute

href is short of Hypertext Reference. It’s basically the address or location to the actual linked file. In this case it tells the browser where exactly the CSS file is located.

How exactly is the location defined

I know some might be thinking how exactly is the location defined. The location is basically a URL to the concerned file. The URL can be a relative one or an absolute one.

Relative URL :  A relative URL mentions the location relative to the HTML file’s location. For example let’s say the HTML file and CSS file are in the same folder and the filename of the CSS file is “style.css”. In this case the value would be “style.css”. However if there was a folder named CSS along with the HTML file and CSS file was within this folder it would be linked to as “CSS/style.css”. Similarly ” ../ ” means “up” the directory tree. Equivalent to you pressing “up” on windows explorer.

Here’s a quick illustration to explain it better.

Relative URLs

<script>

The script tag is used to add JavaScript or other available scripting code to the document. There’s two ways of using this tag which we will look into detail in the Javascript section. For now all you need to keep in mind this that the “src” attribute acts exactly like the “href” attribute. “src” is short of source.

After all this we can go ahead and close the <head> tag with the closing head tag </head>.

<body>

Now that we’re done setting up the head section let’s move to the body section. The body section is where all your content will be defined. All the headings, tables, lists, forms, images, paragraphs etc are added to this section. Do note that some tags in the head section can also be used in the body section. For example the <script> tag.

In the above example we have created a simple HTML page with a main heading followed by a paragraph ,an image and then another paragraph.

<h1> 

The <h1> tag defines the heading. In the above example the heading would be ” The main heading of this content “.

<p>

The <p> tag is used to define the text that forms a paragraph. You will see another paragraph after the image has been defined.

<img>

This tag defines the image. The src attribute works exactly like the src explained earlier in the <script> tag. The “alt” attribute provides alternate text that can be displayed incase the image itself does not load.

The image at the start of this post also shows a <script> at the bottom of the document. That’s basically just good practice, JavaScript kept at the top of the page can often slowdown the loading of HTML pages and hence are often placed at the bottom of the page. This means any additional JavaScript would be included at this part of the document just before closing the <body> tag.

Once done with closing the <body> tag, we also close the <html> tag as a sign that this document has ended.

I highly recommend you copy the code at the top of this post and save it as an HTML file (filename.html). Then go ahead and load it in any browser to understand how exactly all this code translates to the page. You will also need to place an image named “example.jpg” in the same folder as the HTML file.

I hope this post was helpful, if it wasn’t feel free to ask your questions in the comment section and I’ll be happy to answer them all.

 

Related Post

How to create a website – Web Design and Developme... So far we have learnt to add content to a webpage using HTML and also change the look and feel of the webpage with CSS. In this post, we'll learn to a...
How to create a website – Web Design and Developme... In the previous post  - Web Design Intro, we had a look at different components of the internet and web applications. In this post we'll dig deeper in...
How to create a website – Web Design and Dev... How does one create a website - I've come across this question a lot of times, mostly from people aspiring to learn web design or web development but ...
How to create a website – Web Design and Developme... In the previous HTML tutorial we've learnt how HTML is used to define the basic structure of a webpage. We've also made a basic HTML page with a headi...

Related Posts