|
|
| Want to set up your own web site? ATHROPOLIS uses and recommends SUPERB INTERNET. | |
|
|
|
| Want to set up your own web site? ATHROPOLIS uses and recommends SUPERB INTERNET. | |
Teach Yourself HTML* (*Hypertext Markup Language) Although there are many ways to build a web page, we are including here simple "copy and paste" instructions that will allow you to create a basic page, and then add or modify text, fonts, font sizes, colors, background colors, graphics, links, lists, etc.
PAGE DIRECTORY
Starting your Web page ( Download a Starter Web Page )
NOTE: The tags <!--- and ---> around a section of text or code keep it from being read by the browser. More... You can download / save a starter page for either Windows or Macintosh.
Just play with it. When you are happy with the results, you can then load the page to the server. Give your page a title
After you have completed "STEP 1: Starting your Web page", modify the HEAD section to give your page a title.
Replace the words Page Title (in red) with the title you want for your page. Your title should be short and descriptive.
NOTE: The title appears in the title bar of the browser window and on history lists and bookmarks. It is also used as key words by search engines.
Modify the <BODY> tag that you established in "STEP 1: Starting your Web page" (shown below).
Set body background, link, active link, visited link and default text colors by replacing the color codes (in red). You can use our handy COLOR SELECTOR to help you make your choices.
Copy and paste the code below into your HTML document where you want to change the appearance of your text, and adjust the various sections as indicated below (in red).
NOTE: The <FONT></FONT> tags around a section of text is used to change just one or all of the characteristics of that text. You can combine everything within the same font tag. For example:
If you want to use the Times style font (default font), remove the FACE tag entirely.
There are several ways to change the font size, but for this basic instruction, we suggest just using the size numbers 1 (smallest) to 7 (largest). Just change the number 3 to any number between 1 and 7.
You can use any one of hundreds of colors for your text. Just change the six digit code for the color accordingly. Just change 000000 (the code for black) to whatever color you want. NOTE: You do not have to put in a color tag if you want to use the color you selected for the default text color in the <BODY> tag at the top of the BODY section (TEXT="#000000"). See our COLOR SELECTION CHARTS to help you make your selections.
Make text bold
Type <B>, then the text you want to make bold, and then </B> to end the bold text.
Type <I> ( the letter i, not the number 1 ), then the text you want to make italic, and then </I> to end the section.
HTML doesn't recognize the returns that you enter in your text editor, so must indicate a new paragraph with the P tag. This creates a two line space.
To start a new paragraph, type <P> before the contents of your new paragraph. You can also type </P> after the paragraph, but it is not necessary.
NOTE: Some tags (like <CENTER> or horizontal rules <HR>) have automatic paragraph markers. You do not have to add another to start a new paragraph.
When you start a new paragraph with the <P> tag, the browser inserts a two line space. If you want just a one line space, or a line break, use the <BR> tag.
Type <BR> where you want the line break. There is no closing BR tag.
NOTE: An additional <BR> tag can also be used to add additional vertical space. (For Example: <BR><BR><BR><BR> would add four vertical lines of space after text or an image.)
An "ordered list" is a numbered list - the same as the instructions below are presented as.
An "unordered list" is a list without numbers - the same as the instructions below are presented as.
If you would like to make notes to yourself or put headings in your HTML code to help you organize your code or remind you of what you have done, you can block such comments so that they are not read by the browser.
Type <!---
These notes will not effect your code and will be invisible on your web page.
The CENTER is a general centering tag and can be used with any type of element on your page (paragraphs, headings, images, forms, tables, etc.) even if there is another method for centering.
To center any element on your page, simply put the start <CENTER> tag at the beginning of the section you want to center, and the end </CENTER> tag at the end of it. Everything between these tags will be centered.
The CENTER tag automatically starts a new line underneath it. You do not have to use the <P> or <BR> tags to start a new line.
Copy and paste the code below into your HTML document where you want your image to appear, and adjust the various sections as indicated below (in red).
Replace the red section with the file name of your image (either a .gif or .jpg image).
Enter the width and height of your image in pixels. This helps the page to load faster. NOTE: If you do not know the width and height of the image, you must REMOVE the width and height tags completely.
Firstly, position the entire image tag where you want it to appear in your text, then adjust the tag If you want your image to appear on the right side of the page, leave the tag as it is. To have it appear on the left side of the page, change it to "left". To have it centered on the page, change it to "center". NOTE: To center an image, you can also use the <CENTER></CENTER> tags around your image tag (recommended) and remove the ALIGN tag completely. See: Centering Text and Images
This will create a border around your image. If you do not want a border, be sure to enter 0. NOTE: If your image is also a link, the color of the border will appear in the color you have selected for your links in the <BODY> tag at the beginning of the BODY section. See:
This information (a description of the image) will appear as your image loads, appear as text on browsers that do not show frames, and as a tool tip that appears on most Windows browsers when you point to the image with the pointer.
Only use the HSPACE (horizontal space) and VSPACE (vertical space) tags if you want some blank space around your image. Just change the 0 to the width or height in pixels that you want. NOTE: If such space is not necessary, you can remove these tags completely. Add a horizontal line Horizontal lines are call horizontal rules. Copy and paste the tags below where you want the line to appear on your page and adjust accordingly.
Replace 3 with the number to represent the thickness you want in pixels.
Enter the width of the line in pixels. You can also show width as a percentage of the page width, such as: WIDTH="80%"
The NOSHADE tag creates a solid bar with no shading. If you want a bar with shading (the default style), remove this tag.
You can use left, right or center to position your line. You can also center the line by removing the ALIGN tag and using the CENTER tags above and below the HR tag. See: Centering Text and Images
Creating text and image links
Making bookmarks
Perhaps you'd like to create a link to a specific place on a page. An example is the Back to Top sections of this page (which take you to the top when you click on them), or the menu at the top of the page (which brought you down here when you clicked on "Bookmark links").
If the destination is on another page, then include the path to the page before the destination name. For example:
Link to an e-mail pop-up form
You can add a link to your e-mail address. When a visitor clicks on it, an e-mail window will pop-up with your address in it - like this. All they have to do is fill in their message and send it to you.
Just copy and paste the following code around the text you want to be your e-mail link.
Here's a way to help prevent e-mail address collecting "robots" or "spiders" from grabbing your address for mailing lists. A weakness of collection programs is that they can't process scripts, so use this small bit of JavaScript to protect your address while still providing an e-mail pop-up form for your visitors -
.
Use this instead of the regular "mailto" code. Replace "username" with the part of your address BEFORE the @, and replace "yoursite" with the part of your address AFTER the @. Replace "text" with what you want to appear on the site (your name or e-mail address).
Making a table for your web page
Tables are excellent for presenting information in a simple to read form. In addition, tables are a good way to divide your page into sections that are easy to manage and position.
You can make a basic table by using our Table Maker - copy and paste the code onto your web page and then adjust it according to the information below.
The code for this basic table is shown directly below.
<CENTER> <TABLE WIDTH=400 BORDER=2 CELLPADDING=2 CELLSPACING=4> <TR> <TD COLSPAN=3 ALIGN="center">CELL 1 (Title)</TD> </TR> <TR> <TD BGCOLOR="#FFCC00">CELL 2</TD> <TD>CELL 3</TD> <TD>CELL 4</TD> </TR> <TR> <TD>CELL 5</TD> <TD>CELL 6</TD> <TD>CELL 7</TD> </TR> </TABLE> </CENTER>
Notice how each row of cells starts with <TR> (Table Row) and ends with </TR>.
Use lowercase only for all file and folder names. Browsers are not case sensitive, so if your file names are not exact (as to lower case and upper case letters), you may still see them as you preview and test your page when you're viewing the files on your computer (a link specifying "index.htm" will recognize "index.htm", "INDEX.HTM" or even "Index.htm"). However, internet servers ARE case sensitive, so when you load your files to the server - it won't recognize them unless they are EXACTLY the same (your link specifying "index.htm" will reject "INDEX.HTM" or "Index.htm" - resulting in an error message).
To avoid problems, it is best to keep all file and folder names consistent with lower case.
Values (For example: COLOR="#FFCC00"
) should generally be enclosed in straight quotation marks (""). However, these can be omitted if the value only contains letters (A-Z, a-z), numbers (0-9), a hyphen (-) or a period (.).
It is a good idea to put quotations around all values (just to be sure) and around URLs to make sure that they are not misinterpreted by the server.
Pages designed on a Macintosh computer/browser can look very different when viewed with a Windows browser. This is because the Mac uses different standard fonts (Helvetica instead of Arial, Times instead of Times New Roman).
Fonts on a Macintosh are somewhat smaller than the Windows fonts (Size 3 on a Mac will take up less space than size 3 when viewed with Windows). This can cause some significant changes to the layout of your page, particularly when graphics are involved (the pixel size of images is the same). If possible, view your pages on both platforms.
We recommend that beginners learn basic HTML (as represented on this page), and then move on to Web page editors (like PageMill, Composer, FrontPage, etc.) if you find them more convenient. You'll have a better understanding of how a web page is structured and know what to look for in the code if you have problems. You can always adjust and refine the page designed with a page editor using these codes (just open the page in any text editor, and adjust where necessary).
|
||||||||||||||||||
|
|
|
| Want to set up your own web site? ATHROPOLIS uses and recommends SUPERB INTERNET. | |
