Previous Thread
Next Thread
Print Thread
Rate Thread
#19131 03/08/02 07:27 PM
Joined: Mar 2002
Posts: 562
Le4rner Offline OP
UGN Supporter
OP Offline
UGN Supporter
Joined: Mar 2002
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!!!

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

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 <title> 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. 
<html>
<head>
<title>My First Page</title>
</head>
<body>
Hello World
</body>
</html>

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 <body> tag. 
<body bgcolor="black" text="white" link="red" vlink="red" alink="red"> 

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. 

<html>
<head>
<title>My First Page</title>
</head>
<body bgcolor="black" text="white" vlink="red" alink="red">
Hello World
</body>
</html>

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 <body> type in <p align="center"> 
You should have Hello World 

below that type in  

Below that type in <P align="left"> 

And finaly below that type in Now we are getting somewhere 

Dont for get to close the 

 Lets look at the code. 

<html>
<head>
<title>My First Page</title>
</head>
<body bgcolor="black" text="white" vlink="red" alink="red">

<p align="center">
Hello World

<p align="left">
Now we are getting somewhere

</body>
</html> 

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. <p align="center"> will place your text in the center. *Note-this also drops everything down a line You have 2 other options as well. <p align="left"> and <p align="right"> Cool but kinda basic right? Lets make the heading stand out, and learn another couple of tags and attributes. 
<hr>  horizontle rule tag  
<font>  Font tag, *Needs an end tag.  
<b>  Makes text bold *Needs an end tag.  
<i>  Makes text itallic *Needs an end tag.  


Lets start with the <font> tag. Now I would say the <font> 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. 
<font color="red" size="6" face="HE_TERMINAL"> 

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 <font> tag, lets use it. Right above Hello World Lets add <font Color="blue" Size="6" Face="Verdana"> . As I mentioned above <font> requires a closing tag. So below Hello World type in </font>. Lets look at the code shall we! 
<html>
<head>
<title>My First Page</title>
</head>
<body bgcolor="black" text="white" vlink="red" alink="red">
<p align="center">

<font Color="blue" Size="6" Face="Verdana">
Hello World
</font>


<p align="left">
Now we are getting somewhere

</body>
</html> 

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 <hr> tag. Just above and below the <Font> tags add a <hr> 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. 
<hr width="50" color="gray"> 
Below I included an example of with precent instead of pixels 
<hr width="50%" color="gray"> 
So here is your code now. 
<html>
<head>
<title>My First Page</title>
</head>
<body bgcolor="black" text="white" vlink="red" alink="red">
<p align="center">

<hr width="50" color="gray">
<font Color="blue" Size="6" Face="Verdana">
Hello World
</font>
<hr width="50" color="gray">


<p align="left">
Now we are getting somewhere

</body>
</html>

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 <b> and <i> tags will make text bold and itallic. Both require closing tags. You can use them anywhere withing the <body> tags. I will use each on our code below in and example. 
This is and example of the <b> tag 
<html>
<head>
<title> My First Page </title>
</head>
<body bgcolor="black" text="white" vlink="red" alink="red">
<p align="center">
<hr width="50" color="gray"> <font Color="blue" Size="6" Face="Verdana">
Hello World
</font>
<hr width="50" color="gray">

<p align="left">

<b> Now we are getting somewhere </b>


</body>
</html>
 This is and example of the <i> tag 
<html>
<head>
<title>My First Page</title>
</head>
<body bgcolor="black" text="white" vlink="red" alink="red">
<p align="center">
<hr width="50" color="gray"> <font Color="blue" Size="6" Face="Verdana">
Hello World
</font>
<hr width="50" color="gray">

<p align="left">

<i> Now we are getting somewhere </i>


</body>
</html> 


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

Last edited by Gremelin; 02/03/17 10:55 PM.
#19132 03/08/02 07:28 PM
Joined: Mar 2002
Posts: 562
Le4rner Offline OP
UGN Supporter
OP Offline
UGN Supporter
Joined: Mar 2002
Posts: 562
Leson 2

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


Code
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 <font size="6"> tag? Well there is another way to change the size of your text. 

<h1> thru <h6> 

These tags require closeing tags. <h1> is the largest text, where <h6> is the smallest. Kinda backwards from the <font> tag hu? Now to the good stuff. 
First new tag we will learn is <img src>. 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 <img src="http://www.promodtecnologies.com/rrfn.jpg"> Your code should look like the following 

HTML
<html>
<head>
<title>My First Page</title>
</head>
<body bgcolor="black" text="white" vlink="red" alink="red">
<p align="center">
<hr width="50" color="gray"> <p align="center"> <font Color="blue" Size="6" Face="Verdana">
Hello World
</font>
 <hr width="50" color="gray">

<p align="left">
<b> Now we are getting somewhere </b>

<img src="http://www.promodtecnologies.com/rrfn.jpg">


</body>
</html> 


Code
Always remeber to place the little quotation marks "" in where they need to go. The <img src> 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 background image instead of a solid color. In the <body> 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 <a href> tag. So lets add some links shall we? <a href="http://www.promodtecnologies.com/List/otherfiles.htm">A wealth of knowledge</a> 
What this will do is make A wealth of Knowledge red. Because as you remeber we made all links red in the <body> tag. Everything between <a href> and </a> tags is what is seen on your web page. I will do you one better. You can even use the <img src> tag in there. as well as <p align> and some others. So lets combine our <img src> tag with the <a href> Take the Picture you just put in your code out and put in the following..... And lets center it while we are at it. 
<p align="center"> <a href="http://www.promodtecnologies.com/List/rrfn.html"> <img src="img src="http://www.promodtecnologies.com/rrfn.jpg"> </a>  
Did you notice I aded the and <p align="center"> 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:
HTML
<html>
<head>
<title>My First Page</title>
</head>
<body bgcolor="black" text="white" vlink="red" alink="red">
<p align="center">
<hr width="50" color="gray">
<p align="center">
<font Color="blue" Size="6" Face="Verdana">
Hello World
</font>

<hr width="50" color="gray">

<p align="left">
<b> Now we are getting somewhere </b>

<p align="center"> <a href="http://www.promodtecnologies.com/List/rrfn.html">
<img src="http://www.promodtecnologies.com/rrfn.jpg">
</a>


</body>
</html> 


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 lesson 2 Next lesson Tables.

Last edited by Gremelin; 02/03/17 10:54 PM.
#19133 03/08/02 07:29 PM
Joined: Mar 2002
Posts: 562
Le4rner Offline OP
UGN Supporter
OP Offline
UGN Supporter
Joined: Mar 2002
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 horizontal, rows are put in vertically. 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.

HTML
<html>
 <head>
  <title>My First Page</title>
 </head>

<body bgcolor="black" text="white" vlink="red" alink="red">

 <p align="center">
  <hr width="50" color="gray">
   <font Color="blue" Size="6" Face="Verdana">
    Hello World
   </font>
  <hr width="50" color="gray">
 

 <p align="left">
  <b><i> Now we are getting somewhere<i></b>
 

 <p align="center">
  <a href="http://www.promodtecnologies.com/List/rrfn.html">
   <img src="img src="http://www.promodtecnologies.com/rrfn.jpg">
  </a>
 

</body>
</html>


Code
Now onto tables!!! Here things get a little more tricky. But you can handle it right! To start a table you use the <Table> <tr> and <td> tags. Each of these requires an end tag. <Table> starts everything off. <tr> stands for table row. Pretty simple right? <td> stands for table cell. This proves yet again that Netscape is on crack! Why it isn't <tc> no one seems to know. But it is <td>. So now that we have an idea how this works let me give you an example of the layout.


HTML
<Table>
   <tr>

      <td>
       Row 1

       Cell 1
      </td>

      <td>
       Row 1

       Cell 2
      </td>

   </tr>
   <tr>

      <td>
       Row 2

       Cell 1
      </td>

      <td>
       Row 2

       Cell 2
      </td>

   </tr>
<table>


Code
Looks like a lot huh? Don't worry about it. It's a peice of cake. Lets break it down. As I said earlier, the <Table> tag started and stopped the table. That is easy enough, Then we had to start a row with the <tr> tag. Then we could put in cells with the <td> 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 <Table> 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. <Table cellspacing="10"> 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. <Table cellspacing="10"> Puts 10 pixels in between each cell all the way around  
border  Defines the thickness of a border in pixels i.e. <Table border="4"> 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 <table width="100%"> will make your table stretch to 100% of the screen width.  
align  Defines where a table will be placed on the page. (similar to <p align> ) There are three options for this one. Left, Center, Right. i.e. <Table align="center"> will set your table horizontally dead center of the page.  
valign  Defines the vertical alignment. There are 3 options for this attribute as well. Top, Center, Bottom, i.e <Table valign="top"> would display 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 using BGcolor in the <Body> tag. See Lesson 1  


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

Align  Defines where the row is place horizontally. options are Left, Right, Center, i.e. <tr align="center"> this places the row center  
Valign  Defines the vertical alignment of a row. Options include Top, Center, Bottom. i.e. <tr Valign="center"> vertically aligns the row center.  
Bgcolor  Defines the Back Ground color for the row. i.e. <tr bgcolor="#000000"> sets the background color to black for this row.  


The <td> tag has the same attributes as the <tr>. See chart below... 

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

#19134 03/08/02 07:30 PM
Joined: Mar 2002
Posts: 562
Le4rner Offline OP
UGN Supporter
OP Offline
UGN Supporter
Joined: Mar 2002
Posts: 562
Alphbetical Tag List I collected thus far

#######################################################
HTML Tags and commands in Alphabetical order

A

<A HREF>............. Hyperlink
<A NAME> ................Bookmark
<ABBR>................ Abbreviation
<ACRONYM> .............Acronym
<ADDRESS>................ Author Information
<APPLET> ................Applet
<AREA> ..................Image Map Area


B

<B> ..................Bold
<BASE> ......................Base URL
<BASEFONT>.............. Base Font
<BDO> ....................Bi-Directional Override
<BGSOUND> .................Background Sound
<BIG> ..............Big
<BLINK> ..................Blink
<BLOCKQUOTE> .................Blockquote
<BODY> ....................Body

............... Line Break
<BUTTON> ..............Button


C

<CAPTION> ..................Caption
<CENTER>................. Center
&#code; ................Character Entities
<CITE> ...................Citation
<CODE> .................Code
<COL>................. Table Column
<COLGROUP> ................Table Column Group
<COMMENT>/<!-- --> ................Comment


D

<DD> ...............Definition Description/Term
<DEL> .................Deleted Text
<DFN>............... Definition
<DIR> ................Directory List
<DIV>.............. Division Marker
<DL> ....................Definition List
<DT> ................Definition Description/Term


E

<EM> .............Emphasis
<EMBED> ...........Embed


F

<FIELDSET> Fieldset
<FONT> Font
<FORM> Form
<FRAME> Frame
<FRAMESET> Frameset


H

<HEAD> ...............Head
<HR> ......................Horizontal Rule
<HTML> ..........................HyperText Markup Language
<H1>&#8212;<H6> ..................Heading


I

<I> .......................Italics
<IFRAME> ..............Inline Frame
<ILAYER> ...............Inline Layer
<IMG> ..................Image
<INS> ..................Inserted Text
<ISINDEX> .............Single Line Prompt
<INPUT TYPE=
BUTTON> ............Input Button
CHECKBOX> ...............Input Checkbox
FILE> .................Input File
HIDDEN> ............ Input Hidden
IMAGE> .............Input Image
PASSWORD> .................... Input Password
RADIO> ....................Input Radio
RESET> ...................Input Reset
SUBMIT> .................Input Submite
TEXT> .....................Input Text


K
<KBD> ......................Keyboard
<KEYGEN> ................Key Generator


L
<LABEL> ................Form Label
<LAYER> ........................Layer
<LEGEND>..................... Fieldset Legend
<LI> ...............................List Item
<LINK> .........................Link
<LISTING> ...................Listing


M
<MAP> ......................Image Map
<MARQUEE>...................... Marquee
<MENU> ...........................Menu List
<META> ......................Metainformation
<MULTICOL>.................... Multi-column


N
<NEXTID> ...............................Next ID
<NOBR> .......................No Break
<NOEMBED> ..........................No Embed
<NOFRAMES>..................... No Frames
<NOLAYER> .......................No Layer
<NOSCRIPT>........................... No Script


O

<OBJECT> ....................Object
<OL> .....................Ordered List
<OPTGROUP> ......................Option Group
<OPTION> .......................Selection List Option


P


............................Paragraph
<PARAM> ....................Parameters
<PLAINTEXT> .................Plaintext
<PRE> ......................Preformatted Text


Q
<Q> .................Short Quotation


R
<RT> ..................Ruby Text
<RUBY> ...............Ruby


S
<S> ............................Strikethrough
<SAMP> ......................Sample Output
<SCRIPT> ....................Script
<SELECT> ..................Selection List
<SMALL> ....................Small
<SOUND> ...................Sound
<SPACER> ...................Spacer
<SPAN> ......................Span
<STRIKE> ...............Strikethrough
<STRONG> ..............Strong Emphasis
<STYLE> .................Style
<SUB> .....................Subscript
<SUP> ......................Superscript


T
<TABLE> ........................Table
<TBODY> .......................Table Body
<TD> .............................Table Header/Data Cell
<TEXTAREA> ...................Text Area
<TFOOT> .......................Table Footer
<TH> .............................Table Header/Data Cell
<THEAD> ........................Table Head
<TITLE> .........................Title
<TR> .............................Table Row
<TT> ..............................Teletype


U
<U> .........................Underline
<UL> ......................Unordered List


V
<VAR> ..............Variable


W
<WBR> ...................Word Break


X
<XML> ...........................XML Data Island
<XMP> ..........................Example


!
<!DOCTYPE> ......................Document Type
<!-- --> ............................Comment
<!--[DOWNLEVEL-HIDDEN BLOCK]> ..........Conditional Blocks
<!--[DOWNLEVEL-REVEALED BLOCK]> ........Conditional Blocks


Hope this helps some of you.


Learner

#19135 03/08/02 07:31 PM
Joined: Mar 2002
Posts: 562
Le4rner Offline OP
UGN Supporter
OP Offline
UGN Supporter
Joined: Mar 2002
Posts: 562
http://rrfn.promodtecnologies.com/K-base/characters.html

I would just post the info, but this board automaticaly converts it. even in the UBB code tags.

#19136 03/08/02 07:59 PM
Joined: Feb 2002
Posts: 7,203
Likes: 11
Community Owner
Offline
Community Owner
Joined: Feb 2002
Posts: 7,203
Likes: 11
lol.. you forgot to show the niggers how to use meta tags, since they all want their kiddy sites to be seen through search engines! lol althought hey could view source of our main page and see the meta sources heh


Donate to UGN Security here.
UGN Security, Back of the Web, and VNC Web Services Owner
#19137 03/08/02 08:03 PM
Joined: Mar 2002
Posts: 562
Le4rner Offline OP
UGN Supporter
OP Offline
UGN Supporter
Joined: Mar 2002
Posts: 562
Bah, There is al lot covered in here. Can't excepect my to spoon feed it ALL to them. lol. Though this is pretty close to spoiling people.

#19138 03/08/02 08:50 PM
Joined: Feb 2002
Posts: 7,203
Likes: 11
Community Owner
Offline
Community Owner
Joined: Feb 2002
Posts: 7,203
Likes: 11
lol true, but i'm lame, i use a WYSIWYG html editor lol, well i do text based a lot also since i know how to setup and do majority of ****.. my html teacher always said that i cheated, the *** :x


Donate to UGN Security here.
UGN Security, Back of the Web, and VNC Web Services Owner
#19139 03/08/02 11:00 PM
Joined: Mar 2002
Posts: 143
Member
Offline
Member
Joined: Mar 2002
Posts: 143
ok, now that you know that, on to CSS (ill write something up on that soon), DHTML, and XML laugh

#19140 03/09/02 05:25 PM
Joined: Mar 2002
Posts: 562
Le4rner Offline OP
UGN Supporter
OP Offline
UGN Supporter
Joined: Mar 2002
Posts: 562
SWEEEET, a current tut list in the makeing.

#19141 03/14/02 02:37 AM
Joined: Mar 2002
Posts: 52
Junior Member
Offline
Junior Member
Joined: Mar 2002
Posts: 52
Geez, thats lesson 1?!!?!?!?
i know HTML but not to that extent heh :/, I better start reading then.

#19142 03/14/02 06:20 PM
Joined: Mar 2002
Posts: 562
Le4rner Offline OP
UGN Supporter
OP Offline
UGN Supporter
Joined: Mar 2002
Posts: 562
Yea that is pretty much the basics man. There is more. Like Frames, IFRAMES, embeding flash, streaming music, and video Fonts, browser compatability, Write for other platforms, Many other tags not covered, then there is CSS DHTML XHTML XML and the list gose on.

#19143 03/14/02 07:16 PM
Joined: Feb 2002
Posts: 7,203
Likes: 11
Community Owner
Offline
Community Owner
Joined: Feb 2002
Posts: 7,203
Likes: 11
lol embedding flash...

Gizzys Flash Lesson:
====================

Code
<OBJECT classid="clsid :D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
 WIDTH=400 HEIGHT=250>
 <PARAM NAME=movie VALUE="com.swf"> 
 <PARAM NAME=loop VALUE=true> 
 <PARAM NAME=quality VALUE=medium> 
 <PARAM NAME=bgcolor VALUE=#000000> 
 <EMBED src="com.swf" loop=true quality=medium bgcolor=#FFFFFF  WIDTH=400 HEIGHT=250 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></EMBED>
</OBJECT>



===========
End of lesson, now you too can be a 1337 flash junkie!


Donate to UGN Security here.
UGN Security, Back of the Web, and VNC Web Services Owner
Le4rner #49596 10/25/09 11:29 PM
Joined: Oct 2009
Posts: 3
UGN Newbie
Offline
UGN Newbie
Joined: Oct 2009
Posts: 3
Ok there is a problem with this thread in oder to see the tags that you guys are using you have to go into the source code. i think you should turn off HTML in the thread so that the tags can actually be seen on the page plus it would make it a little mroe readable. The reason being is because there are so many tags i the source code telling the text where to be that the tags that yo are trying to show on the page and the tags for the source code are intermingled and hard to be able to decipher.

bigdawgg180 #49607 10/27/09 07:26 PM
Joined: Oct 2002
Posts: 955
UGN Super Poster
Offline
UGN Super Poster
Joined: Oct 2002
Posts: 955
http://www.w3schools.com/
http://www.w3schools.com/html/default.asp

Not only can you learn HTML, but there are several other languages that actually integrate with HTML there too. You can try the examples in realtime on the site itself, so playing around and tweaking is instant.

Plus, it is very important to have valid code and not use incorrect syntax or deprecated HTML. CSS will come into play too as there is very little to HTML and all the style remains in HTML.


jonconley #49632 11/03/09 02:47 AM
Joined: Feb 2002
Posts: 7,203
Likes: 11
Community Owner
Offline
Community Owner
Joined: Feb 2002
Posts: 7,203
Likes: 11
I updated that snippet above; note though, it's not valid xHTML so I would not use it at all lol; breaks too many conventions to even bother listing really. Most applets will however give you their own buggy embedding code.


Donate to UGN Security here.
UGN Security, Back of the Web, and VNC Web Services Owner
Gremelin #49793 12/03/09 07:48 PM
Joined: Mar 2002
Posts: 256
Likes: 1
UGN Security Staff
Offline
UGN Security Staff
Joined: Mar 2002
Posts: 256
Likes: 1
In my opinion the best way to learn HTML is a hands on approach. Start viewing the source code to web pages (Firefox: View->Page Source). Look for "tags" which will always be inside of a pair of < >'s. Try and figure out what that tag does and how it is represented on the page. I recommend turning of CSS Stylesheets at first, so you can see the page before it is "stylized". It's good web-practice to make your pages accessible as possible. Some browsers may not have "CSS" support on, and your web page could possibly look like [censored]. You should make your web page "usable" then go back and tweak the looks. That is to say, you can do things many ways, and they may (or may not) render to the same display.

You're simplest website should look like this:

Code
<html>
 <head>
  <title>Page Title</title>
 </head>
 <body>
  <p>Page text</p>
 </body>
</html>


You'll get the hang of it, its a very simplistic syntax. Notice all tags will start with a < followed by the name of the tag. and then they will eventually end with / followed by a >.

Many tags have the ability to contain text or even more tags. That is what you see with the paragraph tag:
Code
<p>Page text</p>


Notice the name of the tag is repeated in those instances. (</p>).

Some tags will not have that, such as the image tag:

Code
<img src="somepicture.jpg"/>


Notice that they (as well as the other tags) can have attributes (such as "src" , or source for refrencing a URL/file), that are specific to the tag itself, as defined by the specification... that is why you should always set which specification of HTML you are using, and you will see people exclaiming "XHTML Compliant"

http://www.w3schools.com/Xhtml/xhtml_dtd.asp for more info on doctypes... And basically the best HTML refrence site.



Link Copied to Clipboard
Member Spotlight
Posts: 43
Joined: November 2002
Forum Statistics
Forums41
Topics33,840
Posts68,858
Average Daily Posts1
Members2,176
Most Online3,253
Jan 13th, 2020
Latest Postings
Where and how do you torrent?
by danni75 - 03/01/24 05:58 AM
Animation,
by JohanKaariainen - 08/15/19 01:18 AM
Blackbeard.....
by Gremelin - 10/03/18 07:02 PM
my old account still exists!
by Crime - 08/10/18 02:47 PM
Okay WTF?
by HenryMiring - 09/27/17 01:45 AM
The History Thread...
by Gremelin - 08/11/17 12:11 PM
My friend NEEDS your HELP!
by Lena01 - 07/21/17 12:06 AM
I'm having fun with this guy.
by gabithompson730 - 07/20/17 01:50 AM
I want to upgrade my phone
by gabithompson730 - 07/20/17 01:49 AM
Doom 3
by Cyrez - 09/11/14 08:58 PM
Amazon Gift Card Generator/KeyGen?te
by Gecko666 - 08/22/14 09:21 AM
AIM scene 99-03
by lavos - 09/02/13 08:06 AM
Planetside 2
by Crime - 03/04/13 07:10 AM
Beta Testers Wanted
by Crime - 03/04/13 06:55 AM
Hello Everyone
by Gremelin - 02/12/12 06:01 PM
Tracfone ESN Generator
by Zanvin Green - 01/18/12 01:31 PM
Python 3 issue
by Testing - 12/17/11 09:28 PM
tracfone airtime
by Drache86 - 07/30/11 03:37 AM
Backdoors and the Infinite
by ZeroCoolStar - 07/10/11 03:52 AM
HackThisZIne #12 Releaseed!
by Pipat2 - 04/28/11 09:20 PM
gang wars? l33t-wars?
by Gremelin - 04/28/11 05:56 AM
Consolidate Forums
by diggin2deep - 04/21/11 10:02 AM
LAN Hacking Noob
by Gremelin - 03/12/11 12:42 AM
Top Posters
UGN Security 41,392
Gremelin 7,203
§intå× 3,255
SilentRage 1,273
Ice 1,146
pergesu 1,136
Infinite 1,041
jonconley 955
Girlie 908
unreal 860
Top Likes Received
Ghost 2
unreal 1
Crime 1
Ice 1
Dartur 1
Powered by UBB.threads™ PHP Forum Software 7.7.5