UGN Security Forums
My ProfileMember DirectoryLogin
Search our ForumsView our FAQView our Site Rules
View our CalendarView our Active TopicsGo to our Main Page

UGN Security Store
 

Network Sites UGN Security, The GoNix Initiative, Elite Web Gamers, Back of the Web, EveryDay Helper, VNC Web Design & Development
November
Su M Tu W Th F Sa
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30
Sponsored Links
Latest Postings
Latest Reviews
Page 1 of 2 1 2 >
Topic Options
Rate This Topic
#19131 - 03/08/02 09:27 PM Html lesson1
Le4rner Offline
UGN Supporter

Registered: 03/05/02
Posts: 562
You will need the following for this lesson.
1.) A text editor. (something like notepad, ***Not Like MS Word***)

2.) An Internet Browser.

3.) A basic desire to learn html.


So please open up your text editor and lets beguin!!!

Every html page starts with the tag. it must also end with the closeing html tag The next tag you will see in every html page is then . Both of these have closeing tags as well so your document looks like this so far. <br/><html><br/><head><br/><title><br/>



Not so hard is it? Lets make a html page now shall we. Pull up note pad, or your text editor now. Okay in between the tags, type in My First Page!!! Now we will add another tag to this lesson. <body> and of course </body> This is where most of your code will go. For now we will simply type in Hello world between them. So your code should look like this now. <br/><html><br/><head><br/><title>My First Page


Hello World



Now Click on >File >Save As > Use the drop down menu to get to desktop and save it as Lesson_1.html You should now have a icon on your Desktop that looks something like your browsers icon. You can double click on it, or click here to veiw your work. Notice in the upper left of the browser... Look it's what you typed in between the title tags. Hello world shold be in the white portion of the browser. Pretty neat hu?
Now close notepad. I had you do this for a reason. You need to know how to ga back and make changes after you have closed Notepad. You can get back to the code a few ways.
Open notepad click on > File > Open > Use the drop down menu to select desk top > Down at the bottom where it says File of type set that to All Files (*.*) Now see your Page? Double click on it.
Right click on the icon on the desk top > Select Open with > Notepad (or other text editor)
Double click on the icon then right click anywhere in the page and select veiw source.
All of these will open your html code up for you again so you may edit it some more. Nifty hu? So lets do just that. Open your code back up in Notepad.
In many tags in html you can add many different variables. This holds true for the tag.


What this dose is fairly simple

bgcolor="black" This made your back groung color black.
text="white" This will make the default for your text color white.
Link="red" This will make your links red.
vlink="red" This will make your visited links red. For instance, somone clicks a link then comes back the link will still be red instead of purple.
alink="red" This makes active links red.
So once again here is your code at this point.



My First Page


Hello World



So edit and save your code again. Now take another look at what you have done so far. Go ahead, we will wait. If you see no changes, make sure you save with the same file name on desktop. If you did that, then hit refresh. Ready? Good lets continue!
Next we will learn the

and tags along with an attribute. Just below type in


You should have Hello World

below that type in

Below that type in



And finaly below that type in Now we are getting somewhere

Dont for get to close the

Lets look at the code.



My First Page




Hello World


Now we are getting somewhere




Make the changes to your code save it to the same file, and take a look at what this has changed on your web page.
The

tag starts a new paragraph, where the tag is a caraige return.

will place your text in the center. *Note-this also drops everything down a line You have 2 other options as well.

and

Cool but kinda basic right? Lets make the heading stand out, and learn another couple of tags and attributes.


horizontle rule tag
Font tag, *Needs an end tag.
Makes text bold *Needs an end tag.
Makes text itallic *Needs an end tag.


Lets start with the tag. Now I would say the tag is one of the most important tags in a web page. You can put these anywhere in your code. They will decide, what color the text is, how big it will be, what style font it will be. There are 3 attributes for the font tag.
Color
Face
Size

You would type them in something like this. Now they don't have to be in any speacial order, nor do you have to use them all!! You can use just one if you wanted to.


Color You can assign color for sections of text.
Size Sizes run 1 thru 6. 6 is the largest, 1 is the smallest
Face you can assign a font style to your text. I belive all the ones in note pad work. Just go to [edit] at the top. Then set font. There is a whole list to work with. But there are more. Play around to find what works and what dosen't.

So now that you understand the tag, lets use it. Right above Hello World Lets add . As I mentioned above requires a closing tag. So below Hello World type in . Lets look at the code shall we!


My First Page





Hello World




Now we are getting somewhere




Now save that and take a look at it. You should see Hello World a little different now. It should still be center, but blue and bigger!! Like a heading should be. If not check your code against the one on the lesson.
Now lets look at the


tag. Just above and below the tags add a
tag. This will put a horizontal line above and under Hello World. But we can do more with this tag as well. You can set the width of the Line in pixels or Percent. Plus you can define what color it will be in the tag. Lets set the width to 50 pixels and the color to gray. One last note on this tag it requires no closeing tag. So it would look like.


Below I included an example of with precent instead of pixels


So here is your code now.


My First Page







Hello World






Now we are getting somewhere




Now save your work and take look at it. You should see a gray bar above and below Hello World. If not compare your code to the one above.
Now the and tags will make text bold and itallic. Both require closing tags. You can use them anywhere withing the tags. I will use each on our code below in and example.
This is and example of the tag


My First Page





Hello World






Now we are getting somewhere




This is and example of the tag


My First Page





Hello World






Now we are getting somewhere






Starting to look like that jiberish you used to see hu? But now it should make more sense to you. This concludes lesson one.

_________________________
http://promodtecnologies.com/rrfn

Top
Sponsored Links
      
#19132 - 03/08/02 09:28 PM Re: Html lesson1
Le4rner Offline
UGN Supporter

Registered: 03/05/02
Posts: 562
Leson 2

############################################################


I rember when I was learning the basics. I wanted to get to the good stuff. Pictures and links and stuff that makes a web page a web page. Well thats where we are headed here.
First rember the tag? Well there is another way to change the size of your text.

thru



These tags require closeing tags.

is the largest text, where

is the smallest. Kinda backwards from the tag hu? Now to the good stuff.
First new tag we will learn is . IMG is short for image. Src is short for source. Easy as pie right! Good, lets learn to use it.
You use this tag to place a picture in your page. To use it you must know the URL (webaddress) of your picture. You can use the pic on this page up top. Simpley right click on the picture. Click on > Properties > Highlight the web address > right click on the highlight > and click copy.
Below "Now we are getting somewhere" in your code from Lesson one add Your code should look like the following


My First Page





Hello World





Now we are getting somewhere







Always rember to place the little quotation marks "" in where they need to go. The tag requires no end tag. Now update your code and take a look Now that we are working with pictures you can also add a backgroung image instead of a solid color. In the tag you would take out the bgcolor statement. Now put in its place Background="any image file web address.gif or jpg"
Next thing you need to know is how to make links. This is done with the tag. So lets add some links shall we? A wealth of knowledge
What this will do is make A wealth of Knowledge red. Because as you rember we made all links red in the tag. Everything between and tags is what is seen on your web page. I will do you one better. You can even use the tag in there. as well as

and some others. So lets combine our tag with the Take the Picture you just put in your code out and put in the following..... And lets center it while we are at it.


Did you notice I aded the and

tags? This will keep the words as a link but center them under the picture. This also makes the picture a link. Got it? Lets take another look at our code now.
Code:


My First Page







Hello World






Now we are getting somewhere









Now update your code and take a look Pretty neat hu? I will tell you another trick. You can use what is known as hex values to define color. For example the hex value of this site background is #194B6E. Here is a site that will give you 216 web safe colors. Play with what you have learned for a while. Be creative. You just might surprise your self. This concludes leson 2 Next lesson Tables.

_________________________
http://promodtecnologies.com/rrfn

Top
#19133 - 03/08/02 09:29 PM Re: Html lesson1
Le4rner Offline
UGN Supporter

Registered: 03/05/02
Posts: 562
Lesson 3 Tables

########################################################


In this lesson we are going to cover some of the most used tags in HTML today. We are going to learn about tables. Now tables give you much better control over where things go on a page. How do they do this? Well they divide your page up into a grid. A table is made up of Cells and Rows. Cells are put in horizontaly, rows are put in verticly. Below is a diagram to explain.
Row 1
Cell 1 Row 1
Cell 2
Row 2
Cell 1 Row 2
Cell 2

Get the general idea now? If not, don't worry by the end of this lesson you will be a table master. Now lets look at our code from the last lesson.



My First Page








Hello World






Now we are getting somewhere












Now onto tables!!! Here things get a little more tricky. But you can handle it right! To start a table you use the

and
tags. Each of these requires an end tag. starts everything off. stands for table row. Pretty simple right?
stands for table cell. This proves yet again that Netscape is on crack! Why it isn't no one seems to know. But it is . So now that we have an idea how this works let me give you an example of the layout.

















Row 1

Cell 1

Row 1

Cell 2

Row 2

Cell 1

Row 2

Cell 2



Looks like a lot hu? Don't worry about it. It's a peice of cake. Lets break it down. As I said earlier, the
tag started and stoped the table. That is easy enough, Then we had to start a row with the tag. Then we could put in cellswith the
tag. You might have noticed that this has the same info as the diagram up top. I made that with a table. And so will you. The cells is where you put what you want your site visitor to see.
Now in past lessons most tags had attributes that you could add to them to get more out of them. Table tags are no different. The tag alone has quite a few you can add to change it. See the list below.

cellpadding Defines the amount of padding on the inside of the cell in pixels. i.e.
would leave 10 pixels of padding all the way around the inside of a cell
cellspacing Defines the amount of padding in between cells in pixels i.e.
Puts 10 pixels in between each cell all the way around
border Defines the thicknes of a border in pixels i.e.
would make a border around every cell 4 pixels wide.
width Defines the width of the table as a whole usaly in percent. i.e
will make your table stretch to 100% of the screen width.
align Defines where a table will be placed on the page. (similar to

) There are three options for this one. Left, Center, Right. i.e.

will set your table hoizontaly dead center of the page.
valign Defines the verticle alignment. There are 3 options for this attribute as well. Top, Center, Bottom, i.e
would dissplay your table as high on the page as it possibly could.
BGcolor Defines the Back ground color or the entire table or individual cells. Same as useing BGcolor in the tag. See Lesson 1


Now the tag can use a few of these same tags. Below is a chart of the tags you will want to use with the .

Align Defines where the row is place horizoltaly. options are Left, Right, Center, i.e. this places the row center
Valign Defines the verticle alignment of a row. Options include Top, Center, Bottom. i.e. verticlely aligns the row center.
Bgcolor Defines the Back Ground color for the row. i.e. sets the background color to black for this row.


The . See chart below...

Align Defines where the row is place horizoltaly. options are Left, Right, Center, i.e.
tag has the same attributes as the
this places the row center
Valign Defines the verticle alignment of a row. Options include Top, Center, Bottom. i.e.
verticlely aligns the row center.
Bgcolor Defines the Back Ground color for the row. i.e.
sets the background color to black for this row.
_________________________
http://promodtecnologies.com/rrfn

Top
................. Table Column
................Table Column Group
/ ................Comment


D

...............Definition Description/Term
.................Deleted Text
............... Definition
................Directory List
.............. Division Marker
....................Definition List
................Definition Description/Term


E

.............Emphasis
...........Embed


F

Fieldset
Font
Form
Frame
Frameset


H

...............Head

......................Horizontal Rule
..........................HyperText Markup Language

..................Heading


I

.......................Italics
#19134 - 03/08/02 09:30 PM Re: Html lesson1
Le4rner Offline
UGN Supporter

Registered: 03/05/02
Posts: 562
..................Caption
................. Center
&#code; ................Character Entities
...................Citation
.................Code
Preview

Featured Member
Registered: 10/28/14
Posts: 1
Forum Stats
2150 Members
46 Forums
35738 Topics
70908 Posts

Max Online: 1567 @ 04/25/10 05:20 AM
Top Posters
UGN Security 28899
Gremelin 7193
§intå× 3255
SilentRage 1273
Ice 1146
pergesu 1136
Infinite 1041
jonconley 955
Girlie 908
unreal 860
Newest Members
HushHush, golqm, Tim050, Gecko666, defghi795767
2150 Registered Users
Who's Online
0 registered (), 477 Guests and 284 Spiders online.
Key: Admin, Global Mod, Mod
Latest News
luxury goods sales at $405B by 2019
by golqm
10/28/14 05:19 AM


Donate
  Get Firefox!
Get FireFox!