Learn the basics of HTML

Pagini: 1

pispi
Un admin pt toata lumea !
Din: Bucuresti
Postari: 64

Objective(s):
Learn the basic skills required to make a webpage using Notepad.
Understand common human mistakes of html.
Start:
We will be using notepad to create webpages. Today, writing webpages using the HTML (HyperText Markup Language) is obsolete since programs such as Macromedia Webweaver, Microsoft Frontpage and those other GUI(Graphical User Inferace) drag & drop utilities are available, many of which are free for download, namely, Microsoft FrontPage Express, which comes with Microsoft Internet Explorer 4.0, it's not included in version 5.0. Nevertherless people would prefer to write HTML pages in notepad (like myself). Apart from feeling elite, you understand every bit of what is in the source code and you can modify to suit your specific needs, besides when you learn HTML you will want to further your knowledge and learn the more advanced programming languages such as JavaScript, and ASP(Active Server Page) and all the complex ones, or some more elaborate formatting languages such as CSS (Cascading Style Sheet) which allows an extensive range of HTML element formatting. Enough of the technical jargon though, you need not go that far if all you want to say is Hello World.
Ok. Now to get started we need to open Notepad. If you don't know how we do that, just go to start > run > and enter the program: notepad, then hit enter or you may navigate through: start > programs > accessories > notepad. When notepad is opened a clear text document resides in the window. Now let's get typing right of the bat and all will be explained afterwards. Type the following in the text document:
<HTML>
<HEAD><TITLE>My First Page</TITLE></HEAD>
<BODY>
Hello World
</BODY>
</HTML>
Now, chose File > Save. In the Save As window, select from the Save as type dropdown selection box: All Files (*.*). And name the file: hello.htm. A HTML page is identified by the extensions .htm or .html only. You may open the file in your web browser to see what you have created at this time. Now, to explain the HTML code, each word enclosed with the signs < & > is called a tag, it has a counterpart called a closing tag and is noted by a fowardslash right after the less than sign (</>). Most tags have a closing tag complement, but very few only require a opening tag (<>). The first tag <HTML> must wrap around the entire document, that is, it must be the very first tag and also the very last. This tag is what enables your web browser to identify the page as an HTML document. The <HEAD> tags encapsulate the <TITLE> tags and any other JavaScript or other types of formatting language code. You must place your <TITLE> tags between the <HEAD> and </HEAD> tags. Whatever is between your <TITLE> tags will appear in the browsers' title bar, that is the top of the window. The <BODY> tags encapsulate all that will be displayed within the browsers document window. In this case all we have done is included plain text which reads 'Hello World'. The majority of tags will be placed inbetween the <BODY> tags. Now you're ready to learn what is an attribute. An attribute is a component of a tag which allows greater formatting of the page. Most tags have attributes. For example, by default the page you just created will have a gray background and the text will be black. In order to change such a thing will we will use attributes to extend the formatting power of the document. Attributes are placed within the tag like this: <BODY BGCOLOR="BLACK">. The attribute BGCOLOR is set with a value of BLACK. The syntax for setting an attribute is ATTRIBUTE="VALUE" or ATTRIBUTE='VALUE' or just plain ATTRIBUTE=VALUE where you use either single quotes, double quotes or none, but you must be consistant throughout the entire tag. Something such as this tag: <BODY BGCOLOR="BLUE' FONT='WHITE"> will yield unexpected results becuase when the browsers sees the first " it encapsulates everything inbetween it until the " and says, "BLUE''WHITE" the BGCOLOR, obviously that is not valid. Below is a list of some basic tags, common attributes, a value example for each where applicable and whether or not they have a closing tag.
<BODY></BODY>
BGCOLOR -
set the background color of the document.
eg: BLUE
FONT -
set the default font color of the document.
eg: BLACK
VLINK -
set color when a link from the document has been previosuly
visited.
eg: GREEN
ALINK -
set the color for a link while the user clicks on it.
eg: RED
LINK -
set the color for a new link which as not yet been visited.
eg: PINK
BACKGROUND -
set the source from where the background image is to be loaded from
eg: SPIRAL.GIF
BGPROPERTIES -
only has one value: FIXED, which stops the background from scrolling
with the document.
eg: FIXED

COLOR -
set the color of the font between the font tags
eg: PURPLE
SIZE -
set the size of the font between the tags
eg: 8
FACE -
set the font between the tags, such as Arial, Arial Black, System...
eg: ARIAL BLACK, SYSTEM
<HR>
WIDTH -
set the width either in pixels or percent.
eg: 50%
HEIGHT -
set the height(thickness) of the line using same syntax as the
width attrib.
eg: 4px
COLOR -
set the color of the line.
eg: ORANGE
NOSHADE -
this one doesn't have a value, and it just eliminates the default
shadow on the horizontal rule.
<CENTER></CENTER>
centers the encapsulated text.
 
makes a line break, all text follwing this line appear on a new line.
<A></A>
HREF -
set the source file which this link points to.
eg: http://www.microsoft.com
NAME -
create a jump to a precise location on this page or another.
eg: TOP

Now that you got all that to play with, let's do a example using it all. Open up your page in notepad and start editing:

<HTML>
<HEAD><TITLE>My Second Page</TITLE></HEAD>
<BODY BGCOLOR="black" TEXT="white" LINK="white" VLINK="lightblue" ALINK="red" BACKGROUND="cool.jpg" BGPROPERTIES="fixed">
<CENTER>
HELLO!
<HR WIDTH="90%" HEIGHT="10" COLOR="red" NOSHADE>
Welcome to my page... 
Earthling! 
<A HREF="http://www.disney.com">Click here to go to disney</A> 
</CENTER>
</BODY>
</HTML>

There is the page. The face attribute of the font tag can hold several values which are seperated by commas, so if the first font is not installed on the user system it will default to the consecutive and so on until it finds a match or it just uses the default font for the browser. To create a jump file to a destination on a page, it must first be labeled like this <A NAME="TOP">Top</a>. Then to create the jump you will create a link like <A HREF="#TOP">Top</a>. It it important to note that the # character is placed before the name to distinguish it from a actual link. These jumps are useful if you want to put a jump at the end of a big page that allows the user to jump to the top or if you're making a dictionary type page.

Note:
If this tutorial was valuable to you, and you wish for me to extend the amount of knowledge here please email me.

End.

_______________________________________

Pagini: 1

Mergi la