HTML documents must be text only. When you save an HTML document, you must save only the text, nothing else. You can use NotePad and WordPad. If you are using another word processor, like WORD, then you should save file as text. For all HTML documents, you need to add suffix either ".htm" or ".html". (".htm" for PCs running Windows 3.x and ".html" for MAC and Windows 95/98 Machines). You can also use editors of browsers (Netscape Communicator, Internet Explorer, etc.) or other HTML editors (Microsoft Front Page, HotMetal, etc.) kullanabilirsiniz.
You can open the html document in the browser using FILE menu and OPEN, OPEN FILE, OPEN DOCUMENT, or words to that effect.
You can look at an HTML document (known as the "source code") using VIEW menu and DOCUMENT SOURCE or SOURCE.
A web page consists of two blocks: head and body. Head block carries document information where in body block you can find the document itself. Tags are the basic building block of the web page. Elements (title, paragraph, list, table, image, etc.) can be added onto a page using HTML tags. Regardless of whether it's to format text or to define sections, tags can be recognized from the "<" and ">" signs. Tags come in two flavors: Empty tags and Container tags.
Empty tags do not require a closing complimentry tag. Generally, empty tags are sign posts. Two examples of empty tags are the IMG (image) tag and the HR (Horizontal Rule) tag.
Container tags on the other hand 'hold' something between their opening and closing tags. You can always tell a container tag because it always has a complementing closing tag following it. Whatever the purpose of the tag, it only affects the text that it holds.
An example of a container tag is the underline tag: <U>This text is underlined!</U>
HTML tags can be written using small letters only, capital letters only, or mixed. If there is a tag that is not defined for a browser, then the browser will ignore that definition and will not give an error message.
<TITLE> BASIC TEMPLATE </TITLE>
<META HTTP-EQUIV="Keywords" CONTENT="HTML, JAVA">
<LINK REV="made" HREF="mailto:email@example.com">
A Little Bit of Text
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
This is a tag that you may not find on all of the web pages that you surf to. Placed even before the opening element, this tag states what version of HTML you're using to write your page. If you're using HTML 3.2, this is the tag that you would want to place at the top of your page. What is does is to tell the computer what kind of document it is that is being uploaded to it.
<HTML> … </HTML>
This tag identifies what kind of document is being presented to the browser. While it's function is much like the DOCTYPE tag it's tanslated a bit different. A loose analogy would be: DOCTYPE tells the world that this is a book in english using terms from the 1990's including sporadic references to browser extensions. <HTML> says, "book" and not anything else helpful.
Many designers will tell you that this tag isn't necessary. Browsers will correctly translate a html document anyhow when it hits the first HTML tag and so it doesn't really do anything for you to include this tag. While not a large piece of identification it does serve as documentation for your page.
<HEAD> ... </HEAD>
Within the HEAD section lies all of the identification data for the page.
These elements are all found within the HEAD section of the page. They define the page as much as anything does. Of the head elements the TITLE, STYLE and SCRIPT are container tags and require closing tags. The remaining elements are empty and closing tags are forbidden to them.
<TITLE> … </TITLE>
Like the HEAD tag, the TITLE tag is a container element. It requires an opening and closing tag and only effects the text that it encloses. This tag identifies the title that you would like to be displayed for the page. This title doesn't show up on the page itself but is displayed at the top of the browser.
ISINDEX Used for simple keyword searches, see PROMPT.
BASE Defines the absolute address of the current page to help resolve relative addressing issues.
STYLE Reserved for future use with style sheets.
META Used to supply META information as name/value configuations.
LINK Used to show the relationship of the page with other documents.
<BODY> A Little Bit of Text + Image + … </BODY>
Within the BODY section lies all of the content for your page (Frames, forms, tables, lists, pictures, and anything else that you might be able to stick into it).
bgcolor="#aaaaaa" text="#000000" link="#aa0000" vlink="#00ff00" alink="ffffff">
The background attribute allows you to take a small image and have it as a background layer for your page.
What your browser does is take the image and lays it down in the upper left hand corner of the browser and then copies it across, left to right, and down, top to bottom, until the entire screen is covered (tile). After that, it lays out the contents of your page over the background. If you need to scroll up or down to see the entire page, the background is scrolled with it so it appears that the content has been glued to the background.
This attribute controls the color that the background will be if you are not using the background attribute. Even if you are using the background attribute you should still define the bgcolor. This is because some older browsers do no recognize the background attribue and will not tile (copy the file across and down) the image for your page. When this occurs the older browser will display the bgcolor instead.
This attribute controls the color of your text as it is displayed on your page.
LINK, VLINK=, ALINK=
Link defines the color that all links on your page will be displayed in before they are followed. Vlink controls the color after they are followed. Alink controls the color that your link is displayed in while you are clicking on it.
link="#aa0000" vlink="#00ff00" alink="#ffffff"
If you choose not to define the colors within the BODY tag, you're browser uses the colors that have been chosen in the preferences section of your browser. Because of that, when someone else is looking at your page it can be quite a different experience. From The Hidaho Color Center you can select different colors and see how well they work together.
<H1> … </H1> , <H6> … </H6>
There are 6 fixed font sizes where 6 is the smallest and 1 is the largest of these sizes.
<H6> Hello </H1> Hello
<H4> Hi </H6> Hi
<B> … </B>
Makes the characters bold.
<B> Hello </B> Hello
<I> … </I>
Makes the characters italic.
<I> Hello </I> Hello
<U> … </U>
Makes the characters underlined.
<U> Hello </U> Hello
<SUP> … </SUP>
Makes the characters superscript.
<SUP> Hello </SUP> Hello
<SUB> … </SUB>
Makes the characters subscript.
<SUB> Hello </SUB> Hello
<B><I></I></B> … and others
All text format tags can be nested.
<B><U> Hello </U></B> Hello
Block level elements cause paragraph level breaks. They usually act as container elements and require a closing tag. They hold both text and text level (style formatting) elements.
This element defines a paragraph. The closing tag does not need to be explicitely stated.
Groups related items togethers and may be used with the align option
Centers all text that is between the opening and closing tag.
Horizonta ruler, displays a seperation rule on the web page.
Used to note a quotation taken from outside of the present text
The beginning tag for an unordered list
The beginning tag for an ordered list
The beginning tag for a definition list
Used to define a fill out form processed by http servers.
This predates the FORM tag. Used for simple kinds of forms that have a single text input field.
Denotes the beginning of a table grouping
<P> … </P>
Used for paragraphs. Puts an empty line between two lines.
Aligns the text of a paragraph.
<CENTER> … </CENTER>
Aligns paragraphs as centered.
Cursor moves to the next line without adding an empty line.
The horizontal rule supplies a bar that runs the width of the page.
<HR width=? size=? noshade align=?>
Can be specified as an absolute in pixels (140, 160, etc...) or as a percentage (30%, 75%, etc...). It defines the actual width of the bar on your page.
This defines the height of the bar. Unlike the width tag, the size tag may be defined only as a specification of pixels.
This displays the rule as a solid line with no shadow.
Left, right, and center are the valid options. These options aligns the ruler against the left margin, right margin, or centers it between the two.
Elements within a list may contain both block level and text level items. The exception to this is that no headings or address elements may be included.
OL An Ordered list
UL An Unordered List
DL A Definition List
LI A List Item
DT Define Term
DD Definition Description
(type=disc can also be used)
There can not be more than 3 nesting for lists.
All of the elements within a table are container elements.
TABLE Shows the beginning of the Table within the page.
TR Shows the beginning of the Row within the table.
TH Shows the beginning of cell heading within the table.
TD Shows the beginning of a data cell within the row of a table.
<TABLE> … </TABLE>
Defines start of a table command. Border is used to draw border around cells (in pixels).
<TABLE border=3 cellspacing=3 cellpadding=3>
Defines title of table.
Adds a row to the table. Text is aligned using ALIGN command.
Used for titles, writes bold and centered.
Adds a column to the table. Text is aligned using ALIGN command.
<tr><th>Title1</th><td>1</td> <td>2</td> <td>3</td></tr>
<tr><th>Title2</th><td>4</td> <td>5</td> <td>6</td></tr>
<tr><th>Title3</th><td>7</td> <td>8</td> <td>9</td></tr>
<tr> <td>1</td> <td rowspan=2>2</td> <td>3</td> </tr>
<tr> <td>4</td> <td>5</td> </tr>
<tr> <td>1</td> <td colspan=2>2</td> </tr>
<tr> <td>3</td> <td>4</td> <td>5</td> </tr>
A Holds either name information or linking data.
BASEFONT Redefines the base size of text.
Hx Shows the beginning of a header (x is a variable from 1 to 6).
HTML Shows the beginning of an HTML document.
IMG An empty element used to include graphics within a page.
APPLET Used to include JAVA applets within a page. Placed within the HEAD section.
FONT Used to alter the size and color of text.
BR Used to induce a line break within the text.
MAP Begins a map file for a client sided image map.
Character Entities are also called escape codes. These are characters that browsers aren't able to deal with easily.
For example, all tags begin with < and end with >. So if you used those characters in your regular text it could cause you all kinds of problems when it was displayed. Instead, you need to use escape codes for these characters. To show < you would use the code <. To display the > you would use >. You also need to avoid the & sign because most browsers use it to begin all character entities. & is the code for that. If you have a choice you should use the numeric escape codes. This is because many older browsers do not know the letter equivalents. The letter codes are easier to remember but they are not known by all browsers.
Character Numeric Escape
< < &<
> = >
x > 10 à x>10
x < 10 à x<10
" aa " à "aa"
& aa & à &aa&
Comment line can be recognized by its beginning "<!--" and ending "-->" symbols. Anything between the two parts of the tag is ignored by the browser.
Comment lines help you to remember what part of your source code controls what area of your page. A good practice you may want to develop is to leave a blank line before and after the comment line.
<img alt="text" align=" " width="999" height="999" vspace="999" hspace="999" border="9" src="url address">
To put an image or picture onto your page the IMG tag is your main tool. Text is positioned next to the image using the align option. The SRC part of the IMG statement specifies where your image is located. And the ALT option displays the specified text if a browser is unable to display the image. The alt="txt" option should be included in each IMG tag. This option tells the browser to display a short message in place of the image if the graphic does not display or if the surfer has turned graphics off.
Two useful options within the IMG element is WIDTH=? and HEIGHT=?. These options are used to let the browser know what size the graphic is that's being used in the page. It then reserves the space for the image (outlining it in a blank square), displays the text for the page, and then returns to load the image. As you can imagine, this saves time for the user in that he/she can begin reading the text while they wait for the graphic to load.
Additionally the WIDTH and HEIGHT options will let you change the size of the image to either enlarge or shrink it. This doesn't change the storege requirements of the image.
Netscape also allows you to specify the gutter around the image. "The gutter" is just a term referring to the amount of white space around the image. VSPACE refers to the amount of space above and below the graphic. HSPACE refers to the space to the left and right. If you don't specify these values the default is to butt the text right up against the image.
The final atribute for the IMG statement is border=? What this option does is to specify the border, which is placed around images that are used as a link. This border around image links lets the user know that the image is clickable. Be careful not to set the border to 0 (BORDER="0"). This erases the border around the image link and the user may not know that the image is actually a link!
The exception to this is when using the mailto option as a link. The graphic for the mailto option is usually self- explanatory. So the border can be set to 0 (border=0) for opening an email window.
Netscape Navigator extensions pertaining to the align option of the IMG statement.
Align="left" and Align="right" determine which margin the image rests against. Additionally, instead of a single line of text aligning against the image, multiple (2) lines of text are now displayed.
Align="texttop" aligns the baseline of your text with the top of the tallest text.
Align="absmiddle" aligns the middle of the text with the middle of the inline graphic.
Align="absbottom" aligns the bottom of the text with the bottom of the inline image.
Align="baseline" behaves just as the normal bottom align option does, aligning the current text with the bottom of the image.
Microsoft Internet Explorer Extension Here Microsoft has added a file type rather than a code. The .BMP (bitmap) file type is now allowed with Microsoft.
There are three types of links: absolute, relative, and jumps. URLl addresses are case sensitive and must be spelled the same way in the links as they are in the directory.
Absolute addresses point to the full address of the page. Beginning at the site name and continuing thru to the page name if need be.
A relative address is how you would reference a page that was in the same directory that the current page is. So if your directory were that above, to reference the page planet, all that you would have to write would be:
<a href="planet">Tripod planet</a>
Note that relative addresses can be used only when you are linking from one address (page) to another that is within the same directory.
Section anchors (jumps) are used primarily to move from one section to another within the same page. The jump comes in two parts: the first is the name where the link points to and the second is the link itself. To name the receiving point for a jump you need to use the following tag:
<a name="section">section</a> (section is defined by you)
This must be the same name (case sensitive) as you use with the linking tag. To link to a section within the same page your link would look like this:
To link to a section that is within a different page your link would be:
BASE tag lets you specify, explicitely, what the url for the current page is. This allows you to use relative links in your page without worrying weather or not your browser will actually go there.
META tags are used as a major source for documentation within your page. These tags help identify the maker of a page and may help you pursue your rights under copyright infringement.
META tags are also used by some search engines to include your page in their index.
META tags which have the HTTP-EQUIV are used to generate a response header for the page when a computer queries it. What this does is help the server side computer identify your page and what it should do with it.
<META NAME="description" CONTENT="This is a tutorial site">
This tag is used just as the keywords tag is. The description tag tells the search engine how you would like your page to be described..
<META NAME="author" CONTENT="William Cinton">
Tells who wrote the page.
<META HTTP-EQUIV="Reply-to" CONTENT="firstname.lastname@example.org ">
Tells anyone who's interested how they can contact the author.
<META HTTP-EQUIV="Keywords" CONTENT="HTML, JAVA">
<META NAME="Keywords" CONTENT="HTML, JAVA">
Specifies the keywords for some of the search engines.
LINK tags behave very much like META tags do but they're purpose is slightly different. Through LINK tags you are able to show where in relation to the other pages, the current page is within the site. You are able to point to the main page of your site, the previous page (if in your mind you've meant for one page to be viewed before another), The Table of Contents, and other items that the page may have a relation to.
<LINK REV="made" HREF="mailto:email@example.com">
Specify an e-mail address where the author of the page may be contacted.
<LINK REL=REL="copyright" HREF="http://learnhtml.home.ml.org">
Points to the page where the copyright information for the site is kept.
VIDEO OR SOUND ADDITION
<EMBED src=dosya.avi> width=100 height=100>
With forms you can put a survey on your page to see what people think. You can use forms as an order form for your site, or just as a questionnaire to see what people think of you pages. Regardless of why you use them, forms may just be the trick you need to get the feedback you desire.
<FORM> is a container tag and holds whatever form elements you might decide to use.
<FORM method="post" name="views" action="mailto:firstname.lastname@example.org">
This command does 3 things. First, it tells the browser you've begun a form and you want to call it 'views'. Second, it says that "Post" is the method you want the results to be handled. And third, you want the data posted to an e-mail address. Note that there are no spaces between 'mailto:' and the e-mail address you specify.
INPUT type tells the browser the name, type and size of the input box.
<INPUT Type="text" name="My_name_is" size="30">
"text" tells the browser that this is a textbox form.
name=? defines the name of the form
size=? Defines the size of this form to be x characters in length.
Instead of a one row input this is used to input more than 1 rows.
<TEXTAREA name="I_think" rows=6 cols=30></textarea>
rows=? tells the browser that this textarea box is x rows tall.
cols=? tells the browser that this textarea box is x characters long.
<INPUT - Radio Buttons>
The post would only take the radio button selected. It will only let you select 1 (one) button. So the name will be the same regardless with the value differing per your suggestion.
<FONT color="#ff0000"> A </font> <INPUT type="radio" name="Letter_Grade" value="It's an A">
<FONT color="#00a500"> B </font><INPUT type="radio" name="Letter_Grade" value="It's a B">
<INPUT - Checkboxes>
As opposed to Radio Buttons, check boxes can have more than 1 option selected. So, while you might ask what computer brand a reader prefers using radio buttons, you would ask what peripherals a reader has hooked up with checkboxes and present a list of choices.
<INPUT type="checkbox" name="periphrials" value="mouse">
A pop - up box is a text box with a difference. This is a box that displays one option of several possible. An Arrow is displayed next to the box. When the user clicks on the arrow, the pop – up box opens and displays all of the possible options that are available.
<SELECT Name="I_Use_The_Web_moslty_for" size="1">
SELECT begin the pop - up box
SIZE=? defines how many options will show before you have clicked on the pop - up box.
OPTION SELECTED notes the option that will be initially displayed in the box.
OPTION notes the item that can be selected.
At the end of your forms page you insert the buttons that either submit or reset your forms.
<INPUT TYPE="submit"> or <INPUT TYPE="reset">
If you like you can use an image of your own devising for the submit button.
<INPUT TYPE="IMAGE" src="foo.gif">
<TITLE> Application Form </title>
<FORM method="POST" action="mailto:email@example.com">
<p>Your Name     <input type="text" name="NAME" size="20"></p>
<p>Your Surname <input type="text" name="SURNAME" size="20"></p>
<p> <input type="submit" value="Post">
<input type="reset" value="Reset"> </p>
FORM POSTED FROM MOZILLA
File Name: Part_1 text file
File Type: Type: application/x-www-form-urlencoded
<IMG SRC="turkeym.gif" BORDER=1 USEMAP="#Turkey" ISMAP>
<AREA SHAPE=POLY COORDS="40,40,40,110,160,110,160,40" HREF="istanbul.gif">
<AREA SHAPE=POLY COORDS="170,10,170,80,270,80,270,10" HREF="safranbolu.jpg">
<AREA SHAPE=POLY COORDS="230,85,230,150,320,150,320,85" HREF="sumela.jpg">
<AREA SHAPE=POLY COORDS="330,20,330,130,420,130,420,20" HREF="yayla.jpg">
RECT (4 COORDINATES)
CIRCLE (CENTER COORDINATE, RADIUS)
FRAMESET tag is the first element of the frames page. <FRAMESET> is used to set the size of the frames to be displayed.
<FRAME name="nav" src="navbar.html">
<FRAME name="top" src="banner.html">
<FRAME name="main" src="start.html">
<BODY bgcolor="green" text="orange" link="red" vlink="blue">
YOUR BROWSER IS NOT CAPABLE OF SHOWING FRAMES.
Note that you can define the frames as being rows (rows="25%,*" or rows="140,*") or columns (cols="25%,* or cols="140,*"). The number of rows or columns is determined by the number of sizings that are defined. You can define as many frames in a frameset as you like.
<FRAMESET cols="15,125,*" border=0>
The first column here would be 15 pixels in width, the second measures 125. And the third (noted with the '*') would be given whatever space is left over after the implicitly sized frames were laid out.
Here, in the second example, the first column would have been laid out using 10% of the available window space. As would the second and third columns. The fourth column would have been laid out with whatever space had been laid out after the first three frames had been drawn.
This attribue is used if you wish no frame borders to be displayed anywhere within the frameset's window. When this attribute is found, the browser lays out the pages for the frames directly against the frames' edges.
<FRAME name= src= NOWRAP scrolling=[yes|no|auto] border=0 marginheight= ? marginwidth= ?>
Frame itself is defined with the <FRAME> element. The order in which the frames are defined must follow the same order as when they were sized in the frameset tag.
Name is what you wish to refer to the frame itself as. You'll need this when you're wanting to load a document into the frame.
This attribute specifies what page will be loaded into this frame when it is first laid out. Technically, the src attribue is optional. However, if you do not specify it, there are some browsers out there that will not be able to load you frames and will crash as a result.
This will cause your browser to lay out the frame's contents in a single line until it comes to an explicit line break, such as , <BR>, or <P>. If the content of the page being loaded has large paragraphs, and this attribue is being used, the paragraphs will be displayed as very long lines that you will have to scroll to the right in order to read.
As in the frameset tag, this attribute tells the browser not to display any borders. Used within the <FRAME> element however, it tells the browser to restrict the frame borders to the one frame only!
This attribute instructs the browser to display the frames document with x amount of space between the frame border and the document being loaded. Space is measured as a number of pixels in this case.
Like marginheight, marginwidth places space between the document and the frame edge. But in this case, it's the side of the document and the frame border.
When specified as "yes" it will define a scrolling frame.
Will lock the size of the frame.
<FRAME name="rex" src="page1.html">
<FRAME name="secondcolumnfirstrow" src="thrrpt.html">
<FRAME name="secondcolumnsecondrow src="thrrpt2.html">
Note that when you're dividing a frame, the rows=/cols= attribute of the <FRAMESET> tag is switched. Meaning that a column has to be divided into rows and that a row must be divided into columns. You can't divide a column into more columns.
<NOFRAMES> .. </NOFRAMES>
The noframes tag is used to supply information to the reader if their browser isn't capable of viewing frames.
When defining the default page within the <NOFRAMES> section it's a good idea to treat the page as you would a normal web page. Set colors and the background. Inform the viewer that they do not have a frames capable browser. Show a link where they can see a non-frames version of your page and/or a place where they can get a frames capable browser.
<A href="TheSecondPage.html" target="fred"> Goto the Second Page </a>
You can see that the value for the name in the frame tag and the value in the target field for the link are the same. What the target attribute does is tell the browser to find a frame with the same name as the target. Once found, load the page into that frame.
This word is used when you've loaded a second frames page into a frame of another frames page (nested frames). What it does is load the specified page into the original frame of the first set. In other words, it erases the second frames page that was loaded into the first.
This word is used to load the page into the top of the window. It erases all frames within the current window and loads the specified page into it.
This word loads the defined page into the same frame where the link is shown Thereby erasing the current page in that frame.
This word loads the defined page into a new, unnamed, window. You would want to use this word when you are linking to a site outside of your own but would like to keep your page displayed on the surfer's monitor at the same time.
Refreshing Multiple Frames
A common problem with frames is that, at some point, most aspiring web masters would like to change the contents of two or more frames at the same time.
The easiest is simply to load a new page using the target="_top" attribute.
<A href="secondframepage.html" target="_top"> Goto second frames page </a>
When this is done, the first frames page is erased from the window. The "secondframepage.html" is then loaded into the empty window.
<FRAME NAME = "Top" SRC="top.html">
<FRAME NAME = "Bottom" SRC="fill.html">
Now, it's important to note that each frame has been given a name. The name attribute is optional but when your renewing multiple frames it's something that you have to include without fail.
parent.Top.location = "banner.html";
So, to trigger loading the pages into the frames, using an image as your link:
<INPUT type="image" src="gotobutton.gif" onClick="CHANGE()">
Remember that "CHANGE" is upper case when it was defined so must be uppercase when you're referencing it.