HTML for BeginnersRequired HTML Tags By Fred Dekker and Donald St. John (Updated 6/27/00) Now that weve covered the rules of HTML , were ready to start coding. To illustrate just what HTML code does, were going to build a simple page for the fictitious company E-Z Accounting. Click See it in action to keep track of the E-Z Accounting sites progress. There are certain tags you need to put in every HTML document to set it up as a Web page. Begin by opening a new document in your text editor. is the first tag to appear on every Web page. Add the opening and closing tags to your page like this: All of the pages code will be placed between these two tags, which tell a Web browser its reading an HTML document. Below the opening tag, enter the tag, which contains information about the document but doesnt appear on the Web page. Your document should now look like this: There are several tags that can go between tags--for example, youll regularly come across tags that help search engines categorize pages--but the only tag thats required is the tag, which puts text in the browsers title bar. Your document should now resemble the example below (remember: First on, last off): E-Z Accounting Now youre ready to add opening and closing tags. Your document should now look like this: E-Z Accounting Everything that appears inside the Web page will go between the tags. See it in action Our page doesnt look like much so far, does it? All you see is the name E-Z Accounting in the browsers title bar above a blank page. Dont worry; were just getting started. Save your file in text format with the filename index.html (or index.htm if youre still using Windows 3.1), and well start to make things more interesting. HTML for BeginnersSetting Background and Text Color By Fred Dekker and Donald St. John (Updated 6/27/00) The tag uses several important attributes to control the look of your page. Use the BGCOLOR attribute and value to change your pages background color. Version 3.x and later browsers can read some colors from a list of standard English words < utopia.knoware.nl/users/schluter/doc/tags/colornames.html>, such as white, blue, black, and the like. But to take advantage of all Web-safe colors, youll need to use hexadecimal color codes. VisiBones Webmasters Color Lab displays safe colors with their hex codes, allowing you to view colors in different combinations and side by side. By selecting several colors at once, you can quickly create an entire color scheme for your site. Keep in mind that most browsers can display colors from a palette of only 256 different hues and shades. If you use a color thats not in the palette, the browser will try to choose a similar one. If you want to guarantee that your colors will appear as close to your original choices as possible, select colors from Netscapes 216 browser-safe colors (a simplified subset of the Macs and PCs 256-color palettes. For our sample page, lets keep things simple and use a plain white background. The hexadecimal code for white is #FFFFFF, so well add an attribute to the existing tag so that it reads: See it in action Background Images You can also use an image as your background. Any image you choose will tile into the background--that is, it will go into the background without changing size and then reproduce itself over and over to fill the page. Never use a background that makes text difficult to read. To tile an image, add the BACKGROUND attribute to the BODY tag (bgimage.gif is a sample background image): See it in action In the end, the E-Z Accounting team decided to stick with a simple white background to keep the design uncluttered, make the text easy to read, and ensure that the links stand out. Text Colors You can apply hex or name values to attributes of the tag to designate the color of your pages regular text and linked text. The TEXT attribute sets the color of the regular text. The LINK attribute controls the color of linked text. VLINK designates the color of a followed link; its helpful when youre presenting a list of links because it lets your users distinguish the pages theyve already visited. Finally, ALINK designates the color that links become when clicked. ALINK is usually the same value as VLINK. For our page, were going to have black (#000000) text and bright blue links (#33FFFF) that turn dark purple (#330066) when clicked and followed: Youll see just how this color scheme looks in the next two lessons, when we add text and links. Adding Text By Fred Dekker and Donald St. John (Updated 6/27/00) Its time to say something on our page. Youve already set the basic colors of your text using the attributes of the tag, but now you can start adding the words that will appear in your page. Well start with a headline. Lets say the companys motto is, E-Z Accounting: Tax Services That Arent Too Taxing. Go ahead and add it to the page beneath the tag: E-Z Accounting: Tax Services That Arent Too Taxing See it in action Kind of dull, eh? Its just plain text with nothing to call attention to it. You could use specific tags to make it bold or italic and bump the size up, but what you really want are header tags, which do all that for you. Header tags range from to , with the largest and the smallest. Lets see what adding header tags does. Delete the colon in your headline and surround the text with and tags, like this: E-Z Accounting Tax Services That Arent Too Taxing See it in action Thats better. Notice that the headers automatically break the line for you. Notice, too, that each line is automatically aligned to the left. Wouldnt these lines look better centered? Add the tag: E-Z Accounting Tax Services That Arent Too Taxing See it in action Now were getting somewhere. Lets tell the viewer more. Under the tag, lets type in: Are you a freelance Web designer looking for a good accountant--one whos up on all the latest changes in the tax laws? Try E-Z Accounting. Youll get top-notch service from an honest accountant whos inexpensive, knowledgeable, and--best of all--knows the Internet and the type of work you do. Ready to save some money? Let E-Z Accounting tell you more about our services, fees, and background. See it in action Save and view the file in your browser. (Selecting File/Open or File/Open Page in most browsers will prompt you to enter the location of your saved file.) Depending on your browser, youll notice one of two things: either the text continues beyond the right side of the page and off into cyberspace, or it fills the entire width of the page no matter how wide or narrow you make the browser window. (The former happened more frequently in older browsers; with modern browsers the text will most likely just wrap.) Even if you type hard line returns when you enter the text, HTML doesnt recognize them. (Note that in our example, the two paragraphs have merged into one.) If you want to take back control of your text, you need a couple more tags: and . forces a line break without adding any white space after the tag. This tag is a good choice for creating line breaks inside paragraphs. Keep in mind, though, that manually broken lines often look awkward when a viewers browser window is sized narrower than usual: the text runs across the screen, wraps to the next line, and then breaks again a few words later. For that reason, stick to using only when you need to force a line break for reasons of design or content. The tag breaks the text and inserts a blank line, which is useful for separating paragraphs from each other. By default, both the and the tags start the text following the tag on the left side of the page, but the tags ALIGN attribute can change that. Use to align the paragraph with the right side of the page or to center the paragraph. Since we want our example to break into two separate paragraphs, insert a tag before each text paragraph, like this: Are you a freelance Web designer looking for a good accountant--one whos up on all the latest changes in the tax laws? Try E-Z Accounting. Youll get top-notch service from an honest accountant whos inexpensive and knowledgeable, and--best of all--knows the Internet and the type of work you do. Ready to save some money? Let E-Z Accounting tell you more about our services, fees, and background. See it in action Not bad, but your text is still pretty plain. You can make some points jump out by using the (italic) and (bold) tags. You can also nest these tags to create bold italicized text (remember: First on, last off). You can use the tag to preformat text and the tag to use teletype or monospaced text. You can see examples of those tags in our Formatting Flavor < /Authoring/StupidThree/ss02.html?tag=st.bl.f062700.txt.StupidThree_02> tricks. Apply these tags judiciously, of course. Too much emphatic text makes a page look annoyingly busy. Adding Links By Fred Dekker and Donald St. John (Updated 6/27/00) Now youre ready to learn about the anchor tag, which allows the Web to be the astounding collection of linked information that it is. Youll use the anchor tag and its attributes to connect text on your Web page to other Web pages, email addresses, and online addresses. Without the anchor tag, the Web wouldnt exist. Lets put this powerful tool to work by making a few links in the line Let E-Z Accounting tell you more about our services, fees, and background. Well assume that the information about the companys services, fees, and background will go on separate pages, called respectively services.html, fees.html, and backgrnd.html. Whenever someone clicks one of those words, you want to send him or her to the appropriate page. Lets add anchor tags to the second paragraph, like this: Ready to save yourself some money? Let E-Z Accounting tell you more about our services, fees, and background. What does this do? The tag tells the browser that youre creating a link. The HREF attribute stands for Hypertext Reference--the technical name for a link. Whatever follows HREF= in quotes is the actual name or URL of the item to which you want to link. In this case, were assuming that youre linking to pages that reside in the same Web server directory as your original index.html page. If you have multiple directories, you would just name the appropriate directory before the file name. For example, if the services.html page lived in a directory called main, you would link to it like this: . Now when users look at this page, theyll see the words services, fees, and background as hyperlinks. Hyperlinked text will appear underlined and in a different color than standard text. Remember that you designated the color of your links in the tag earlier. (Of course, wed actually have to create those pages for these links to work. In our example, clicking a link will just bring you back to the same window.) See it in action The anchor tag can do more than just link Web pages to other pages on the same site. It can also link to pages at other Web sites. For instance, we could link to the IRS home page like this: ...in the tax laws... The anchor tag doesnt have to send visitors away from your starting page. Using the NAME attribute, you can simply jump users to another location on the same page. This technique can be particularly useful on exceptionally long pages. Suppose that the page explaining E-Z Accountings fees has sections for both businesses and individuals. You want to create a link that takes individuals directly to their information below the business fee information. The NAME attribute labels the destination of the link with an anchor name. In this example, well name it individuals. Go to the destination text and surround it with the tags and . Then go to the text you want to link from and surround that text with the link tags and . Now when someone clicks the link, he or she will be taken to the target text further down the page. Creating HTML Lists By Fred Dekker and Donald St. John (Updated 6/27/00) Sometimes a list is the best way to organize a lot of information. For instance, you could use a list of links as a table of contents for a particularly long FAQ file. HTML contains a variety of list-making tags to help you get started. The simplest and most common is an unordered or bulleted list, denoted by a tag. This type of list places bullets before each list item, which you designate with an tag (for list item). If we apply this tag to the three reasons to check out more information about E-Z Accounting, the code looks like this: Ready to save yourself some money? Let E-Z Accounting tell you more about our Services Fees Background See it in action To get an ordered, or numbered, list, wed replace the tags with tags; the tags remain the same: Ready to save yourself some money? Let E-Z Accounting tell you more about our Services Fees Background See it in action Because our example doesnt consist of a series of steps, lets change the back to to imply options rather than a sequential order. A third type of list is the definition list, which is used primarily for glossaries. A definition list presents a term on one line and then its definition on a separate line. This type of list uses the tag and denotes list elements with (for definition title) and (for definition description), like this: 1040 The basic form you have to fill out for a tax return. Schedule C The form you have to fill out to declare self-employment income. HTML for BeginnersAdding Graphics By Fred Dekker and Donald St. John (Updated 6/27/00) A text-only page isnt going to catch anyones eye. After all, the World Wide Web is all about color and pictures. Maybe you spent some bucks on a cool new logo; why not show it off on your Web page? Adding graphics to your page first requires you to put that snazzy logo into a digital format. If you already have an electronic version, then youre already set. If not, you need to request one from the logos designer, scan it yourself, or take your printed copy to a local copy shop and have them scan it. But thats only the beginning. High-quality electronic images tend to be stored as TIFF files, and the TIFF format doesnt work on the Web. You need to convert the image into a JPEG or a GIF . JPEG and GIF are the two image formats supported by todays browsers. JPEG works best for photographs, GIF for drawings and line art. You can make this conversion in most graphics editors, such as Adobe ImageStyler . Once you have your electronic image in the right format, youre ready for the image tag. is similar to the anchor tag in that it points to a resource thats not actually on the page. In this case, uses the SRC (source) attribute to point to the digital image. The code looks something like this: . When you place the image file in the same directory as your pages, this tag will find the image and display it in the browser. Well add the logo to our page, below the headings and above the text: See it in action Before you start peppering your pages with pictures, keep a couple of things in mind. Images, even small ones, take a long time to download compared to text. Always keep the image as small as possible, both in physical size and in file size, while still allowing it to get its message across. You can also speed up downloads by using the tags WIDTH and HEIGHT attributes. If, for instance, an image is 100 pixels wide by 150 pixels high, youd use the following tag: When a browser sees the attributes values, it creates the correct image space automatically rather than having to scan the image first. Finally, youll want to place your images using the ALIGN attribute of the tag. As with the tag, the alignment options are ALIGN=LEFT, RIGHT, or CENTER. For our example page, lets place the logo on the right side of the first paragraph: See it in action Now our example is beginning to look like a real Web page. HTML for BeginnersCreating an Email Link By Fred Dekker and Donald St. John (Updated 6/27/00) Building an attractive, useful Web page is only part of the job. You also need to give viewers a way to contact you. In the digital age, Web users expect to have instant and easy email contact with you. To make a link to your email address, youll need to use the anchor tag again. You can separate your email contact with the tag, which inserts a horizontal line. Weve decided to have the email contact link centered on the page. Put it below the list, like this: Drop us a line! See it in action Now, whenever someone viewing our page clicks the words Drop us a line, that users email program will automatically start up and open a new message to send to E-Z Accounting. To further customize your mailto link, see our Super Ninja Mailto trick. And thats it--youve built a basic Web page! Dont forget to check your work carefully in a Web browser (several browsers, if possible; get some friends to help) to make sure that all the elements are visible and look the way they should. HTML for BeginnersBasic HTML Tag Guide By Fred Dekker and Donald St. John (Updated 6/27/00) The following are brief explanations of the basic HTML tags used in this article: - tells browsers the page is written in HTML; entire document goes between HTML tags - appears just below the HTML tag in every HTML document; contains information about the document but does not appear on the Web page - specifies the title of the document; the text between these tags appears in the browsers title bar but not on the Web page itself - contains all the text and images that will appear on the Web page, together with all the HTML elements that provide the control/formatting of the page BODY attributes: BGCOLOR - designates the background color, using a name or a hex value BACKGROUND - designates an image as a pages background (wallpaper) TEXT - designates the text color, using a name or a hex value LINK - designates the color of links, using a name or a hex value VLINK - designates the color of followed links, using a name or a hex value ALINK - designates the color of links on click, using a name or a hex value - - codes text as headings; is the largest, the smallest - centers text and other elements on a page - breaks text onto a new line (no vertical space between lines) - breaks text into a new paragraph (leaves a blank line above the new paragraph) - creates italicized text - creates bold text - designates preformatted text - designates teletype or monospaced text - inserts a horizontal rule; helpful in breaking up sections of a page - designates the size (height) of a rule - designates the width of a rule, in percentage or absolute value - inserts a rule without a shadow - marks text as the start and/or destination of a link; requires the HREF or NAME attribute HREF - attribute of the tag; makes text or image between tags a hyperlink NAME - attribute of the tag; makes text or image between tags the target of a hyperlink - Adds an image - creates an unordered (bulleted) list - creates an ordered (numbered) list - used in conjunction with the or tag, designates a list item in an unordered or ordered list - creates a definition list - used in conjunction with the tag, designates a definition title in a definition list - used in conjunction with the tag, designates a definition description in a definition list If youre curious about the myriad HTML tags we didnt cover, check out the HTML Compendiums comprehensive list of HTML elements . The steps to getting your pages on the Web vary by Internet service provider. Youll have to contact your ISP to find out exactly what you have to do. And if your ISP doesnt give you server space on which to post Web pages, CNET can help you find another one .
Posted on: Sat, 03 Jan 2015 11:53:02 +0000
Trending Topics
Recently Viewed Topics
© 2015