[Home]
[Edit this page]
[Recent Changes]
[Special Pages]
[Help]
htmlwheretobegin
Open a simple text editor program such as Notepad on a windows machine, copy and paste the above code into the editor, save the file with a .html or .htm extension, and open the file using a web browser. Congratulations, you have now created your very first web page.
Upon opening of the above HTML code example in a web browser, a blank white or gray screen should appear in the content area of the browser. Why? Well, no elements have yet been provided in the document other than the basic document structure tags. By default, web browsers display text in black, hyperlinks in blue, and the background in white or gray with top and bottom margins set at 15 (pixels) and right and left margins set at 10 (pixels). To override these default values, simply alter the values of the corresponding <body> standard tag attributes. The following attributes can be manipulated in the <body> tag of a document.
Standard Attributes background="imageURL" --> document background "tiled" image bgcolor="#hexColor" --> document background color text="#hexColor" --> document text color link="#hexColor" --> document link color vlink="#hexColor" --> document visited link color alink="#hexColor" --> document active link color Non-Standard Attributes bgproperties="fixed" topmargin="#" --> pixel size of top margin of web document bottommargin="#" --> pixel size of bottom margin of web document leftmargin="#" --> pixel size of left margin of web document rightmargin="#" --> pixel size of right margin of web document
Non-Standard JavaScript Supported Attributes onload onunload onfocus onblur onerror onmove onresize ondragdrop
Example: For a black background, orange text, white hyperlinks, and all margins set at 0, alter the <body> attributes to the following:
<body bgcolor="#000000" text="#FF2400" link="#FFFFFF" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
Important Note: The six digit number and letter hexColor combinations represent the amount of RGB (red, green, blue) color as hexadecimal values from 00 to FF. 000000 is black, and FFFFFF is white. Finding a specific color using random number and letter combinations can be very time consuming. A free online resource to track the combinations that make specific colors is available at www.cooltext.com. Most high level paint programs such as Paint Shop Pro 5 have the capability of calculating the hexadecimal values of thousands of colors. Not only does a good paint program come in handy when finding hexadecimal values, but it is also a great tool for creating custom images for web pages.
When manipulating attributes, if an attribute is not specified, the default value for the browser will be used. You can also provide a background image that will be displayed in the background of your document instead of a solid color by using the background="imageURL" attribute. "imageURL" is the URL web address of the image to be included as the background. For example, if an image named stone.gif is saved on a computer in the same directory as other HTML files or uploaded on a web server, a person could use the following code:
<body background="stone.gif">
This will "tile" the image of stone.gif across the background of a web page providing the image is in the current web directory. Since the image is displayed in a "tiled" format, the creation of repetitive background images are commonly used to minimize web page loading and downloading time.
To create a web page document, follow these 6 simple steps:
1 - Open a text editor such as Notepad on a windows based machine. 2 - Copy and paste the following code depicting the document structure tags:
HTML Reference Center
[Edit this page] [Page history] [What links here] [Discuss this topic] [Printer Friendly]
htmlwheretobegin
Where to begin?
Every HTML document should contain the basic document structure tags, which include <html></html>, <head></head>, and <body></body>. The heading contains the title, which is displayed in the title bar of a browser, and the body contains the elements that are made up of text, images, paragraphs, tables, lists, and any other legal HTML element. Not every browser supports all HTML tags; however, if the tag is not supported, the browser simply ignores it and doesn't take it into account when interpreting the document. HTML is also not case sensitive, which means <bOdy> is the same as <body> or <body>, but it is highly recommended to use a consistent tag writing style. The standard writing convention is for all tags to be written in lowercase. The following depicts the document structure elements that every web document should contain:<html> <head><title></title> </head> <body> </body> </html>
Open a simple text editor program such as Notepad on a windows machine, copy and paste the above code into the editor, save the file with a .html or .htm extension, and open the file using a web browser. Congratulations, you have now created your very first web page.
Upon opening of the above HTML code example in a web browser, a blank white or gray screen should appear in the content area of the browser. Why? Well, no elements have yet been provided in the document other than the basic document structure tags. By default, web browsers display text in black, hyperlinks in blue, and the background in white or gray with top and bottom margins set at 15 (pixels) and right and left margins set at 10 (pixels). To override these default values, simply alter the values of the corresponding <body> standard tag attributes. The following attributes can be manipulated in the <body> tag of a document.
Standard Attributes background="imageURL" --> document background "tiled" image bgcolor="#hexColor" --> document background color text="#hexColor" --> document text color link="#hexColor" --> document link color vlink="#hexColor" --> document visited link color alink="#hexColor" --> document active link color Non-Standard Attributes bgproperties="fixed" topmargin="#" --> pixel size of top margin of web document bottommargin="#" --> pixel size of bottom margin of web document leftmargin="#" --> pixel size of left margin of web document rightmargin="#" --> pixel size of right margin of web document
Non-Standard JavaScript Supported Attributes onload onunload onfocus onblur onerror onmove onresize ondragdrop
Example: For a black background, orange text, white hyperlinks, and all margins set at 0, alter the <body> attributes to the following:
<body bgcolor="#000000" text="#FF2400" link="#FFFFFF" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
Important Note: The six digit number and letter hexColor combinations represent the amount of RGB (red, green, blue) color as hexadecimal values from 00 to FF. 000000 is black, and FFFFFF is white. Finding a specific color using random number and letter combinations can be very time consuming. A free online resource to track the combinations that make specific colors is available at www.cooltext.com. Most high level paint programs such as Paint Shop Pro 5 have the capability of calculating the hexadecimal values of thousands of colors. Not only does a good paint program come in handy when finding hexadecimal values, but it is also a great tool for creating custom images for web pages.
When manipulating attributes, if an attribute is not specified, the default value for the browser will be used. You can also provide a background image that will be displayed in the background of your document instead of a solid color by using the background="imageURL" attribute. "imageURL" is the URL web address of the image to be included as the background. For example, if an image named stone.gif is saved on a computer in the same directory as other HTML files or uploaded on a web server, a person could use the following code:
<body background="stone.gif">
This will "tile" the image of stone.gif across the background of a web page providing the image is in the current web directory. Since the image is displayed in a "tiled" format, the creation of repetitive background images are commonly used to minimize web page loading and downloading time.
To create a web page document, follow these 6 simple steps:
1 - Open a text editor such as Notepad on a windows based machine. 2 - Copy and paste the following code depicting the document structure tags:
<html> <head><title></title> </head> <body> </body> </html>3 - Alter the <body> attributes to create a custom visual appearance for the web page. 4 - Add all other necessary HTML elements to provide content. (see later articles) 5 - Save the text file with a .html or .htm extension in the same directory as all other related web page files. 6 - Open the HTML file in a web browser. For a web page example, follow the above steps and insert the following HTML code in place of the document structure tags: NOTE: See later articles for "new" tags not covered in this article.
<html> <head><title>My First Web Page - HTML is simple!</title> </head> <body bgcolor="#FFFFFF" text="#FF0000"> <h2>Hello, world. HTML is easy!</h2> </body> </html>
HTML Reference Center
[Edit this page] [Page history] [What links here] [Discuss this topic] [Printer Friendly]
