Available Guides:::::
Html Guide by Ryan Forrester www.d9x.net
This guide will teach you the basics of html and enough to start building a website.
<Html in Linux/Windows>
1. what is html.
2. what do you need to start learning.
3. getting started.
4. html syntax.
5. text attributes, bold, underlined, italic, colors, Breaks
6. body attributes, bgcolor, link colors, vlinks, text color, bgimage
7. using images, using center tags & div tags
8. using links, email links, _blank links.
9. placing anchors on your page.
</Html in Linux/Windows>
section #1 - top | next
HTML stands for the HyperText Markup Language. HTML is the major language of the Internet's World Wide Web. Web sites and web pages are written in HTML. With HTML and the world wide web, you have the ability to bring together text, pictures, sounds, and links... all in one place! HTML files are plain text files, so they can be composed and edited on any type of computer... Windows, Mac, UNIX, whatever.
section #2 - top | next
skills (none, general knowledge about how to use a computer)
programs (a text editor such as notepad on a windows machine, or gEdit on linux)
hardware (keyboard, mouse, monitor, the usual stuff)
section #3 - top | next
ok, if you have read this far then i guess your going to have a shot at learning html, if you havent already got your editor open (notepad etc) then open it now. now that you have your editor open im just going to show you how to make a quik html document before we get into the harder stuff.
type the following into your editor
Hello, this is my first html page
ok now save this file as 1.html (save it to your desktop).
now open your browser, (internet explorer, opera, mozilla, etc) and click FILE then OPEN. and open the html file on your desktop.
or you can just try and double click the html file and it might open automatically in your browser for you.
section #4 - top | next
ok, if you havent read the previous steps then read them before you read this! or you will surely learn nothing.. here i will show you some html syntax and explain to you what it all means, the tags below should be used in every! html document you make. this is the core of the language and these tags* are needed for the browser to display your html correctly, you might get away with not using all these tags in internet explorer because it is buggy and dosnt care about errors but some of the most w3c compliant browsers like mozilla will care!, and **TAGS** is what we call the code in html, you will learn what i mean as you read more.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
ok, with html it is very simple. u have opening tags and you have closing tags.
<HTML> <== an opening tag
</HTML> <== a closing tag
everything you do in html must be put inbetween the HTML opening and closing tags.
the HEAD tags are used for the head of the page, the stuff inbetween the HEAD tags isnt ment to be displayed on your page. this is where you put stuff like javascript etc. we wont worry about this to much at the moment.
The TITLE tags are used for your page title. if you look at the top of this page that your reading now it should say (LinuxDelux) as the title. and the source code for this page looks something like this
<TITLE>LinuxDelux</TITLE>
remember - whenever you open a tag you must </CLOSE> it! notice how all closing tags are the same except they just have a "/"
ok so now the only tags above that i havent explained are the BODY tags. inbetween the body tags is your main page, this is where you put all your links/images/tables/iframes/flash/ssi tags and more. everything we will do will be inbetween the BODY Tags. we will do some work inbetween the HEAD Tags but mostly we will be working in the BODY Area. and also note: how i have put the TITLE tags inbetween the HEAD Tags. this was not a mistake!.
section #5 - top | next
if you dont have your text editor open then open it now. i am going to explain some simple **very simple** stuff to you here.
making text bold, making text italic, making text underlined, colored text
<B>this text will be bold</B>
<I>this text will be italic<I/>
<U>this text will be underlined</U>
<font color="blue">this text will be blue</font>
notice in the FONT tag how i have said (color="blue") here you can use blue,red,pink,black,white etc, a browser can not only display a color name but it can also display hexidecimal/rgb colors which means you can display virtually any shade of color there is. a HEX Color consists of 6 characters. #FFFFFF=white #000000=black or #0084FF would be a nice shade of blue, you can download color charts which display hex colorcodes or use a program like psp, or adobe to get them. ok now that we have some nice tags to play with lets put them in the text editor and save the html file and view it and see what it looks like.
<HTML>
<HEAD>
<TITLE>My First HTML Page</TITLE>
</HEAD>
<BODY>
<B>this text will be bold</B>
<I>this text will be italic</I>
<U>this text will be underlined</U>
<font color="orange">this text will be orange</font>
</BODY>
</HTML>
after you viewed that you probably noticed that everything appeared on the same line right? not as it appears on this page huh? thats because you need to insert a BREAK where you want a line to end, to do this simply add <BR> (note this tag dosnt have a closing tag), here is an example.
<B>this text will be bold</B><BR>
<I>this text will be italic</I><BR>
<U>this text will be underlined</U><BR>
<font color="orange">this text will be orange</font>
if you have read everything so far then you are ready to continue onto the next section and you are doing well, go and get a drink and sit back and relax for five minutes, you deserve it.
section #6 - top | next
ok now we are going to do some of the coolest shit you get to do in this guide. we are going to edit the entire pages attributes with 1 tag. text/links/colors/back ground color etc! remember how i said you have to put all your pages contents inbetween the BODY Tags. well guess what, you can also have variations of the Main BODY Tags. here are some demos for you to try. these terms **Attributes** are fairly simple so i dont think i need to explain what they all do.
<BODY BGCOLOR="GRAY" TEXT="WHITE" LINK="YELLOW" VLINK="YELLOW">
<B>this text will be bold</B><BR>
<I>this text will be italic</I><BR>
<U>this text will be underlined</U><BR>
<font color="orange">this text will be orange</font>
</BODY>
ok heres some things u might want answers to
BGCOLOR: the entire pages background color.
TEXT: all the text on the page will be this color **except** for the text within FONT Tags.
LINK: default link color
VLINK: default VISTED LINK color
here is how you display an image as a background instead of using a color.
<BODY BACKGROUND="http://www.d9x.net/linux/img/linuxdeluxlogo.jpg">
you can use all attributes in the BODY Tags or just a few, it is really up to you,
note: there is other attributes i havent listed here cause i dont want to confuse you to much at this stage :)
section #7 - top | next
if you have read/learned everything above then you are ready to take in some more info, here i will teach you how to CENTER text or anything inbetween your BODY Tags and also use DIV Tags, finally ill show you how to display images within the BODY Tag, then i will show you some examples. please **read** what i write before you scroll down for the next demo, otherwise you will end up still be trying to learn html in 6 months time.
first i will talk about CENTER Tags, they are alot like every other tag, they have OPENING and CLOSING Tags, here is a simple CENTER Tag.
<BODY>
<CENTER>this text will be in the middle of the page</CENTER>
</BODY>
optionally i sometimes prefer to use DIV Tags which basically do the exact samething except they look better in your source & they offer a couple more options as you will see below.. here is a DIV Tag.
<BODY>
<DIV ALIGN="LEFT">this text will be left aligned.</DIV>
<DIV ALIGN="CENTER">this text will be center aligned.</DIV>
<DIV ALIGN="RIGHT">this text will be right aligned.</DIV>
</BODY>
ok, and the bit you have probably been waiting for, here is how we display an image with some attributes.
<IMG SRC="http://www.d9x.net/logo.jpg" WIDTH="468" HEIGHT="60" ALT="LinuxDelux">
SRC: this means (SOURCE = path or url to image)
WIDTH: this is a measurement in Pixels
HEIGHT: same as above.
ALT: when you put your mouse over the image this text will be displayed.
section #8 - top | next
without links the web would not be fun, links allow you to travel from one page to another page just by clicking. for example, if you CLICK HERE you will go to www.deluxnetwork.com isnt that cool? well you dont really want to click thatcause u want to keep reading :) ok so how is it done? here is an example of the tag used **inbetween the BODY Tags**
<BODY>
<a href="http://www.d9x.net">THIS OPENS IN THE SAME WINDOW</a>
<a href="http://www.d9x.net" target="_blank" class="td_text">THIS OPENS IN A NEW WINDOW</a>
<a href="mailto:example@d9x.net">CLICK HERE TO EMAIL ME</a>
</BODY>
section #9 - top | next
in this section ill talk about anchors, what is an anchor? an anchor is the same as a link except when you click on this link it dosnt load a new page or a new website, so what does it do? well just say you have a very large html page like this one and you want to get to the top really quikly you can just CLICK HERE, try it! thats pretty cool huh? ok so hows it done. heres an example.
<BODY>
<a name="top">hidden tag at the top of your screen
<a href="#top">some link at the bottom of your screen</a>
</BODY>
note: it dosnt have to be called 'top' you can use several of these on 1 page! u just have to give the anchor a 'name' somewhere and it will link to it. if you have more then 1 oviously you would name them different things.
Other Related Sites:
Suggest a link?:
mail us
Linux Hosting by www.d9x.net
| 
/home
d9x Linux Homepage
