HTML and CSS

HTML (Hypertext markup language) forms the basic building blocks of web pages. Originally developed by Tim Berners Lee, a CERN physicist as a system to share simple documents, HTML now forms the backbone of the worldwide web and has significantly improved functionality and capabilities.

The manner in which HTML describes web pages is by using sets of markup tags. HTML tags are keywords surrounded by brackets and usually come in pairs, here’s and example.

<p> I am a paragraph, so rad. </p>

The first tag is known as the start tag or opening tag, the second is known as the end or closing tag and differs from the opening tag by the inclusion of a slash before the name of the element within the angle brackets. The tags are read by the browser and are not displayed, instead they indicate how the browser should interpret the content between them. This is the format for both Raw text and “normal” elements, there is a third class of element known as void elements that only have a start tag, This class of element contains attributes as in the following example.

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

This element would instruct the browser to link a stylesheet to use when presenting the HTML page to the user.

HTML tags can be nested within each other and in fact this nesting forms the basic layout of the code for constructing a web page as a whole. The “bottom level” or root element consists of a pair of <html> tags, this contains all the other elements and tells the browser that it is dealing with an HTML document. Before the <html> tag, at the very start of the code is a <!DOCTYPE> declaration that tells the browser what version of HTML is being used. Within the two <html> tags  the basic structure of the page is created.  This is formed firstly by the inclusion of <head> and <body> elements. here’s what this looks like.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;                                                 <html>                                                                                                                                      <head>                                                                                                                                          <title>Title of the document</title>                                                                                        </head>

<body>                                                                                                                                             The content of the site…                                                                                                            </body>                                                                                                                                            <html>

The head element is read by the browser but not displayed. It contains scripts to be downloaded to the client and run on the page, information on where to find style sheets the title of the page and other meta information. The title element defines a title in the browser toolbar provides a title for the page when it is added to favourites and for when it appears in search engine results. This last point makes the content of the title element quite important as it has a direct relationship to the ranking of the page within search engines and therefore potentially the amount of people that will visit.

<title>I am a title, look for me search engine!</title>

Also included in the head section of a page is the link element. The link element describes a relationship between a document and an external resource. The link element is an example of a void element and does not have a end tag. A link element is further defined by several attributes. The rel and rev attributes specify either forward or reverse link types, the href implies a URL for a linked resource and the type attribute describes the type of content being linked to. Link elements in the header are often used to link to style sheets that control the appearance of a page for example:

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

Provides a link to a document of a recognised format “stylesheet” that is of a “text/css” type at location “Project3.css” within the site.

Another void element placed in the header are the meta tags. These provide data “about” data in the form of keywords and descriptions. They can include general descriptions of the content of the site or information as to when it was last modified or who the author is etc. Meta information can be extremely important to search engine optimisation as it will be looked at to determine the relevance of the page to keyword searches. Meta information is always read as name/value pairs indicated by the terms “meta name” and “content” here’s a few examples:

<meta name=”keywords” content=”website, college project, web design, HTML, meta” />

This would be used to associate the name “keywords” with the text “website, college project, web design, HTML, meta” The following:

<meta name=”description” content=”Essays and writings on the format of HTML” />

This would provide a description of the site as Essays and writings on the format of HTML. Description meta information is not used by Google, Yahoo or Bing to determine search rankings but it does appear under the link on a search page and if your page has “extended site links”. It is also used as a default site description on social networking sites like Google+ and Facebook.

The script element is used to define a client side script to be run such as Javascript. They may be loaded as soon as the web page is loaded or due to other actions such as the selection of a link or the movement of a mouse. They can be linked to forms to process input or dynamically update the values of other fields or linked to form control to provide UI elements. Script elements have a beginning and end tag and can contain attributes that specify the type of script to be run, the character set used and whether or not to defer the loading of the script until the page has loaded. Here’s an example:

<script type-“text/javascript”>                                                                                                          document.write (“I am a script”)                                                                                                    </script>

Scripts like this one contain the scripting statements within them, it is also possible to link to external scripts through the src attribute.

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