Griffiths web design based in Royston, Hertfordshire, United Kingdom

 

HTML and CSS for beginners – Part two

Author:   Michael Griffiths

Date created:   25 November 2016

[postpic=part2head.png class=img-responsive title=HTML and CSS for beginners – Part two alt=HTML and CSS for beginners – Part two style=][/postpic] [b][url=http://www.griffithswebdesign.com/blog/post/35][l]<< Back to HTML and CSS for beginners part 1[/l][/url] [url=http://www.griffithswebdesign.com/blog/post/38][r]Go to HTML and CSS for beginners part 3 >>[/r][/url] [/b] [hdmd]The syntax of HTML[/hdmd] [l]Now we have discussed the background stuff lets quickly put together a blank template which could easily serve as the base for any HTML document. For the benefit of the example I have put in a few elements in the body for us to explore and discuss.[/l] [code]<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>This is the title element</title> <!--[if lt IE 9]> <script src=https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js></script> <![endif]--> </head> <body> <header> <div> <!-- This is a comment, it is ignored by the browser. --> <h1>This section <span>of the page</span> is the header element</h1> <img src="#" alt="This is the alternative text and will be read by screen readers and search engines" title="This is the image title and will be read by search engines and screen readers." height="100" width="100" /> </div> <nav> <ul> <li><a href="http://www.google.com" target="_blank">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </nav> </header> <main> <h2>This is the main content area</h2> <article> <h3>This is an article element</h3> <p>This article element is nested inside a main element.</p> </article> <section> <h2>This h2 element is inside a section element</h2> <p>The section element is used to define sections of a html document.</p> </section> <section> <h2>Some lists</h2> <ol> <li>Numbered item 1</li> <li>Numbered item 2</li> <li>Numbered item 3</li> </ol> <dl> <dt>This is the term</dt> <dd>This is the definition</dd> <dt>This is also a term to be defined</dt> <dd>This is the definition of the second term in the list.</dd> </dl> </section> <section> <table> <caption>This is a HTML table.</caption> <tr> <th>This is the first column heading</th> <th>This is the second column heading</th> </tr> <tr> <td>This is the data for the first column.</td> <td>This is data for the second column.</td> </tr> </table> </section> </main> <footer> <h2>This h2 element is inside a footer element.</h2> </footer> </body> </html> [/code] [l]As you can see there is nothing in this document that is all that complex or difficult to understand. However I will give a brief explanation of the elements.[/l] [hdsm]The Doctype[/hdsm] [code]<!DOCTYPE html>[/code] [l]This declaration is not actually an HTML tag. Instead it is an instruction to the web browser telling it which version of HTML the document is written in. In previous versions of HTML the doctype refers to a dtd. HTML 4 was based on SGML (Standard Generalized Markup Language). The dtd specifies the rules for the markup so your web browser (Internet Explorer, FireFox, Chrome, etc.) can render it properly. HTML5 is not based on SGML and as a result does not require a reference to a dtd.[/l] [hdsm]The html element[/hdsm] [code]<html lang="en">[/code] [l]This element, html, tells the browser that everything between the opening and closing tags is html.[/l] [l]This tag we have an attribute labelled as ‘lang’. This tells the browser what language the page is in. The ‘en’ part is known as a language code. In this particular example we have told our browser that it is in English. [/l] [l]As you may be aware there are variations of English that are country specific, for example in Britain we would call Trousers… ‘Trousers’. However in America they would call Trousers ‘Pants’. The same holds true in computing. Date formats are just one of the things that are location specific. To specify the country we could modify the tag so it looks like this: [/l] [code]<html lang="en-GB">[/code] [l]In this version of the tag we have our language code, followed by a dash which in turn is followed by ‘GB’. This extra part we have added on to our language code is called a Country code. In the above example we have specified our language as English and our country as Great Briton, this tells our browser (and search engines, screen readers etc.) that the page is written in British English.[/l] [hdsm]The head element and the elements it contains[/hdsm] [l]As you can see from the example there is an element called head.[/l] [code]<head> </head>[/code] [l]This element contains all the information that the browser needs but does not display any of this data on the page when rendered by the browser. [/l] [l]The first line after the opening head tag reads as follows:[/l] [code]<meta charset="utf-8" />[/code] [l]In this line of mark-up you're telling the browser what character set you're using, so it can better render the text on screen. [/l] [l]The "meta" element essentially just means "some information about this document" so you can set various properties to do with the document and its contents, but they're not directly a part of the document. These meta tags are information for the browser, for search engines, screen reader etc. As a result are not seen by the end user. [/l] [l]There are other possible meta tags that could be included but for the purposes of keeping this article at a manageable length I have chosen to omit them from the example. If you wish to know more about meta tags please visit the following link where the good folks at world wide web consortium (that’s W3C to the rest of us) have put together some information on meta tags. [/l] [url=http://www.w3schools.com/tags/tag_meta.asp ]http://www.w3schools.com/tags/tag_meta.asp [/url] [l]After this line we have a set of title tags.[/l] [code]<title>This is the title element</title>[/code] [l]These tags tell the browser what the page is called.[/l] [l]Now we have something a little different. Something called a HTML5 shiv.[/l] [code]<!--[if lt IE 9]> <script src=https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js></script> <![endif]--> [/code] [l]This is what’s known as a conditional comment. This checks to see if you’re using Internet Explorer below version 9, and if you are (by ‘you’ I mean the user) then it applies a special JavaScript file. This JavaScript file is a bit of a hack (I suppose the politically correct version is ‘work around’ not ‘hack’ but nonetheless it’s a hack). This hack means that internet explorer will allow styling of unknown elements. The reason we need this is because Internet Explorer, versions less than 9, do not support HTML5 elements and as a result does not allow styling of these elements. Other browsers (Firefox, Chrome, Internet Explorer 9+ etc.) will allow styling of unknown elements and generally have far superior support of HTML5.[/l] [l]This ‘shiv’ needs to be placed in the head element, after any style sheet declarations.[/l] [l]Eventually these conditional comments will be unnecessary as these stone aged browsers become extinct. But for now you’ll need it if you wish to support older versions of IE (Internet Explorer). For more information on the HTML5 shiv please visit [/l] [url=http://www.w3schools.com/html/html5_browsers.asp]http://www.w3schools.com/html/html5_browsers.asp[/url] [l]As you can see from the example the conditional comments are the last item in between the head tags.[/l] [hdsm]Comments[/hdsm] [code]<!-- This is a comment, it is ignored by the browser. -->[/code] [l]In HTML you can write comments in your HTML document that will be ignored by the browser. Comments are an excellent addition to any programming language/ mark-up because it allows you to leave yourself hints as to what you are doing. This really comes in handy when you are coming back to your work at a later date. [/l] [l]Comments in HTML can span multiple lines.[/l] [hdsm]The body[/hdsm] [code] <body></body>[/code] [l]The body tags contain everything that the user sees when they load the page in a browser and are essential.[/l] [l]Inside those body tags we have several HTML elements. I will give a brief explanation of each of those elements.[/l] [code]<header> </header>[/code] [l]These tags are intended to serve as a container for the introductory content and normally contains one or more headline text elements (such as h1, h2, h3, etc.), navigation links and possibly a logo/icon. [/l] [code]<nav> </nav>[/code] [l]This is where your navigation links should reside. However not all of your navigation links should be contained in the nav, only the main links.[/l] [code]<main> </main>[/code] [l]These tags specify the main section of the document. The content within these tags should be specific to that HTML document. As such should not contain information that is repeated across several different pages. For example a sites navigation should not be inside the main tags. [/l] [l][b]A further note about the main tags –[/b] There can be only one main element on the page and it cannot be nested in any of the following tags: header, footer, aside, article or nav.[/l] [code]<article></article>[/code] l]These tags are for independent content. What I mean by this is content that would still make sense without the rest of the page. For example on a blogging site the blog post itself may be contained within an article element.[/l] [code]<section></section>[/code] [l]These tags are used for sectioning a document. For example they could be used to denote chapters, headers, footers or for that matter any other section of the document. In an online blog you may have a section for the post, a section for the authors’ bio and a section for the comments.[/l] [code]<footer></footer>[/code] [l]These tags define the footer area of the page or section. The footer is supposed to hold information on its parent container. For example, Contact information, site map, copyright information, navigation links etc.[/l] [l]As you may have noticed I have left some elements out of this list but have no fear we will be discussing those in a moment. All the items in the list, from header all the way down to footer, are newly introduced elements in the HTML5 specification. They are all block elements and are intended to make to web more accessible, i.e. for screen readers etc. You have to remember that some users of the internet may be visually impaired. Using the correct tags means that screen readers will know what kind of information the container holds and will then be able to render them in the appropriate manner, otherwise the result is absolutely nonsensical and the user cannot effectively use your site.[/l] [l]The following list of HTML elements are from the HTML4 specification and are essential to any webpage or HTML document.[/l] [hdsm]Containing elements[/hdsm] [code]<div></div>[/code] [l]The humble div tag. The most used HTML element of all. It is a block level container, so essentially it is a box in which you put your content. By default the browser will implement a line break before the div, this behaviour can be changed via CSS.[/l] [code]<span></span>[/code] [l]The span tags are inline elements. They are similar in some ways to the div tags, in that they are designed to be containers. The biggest difference though is that they do not have an impact on the layout of a page. They are intended to add a ‘hook’ onto some text. You’ll see in the template that there is some text surrounded by a set of span tags. The text within the span tags can be manipulated with CSS or JavaScript independently from the rest of the text within its containing <h1> tags. The span tags alone will not change anything visually on the page unless, as just stated, you implement some CSS and/or JavaScript.[/l] [hdsm]Text elements[/hdsm] [code]<h1></h1>, <h2></h2>…<h6></h6>[/code] [l]These are the heading elements. They range from <h1>, the largest and most important header, to <h6>, the smallest and least important header. Typically you’ll find only one <h1> element on a page, which is usually found in the <header> containing element. The head text elements are all block level elements.[/l] [code]<p></p>[/code] [l]The paragraph tags, where would the web be without them? These are block level elements that are intended to contain text. Most browsers will add some margin and padding to these elements, this behaviour can be overridden by CSS and/or JavaScript.[/l] [hdsm]In HTML there are three kinds of list[/hdsm] [l][b]Unordered lists[/b] are bullet point lists. These lists are the most commonly used lists of the three. Most websites use unordered lists for navigation as well as for bulleted lists.[/l] [code]<ul></ul>[/code] [l]These are the containing tags for an unordered list. They can be styled and manipulated using CSS and/or JavaScript. The ul is a block level element.[/l] [code]<li></li>[/code] [l]These are the list item tags. These will contain the content of each individual item in the list and must be contained within an [b]ol[/b] or [b]ul[/b].[/l] [l][b]Ordered lists[/b] are numbered/alphabetised lists.[/l] [code]<ol></ol>[/code] [l]These are the containing tags for the ordered list. The [b]ol[/b] is a block level element.[/l] [code]<li></li>[/code] [l]These are the list item tags. These will contain the content of each individual item in the list and must be contained within an [b]ol[/b] or [b]ul[/b].[/l] [l][b]Description lists[/b] are a little different to the other two. These lists are like a dictionary, you have a word/term then you have the definition/description of that term.[/l] [code]<dl> </dl>[/code] [l]This is the containing element for the description list, and like the previous lists it is a block level element.[/l] [code]<dt></dt>[/code] [l]These are the tags which contain the term to be described.[/l] [code]<dd></dd>[/code] [l]This is where the term defined within the [b]dt[/b] tags is described.[/l] [hdsm]Tables[/hdsm] [l]HTML tables have gotten a bit of a bad reputation over the years. Once upon a time the web was a bleak place consisting of nothing more than drab and dreary layouts. Then along came tables and to get around the limitations of the web at the time developers started to abuse the humble table for things it was not designed for: Layouts. It was never the intention of the creators of the language for the table to be used in that way. They are after all meant to be used for tabulated data. While developers were able to create complex layouts using tables they were rigid and inflexible and to top it all search engines hate them. Fast forward a few years and we now have CSS which enables us to layout the page as it was intended and as a result the humble table can go back to what it was meant for: to display tabulated data.[/l] [l]There are a few elements involved in making a HTML table, which I will go through in turn.[/l] [code]<table></table>[/code] [l]This is the container for the table, the outside box if you like.[/l] [code]<caption></caption>[/code] [l]This defines the table caption. You may only have one per table and it must be placed immediately after the opening [b]table[/b] tag.[/l] [code]<tr></tr>[/code] [l]A set of these tags will add a new row to your table. These tags must be inside a <table> element.[/l] [code]<th></th>[/code] [l]These tags define the column header cells of the table and must be contained within a set of [b]tr[/b] tags.[/l] [code]<td></td>[/code] [l]These tags define the standard cells of the HTML table. <td> elements must be contained within a [b]tr[/b] element.[/l] [hdsm]Navigation[/hdsm] [l]To link to another page is very simple. To do so we need an anchor tag and a destination. In the following example I will use Google’s home page as the destination.[l] [code]<a href="http://www.google.com">Link 1</a>[/code] [l]The text between the opening and closing anchor tags is the text to be displayed by the webpage to the user. [/l] [l]If you wanted to link to another page but have it open in a new tab then you need to add a target attribute with a value of _blank to the anchor tag.[/l] [code]<a href="http://www.google.com" target="_blank">Link 1</a>[/code] [l]In this example we have added ’target=”_blank” ‘. This is all that is required in order to open the link in a new tab. No fancy JavaScript just good old HTML.[/l] [l]Another thing you’ll see quite often on the internet is linking to specific points within the document, more commonly referred to as bookmarks. So instead of going to another HTML document you are navigating to a position within the current document.[/l] [l]To do this we use the same syntax as before but this time the URL we feed it will instead be the id of an element within the page. [/l] [l]Let’s imagine we have a section with the id of ‘sectOne’. Like so[/l] [code]<section id="sectOne"></section>[/code] [l]Now we need to add an anchor tag, like this[/l] [code]<a href="#sectOne">This is a link.</a>[/code] [l]When you run the page in the browser and click the link you will be taken to the section that is specified (the one with the id ‘sectOne’). It is important to know that you must prefix the id with the # symbol.[/l] [hdsm]Images[/hdsm] [l]So far we have looked at varying different HTML elements, most of which have been text related. But there is more to the internet than just text. Everywhere you go you are bombarded with images. From logos, to banner adds, to backgrounds they are just about everywhere. You might think that there would be something special and complex required to display images in a webpage but I assure you there is not. All that is required is one self-closing html tag that needs a couple of attributes then you’re good to go.[/l] [hdsm]Image formats[/hdsm] [l]Before I show you the image tag I want to talk about three types of image file, JPEG, PNG, GIF. These are the most commonly used image formats on the web as they are the most widely supported by web browsers. Each of them has their advantages and disadvantages depending on the situation so it is important to know a little about each of them so you can make the best choice when choosing an image format.[/l] [hdsm]The JPEG (.jpg)[/hdsm] [l]Out of the three image formats the JPEG is the one I find myself using the most. The JPEG was originally created by ‘The Joint Photography Experts Group’. As you probably guessed by the name this format works well with what is described as ‘natural image types’. For the rest of us that means photography. The reason it works well for this type of imagery is because photography tends to have smooth variations of colour. This also means that the humble JPEG is well suited to images with gradients and varying tones and colours. A vital point to remember when dealing with JPEG’s is that they are, usually, a ‘lossy’ format. There are ‘lossless’ versions of the JPEG around but they are generally not widely supported and there are other image formats around far better suited to the task. So what does this ‘lossy compression’ thing mean? It is a form of encoding that look at the blocks that make up the image and determines the small variations in colour and then gets rid of some of those variations dependant on the level of compression chosen. The data that has been removed is gone forever. This helps to generate a smaller file but also lowers the quality of the image. If the compression is too high then the image can end up becoming pixelated. One final note about JPG’s to remember is that they [b]do not[/b] support transparency.[/l] [hdsm]The GIF (.gif)[/hdsm] [l]The Graphics Interchange Format, or ‘GIF’, was developed by Steve Wilhite at CompuServe in the late 80’s. This format uses the Lempel–Ziv–Welch (LZW) lossless data compression technique to enable a smaller file without loss of quality. The GIF allows up to 8 bits per pixel for each image and each image references its own palette of up to 256 colours. The GIF also supports transparency, in a GIF each pixel is either 100% transparent or 100% opaque. Another noteworthy point is that this format is a multi-image format which means it allows for animation. It does so frame by frame and allows for an individual palette of 256 colours per frame. Due to the limitations on colour imposed by this format it does not make it a good candidate for photography but it is well suited to line based images and logos with blocks of solid colour.[/l] [hdsm]The PNG (.png)[/hdsm] [l]The Portable Network Graphics, or ‘PNG’, was developed as an improvement on the GIF. The PNG uses a two stage lossless data compression. Pre-compression by use of a ‘prediction filter’ followed by DEFLATE lossless data compression. DEFLATE is the same compression algorithm that is used by ZIP files. I won’t go into any further details on this method of compression as it is quite complex and falls beyond the scope of this article. The PNG supports full colour non-palette based RGB and RGBA (Red, Green, Blue, Alpha) images. As well as this it also supports palette based images, with the palettes being either 32 Bit RGBA or 24 Bit RGB. The PNG also supports grey scale images as well, with the alpha channel and without. Unlike the GIF the PNG does not support animation. This is because it is a single image format, just like the JPEG. However the transparency capabilities far exceed that of the GIF. The use of Alpha Transparency in the PNG means that a pixel in a PNG image could be 50% transparent or 67% or whatever. This means that the PNG allows for far superior blending and generally much smoother graphics than the GIF could ever manage. One more note on PNG’s to remember is that in most cases the PNG file will be a better choice than the GIF. This is not always the case, there are exceptions to every rule. It’s down to you as the designer/developer to decide on a case by case basis which file format to use.[/l] [hdsm]Back to the image tag[/hdsm] [l]Now that we have discussed image formats we can now move onto the good part, actually getting the image to display on the webpage.[/l] [l]To load an image on the page HTML has provided a tag for this very purpose. [/l] [code]<img />[/code] [l]This is the tag without any of its attributes. Obviously if you put this in your HTML document at the moment it would do nothing. So how do we get from this lowly tag to having an image display on the page? Well first we need to add an attribute which is labelled as ‘src’ which tells the web browser where the image is located. So that could be a folder within the website directory or it could be external, as in from another site. So the modified tag should look like this.[/l] [code][/code] [l]You will need to replace the # with the path to the file. So if the image, called img.png, was saved in a folder, called images, in the root of the website directory then the path to the image would be images/img.png. If you try this now you’ll see the page display the image just fine. However there are a few more attributes that should be added to the image tag.[/l] [l][b]alt –[/b] This attribute specifies the alternative text displayed if the image does not load. It is also read by screen readers and search engines. For the purposes of accessibility and search engine optimisation you cannot afford to miss out this attribute. Make sure your alt text accurately describes the image and its purpose and you keep the text as unique as possible. No one likes a copycat, especially search engines. [b]title –[/b] This attribute is similar in concept to the alt attribute except this attribute displays even if the image has loaded, usually in the form of a tooltip. You may think that it is pointless to include both alt and title but for SEO and accessibility concerns it is best to include both. [b]height –[/b] This attribute takes a numerical value. This value represents the image height in pixels. So if you gave it a value of 150 then the image would be 150 pixels in height. This can be omitted and set in CSS instead, which is usually the route designers take as CSS allows for other units of measurement other than pixels. [b]width –[/b] This attribute, just like the height attribute, takes a numerical value which corresponds with the width of the image in pixels. Again this attribute can be left out and be set in CSS instead.[/l] [l]There are a few other attributes that could be set on image tags but these are the most commonly used attributes for the tag.[/l] [l]This is the end of our exploration of HTML for now. The elements we have discussed so far are among the most commonly used HTML tags but there are some tags that we have left out. For more information on HTML and its elements then please visit the W3C website at the following address:[/l] [url=http://www.w3schools.com/]http://www.w3schools.com/[/url] [l]Now that we have explored some HTML let’s see what our page looks like when viewed in a web browser.[/l] [postpic=unstyled.jpg class=img-responsive title=Html document as rendered by the browser alt=This is the html document that we have been discussing style=][/postpic] [l]The web browser reads your mark-up and displays it in the browser window. It’s not very pretty but it does have structure. However if you or I visited a webpage that looked like this then we would be leaving before we have read any of the information. As web designers we want people to take note, not take their leave.[/l] [l]In this section we learnt about HTML. I waffled endlessly about some of the most commonly used tags. So well done you made it this far and hopefully didn’t fall asleep.[/l] [l]In the next section we will be discussing how to turn our plain and boring HTML tags into something beautiful. We will do so by using CSS. If HTML is the foundations of your house then CSS is the decoration.[/l] [b][url=http://www.griffithswebdesign.com/blog/post/35][l]<< Back to HTML and CSS for beginners part 1[/l][/url] [url=http://www.griffithswebdesign.com/blog/post/38][r]Go to HTML and CSS for beginners part 3 >>[/r][/url] [/b]

About the author

My name is Michael Griffiths, I am a website designer and developer and the owner of Griffiths Web Design. I am based in Royston, Hertfordshire. Most of my work is local, Hertfordshire, Cambridgeshire, Bedfordshire, Essex etc. but that’s not to say I won’t work elsewhere. One of the wonders of modern technology is remote working. So no matter where the client is located it is always possible to connect.

I specialise in creating ASP.NET webforms applications using C#. I use Microsoft SQL Server for database development and on the front end I use Html, CSS and JavaScript. I am also proficient in the use of jQuery and several CSS frameworks.

One of my greatest passions in life is learning. Which is why I chose to pursue a career in web design and development, technology is in a state of constant and rapid evolution which means there is always something new to learn. I also enjoy writing, both fiction and non-fiction.

Comments

Please feel free to leave a comment below:






 
Griffiths Web Design Logo by Michael Griffiths
Griffiths Web Design Logo by Michael Griffiths
Click to go to the top of the page