|
Several members have submitted a desire to learn web design. We now have our initial web sites which our Designers have made. We are now ready to learn how to make web pages and/or update our own site. How exciting! Below you will find very helpful suggestions and links to websites to teach you html. We will begin with a few details for now. This site will not be finished for a while, but this will be a beginning for you to learn and study. The books below are a very good source to study as well. Please check back often for added details.  Basic HTML <HTML> HTML is a formatting or mark-up language which stands for HyperText Markup Language, the major language of the Internet's World Wide Web. Web Sites and Web Pages are written in HTML. With HTML and the WWW, you have the ability to bring together text, pictures, sounds, and links. Tags are pieces of code surrounded by the symbols < and >. Browsers such as Netscape and Explorer, read tags when formatting HTML files on your screen. Your web pages or documents available on the World Wide Web are HTML files. HTML does not describe a page the way some computer languages do. Some languages actually describe every graphic element and its position on the page. This includes fonts, point sizes, screen values, and line weights. The best way to describe this is like a person who writes a memo by hand and puts small comments before certain sections of the memo to indicate to the secretary specific things to do, i.e., "new paragraph," "new page," or "please highlight this sentence." HTML tags attribute styles, insert graphics, sound, and video files in the text, and create hypertext links and forms. Hypertext is the most important capability of the HTML language. It means that any piece of text or graphic can link to another HTML document. How To Copy/Paste This tip will save you a lot of typing! Writing your own web site consists of lots of copy/paste. This will also make it very easy when you are adding a ring to your web pages. It's a good idea to learn to do this from the start. In order to copy/paste: 1. To highlight, place your mouse cursor to the left of the text you would like to copy. Hold down your left mouse button and drag it over the text you
wish to highlight. Release your mouse button. You will see the text highlighted! You have now moved the text without typing everything all over again. This is the first function I learned when Windows first came out! It's a very helpful tool and saves time. How To Display Your Web Ring HTML This will be a good place to discuss this since we have completed Copy/Paste procedures. A lot of you wait for weeks before putting a web ring on your site because quite simply, you do not understand how it can be displayed. Hopefully when we finish this topic, you will understand it better. When you sign up for the ring normally you are sent an email which contains the HTML code for you. All you have to do is upload the graphics provided for you to our own server; then copy/paste the ring itself into your document. For the sake of showing you how to do this, below you will find the format in which you will receive the ring: <p><!Begin My Mom
Is A Survivor Ring> To save images on your hard drive, simply right click your mouse and save as...whatever file you want to name it. It is my suggestion that you save these particular images by the file name that I have used above so that the copy/paste effect will work better and you don't have to change the coding on the ring to match your file names. If you are using a MAC, click-HOLD when you are over the image of your choice, then save to your hard drive. Then when Web TV users try to do this, the format is different because the normal copy/paste does not apply. Please see: see Web TV Uploading of Graphics. In the very near future, I will have further instructions to make it easier for you. For AOL Users, most HTML formats via AOL's email will arrive distorted. I'm not sure about most web ring webmasters, but My Mom Is A Survivor provides a text page for AOL users to do a copy/paste right from the site. As an example, please view The Text File of My Mom Is A Survivor. You will find at the top of the page the following instructions: Copy/paste the ring fragment onto your site as you see it below. Don't forget you need to replace the *blanks/or underlined areas* with your site ID # and the *mailto* part to reflect your email address and name. Please see the directions below called "Adding A Ring To AOL". When saving the graphics to your own hard drive, the procedure is also different than most. When you save the images to your hard drive, you must save them, in this case, as .jpg images. AOL's browser will not permit you to save them as .jpg files, then see the following instructions in order to do this: If you are building a site on AOL and are using a AOL browser in order to copy/save images to your own hard drive, under your Preference menu, turn off the Use Compressed Graphics option. Without this option, the images will be saved in an AOL format and will show you broken images when we all visit your site using Netscape or MSIE. For further information see: Web Development on America Online.If you are viewing our site with AOL 3.0, go to keyword "Preferences"; if your using 4.0, go to "My AOL", then choose the option "Preferences". Click on the "WWW" button. Click on the "Web Graphics" tab. UNCHECK the "Use Compressed Graphics" box, click on "apply", then "ok". We hope this has made placing a web ring on your site a little easier for you. If any of you have easier instructions, please contact me and I will place them here. Adding A Ring On AOL Just how do you get a ring code on to your page with AOL? To edit or add HTML on AOL. Right now AOL has 3 or 4 different types of HTML editors on line. This can cause confusion among the membership about adding ring codes. There are seven different ways I can think of to do this. As of today, 11/7/99 this is the ONLY foolproof way to add a ring code. Please do not be offended by the very explicit instructions. I wrote this for my Father, who is 78 and has very little computer savvy. Gather all the things you will need. Your ring code, correctly configured for your page. (Usually this is given to you by the ring.) If it is not configured yet you will need to follow your ringmasters instructions to edit the code. Put this inside a blank e-mail and minimize it, pencil, paper, and a large beverage of your choice. Although these instructions are easy they are also very involved. Go to keyword My FTP Space double click on See my FTP space. Find the folder that contains the page you wish to add the ring to. Upon opening that folder you will see the name of your page with a .Htm or .Html extension. Double click on it. A window will pop up that tells you what the item is. Copy the information on these two lines: Directory:/your screen name/your directory name/ (Some of you may have more or less than one directory, that is fine. You just need the information as a reference later.) File Name: your page name.htm or HTML. Exactly as it looks. AOL is case sensitive so caps have to be exact. You do not need the information contained within the ( ). There will also be two option buttons on the bottom. Click on, View File. Now another window will pop up with your HTML code inside. Don't worry!! Its what we want. Note that the name on the top is the same one you wrote down as File Name. At the top of your AOL screen click on the drop down file menu. Select: Save As Save this file to your hard drive as the file name you wrote down without the .htm extension. (Write down where you put it). Now find the file on your hard drive. Double click on it. It will automatically open in Internet Explorer. You will see your page (missing the graphics) Right click on the body of the page. A menu box will open, select view source. There it is again, that HTML code. :-) This time it is in notepad. Scroll down your page, look for the <./Body> tag (at the bottom, without the dot) Open the email you set up earlier. Copy the ring code (left click on the body of the e-mail, highlight the code you want, release the right button, right click, select copy). Go back to the HTML of your page. Left Click so your cursor is above the body tag. Release the left button, click the right button and select paste. Go to the top notepad window select file>save. Your ring code is now added to your page! Take a big drink of that beverage!!!! Your almost done. Sign on to AOL go back to keyword My FTP Space, double click on the folder you wrote down under Directory. Select upload. Another window pops up, at the top is the Directory information you wrote down before, Verify that it is the same. Above the box is Remote File name. In the box type the name you wrote down before under File name: :-) don't type file name!!! Just the page name.htm or HTML. Select Binary transfer mode. Select continue. Click select file, and choose the page you downloaded. Click send. Wait for AOL to do it's thing. At this time, find the graphic's files that you downloaded for the ring, (if any) and upload them with there own names in the same folder. You did it! Go to your page on the web, hold down Ctrl at the same time clicking on the circle with an arrow on it (reload) Holding down Ctrl forces the browser to reload everything on the page. There you have it! If you followed these instructions to the letter your page will now display the ring at the bottom. Our many thanks to Veil for these instructions. Best Regards, Text Links Linked text allows a person to click on a word or phrase and jump to another page. This is called hypertext. The linked text shows up in color and can be underscored depending on the preference settings of the browser. After we look into hypertext links, I will explain how your web page design can eliminate the line for a smoother flow. An example of how to be able to click on a word to go to another document or page: <A HREF="index.html">Click Here</A> Basic HTML Elements HTML documents consist of two basic parts. The head and the body. Both of these use pieces of code called tags. Tags style text, link files, embed graphics, and create forms, which are used for gathering information from the user. Some of your basic HTML tags are as follows: <P> - The tag that ends a paragraph and can be used alone. <H1></H1> - These tags must be used together. This designates the header or font size you would like to use. The tags for the size of header you want to use begin with <H1>, which is first header level, or the largest header level. You may use header sizes for larger font up to <H6>. When you program your html codes as you see here, these must be closed off. Closing tags always contains a slash.
Type Styles One way to style type is with relative tags. These include six heading tags (H1 through H6) and tags like strong and emphasis: H1 is the largest and boldest. This is used for the most important type on your page. H2 is smaller and less bold. Use this for sub-heads. H3 is smaller and carries less weight that H1 or H2. H3 is a comfortable size for reading. H4, H5 and H6 is smaller yet. Use these sparingly. You don't want your page to look too small. <ADDRESS> Address is often italic and is meant for email, telephone numbers, postal codes, etc. </ADDRESS>. <EM> and <STRONG> Emphasis and strong.
usually are eye catchers. Usually by making your type bold or italic.
</EM> </STRONG>
**Hint: When typing your Type Styles, do not combine capital letters with small letters. Either use all capitals OR all small letters.
Fixed Type Styles To style type is with fixed
tags. Each of these tags indicates a type style that does not vary
from browser to browser. Your text will be normal unless you use some of
the following codes (in the examples shown, I have included the closing code: <B> - Bold
</B>
<I>
- Italic </I>
<U> - Underline </U> Paragraph & Line Breaks To style type is with fixed
tags. Each of these tags indicates a type style that does not vary
from browser to browser. Your text will be normal unless you use some of
the following codes (in the examples shown, I have included the closing code: <BR> - Ends a line without adding any
space. <BR> works alone. No closing lines are
needed.
<P> - Ends a paragraph and
adds a line space.</P> Text Links Linked text allows a person to click on a word or phrase and jump to another page. This is called hypertext. The linked text shows up in color and can be underscored depending on the preference settings of the browser. After we look into hypertext links, I will explain how your web page design can eliminate the line for a smoother flow. An example of how to be able to click on a word to go to another document or page: <A HREF="index.html">Click
Here</A> Start with the opening tag <A HREF=in
front of the file name. Think of the <A as meaning anchor and HREF as meaning hypertext reference. Place the file name between the quotation marks. Put the text you want people to click on the screen between > and < symbols. End with a closing tag </A> after the text. Now as I promised you, the code to make the text clickable, without the line is: <STYLE TYPE="text/css"> If you would like, you can copy/paste this code into your document. The code should be placed just before </HEAD> which is located at the beginning of your document. If you are confused, look at the title bar of your browser. Click on View and then Source. You will see that I have this page coded so that the text further down on this page is not underlined, yet you may click on the words and go to that link or document. Graphic Links Linked graphics allow us to click on an image and jump to another site or page. This will help to make your documents easier to use. The linked graphic shows up outlined in color depending on the preference settings of the browser. There are also ways you can eliminate the outlined color around the image, which some prefer now. I will show you this version at the end of this topic. To link a graphic, type the same code as for linked text. In place of the clickable text, insert a graphic for visitors to use. <A HREF="index.html"><IMG
SRC="graphic.jpg"></A> Start with the opening tag <A HREF= in front of the file name. Put the file name you want to link between the quotation marks. Put the <IMG> tag between the >and< symbols of the link tag. Think of IMG as meaning image. Put the file name of the imge you want people to click between the quote marks of the <IMG> tag. End with a closing tag </A> for the link after the last part of the <IMG> tag. <A HREF="index.html"><IMG
SRC="graphic.jpg" border=0 width=200 height=200"></A> Now to help fine tune your graphic in order to help it to load faster on your page and to eliminate borders around it. After you have the graphic shows in your html language, by typing to the right of the image border=0 will eliminate the colored frame. The rest could actually be learned later, but if you would like to attempt, I will try to explain what all of those numbers are with width and height. After eliminating the colored frame around your graphic, you would like to tell your html the size of your graphic. If you have a graphic viewer such as Paintshop Pro, you can actually determine your sizes when you display your image in the program. If you place your arrow over the image, down in the bottom right of the screen, you will see the dimensions. Just write them down. For example, if the image is 200 x 200, your HTML format will read width=200 height=200. You can see from the example above how this can be placed in your HTML document to make it work for you. After a little while, you will learn to memorize these special codes and tricks without even thinking about them. Graphic Artists There are a lot of very talented graphics artists on the web. When you first begin making your own web sites, you will probably begin using some of the beautiful sets you see on web sites everywhere. These artist either offer them free for use or provide linkware for you to use on your personal web site. These artists work very hard to be able to bring you these sets. When I use other artists' work or art, I always provide a link back to their site on the same page so that others who visit your site will be able to go visit the artist. It will save you a lot of emails in answering the same question over and over. "Who made your graphics?" Sometimes when you first beginning making websites, you may not feel it is important, but it is very important. What if you don't remember who made those beautiful graphics. This is also a reminder to you that if you decide to the their graphics again, you will know exactly where to find them. So please get into the habit of always using the artist's logo on your site. Bandwidth & Linking Let's talk about bandwidth. It is better to be educated on this than to find out the hard way. The rave today is to have your own domain. So there are a lot of people who pay for the space that brings you these beautiful graphics. If your site contains written html for a graphic, it should look like this: The incorrect way would be to have your image or midi like: <IMG SRC="http://www.astrangersserver.net/nameofgraphic.gif"> This is stealing bandwidth. This is using someone else's server to display your images. Most graphic artists change their images often. Some may display one that is not so nice. If they do and you are linking to their images, you could display your website to find a very embarrassing image on your site. With all of the free websites being offered today, such as Geocities, there really is no reason to link to anyone's images. I will try to explain it in another way. What if your neighbor had his water turned off because he couldn't pay his bill. Without your knowledge, he decides to hook a hose up to your faucet and fill his pool. You receive a bill from the Water company that is over $2,000.00, just because your neighbor was linking to your water faucet. This is the same thing as stealing bandwidth. So please begin your html education by doing it the correct way. Hopefully this will be an education you will learn right here. Using Frontpage and HTML Together Below you will find instructions and information using Microsoft Frontpage. A lot of people begin with this type of program because it is easy. We would like to show you how to combine Frontpage with the HTML you have learned in the above instructions. You can quickly and easily create a web page using Microsoft's Frontpage 98.
Hints and Tips At times, with Frontpage, you will get "junk" html with your image files. Something like this.."image src=fileC////////....20%yourimage.jpg". Everything between the = and "yourimage.jpg" will have to be removed for the image to load. You can do this in the html editor of your server. The background music you added in Frontpage, will only play one loop, so you will need to customize your html to have the music continuous. You can copy/paste the following html for this purpose. It must be pasted into your html after your background image html. Your html will look like this: body background="yourimage.jpg" then copy/paste--- <bgsound="song.mid"><embed src="song.mid" autostart=true controls width=51 height=15 controls=smallconsole loop=true></embed> Midi FAQ SheetWhen using a bordered background, to make your text and images appear to be centered on the page, or to keep your text from overlapping into the border, you can use a simple html tag to move it small degrees to the right or left. They are <ul> which moves toward the left (or right as you face the screen) and <ur> which moves just the opposite. You can use as many of these tags as needed until you have your text and images placed as you want them. These tags are placed also just after your body background tag. If you used the html for the midi, they will be placed between the body background and the midi html. As with most other tags, these will need to be closed. If you are using the tag to move a single image, use the </ul> immediately after the end of the html for that image. If you are using the tag for the full page, use the </ul> just above the tag at the end of your page. Deb Alleman found another HTML Editor which looks interesting. It's called 1st Page 2000. You can download this program for free.
1st Page 2000Making Web Sites On AOL
Go to AOL hometown at keyword then go to build a page now.
Publish A Page In 3 Easy Steps. 1-2-3 Publish is the quick and easy way. You also have the option of Hotdog express, you just have to download the hotdog express program from here, and have a little knowledge of HTML and page building.
Choose the color and graphics for your page. Email Stationery
Making Your Own Stationery Your first option is to make your own stationery. To do this you will need an HTML editor. You can start from scratch and follow this tutorial from Majik or you can get a quick start by working from these templates from Majik as well. For those who are not very good at using an HTML editor, Stationery Maker software is available. The Stationery Maker lets you customize an online form and it generates the stationery for you to download. Very quick and very easy, but not as powerful as doing it completely yourself. Stationery HTML
<html> Save it in C:/Program Files/Common Files/Microsoft Shared/Stationary as an HTML. To change the background go to the body background="image.jpg" and put in your image name. If it is a bordered background go to Margin-left: and put in 15em or 20 em instead of the 5em. That is all there is to it. Try it out. Just go to New Mail select stationary. And it will give you a list of the stationary on your computer.
Sending Attachments in Outlook Express
Email Viruses If you receive an email from someone you do not know and you see an attached file, please delete it. There are several viruses going around now. One is Happy.exe which will take over your computer files. If you receive this virus in an email, please delete it immediately. If you open it, the web sites below will help you. Norton Utilities WebTV Coming Soon! Coming soon, we plan to include help for WebTV Users. Please visit often to see what we have added and if you would like to see a basic topic here, please let us know and we will do our best to include it. In the meantime, we have included a few websites that may help you. Bruce's WebTV Help Pages SkiHound's WebTV Help Simple Help For My WebTV Buddies Star Boulevard Transload Service WebTV Developer WebTV Network Classes Web TV Users Help A Beginner's Guide To HTML Graphics Links How To Create A Web Page HTML for People Who Want to Learn Marvelicious Tips Page Web Page Help for AOL Users A tutorial is for anyone who is serious about learning HTML, so they can have their own home page, and maybe eventually their own web site. A tutorial is not for those who are HTML experts, but they will teach you the basics and learn something new anyway! You need not have any prior experience in HTML, but we will assume you know how to do basic things with your computer, such as word-processing. HTML Tutorials For Beginners
JavaScript Source
Links for All Design Topics Matt's Script Archive
|
|
Copyright © 1999-2009 Marvel Creations. All Rights Reserved. All matching images and content of this website are © Marvel Creations and may not be reproduced without express permission. This web site was created and designed by Marvel Creations 1999-2009 which began May 29, 1996. These graphics are for the "exclusive" use of My Parents Are Survivors. Please do not take! Thank you! Thanks to Karen McCombs, Karen aka Blulady, Arlene Jacobs, Linda Mayor, Barb, Beckie Clymo, Deb Alleman and last, but especially not least is Helen Mead. Thank you, ladies. You are very special web designers.
|