In: Categories » Internet and online » Web design tips » HTML Basics and web design
All HTML documents contain the following elements, which define the overall structure of the document:
<HTML>
<HEAD>
<TITLE>Your title goes here</TITLE>
</HEAD>
<BODY>
The body of your document goes here.
</BODY>
</HTML>
As the preceding example shows, HTML tags are generally used in pairs that enclose portions of your document. The beginning tag, such as <BODY>, signals the start of specific formatting for that section; the closing tag, such as </BODY>, includes a slash before the tag name and signals the end of the formatting for that section. Here is an explanation for each of these tags:
- <HTML>: This tag must always appear as the very first thing in an HTML
document. It tells the browser that the file is an HTML file.
- <HEAD> and </HEAD>: These tags enclose the section of the document
called the header, which contains information that applies to the entire
document.
- <TITLE> and </TITLE>: These tags enclose the document title. Any text
that appears within them is used as the title for your HTML document.
This is also the text that appears in the browser’s title bar.
- <BODY> and </BODY>: These tags mark the beginning and end of the portion
of your document that the browser displays when someone views
the page. A lot of stuff typically falls between these tags.
- </HTML>: This tag is always the last tag in your document.
Specifying Font Settings
In the early days of the Web, HTML didn’t provide a method that enabled you to precisely control the appearance of type on your Web pages. Now, however, HTML offers several methods for controlling type. HTML has two tags that let you control font settings: <FONT> and <BASEFONT>. The <FONT> tag enables you to control font settings for an individual block of text, whereas the <BASEFONT> tag sets the default font used for an entire document. Both of these tags are immediately followed by one or more attributes, which provide specific information for the tag. Here are the most important attributes of the <FONT> and <BASEFONT> tags:
- FACE: Sets the typeface.
- SIZE: Gives the type size on a scale of 1 to 7, where 7 is the largest and
1 is the smallest. The default size is 3.
- COLOR: Sets the color of the text.
Here is a snippet of HTML that sets the typeface, size, and color used for
text:
<BODY>
<BASEFONT SIZE=”4” COLOR=”BLACK” FACE=”Times New Roman”>
<P>This is normal body text using the font set by the
BASEFONT tag.
<H1><FONT FACE=”Arial”>This is a heading</FONT></H1>
<P>After the heading, the text reverts to the BASEFONT
setting.
</BODY>
When you want to force a line to break down to the next line, you can insert the paragraph (<P>) tag at that point. The <P> tag also inserts an extra blank line of space before the new line of text begins. If you don’t want to add the extra blank line, you can use the <BR> tag. This tag also forces a line break but doesn’t insert any extra space. Neither the <P> tag nor the <BR> tag requires a closing tag.
Entering Headings
Don’t fill your Web pages with a constant stream of uninterrupted text. Instead, use headings and paragraphs to organize the content on each page. The HTML heading tags make easy work of creating headings that break your text into manageable chunks. You can use up to six levels of headings on your Web pages by using the HTML tags <H1>, <H2>, and so on through <H6>. The following snippet of HTML shows all six heading styles in use:
<H1>This is a heading 1</H1> <H2>This is a heading 2</H2> <H3>This is a heading 3</H3> <H4>This is a heading 4</H4> <H5>This is a heading 5</H5> <H6>This is a heading 6</H6> <P>This is a normal text paragraph.
Formatting Text
The following subsections show you how to insert formatting commands that control alignment and enable you to add bold, italic, and color to your HTML documents.
Alignment
HTML doesn’t give you many options for aligning text. By default, text is left-aligned on the page. But you can use the <CENTER> tag to specify text to be centered, as in this example:
<CENTER>This text is centered.</CENTER>
Bold
You can use the <B> tag to format your text in boldface type. Add a <B> tag immediately before the text you want to appear in boldface. Then turn the boldface off by adding the </B> end tag, as shown in the following example:
This is <B>bold</B> text.
Be stingy in your use of the <B> tag. Occasional use of boldface is okay, but if you overuse bold formatting, your text becomes difficult to read.
Italic
You can use the <I> tag to format your text in italic type. Add an <I> tag immediately before the text you want to appear in italic. Then turn the italic typeface off by adding the </I> end tag, as shown in the following example:
This is <I>italic</I> text.
Occasional use of italic is okay, but try not to overdo it.
Color
You can specify colors in various HTML tags. For example, <BODY> has a BGCOLOR attribute that lets you specify the background color for your page. The COLOR attribute in a <FONT> tag sets the text color. Standard HTML defines 14 color names that you can use to set a predefined color: BLACK, SILVER, GRAY, WHITE, MAROON, PURPLE, FUCHSIA, GREEN, LIME, OLIVE, YELLOW, NAVY, TEAL, and AQUA. The easiest way to set color is to use one of these color names. For example, to create yellow text, you could use a <FONT> tag like this:
<FONT COLOR=”YELLOW”>This text is yellow.</FONT>
Creating Lists
By using HTML, you can create two basic types of lists for your Web page.
- Bulleted lists: More formally known as unordered lists. In a bulleted list, a bullet character (typically a dot) marks each item in the list.
- Numbered lists: More formally known as ordered lists. A number marks each item in a numbered list. The Web browser takes care of figuring out which number to use for each item in the list.
Bulleted lists
A bulleted, or unordered, list requires these three tags:
- <UL> marks the beginning of the unordered list.
- <LI> marks the start of each item in the list. No corresponding </LI> tag
is needed.
- </UL> marks the end of the entire list.
Here is a snippet of HTML that sets up a bulleted list:
<H3>The Inhabitants of Oz</H3>
<UL>
<LI>The Scarecrow
<LI>The Tin Man
<LI>The Cowardly Lion
<LI>Munchkins
<LI>The Wizard
<LI>The Wicked Witch of the West
<LI>Glenda
</UL>
Numbered lists A numbered, or ordered, list requires these three tags:
- <OL> marks the beginning of the ordered list.
- <LI> marks the start of each item in the list. No corresponding </LI> tag
is needed.
- </OL> marks the end of the entire list.
Here is an HTML snippet that creates a numbered list:
<H3>Steps for ordering a pizza</H3>
<OL>
<LI>Pick up phone
<LI>Dial number
<LI>Place order
<LI>Hang up phone
</OL>
Inserting Horizontal Rules
Horizontal rules are horizontal lines that you can add to create visual breaks on your Web pages. To add a rule to a page, you use the <HR> tag (no closing tag is required). You can control the height, width, and alignment of the rule by using the SIZE, WIDTH, and ALIGN attributes. For example:
<HR WIDTH=”50%” SIZE=”6” ALIGN=”CENTER”>
In this example, the rule is half the width of the page, six pixels in height, and centered on the page. Many Web designers prefer to use graphic images rather than the <HR> tag to create horizontal rules. Because various Web browsers display the <HR> tag differently, using an image for a rule allows you to precisely control how your rule appears on-screen. To use an image rule, follow these steps:
1. Type an image rule (<IMG>) tag where you would normally use an <HR> tag to create a horizontal rule: <IMG>
2. For the source (SRC) attribute within the <IMG> tag, type the name of the graphics file that contains the image rule that you want to use:
<IMG SRC=”grule1.gif”>
3. Add a WIDTH attribute that specifies the number of pixels you want the rule to span or a percentage of the screen width:
<IMG SRC=”grule1.gif” WIDTH=”100%”>
4. Insert a <BR> tag immediately following the rule to force a line break, like this:
<IMG SRC=”grule1.gif” WIDTH=”100%”><BR>
legal notice
Our website is not responsible for the information contained by this article. Web-articles is a free articles resource.
Suggestion: If you need fresh, daily updated content for your website, feel free to use our service. Click here for more information.
Useful tools and features
If you like this article (tutorial), please link to it from your web page using the information above.
related articles
Obviously, you want your Web site to be more popular than Britney Spears and it can be, if you promote it well. Search engines, such as Yahoo!, Lycos, Google, and the rest of them, are always scouring the Internet and recording information about Web pages. Individual search engines work a little differently: Some record information about every word on a Web page and some look only at titles and headings. The search engines store this information in giant databases. When you conduct a search of the Intern...
2. Image editing programs like Adobe Photoshop
Image-editing programs Following are some popular image-editing applications: - The trial edition of Adobe Photoshop CS3 This download is rated highly by users and ranked first in image-editing downloads with more than 8 million to date. This download requires site registration before use. There is also a shareware version available for Apple users. - PhotoImpact X3 This is a user-friendly image editor that actually has most of the editing tools that most people would need and use f...
3. Ilustrator Flash Professional Photoshop Extended and Fireworks
Illustrator The Illustrator application allows the user to efficiently create vector graphics, and then seamlessly use the result with other applications included in CS3. The developer can prepare content for Web, mobile, and print media. The interface of the CS3 version has been modified to provide more efficient utilization of the workspace. For example, the Tools palette has been streamlined from two columns to one that docks inconspicuously along the borders of the screen. Simultaneously, more ...
4. Adobe Creative Suite 3 Photoshop and Dreamweaver
Adobe Creative Suite 3 Photoshop and Dreamweaver The purpose of this article is to provide a brief look at some of the tools available for use in Web site design, and point you to where there is more in-depth coverage of each technology highlighted in later articles. For readers working within the constraints of a variety of budgets, this article describes a range of image-editing tools that are available on the Web either as freeware, shareware, or trial versions of c...
5. How to design a web site for the mobile web
Designing for the Mobile Web There are more than 50 companies producing mobile telephones in significant and marketable quantities. By 2009, projections indicate there will be 3 billion mobile phone users worldwide. The market for the delivery of Web content to these mobile device users dwarfs the market for desktops. There is theoretically unlimited potential for expansion of the Web (or Web 2.0) into these devices, and we are now on the cutting edge of Web site design for Mobile Web (or the ‘‘Ubi...
6. Origins of the Internet and How a router routes
Origins of the Internet One of the first ideas to get out of your mind (if it is there) is that the Internet is a monolithic creation that came about at a single point in time and at a single location. The Internet is a conglomerate of overlapping and mutually reinforcing technologies from computer science, data storage and retrieval sciences (the once lowly data processing), and communications that have been developed (and are still being developed) over the past half century. From inception in the Depart...
7. Evolution of Ethernet and Public emergence of the Internet
Evolution of Ethernet In the early 1970s, ARPANET continued to be incrementally developed and, by 1973, evolved to include 30 institutions in its network. That same year, e-mail was developed to run over the existing ARPANET system by Ray Tomlison of BBN (the same company that initially developed IMP). Also in the early 1970s, application protocols such as File Transfer Protocol (FTP), Telnet, and Simple Mail Transfer Protocol (SMTP) were being developed and tested by being run over ARPANET. These ...
8. Development and Evolution of HTML
Development and Evolution of HTML You might try a fun little experiment to see how pervasive Web pages have become. Pick any dictionary. Pick any word, even at random. Type it in your search engine. You will very, very, very likely find a Web site devoted to that word. The Internet is not synonymous with the World Wide Web, but the Internet drove it, and then it drove the Internet as use synergistically increased the demand for network bandwidth, servers, software technologies, and hardware. The mantra for the 19...
9. Future trends in HTML and The Arrival of XHTML
Future trends in HTML HTML v 4.01 kept pace with the dizzying developments in Information Technology (IT), and provided for additional support of stylesheets, enhancements to tables and interactive forms, expanded scripting capabilities, and increased support for multimedia. There was always a drive to keep up to the market demands, and never really an opportunity to get ahead of the game. The driving forces of HTML and its various enhancements could be typed as dynamism and interactivity. These twins underlie th...
10. Link checkers Code validators Compatibility testers Authoring tools
HTML Tools A variety of tools are available today to help developers work in the complex world of HTML. This section examines a few of the common tools. Link checkers There’s not much that can frustrate visitors to your site more than running into broken links. The Web changes so quickly that anyone who’s been surfing for more than a day or two will expect to click some link and find the dreaded ‘‘404 - Web Page Not Found’’ error now and then. Dead links can happen but should be el...