HTML elements And Bringing in the style for Html5 Flash developer || Part-5

Admin

Nov 2, 2014

HTML elements

Every version of the HTML specification has a specific list of tags available to developers while creating HTML documents. The current list of elements within the HTML5 specification as defined by the W3C can be found within their language reference documentation (http://www.w3.org/TR/html-markup/elements.html).

Within the HTML5 specification are some very interesting new elements available to developers with regards to media integration into web pages. For example, Flash requirements for media playback can now be avoided when embedding audio or video into a web page with the addition of the audio and video tags.

Bringing in the style

Cascading Style Sheets or CSS is the primary method used for styling HTML elements. Like HTML, there is a set list of styles in CSS that you can apply to elements in an HTML documents. To get an idea of what CSS attributes are available to you, head over to http://www.w3schools.com/cssref/ for the entire list. CSS can be applied to HTML elements in a number of different ways. Traditionally, CSS syntax is stored within an external .css file and referenced from within the head element in an HTML document. However, CSS can be appended to elements within the HTML document directly by adding a style parameter to almost any element within the body tag:

<imgsrc="my_image.jpg" style="border:5px solid #000000;">

The previous example uses the style parameter within an image element to apply a 5-pixel thick black border around the image referenced in the src parameter.

What if you had five images or even 100 images in your page that needed the same styles applied to each element? Applying the exact same style parameter to each image tag is not only time consuming but will result in code that is oversized and possibly extremely hard to maintain or update. CSS can target a single element or a group of elements by using a class or id HTML parameter:

<div id="photo-gallery">
<imgsrc="photo1.jpg" class="photo">
<imgsrc="photo2.jpg" class="photo">
<imgsrc="photo3.jpg" class="photo">
<imgsrc="photo4.jpg" class="photo">
<imgsrc="photo5.jpg" class="photo">
</div>

In the previous example, we attempted to display a group of different images within an HTML document. Each image, referenced with an img element tag, also has a class parameter appended to it with the photo value. The class HTML parameter can be used and re-used on almost any element available and allow you to reference a group of elements rather than modifying each element directly. All of the images are also encased in a div element. div elements are used as containers to display content in. In this case, the div element has an id parameter set to photo-gallery. The id HTML parameter is very similar to class with the exemption of being able to re-use the same value of id within the same HTML document.

With all this in mind, writing CSS to style this photo gallery could be done as follows:

<!DOCTYPE html>
<html>
<head>
<title>My Photo Gallery</title>

<style type="text/css">
body {
background-color:#000000;
}
#photo-gallery {
width:100%;
}
#photo-gallery .photo {
width:200px;
border:4px solid #ffffff;
}
</style>
</head>
<body>
<div id="photo-gallery">
<imgsrc="photo1.jpg" class="photo">
<imgsrc="photo2.jpg" class="photo">
<imgsrc="photo3.jpg" class="photo">
<imgsrc="photo4.jpg" class="photo">
<imgsrc="photo5.jpg" class="photo">
</div>
</body>
</html>

Instead of applying style parameter to each and every element in the document, we can now use the style tag within the head element to place our raw CSS code. In the previous example, HTML elements are selected in three different ways. To start, the body of the document had the background color set to black by using its hexadecimal value. We select the body tag element by simply using the tag reference. This method of selecting raw elements can be used on a wide variety of elements within your document but will affect all elements with that reference. The next method of selection is by looking for elements with a specific ID. To designate the use of an ID, # is placed in front of the ID value. Therefore, #photo-gallery will be selecting the div element with the id parameter set to photo-gallery. We set the width parameter of the gallery container to 100%, which is calculated from the browser width when viewing the HTML document. Finally, to style each one of the images in the gallery, we style the class which was applied to each one of the image tags in the body of the HTML document. Since the class HTML parameter can be applied to an unlimited number of elements in an HTML document, we can specifically target the classes within another element by chaining the CSS element selection together. Classes are selected in CSS by appending . to the start of the class name. Therefore, #photo-gallery .photo will select only the elements with the photo class name inside the element with id of photo-gallery: