The Basics Of HTML

1
The Basics Of HTML
.And how to make a website
2
What is HTML?

• HTML is an acronym for
• Hyper Text Markup Language
• HTML is the language that gives your Internet
  Browser information on how to display a web page
• HTML uses Tags to control how the information
  will be displayed on a Internet Browser

3
What is a Tag?

• A Tag enables the author of a website to
  control when,where, and how content will be
  displayed
• There are many types of Tags, However there
  basic form is ltXXXXXgt
• Lets take a look at some common Tags that will
  help you to build a website

4
Four Common HTML Tags

• ltHTMLgt Tells the browser that the page should
  be interpreted as HTML
• ltHEADgt Is the place where you insert tags that
  won't appear on the page (but still needs
  attention from the browser)
• ltTITLEgt Displays the name of your site at the
  top of the browser window
• ltBODYgt Contains everything that will actually
  appear on the page. (Anything you want people to
  see needs to be within these tags)

5
Example of how to combine HTML Tags
ltHTMLgt //Tells the browser that the page should
be interpreted as HTML   ltHEADgt //Information
that will not be displayed in the actual
page ltTITLEgtThis is the best website in the
world!!!!!!lt/TITLEgt //Name of your website
lt/HEADgt //Ends the HEAD Section   ltBODYgt //Show
s the masterpiece that you call your website This
is where you insert the contents of your web page
such as text, graphics, pictures, etc You can put
as much content as you like here, however, you
must use the / to indicate that you are
ending the BODY So lt/BODYgt //Ends the Body
section lt/HTMLgt //Ends the HTML and your page
6
What does this look like in a Internet Browser?
7
Notice The name of the website (This information
came from the ltTITLEgt Tag)
Notice Everything that was typed in the ltBODYgt
section is the only thing that appears on the
actual site
8
Tags, tags, and more tags

• Now that your familiar with basic HTML Tags
  lets take a look a few more.

9
Text HTML Tags

• These tags will help you to format text
• ltBgttextlt/Bgt Will bold the text
• ltIgttextlt/Igt Will italicize the text
• ltUgttextlt/Ugt Will underline the text
• ltPgttextlt/Pgt Indicates where a paragraph begins
  and ends
• ltP ALIGNCENTERgt textlt/Pgt will center the
  paragraph on the page

10
Image HTML Tags

• ltIMG SRCNamegt Displays the picture or image
• Example
• ltIMG SRChistory of comets.gifgt

11
Links HTML Tags

• This is an example of the way that you can
  display and reference other links on the World
  Wide Web
• ltA HERFhttp//www.yahoo.comgt
• However, this only displays http//www.yahoo.com
  which is kind of tacky, so to change this..

12
Links HTML Tags

• To make your links look kind of good, you could
  do something like this
• Check outltA HERFhttp//www.yahoo.comgt
  Yahoo!lt/AgtIt is the best place to search the
  Internet
• Resulting in a much nicer format that looks like
  this on your Internet Browser
• Check out Yahoo! It is the best place to search
  the Internet
• (much better than plain old http//www.yahoo.com)

13
Finally, Color HTML Tags

• To use color for your website.
• To color Fonts
• ltFONT COLOR0000000gttextlt/FONTgt
• To color Backgrounds
• ltBODY BGCOLOR000000gtcontentslt/BODYgt
• So whats all this 000000 stuff about?

14
How to tell what color you are using

• Black is 000000
• White is FFFFFF
• .All other colors are a combination of these
• Blue is 0000FF
• Red is FF0000
• Yellow is FFFF00
• Green is 00FF00

15
Now What?

• There are a few other things that you need to
  know about in order to publish a web page.

16
How to publish a web page

• After you assemble a web page, it must be
  transferred to a server or a host
• At PSU, all students are given 25MB of free web
  space on ODIN (Surprise!)
• So if you want to publish your own web site, you
  will need to establish a connection which will
  enable you to transfer your files to the ODIN
  server

17
How to transfer a web page to ODIN

• The best way to transfer files to the ODIN server
  is with a FTP program
• FTP (another acronym) stands for File Transfer
  Protocol
• FTP can be thought of as a way for you to E-mail
  your web page to the ODIN server

18
How to use FTP

• First, you will probably need to get an FTP
  program
• I recommend going to www.hotfiles.com and simply
  looking for FTP programs
• CuteFTP, WS_FTP are fairly good. There are a ton
  of these programs, just find one you like

19
How to use FTP

• Once you get the program you will need to
  configure it to connect to ODIN
• Im not going into specifics on how to do this,
  but if you are interested, there is a information
  on how to do this at www.helpdesk.pdx.edu, in
  addition, some of the FTP programs are set up
  differently so you might have to do some things
  differently

20
How to use FTP

• A helpful hint most FTP programs need a few key
  pieces of information
• User Name (which is the same as your PSU user
  name)
• Password (same as your PSU password)
• Host Name (which is odin.pdx.edu)
• This is the minimum information that will be
  necessary to get connected to ODIN

21
How to use FTP

• So once you have connected to ODIN, you will need
  to transfer your files
• First, you will need to locate the file(s) on
  your PC
• Then, you will need to double click or move them
  to the public_html folder on ODIN
• This is an example of what it will look like..

22
How to use FTP
These are files on the ODIN server. You have to
open the public_html folder, then By double
clicking the index.htm file, you have transfer
your web page to ODIN note if there is no
public_html folder create one
These are the files on your PC, and specifically,
you must name your first page index.htm. Any
page there after can have any name you please.
23
How to View your web page

• Once you have transferred your web page to the
  server, you can visit your site by typing in
  web.pdx.edu/your user name
• Wow! That wasnt so bad

24
Finally, some useful resources

• Here are a list of some useful resources for
  learning HTML and starting your own web page.
• Good information and tutorials on starting your
  own web page at PSU
• www.http//web.pdx.edu

25
More useful resources

• For a good HTML Cheat Sheet go to Webmonkey.com
  Or more specifically,
• http//hotwired.lycos.com/webmonkey/reference/htm
  l_cheatsheet/index.html
• For general help in setting up an Internet
  connection and (FTP connection) go to
• http//www.helpdesk.pdx.edu/

26
A Few Final Words..

• Remember, this stuff is not that hard to
  learn!!!!!
• Have fun with it, Even if you just make something
  cheesy!!!
• And if all else fails, and you get stuck,
  remember that there are TONS of sites on the
  Internet dedicated to helping you learn HTMLPick
  a tutorial and go with it, How do you think I
  came up with ideas for this presentation?

27
The End