header 2000

2 HTML Attributes

In our first chapter, we introduced simple HTML tags like headers and paragraphs. In this chapter, we will describe more complex HTML tags that have one or more attributes attached to them that provide additional information about the HTML element. This chapter is divided into the following four sections:

2.1 How to Add Links to your Web Pages

2.2 How to Add Images to your Web Pages

2.3 Using the Style Attribute to Customize Your Text

2.4 Inline Tags versus Block Elements

In Section 2.1, we describe one of the earliest complex HTML tags, the Hyperlink or anchor tag which uses the Href Attribute.

In Section 2.2, we review the image html tag and the various attributes that are commonly attached to the image tag.

In Section 2.3, we cover the style attribute which is commonly used to modify heading and paragraph tags.

Section 2.4 explains the differences between inline tags and block elements.

Here is the typical way that attributes are added to HTML elements.

2.0.1

What makes the modern internet so powerful is that viewers can rapidly conduct research by clicking on links to move from one web page to another. In fact, the internet can be thought of as a vast library of hyperlinked documents where links provide the crucial bridges to travel between web pages. Even search engines are nothing more than a series of related links. One common useage of links within a website is to build a navigational menu of links showing the relationship and order between various pages of a website. Even the idea of the World Wide Web was for links to be the Spiders Web that held the Internet together. It is therefore important to take the time to learn how hyperlinks work and then make the effort to add both internal and external links to your web pages.

2.1.01

Once again, we will use the Bluefish Web Editor to help us learn the syntax for anchors and links. Open Bluefish and create a new HTML document with the Quickstart button. For the title, call it How to Add Links to a Web Page. Here is the beginning of our HTML document.

2.1.02

Save the document to your website HTML folder as myfirstlinks.html.

Next, put your cursor right after the closing paragraph tag. Then press Enter on your keyboard to create a new blank line. Type into this line “This is my first link!”

Then select this line and click on the paragraph tag. Finally, select the word link and then click on the Standard Tab, then click on the black Anchor icon to bring up the Quick Anchor Wizard.

Originally, there were no images on web pages. Just a mountain of text. Then in July 1992, Tim Bernes Lee placed the first image on the internet. It was a band made up of CERN staff members. Here is a copy of that now famous image:

2.2.01

Images are in some ways even more important than links for your website. This is because many people (more than half of your viewers) are visual learners. They learn more from images than from reading text. Your viewers will learn more and be more likely to recommend your website to others if you make an effort to include several images on every web page. Most of the web pages on my educational websites have an average of ten or more images per page.

Some courses mistakenly discourage the use of lots of images. They argue that placing many images on your web page will slow down the loading speed. This is true if you fail to compress or reduce the file size of your images before adding them to your website. However, as long as you keep the file size of each image under 100KB, you should be able to have 10 or more images on a page and still have it load in under one second – assuming your viewers have a reasonable high speed internet connection.

Steps to Add an Image to Your Home Page

Before we add an image to our home page, we first need to optimize or reduce the file size of the image and then place the image in our images folder. Copy the image to a Writer document. Then right click on the image and click Compress. Then click OK. Then right click again on the image and click Save. Then navigate to your website root folder and open your images folder. Name the image my_first_image and click save. The image by default will be saved as a JPG file.

At the end of the last section, we used the style attribute to center an image. In this section, we will use the style attribute to customize our headings and paragraphs. It is important to note that most courses on HTML and CSS will tell you to NOT use the style attribute to customize the appearance of your text. Instead, they will tell you that you should ALWAYS use a CSS Style sheet. People who say this spend too much time in Ivory Towers instead of building real websites. While this advice to use CSS is generally true in theory, in real web design we have an important saying:

An Important Saying

In theory, theory and reality are the same…

But in reality, theory and reality are often quite different!

Using the style attribute to define the appearance of a particular element, such as a particular heading or a particular paragraph, can be useful when you want an element to appear differently from the other headings and paragraphs around it. You can even use the <span> element combined with the style attribute to make any section of a paragraph or sentence appear different from the rest of the paragraph or sentence. The reason this is possible is that the Style Attribute has priority over whatever appearance settings are placed in a CSS style sheet. Style attributes will also over-ride the default style settings in your web browser. Thus, style settings give you full control over the appearance of the content on your website – even if for some reason you are working on a web page that has a dozen different style sheets applied to it and you do not have access to any of these style sheets.

The problem with trying to use CSS style sheets is that, with many style sheets, it may not be clear which style sheet is used to modify a specific part of your web page. It is also possible that changes made in one style sheet can inappropriately over-ride other style sheets, adversely affecting the appearance of other sections of your website.

So read on and learn several ways to directly format your web page text in the effect of this all too common emergency.

In the last section, we reviewed how to use the style attribute to format text. But there is an even easier way to do limited formatting of text using good old fashioned html inline formatting tags. This way is definitely not recommended by the Web Gods. They hate this method because it does not result in “clean” code. So do not tell anyone I told you about this. But 20 years ago, this was how formatting was done. It is still legal. But just barely. This is why we are using HTML 4 Transitional pages instead of the more correct HTML 5 pages.

Open the Bluefish Editor and start a new page with the Quick Start icon. For Title, call it My First Inline Tags Formatted Page. Add the heading and starting paragraph sentence. Then save the file in your files folder as my_first_inline_tags_formatted_page.html.

Then enter a new line and type a couple of sentences. Put the entire paragraph in paragraph tags. Save the document and view in the browser:

2.4.01

Now select the words “whenever possible” and in the Standard tab, click on the Bold button (with the big A). Select another sentence and click on the slanted A icon. Select a portion of a sentence and in the top menu, click Tags, Format by Layout, Underscore. Here is the HTML code showing that we have inserted a bunch of opening and closing tags:

2.4.02

Click File Save and view the page in a web browser.

2.4.03

The page does not look that bad. But right click on the page and View Source to see this mess: