HTML 4_01 Weekend Crash Course - G. Perry
.pdf
Session 2—HTML for Web Page Creation |
27 |
Listing 2-1
HTML code with text
<html>
<head>
<title>My First HTML Poem</title> </head>
<body>
<h1 align=”center”>An HTML Poem</h1> <hr>
<p align=”center”>Roses are <font color=”#FF0000”>red </font>,<br>
The Web is sure <font size=”4”>growing</font>.<br> You can use <u> HTML,</u><br>
To keep your page <i>flowing</i>.</p>
</body>
</html>
Session |
Friday—I Part |
2 |
Evening |
Figure 2-4
A more complete formatted Web page with text and a graphic image.
28 |
Friday Evening |
Some HTML tags, such as <h1> and <hr>, appear in Listing 2-1, and you haven’t mastered them yet. You will learn all about Listing 2-1’s HTML tags and many more as you progress through this weekend course. Most are extremely simple; for example, <hr> tells the browser to draw a horizontal line across the browser window.
Note
The only potential problem you may have in understanding Listing 2-1 is the strange value in the following tag: <font color=”#FF0000”>. The value #FF0000 is an internal representation for the color red. As you’ll learn in Saturday morning’s sessions, you can represent specific color values numerically.
The Browser Determines the Language
Whereas programmers use HTML to format text, as shown in the previous example, the <title> tag demonstrates that HTML is not simply used for that purpose. The <title> tag does not format text or even the Web page; instead, it determines the title that appears in the browser window’s title bar.
The browser used by your Web page’s user determines exactly the way that your page appears. Many browsers do not support the same HTML code that others support. Although newer browsers often provide support for the latest HTML command tags, the HTML language is evolving, as you learned in the previous session. One of the ways that a new command tag is added is by a browser company. For example, when Internet Explorer arrived on the scene, Microsoft enabled that browser to read HTML instructions that had never been written before because no browser was designed to support these new commands.
Unlike other kinds of programming languages, such as C++, no central committee determines the next command tag to add to the next version of HTML. Although a Web consortium does exist to maintain HTML standards, most new command tags come from Microsoft and Netscape, the developers of the two most widely used browsers on the market today.
The World Wide Web Consortium, found at http://www.w3.org/, contains the latest information related to new and upcoming additions you can expect to see in HTML. These additions often
Cross-Ref
appear because of a browser company adding command tags to its browser’s feature set.
The result of the above facts is that the appearance of your Web page can vary when viewed on different computers. Throughout this weekend course, design issues become extremely important when using HTML, and an understanding of how different browsers support different levels of HTML also becomes critical. I pay
Session 2—HTML for Web Page Creation |
29 |
particular attention in the next session to maintaining proper design issues that enable you to create Web pages that look good on any browser that you may use to display your page. You will not have to write to the lowest-common dominating HTML code to produce extremely fresh and attention-grabbing Web pages.
|
Most of the figures in this book are shot using Internet Explorer |
|
because that’s my primary Internet browser, but when major |
Note |
HTML differences exist between browsers, you’ll be the first to |
know as you progress through the weekend. |
REVIEW
Command tags often appear in pairs, such as <html> and </html>.
All HTML code requires the minimum command tags <html> and </html>.
Command tags can be uppercase or lowercase, but a move is under way to standardize with lowercase.
Use a <title> and </title> command tag pair to specify a title in your Web page’s browser window.
Specify exactly where you want your Web page’s lines to begin and end; the browser will not break lines automatically.
Many HTML codes format your Web pages to look good.
New HTML commands often come about when a new browser supports them.
QUIZ YOURSELF
1.What are the two filename extensions all HTML files must use? (See “Minimum HTML.”)
2.Which pair of command tags must enclose all Web pages? (See “Minimum HTML.”)
3.Which command tags enclose your Web page’s header section? (See “Adding Formatting Command Tags.”)
4.Which command tags enclose your Web page’s body? (See “Adding Formatting Command Tags.”)
5.Why does the <br> tag not need a matching end tag? (See “Break Tags.”)
6.What is one of the ways that a new HTML command tag gets created? (See “The Browser Determines the Language.”)
Session |
Friday—I Part |
2 |
Evening |
S E S S I O N
3 
Web Page Design
Session Checklist
Learn how your users’ environments may differ
Create Web sites with all users in mind
Utilize HTML validating programs to optimize your Web site
Answer initial design questions
Publish your Web site
Learn about the available free hosting services
In this session, Web page design takes precedence over HTML code because your HTML code will suffer if you do not design your site properly. This book’s goal is to teach you HTML in a weekend, and to do that, not a lot of time can
be spent on design. Other texts exist that do a superior job of teaching Web page design. Nevertheless, you must understand early how your site is viewed by different users on different kinds of computers, and you must understand some of the trade-offs associated with proper Web site design. At the end of this session, you will learn the procedures required to publish your Web site on the World Wide Web and the available Web sites that provide free hosting services.
32 |
Friday Evening |
Considering Your Environment
As you learned in the previous session, your Web page looks different on different computers. You must understand the technical design issues that await you as an HTML programmer. Even among the same kinds of computers, different users have varying screen sizes. To make things even worse, if that’s possible, users with the same computers and the very same monitors might set their monitors to different resolutions! Figure 3-1, for example, shows a Web page displayed at 800 × 600 pixels of resolution. Figure 3-2 shows the same Web page displayed at 640 × 480. Notice how much less of the Web page the lower resolution displays.
Figure 3-1
At 800× 600, the Web page looks complete.
Note
Actually, the resolutions 800 × 600 and 640 × 480 are misleading because the user’s browsers consume much of the screen because of the menu, toolbars, and status bar. A more realistic design area, if you want to hit virtually every Web user in the world, is only 580 × 315 on a Mac and 635 × 314 on a PC.
Session 3—Web Page Design |
33 |
Figure 3-2
At 640 × 480, the Web page is missing some content.
What’s an HTML programmer to do?
The problem of your varying Web audience is not insurmountable. Nevertheless, you must keep the majority of your users in mind when you design a page. Given that you’ve stepped up to the challenge of becoming an HTML programmer, you may have a more powerful computer than many of your Web page’s users. In addition, your computer may be faster. For example, if you have a DSL connection, you get spoiled and perhaps forget about those golden days of 28.8 modem access. Many people live in areas without the benefit of DSL, this author being one of them. Therefore, you must consider not only the resolution of your target audience, but also the speed at which the Web pages you create will load.
|
Never overestimate the patience of your Web audience. The |
|
longer your Web page takes to load, with high-resolution graph- |
Never |
ics and active content, the less likely someone is to wait for the |
loading to finish. Instead of waiting, they will go to another site. |
Web sites are not single pages; they are multi-paged. Once your users click downward into your site, you can more freely offer Web pages that require scrolling. Once you grab the user, subsequent pages might contain higher-resolution images and more text. At some point, your users will be willing to wait or scroll because they have delved into your Web site to find content. The first page, called the home page,
Session |
Friday—I Part |
3 |
Evening |
34 |
Friday Evening |
is where you should most consciously consider the general-purpose Web user’s screen size and page-loading time.
As you design your HTML pages, keep thinking top-to-bottom and left-to-right. The typical Web user’s eyes follow this pattern.
Design primarily for the upper-left hand portion of the screen, and Tip place the important material there because the upper-left is the
area seen first and by all users of your page. Loading time and resolution determine how much of the rest of your page the user sees without having to scroll. The more scrolling a user has to do to see your page, the less likely that user is to stay on your page.
A world without images
In addition to keeping your audience’s resolution and page-loading speed in mind, you must also consider that some of your audience views pages with graphics turned completely off. Figure 3-3 shows a screen that should contain several graphic images, but graphic placeholders are in their place. Web browsers offer the option to turn off the display of images (unless the user clicks on an image to trigger that image’s download and display), and the slower the connection, the more likely a user is to turn off images so the pages load quickly. As you design your Web page, keep in mind that you should display text around images to label clearly the image’s purpose so text-only users will understand what your page contains.
A constant trade-off exists between speed, resolution, and content, and you’ll make trade-offs as you design every single element of your Web page. For example, you may design a super graphic image that you want placed in the background
of your HTML page. Before placing that image, however, you’ll have to adjust the image’s resolution to be as low as possible, while still maintaining as much of the image’s quality as you can. The trade-off can be painful, because greatlooking images at high resolution do not always translate well to a lower resolution. If you don’t mind losing some of your audience, you may choose to display
images at the higher resolution. The important thing is not setting the resolution but being aware of the trade-offs and that some users will give up on your page before the page has had a chance to load completely.
Note
More and more Web sites now make available several versions of the same site. On the site’s home page, hyperlinks may be available that take viewers to a text-only page or a higher-resolution, graphics-oriented page for users with faster connections.
Session 3—Web Page Design |
35 |
Figure 3-3
Graphic placeholders on the Web page indicate that the display of Web page images is turned off.
Validating Your Page
All Web designers feel the trade-offs discussed in the previous session. Fortunately, tools exist that help you hone your HTML code so that your site produces the maximum benefit given the aforementioned constraints. Your site will load quickly because you’ve taken the time to make your site technically efficient. One of the many such tools available is called an HTML Validator (see http://www.html validator.com/), a product you can purchase that offers suggestions on improving your site’s efficiency. AI Internet Solutions provides the HTML Validator on their HTML Validator Web site that provides the best-known site advice products in the industry. Many Web designing programs, such as Dreamweaver, currently offer similar advice for your Web page.
The current versions of programs you might use to accent your HTML creation, such as the Adobe PhotoShop and Microsoft PhotoDraw graphics programs, offer
Session |
Friday—I Part |
3 |
Evening |
36 |
Friday Evening |
advice for creating images that work well for the majority of users who may see your site.
Once you finish designing your Web page, the validating routines found in these programs perform actions such as:
Checking your HTML code and informing you which browsers will have trouble displaying the code
Informing you which graphic images will take too long to load
Determining which colors on your Web site are nonstandard
Locating mismatched start and end command tags
Advising you on alternative fonts that might display more effectively
As you progress through the rest of this weekend course, you’ll learn how to design around many common problems in HTML coding. (For example, Saturday’s morning sessions will discuss which colors are considered Web safe, that is, displayable on the majority of the browsers.) As you write more and more HTML code, you’ll begin to spot trouble areas on your own and work around them, but you’ll still find that these HTML validating programs are extremely useful for catching small problems you might miss. Although you may use a simple text editor to create the bulk of your Web page, an HTML validation program such as HTML Validator helps maximize your design to the largest possible audience.
Initial Design Considerations
Before setting out to create your Web page, consider the following:
Who is your audience?
What is your message?
Surely, these design questions are so obvious they can go without being asked, right? Actually, not only do they need to be asked, they also need to be asked before, during, and after a Web site is developed.
Consider the technical design issues discussed in the previous sections. Suppose you are designing a Web page that provides support for iMac users. You would not want to limit yourself by making your Web page efficient for both Mac and PC users. The colors available to the Mac user typically are more numerous than the colors available to the PC user. You would be freer to use these additional colors since your site is geared specifically to the Mac.