Basics
Colors
Forms
If you have any questions about building your website Email me Here and I will Get back to you as soon as I can.
Or If You Already Have an Email
Sign Up For Free a Email Address!
address @LearntoHTML you can log in
1. A computer
2. A browser like Netscape Navigator, Microsoft Internet Explorer, or Opera.
If you're looking at this page, you obviously have one.
I would also suggest using a browser that supports images. If you surf with LYNX or CELLO, or
another text-only browser, then try upgrading to one of the browsers noted above.
3. A Text Editor.
You will write the HTML document on the word processor, or Notepad, WordPad, or Simple Text. When you are finished creating the HTML document, you'll then open the document in a browser, like Netscape Navigator. The browser will interpret the HTML commands for you and display the Web page.
Keep this in mind: HTML documents must be text only. When you save an HTML document, you must save only the text, nothing else. The reason I am pushing NotePad, WordPad, and Simple Text is that they save in text-only format without your doing any additional work. They just do it. But, if you're like me, then you will want to start writing on a word processor, like WORD, or WordPerfect. Maybe you're just more comfortable on it. If so, read this next part carefully.
When you write to the word processor you will need to follow a few steps:
1. Write the page as you would any other document.
2. When you go to save the document (Here's the trick), ALWAYS choose SAVE AS.
3. When the SAVE AS box pops up, you will need to save the page in a specific format. Look at the SAVE AS dialogue box when it pops up: Usually at the bottom, you find where you will be able to change the file format.
4. If you have a PC, save your document as ASCII TEXT DOS or just TEXT. Either one will work.
5. If you have a MAC, save your document as TEXT.
Please remember: It is very important to choose SAVE AS EVERY time you save your document. If you don't, the program won't save as TEXT, but rather in its default format. In layman's terms -- use SAVE AS or screw up your document.
You see, when you save your document in WORD, or some other word processor format other than text, you are saving much more than just the letters on the page. You're saving the margin settings, the tab settings, specific fonts, and a whole lot of other settings the page needs to be displayed correctly. You don't want all of that. You just want the text.
NotePad, WordPad, and SimpleText already save in text-only format so if you use one of them as your word processor, you'll get the correct format simply by saving your document.
1. Choose a name. Anyname. If you have a PC that doesen't have windows 95 or higher, you are limited to eight letters.
2. Add a suffix. For all HTML documents, you will add either ".htm" or ".html". (".htm" for PCs running Windows 3.x and ".html" for MAC and Windows 95/98 Machines)
Example: I am looking to name a document I just wrote on a PC running Windows 3.11 for workgroups. I want to name the document "fred". Thus the document must be named "fred.htm". If it was MAC or Windows 95/98 I would name it "fred.html". Please notice the dot before .htm and .html.Don't use quotation Marks I put them there to make it easier to see.
When we get into graphics, you'll see a different suffix. All files used on the Web will follow the format of "name.suffix." Always. Okay, why .htm for PCs running Windows 3.x and .html for MAC and Windows 95/98? Because that's the way the operating systems are made (Windows 3.x, Windows 95/98, and MAC OS are all called operating systems). Windows 3.x only allows three letters after the dot. MAC OS and Windows 95/98 allow four, or more.
HTML stands for Hyper Text MarkUp Language. So you have to "Mark Up" the "Language". HTML consists of flag commands. All Flag commands start with a less that sign "<" and end with a greater than sign ">". There are two types of Flags Start flags and end flags. Start flags tell the browser to start doing something and the end flag make it stop doing something. All end flags also have a / after the <.
EXAMPLE b is the flag to make things bold. Makes sense right? <B>Bold Text</B> there is also the <I>Italic</I>,<U>underline</U>
The <HR> flag
See the lines going across the page? Those are "horizontal Refrence's" to get one of those you use the <HR> Command. The <HR> command does not need an end Flag. You can define the width using an Atribbute For example To get a line that is only half of the page use <HR Width="50%">
Also there is the <BR>which makes the text go to the next line. And the <P>which starts another paragraph.
Another Super Important Flag command is the <HTML> Command you put the start command at the start of every webpage.You will aslo end every Webpage with </HTML>.That tells the browser that it is a HTML document. Do you see the blue bar at the very top of the browser? It has "Basics" in it? Well that is the title of a webpage. To put what you want up there you put <TITLE>Your Title Here</TITLE> That goes right after the <HTML> Flag. Here is the code for a very simple Page. Why don't you open the text editor and try to write what is between the two lines.
<HTML> <TITLE>My First WebPage</TITLE> Here is some <B>Bold Text!</B>
<BR>This is <I>Italic</>text.
<P>I can even write <B><I>Both</I></B>
</HTML>
<HTML> Starts evey web page.
</HTML> Ends every web page.
<Title> This is where you put the title of your page mine is "BASICS!" see the blue bar at the very top of the screen that is where your text is displayed.
The font commands you have already learned. So keep going to learn more!
Heading Commands
Heading commands are used extensively in HTML documents to create headings.
There are six (6) heading commands: <H1> through <H6>. <H1> is the largest and <H6> is the smallest. This is What they look like.
<H1>This is Heading 1</H1>
<H2>This is Heading 2</H2>
<H3>This is Heading 3</H3>
<H4>This is Heading 4</H4>
<H5>This is Heading 5</H5>
<H6>This is Heading 6</H6>
Heading commands create nice, bold text, as shown above, and are quite easy to use. It's a simple H# and /H# command. However, they do have one annoying part.
When you use a heading command,you automaticlly set the text alone. It's like the heading commands carry a <P> command with them. You cannot get other text right next to a heading. Try a few out.
Font Size Commands
There is an easier way to change font sizes. The <FONT SIZE> commands. Heading commands are great for right at the top of the page, but these font commands are going to end up as the workhorses of your pages.
There are twelve (12) font size commands available to you:
+6 through +1 and -1 through -6.
As you've probably guessed, +6 is the largest (it's huge); -6 is the smallest (it's a little too small). Here are a few of them in action. There's no need to show all of them. You'll get the idea. Follow this pattern to place one on your page.
<FONT SIZE="+3">This is +3</FONT>
<FONT SIZE="+1">This is +1</FONT>
<FONT SIZE="-1">This is -1</FONT>
<FONT SIZE="-6">This is -6</FONT>
Note that this first command, <FONT SIZE="--"> is actually doing two things:
1. It's asking for a new font size...
2. then
offering a number to denote the font size.
This is what I like to call a command inside of a command. The technical HTML term is an "attribute". When you have that, you denote the attribute with an equal sign and enclose it within quotation marks. Look above. See the equal sign and the plus or minus number in quotes? That's what I'm talking about.
Also notice that the end command for a <FONT SIZE="--"> flag only requires </FONT>. I should tell you now that there are two other attributes you can use inside the FONT flag: COLOR and FACE. But even if you use all three inside a FONT flag, you still only need one </FONT>.
Remember that an attribute is inside of a flag. When you use an end command, you close the flag, not the individual attributes. So you only need one end flag, like above.
Centering Text
Since you've already done some writing you've no doubt noticed that the text that appeared in the browser window was justified to the left of the screen. That's what's known as the default. It just happens without your specifying any particular justification.
All text in here will be centered
</CENTER>
You can also get text to the right? To do that you have to set the text apart in a seperate paragraph. Remember the <P>? Well you add an "attribute" a command inside the command. add an ALIGN="right"inbetween the P and the >.After you add an attribute you have to add an end flag.
Here's the format:
<P ALIGN="right">Text in here is pushed to the right</P>
See how I added the ALIGN="right" attribute to the <P> command? If you're just using <P> to create a new paragraph, then it can sit all by its lonesome. But the moment you add an attribute, you need to use the end flag.
Links
This is the heart and soul of webpages. What good would it be if you could not get from one site to another?
To make a link to a file in the same folder you would do this:
<A HREF="Index.html">text that links to page</A>
This link birngs up a window so people can email you. <A HREF="mailto:[email protected]">Email me</A>
Images
To place an Image the code is:
<IMG Src="image.gif">
Img Stands for Image
Src Stands for Source
Image.gif is the name of the image. remember name.suffix
You can get images from lots of places. You can simply find one on the web and left-click it and then click save as to save it to your computer. To make an image be a link instead of words you can place an image command where the words would go in a link.
Example
<A Href="index.html"><Img Src="image.gif"></A>
