HTML Essentials by Lynda – Exploring an HTML document

This morning I am exploring how to set up the basic HTML page structure. Something I briefly explored back when I first found out that I was going to be an Intern for a Web Design Company.

When on any webpage, you can right click and ‘Inspect’ the sites code. This shows all of the code involved in the page that you are viewing. You can see exactly how all of the elements have been constructed.

9.png


 

To start, I’m going to use the code editor and files provided by Lynda.com and go through how they have constructed it.

An HTML structure is explained as a sandwich. Without an opening and closing HTML tag, you don’t have a sandwich, just the filling or a salad.

To begin the code, they start with ‘<!doctype html>’ which is called the doctype declaration.

10

This tells user agents which version of HTML you have written in. In this case, they are using HTML5, the newest version of HTML.

Within the HTML tag, there are two main regions. We have the head (mayonnaise) then we have the body (meat). The head will make your sandwich better but not necessarily define it, it contains all the things that go into making the document work.

11.jpeg

Below the head tag are some ‘meta‘ tags, the first one describes the UTF eight encoding that should be used. UTF stands for Unicode Transformation Format. The ‘8‘ means it uses 8-bit blocks to represent a character.

The second one is a descriptive meta tag which can help search engines and other robots. After writing ‘meta‘, you need to write what kind of thing you want to tell it using ‘name=‘. In this case, they want to add a description so in quotes, you start with “description” and then to actually describe what is on the page, you write ‘content=‘ and in quote marks, you write your description.

We then have a ‘title‘ tag which appears in the tab of this particular page. If you don’t set a title, it will show as the title of your HTML file in the tab bar… This doesn’t look good.

12.jpeg 13.jpeg

You could also put things in the head of the document like links to external resources like CSS files that help style a page. JavaScript files that help control the behaviour of the page. So these are non visual elements that go into making the page work.


 

Below the head tag sits the body tag, this contains the meat of the sandwich , it’s what makes the sandwich what it is. The body tag contains all of your visual elementsyour main content, your sidebars, your footers, all of it is going to appear here.

14

In this file, there is only a ‘heading 1’ and a ‘paragraph’. You could have a lot more in your document and a lot more going on. But the basic structure of your HTML page is going to be this.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s