HTML and CSS – Part two.

The body tags form a container for just about everything that makes up the content of a site and comes after the head tags in the html container. There is a wide variety of content that can be placed within it such as links, paragraphs of text, lists, images, and forms. Basic text elements can be described using the <p> and <h1> – <h6> tags.

The <p> tag defines a paragraph, text will appear in a default font (Times New Roman) without justification or positioning on the page. These attributes can however be modified using CSS style sheets but we’ll talk more about that later. The p element needs a beginning and end tag and can support various mouse and key press event attributes. Here’s an example:

<p> I am a paragraph, hooray!</p>

The <h1> – <h6> tags define different levels of heading. The <h1> tag describes the main heading and is formatted in bold with a larger font size. The subsequent <h2> – <h6> tags display headings at a gradually reduced size in descending order. Heading elements are not just used for visual purposes but provide a broad structure to content that some programs can use to generate outlines or tables of contents. Like the <p> element the formatting of the <h1> – <h6> elements can be changed with CSS. <h1> – <h6> tags need both beginning and end tags and look like this:

<h1>This is an important heading, grrrr!</h1>

Information can also be presented as a list, there are various form of list that can be defined, the two most common being ordered and unordered. An ordered list has numerical values attached to the content while the unordered has bullet points marked with small discs (changeable in CSS). The syntax for both types in HTML is the same a pair of tags defines the beginning and end of the list while a separate pair of tags the <li> element describes the content, a list item. For example:

<ul>                                                                                                                                                <li> I am a list item, in no particular order</li>                                                                                  <li> So am I, how quaint</li>                                                                                                        <li> What a coincidence I am too</li>                                                                                                    </ul>

To include images in the body of a web page they must be linked. For this we use the <img> tag, it’s a void element without an end tag. The <img> element consists of two parts, the first is the src attribute and identifies the URL for the linked image. The second, the alt attribute, specifies alternate text for the image if the image cannot be displayed. It is worth noting that safari and Google chrome will not display the alt attribute. Here’s an example with the image in question being found within the images folder of the website.

<img src=”images/main-image.jpg” alt= “main image”/>

Properties like the width and height of an image can be specified in the HTML or controlled via CSS. To set the image dimentions in the HTML code the attributes are simply entered after the alt attribute as follows:

<img src=images/main-image.jpg” alt=”main image” width = “900” height =”300″ />

The dimensions are described in pixels. Img elements, like <p> elements support a range of mouseover and keypress event attributes. They can also be used as hyperlinks.

Links on web pages are usually described in HTML within the body container using the <a> tag. The a in this case stands for anchor and is used to set up relationships between elements. This relationship can take the form of a link to another document or a link within the document like a sort of bookmark. When using the <a> element the type of link is specified within the opening or beginning tag, after this comes the content that forms the link followed by the end tag. To create a link to another document the href attribute is used as follows:

<a href=”http:www.linksrus.com”> This is a link! </a>

In this example the text “This is a link” is anchored to the URL http:www.linksrus.com. By default all links are appear in the same way. An unvisited link is underlined and blue, a visited link is purple and underlined while and active link is red and underlined. To link to another element within the same page it’s a bit trickier but not by much. To do this first the name attribute is used within the opening a tag of the element to be linked to like this:

<h1><a name=texttofind>I am what you are linking to</a><h1>

Then after this element has been named you can link to it using the href attribute by specifying its name like this:

<p><a href=”#texttofind”>Go find me some text</a><p>

This will display the text “Go find me some text” as a link and when clicked it will take you to the heading “I am what you are linking” (as long as its on the same page).

One of the most important tags included in the body of a web page is the div tag. The div tag does not directly represent an element on the web page, instead it is used to group other elements together so that they can be formatted with styles. Div is a normal element with both beginning and end tags, the beginning tag of a div can have the style attribute included to change the formatting of the contents of the two div tags.  Div is also block level container meaning that there is a line feed after the <div> tag. Another formatting container that is similar is the span tag, this acts in a similar manner to the div tag but does not have the line break and can be used to apply formatting to say individual characters if desired. Here’s an example of how div tags work:

<h1> I am a header </h1>                                                                                                                    <p> And I am a paragraph</p>

<div style=”color:#00FF00″>                                                                                                                 <h1> I am a header but im inside the div! </h1> <p>                                                                              I am a paragraph but I’m also inside the div! </p>                                                                               </div>

In the above example the style attribute within the opening tag of the div container changes the formatting of the second two sentences, in this case changing them to a green colour. The first two lines of text are unchanged. In this case the styling for the div is inside the HTML itself however is often used along with id and class attributes in specifying content to be styled by CSS rules. Which brings us nicely to.

CSS

CSS stands for cascading style sheet, it was developed in December 1996 by the World Wide Web Consortium as a way to separate the styling of web page elements from their content. As we saw previously style information can be placed directly into the html code as with the div example. However this was leading, as pages became more intricate, to large and unwieldy code, hence the need for CSS.

CSS information can be defined in the header of a web page, although this means less work than including style information in the HTML code itself it still means a large amount of code all in one place, this led to the use of external style sheets that save the styles of HTML elements in a separate file.

CSS determines the styling of HTML elements through the use of rules. These rules are made up of two parts, the selector and the declaration. The selector corresponds to the HTML element you want to style and the declaration consists of pairs of properties and their corresponding value. Here’s an example:

p {font-family: “Palatino Linotype”;                                                                                                    font-size:18px;                                                                                                                                                }

Here the selector is “p” meaning that this CSS rule will be applied to all text within <p> tags in the HTML. The second part of the rule contains two style pairs the first specifies the font in this case “Palatino Linotype” the second the font size in pixels, here it’s 18. Note that the  break between the declaration pairs is marked by a semi colon, while the end of each pair is marked with a colon. The entire rule is contained within curly brackets.

This all well and good applying the same rule to all instances of HTML elements but often you will need to apply CSS rules to separate groups or individual instances of an element. For this we use class and id selectors. In the HTML class and id take the form of attributes contained within the opening tags of an element.

<h1 id=”mainheader”>I am a main header</h1>

<p class=”paragraph1″>I am some paragraph text </p>

Although they are used the same way the id attribute is used to describe a single, unique element while the class attribute can be applied to many elements so that they are all formatted the same way. In the CSS sheet declarations of a CSS rule are applied to id elements by using a # and the id name given to the element as follows:

#mainheader {font-family: Arial;                                                                                                        font-size 20px;                                                                                                                                                 }

Elements defined as a class have their rules set out in CSS following a full stop. As in the following:

.paragraph1 {font-family: molot;                                                                                                      color: #00FE24;                                                                                                                                      }

Using combinations of class and id especially in conjunction with div tags to group content styling and position information can be applied to all the various HTML elements that make up a page. Changes can then be made to the style sheet to amend and develop the page without having to go into the code and change the HTML line by line.

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