iBotPeaches Posted May 19, 2008 Report Posted May 19, 2008 Lesson 7: AttributesYou can add attributes to a number of elements.What is an attribute? As you probably remember, elements give structure to a HTML document and tells the browser how you want your website to be presented (for example, informs the browser to make a line break). In some elements you can add more information. Such additional information is called an attribute. Example 1: <h2 style="background-color:#ff0000;">My friendship with HTML</h2> Attributes are always written within a start tag and are followed by an equals sign and the attribute details written between inverted commas. The semicolon after the attribute is for separating different style commands. We will get back to that later.What is the catch? There are many different attributes. The first one you will learn is style. With the style attribute you can add layout to your website. For instance a background colour:Example 2: <html> <head> </head> <body style="background-color:#ff0000;"> </body> </html> will show a completely red page in the browser - go ahead and see for yourself. We will explain in greater detail how the colour system works in a few moments. Note that some tags and attributes use US spelling i.e. color instead of colour. It is important that you are careful to use the same spelling as we use in the examples in this tutorial - otherwise, browsers will not be able to understand your codes. Also, don't forget to always close the inverted commas after an attribute.How did the page become red? In the above example, we asked for the background colour with the code "#ff0000". This is the colour code for red using so called hexadecimal numbers (HEX). Each colour has its own hexadecimal number. Here are some examples:White: #ffffffBlack: #000000 (zeros)Red: #ff0000Blue: #0000ffGreen: #00ff00Yellow: #ffff00 A hexadecimal colour code consists of # and six digits or letters. There are more than 1000 HEX codes and it is not easy to figure out which HEX code is tied to a specific colour. To make it easier we have made a chart of the 216 most commonly used colours: 216 Web Safe Colour Chart. You can also use the English name for the most common colours (white, black, red, blue, green and yellow). Example 3: <body style="background-color: red;"> Enough about colours. Let's get back to the attributes.Which elements can use attributes? Different attributes can be applied to most elements. You will often use attributes in tags such as the body tag while you will rarely use attributes in, for example, a br tag since a line break normally is a line break without any parameters to adjust. Just as there are many different elements, so there are many different attributes. Some attributes are tailor made for one particular element while others can be used for many different element. And vice versa: some elements can only contain one kind of attribute while others can contain many. It may sound a bit confusing but once you get acquainted with the different attributes it is actually very logical and you will soon see how easy they are to use and how many possibilities they provide. This tutorial will introduce you to the most important attributes.Exactly what parts does an element consist of? Generally an elements consist of a start tag with or without one or more attributes, some content and an end tag. Simple as that. See the illustration below.
Snowmon333♥ Posted May 19, 2008 Report Posted May 19, 2008 YES it's finally out, i'm gonna do php once i'm out of school
Snowmon333♥ Posted May 27, 2008 Report Posted May 27, 2008 I'm only double posting so that peach or someone else will answer this Example 1: <h2 style="background-color:#ff0000;">My friendship with HTML</h2> why do you need ;" after the hex code, also are attributes how you can add a background, and i don't mean just one color i mean like a picture
iBotPeaches Posted May 29, 2008 Author Report Posted May 29, 2008 For a picture in the HTML just use the BG equals IMG_SRC and enter that url.
Snowmon333♥ Posted May 29, 2008 Report Posted May 29, 2008 what would the code look like ? and would it be the url from like photobucket url
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now