Making a Webpage By Henrietta Wong

1
Making a Webpage By Henrietta Wong

• So you want your own little space on the World
  Wide Web?

2
Why?

• Personal
• Blog/Journal
• Graphic
• Information
• Fanlisting
• Hatelisting
• Project
• Portfolio
• A Place to Put Useless Crap

3
HTML Tags

• Tags are the way you tell the computer what to
  do.
• In other words they are commands.
• Almost all tags have a starting and closing tag
• Starting tags look like this
• Closing tags have a slash before the tag name
  
• Not all tags have a closing tag in HTML
• The linebreak tag
  and the image tag
  dont have a closing tag.
• Remember to close any tags that you open.

4
Colors

• On the web every color has a HEX CODE. The hex
  code contains 6 numbers and/or letter and begins
  with the sign. (Ex ffffff is white and
  000000 is black)
• The first two numbers/letters stand for how much
  RED there is in the color.
• The middle two numbers/letters stand for how much
  GREEN there is in the color.
• The last two numbers/letters stand for how much
  BLUE there is in the color.
• There are 216 web safe colors, meaning that they
  will look the same in every type of browser. You
  can find a list of them online. Just Google it.

5
Tags The First Step

• The and tag always goes first
• This tells the computer that youre starting and
  page that contains HTML.
• Everything should go in between these two tags
• Then the and tag.
• This is where you would put the
  tag and any other scripts such as styling sheets
  and Javascript.
• Then the and tag.
• This is the body of your site. Everything here
  will show up on your page.

6
Tags Other Common Tags

• TEXT - This would make the word TEXT bold.
• TEXT - This would make the word TEXT
  italics.
• TEXT -This would make the word TEXT
  underlined.
• TEXT - This would make the word
  TEXT centered.
• TEXT - This would make the word TEXT start
  in a new paragraph
• TEXT1
  TEXT2 - This is the linebreak tag. It
  will move TEXT2 to the line under TEXT1

7
Tags Links and Images

• TEXT - This makes the word TEXT
  a link. It will link to whatever URL you put for
  where it says URL.
• Example Mission/a would link to Missions homepage.
• - This makes an image show
  up on your site. IMAGEURL is the URL to the image
• Example .jpg
• image.jpg is the file of the image.
  www.yourdomain.com would be where the image is
  hosted.
• If the image is offline and on your computer the
  address may look like this C/Documents and
  Settings/Owner/Desktop/site/image.jpg

8
Tag Putting Tags in Tags

• You can use more then one tag on something as
  long as you remember to close all of them in the
  order that you opened them.
• EXAMPLE - Here I made the
  word EXAMPLE bolded, italicized, and underlined
  EXAMPLE
• You can do this to make an image a clickable
  link.
• SRCbear.jpg
• See how the image tag goes inside the link tag?

9
Tags Tables

• A table is a common way to organize the
  information on your site.
• Tables consists of ROWS and COLUMNS. You can have
  as many rows or columns that you want.
• Tables consist of three tags
• All those tags have closing tags which are
  
• - This starts the table
• - This starts a new ROW
• - This starts a new CELL (or column...) in
  the ROW
• You can have as many s and s as you
  want but you only need to use once to
  start a new table.
• Remember to close any tag that you open.

10
Tags Tables 2

• While tables can be invisible, the image below
  shows what they look like.
• This table has two rows and two columns.
• The blocks of space in a row is called a CELL.

• The code for that table would look like this
• CELL 1
• CELL 2
• CELL 3
• CELL 4

11
Tag Additions Tables

• There are additions to tags to help customize
  your site.
• For example you can add a width, height, and
  border size to the tag
• Here I made the table 600 pixels wide, 200 pixel
  tall with a border width of 3. Making the border
  0 will make it invisible.

12
Tag Additions Images

• An addition to images is ALT. Adding the alt tag
  will make some text show up when you hover the
  image with the mouse.
• Ex pic!
• You can also add a WIDTH and HEIGHT to an image
  but most people dont since it stretches/compresse
  s your image.
• Here someone added ALTDay Dream Graphics A
  free resource web site.

13
Tag Additions Links

• Like with images you also use the ALT addition
  with link so that when a person hovers over a
  link, text will appear.
• Ex ALTMissions Site!!Mission
• In this example, the words Missions Site!!
  will show up when a person hovers over the word
  Mission.
• Another addition is the TARGET addition.
• Like the name says, TARGET will target your link
  somewhere.
• TARGET_blank This will make the link open in
  a new window
• TARGETtop This will make the link open in a
  new window if there is only one open but if there
  are two opened it will open the link in the
  second window
• TARGETiframe If you have an iframe on your
  site then this is how you would make your link
  open in the iframe.

14
The Style Tag and CSS

• The tag is a tag by itself however is it
  is also used as an addition to other tags.
• The tag is a very powerful tag that can
  alter the entire look of your site.
• The tag is used to directly integrate CSS
  with HTML.
• CSS stands for Cascading Styling Sheet. It is a
  very simple and easy to learn web language that
  is almost always used with HTML. With it you can
  change the way your links look, the color and
  size of your text, how table borders will look
  like and many other things. There are tons of
  tutorials on the web for it so Im not going to
  cover it.
• However I will include examples of how CSS works
  with HTML using the tag in the next slide.

15
Style Tag Example 1

• If you use STYLE as a tag then everything between
  and would be your CSS coding.
• Ex
• body, p, td
• font-family Arial
• color 000000
• font-size 12px
• Here I said that everything under the tags BODY,
  FONT, P and TD would have the font family Arial
  with 12pt black font.
• Note The tag goes between the
  and tag

16
Style Tag Example 2

• If you use STYLE as an addition then you can
  alter just one part of your site.
• Ex
• color ffffffBoo!
• is the actual tag and STYLE is just an
  addition within it.
• Here I made it so that only the word Boo! would
  be aligned to the right, with a font family
  Tahoma and colored white.

17
Frames and IFrames

• Frames and IFrames are pretty much pages within
  pages held together on another page, usually with
  the index.html page (which is the default page)
• Since I dont like Frames or IFrames and find
  them annoying Im not explaining them
• Most sites dont use them anyways because you can
  get trapped in them or they dont always work
  right in every browser
• If you want to learn about them look it up on
  Google. Im sure youll find something.

18
Getting Hosted

• The last part of making a webpage is getting it
  online. You can make a site on your computer on
  Notepad or FrontPage or whatever but no one will
  see in until you upload it to the internet.
• To get it online you need to sign up with a host.
  There are many free host out there that Im not
  going to list them because you can find those
  yourself.
• You can always get hosted under a private domain
  as well but most people dont want to share their
  space (and money) with people unless the site is
  good.
• You can also buy your own domain and space but
  unless your skills are good, dont waste your
  money.
• The last thing you can do is to make your own
  server but dont ask me about that because I
  dont know...

19
Conclusion Homework

• I did not cover very much in this presentation.
  There is a lot more to learn if youre
  interested. However I think I took long enough so
  therefore your homework is to find 3 sites that
  have HTML and CSS tutorials and to write 3 things
  that you learned.
• I hoped you listened because Ms. Lum is going to
  force all of us to make a webpage for our
  portfolio soon anyways so dont come crying to me
  for help if you didnt bother to listen... P