HTML Tutorial 4
Prepared by: Anthony Larrain
Attributes
- Start tags can contain additional codes, called attributes.
- Attributes are used to supply additional information to the tag.
Example 1
Browser Display
Biography
- Clearly the purpose of this attribute is to position the text.
- In the above example the text was placed in the center.
- Each attribute (align) has a value (center) separated by an equals symbol.
- The value should be enclosed in quotes.
Example 2
In this example we will use attributes to change the background color and center some text elements. The code that follows will produce this page attributes.html
Example 2 Explained
- There must be at least one space between the HTML command (
h1) and the attribute (align). - Attributes should be written in lowercase
- It is conventional to have no spaces between the attribute and the value ("center").
- Later we will talk about CSS colors. Here is a list of CSS colornames
Design Tips
- Don't get in the habit of centering everything. Use center alignment sparingly. Left alignment is better.
- Use CSS to center text
- Use CSS to change background colors.
The Anchor Tag
- The anchor tag is denoted by
a. - The anchor tag allows your webpage to link to another web page, that is create hyperlinks.
- There are several attributes you can use with the anchor tag.
- The attribute that is necessary to link is the
hrefattribute. - The anchor tag can be used to link to any resource on the web, an HTML page, an image file, a sound file, a movie file etc..
Example 1
The code to link to the website with URL www.w3schools.com is
Browser Display
A nice HTML tutorial, W3schools
Example 1 Explained
- Tags can be nested.
- The
<a href="...">tag is placed within the<p>tag. - Since the anchor tag is inside the paragraph tag, you must close the anchor tag first.
- The value to the
hrefattribute is the URL of the website you want to link to. - The default style for the text between the opening and closing tag is to underline and color the text blue.
- The text between the opening and closing tag is often called the Hot Spot.
- When the link is clicked the default style is to change the color of the text (hot spot) to violet.
- The forward slash following the URL is needed when you are not requesting a specific file. That is when your URL is a domain name or ends with the name of a directory within a domain name.
Example 2
In this example we will write a page that links to three other pages. The code that follows will produce this page. hyperlink.html
Notice the links form a list.
Example 2 Explained
- The above page creates a list of links as such they should be placed within the ul tag.
- Each link is placed within an li tag
- The first link is the name of a domain name, therefore ends with a forward slash.
- The second link is the name of a sub directory within a domain name, therefore ends with a forward slash.
- The third link is the name of a specific HTML file, therefore does not end with a forward slash.
Design Tips
- Use meaningful text for the hot spot.
- Avoid things like Click Here OR Cool Photo
