HTML elements have begin and end tags, and values in between, but they also can have attributes that allow you to specify details about the element. The general form is: <begin_tag attribute= something>value<end_tag>
As a first example, consider a paragraph element. Here's one without an attribute:<p> Here is some text </p> What is the begin tag of this element? The end tag? The value? We can add detail to the element by setting attributes. For a paragraph, we might specify a background color: <p style="background-color:#00FF00">this is the text of the paragraph </p> The bold part of the code is the attribute on the paragraph element. As another example, consider the image tag (img). Image tags always have a src attribute which specifies the image file or URL that should be rendered, e.g.
<img src=http://photos-e.ak.fbcdn.net/photos-ak-snc1/v1475/53/69/835530712/n835530712_5116684_3303.jpg</img> Here, the attribute is the src attribute in bold. Note that in the sample, the src is an absolute URL. So when the web page we are creating is rendered, the browser will go get the image from the network and display it in the page. You can also link to an image that lives on the server. The page will load faster this way. Here's an example: <img src=images/pic.jpg></img> Here, the file pic.jpg must live within the subdirectory images, one directory below the HTML page containing the image link. We call such references 'relative' references, as the file specified is located relative to the current page. As a third example, let's consider the link element and its href and title attributes: <a href=http://cs.usfca.edu/~wolber title="Wolber is a professor at USF">David Wolber</a> Here there are two attributes specified, href and title. How do you think this HTML element will appear and behave? What do you think the title does? Note that the value of the anchor tag above is the text 'David Wolber'. When the user clicks on that text, she is sent to the web site specified in the href. You can also make the value an image so that you can click on a picture and have it take the user somewhere. To do this, just replace the text value with the entire image tag: <a href=http://cs.usfca.edu/~wolber title="Wolber is a professor at USF"> <img src=http://photos-e.ak.fbcdn.net/photos-ak-snc1/v1475/53/69/835530712/n835530712_5116684_3303.jpg </img></a> With the Google Sites WYSIWYG editor, it is difficult to create an image that is linkable. But you can do it by directly modifying the HTML code. You can access that code by clicking on the HTML button at the top of a Google Sites page being edited. WOW, THIS IS HARD. HOW CAN YOU REMEMBER THE CODES LIKE THE BACKGROUND-COLOR attribute? Well, some people know it by heart, but most people have to look specific codes up. And web page creation is often done with a hybrid approach-- using a WYSIWYG editor and some direct HTML. Want to learn more HTML? Here's a tutorial:http://www.w3schools.com/html/ |
|
|
HTML Element Attributes |