Your Own Website

1
Your Own Website

• EE 1305 lab Lab 4

2
Notes

• Your final choices of topics for your academic
  and personal links are due today
• A Link to your homepage will be set up on your
  lab instructors website
• In this session, a number of UNIX tasks are
  mentioned in case you ever set up HTML on a
  non-SEAS computer (such as POST)
• On the SEAS server, these tasks are handled by
  wwwsetup

3
About wwwsetup

• The SEAS server has a UNIX macro program called
  wwwsetup that performs all of the tasks marked
  with in this presentation
• wwwsetup may be executed as many times as needed

4
1. Create the Cyberspace for your Website

• At prompt, type wwwsetup and ltentergt
• Your website cyberspace will be set up in a
  directory under your SEAS account
• The name of the directory is public_html
• All HTML files will be stored in your public_html
  directory or in a subdirectory under it
• The file name for your homepage is index.html

5
Verify whats in your space

• At the prompt, enter the list command ls to
  see what files are there
• ls
• You may see various files related to e-mail
• To see where you are in the system, type the
  present working directory command (pwd)
• pwd

6
Create your cyberspace

• At the prompt, enter the make directory
  command (mkdir), followed by the name of the
  directory your are creating, which is
  public_html
• mkdir public_html
• (Dont forget the underline between public and
  html)
• Included in the SEAS UNIX macro wwwsetup

7
Make your cyberspace accessible to the public

• At the prompt, enter the change mode command
  for both your account and your cyberspace
• chmod 701 youracct
• chmod 701 public_html
• Included in the SEAS UNIX macro wwwsetup

8
2. Move into your cyberspace

• At the prompt, enter the change directory
  command (cd) to move into your newly-created
  directory
• cd public_html
• There is no \ after cd. This is UNIX, not DOS
• Execute the pwd command to verify that you are
  there, and the ls command to see the files there
  (There arent any yet.)

9
Definitions

• Cyberspace is the directory area where your
  website files will be stored. The name of the
  directory is public_html
• Website is the generic name for your own little
  corner of the WWW, by which you present yourself
  to the world
• Homepage is the main page of your Website. It
  contains links to your other pages and files, and
  possibly to other sites.

10
3. Creating Your Homepage

• Once youre in your public_html directory, you
  are ready to create your homepage
• The name of your homepage file is index.html
• The text editor program well use is pico
• same text editor that pine uses
• At the prompt, enter pico index.html

11
Simple Homepage

• Try typing in this simple home page code
• lthtmlgt
• ltbody bgcolorff0000gt
• lth2gtHello, World, from Yourname!lt/h2gt
• lt/bodygt
• lt/htmlgt
• Hit ltcontrol-xgt to save file exit the pico
  editor

12
Is your home page there?

• use ls to find out
• Before anyone can view your homepage, you must
  make it accessible
• chmod 644 index.html
• Included in the SEAS UNIX macro wwwsetup

13
4. Viewing Your Home Page

• In Netscape, in the URL box, type in your URL
• www.seas.smu.edu/youracct

14
Congratulations

• If you see the one line message, Hello World,
  from Yourname! on a red background, then you
  have a homepage!
• If you see a message that says you dont have
  permission to access the site, you didnt do the
  chmod commands right
• Next Steps Enough with the silly Hello World
  message, lets learn to make our home pages look
  cool.
• Included in the SEAS UNIX macro wwwsetup

15
HTML

• HTML hypertext markup language
• The language that home pages are written in, and
  the basis for the WWW publishing business.

16
HTML Tags

• The key to HTML is learning the different tags
  that are used for formatting
• Tags are written in lt...gt brackets
• Most (but not all) tags have two parts, opening
  and closing tags
• Closing tags start with / (slash)
• lt/...gt

17
HTML Tags

• A few tags are necessary for every single home
  page
• lthtmlgt
• ltbodygt
• text, images, links, etc
• lt/bodygt
• lt/htmlgt
• These should be the first things you type in!

18
HTML Tags

• Every HTML document has to start and end with
  lthtmlgt and lt/htmlgt tags
• Everything you want to show up on your page must
  be between the ltbodygt and lt/bodygt tags
• Note it doesnt matter if you use upper or
  lowercase letters in the tags

19
HTML Tags

• Between the ltbodygt tags, you can type in text
• You must use tags to format text HTML ignores
  other formatting, like returns, blank lines,
  tabs, and multiple spaces

20
Some Common Formating Tags

• ltcentergtlt/centergt
• ltpgt blank line (new paragraph)
• ltbrgt break to new line (carriage
  return)
• ltbgtlt/bgt bold
• ltugtlt/ugt underline
• ltigtlt/igt italics Not in pairs

21
More Common Tags

• lth1gtlt/h1gt heading (larger type)
• lth6gtlt/h6gt smaller type
• h1 through h6 available for text
• lthrgt horizontal rule - puts a line across the
  width of the browser window
• Not in pairs

22
Header and Title

• You can give your page a title which will appear
  at the very top of the Netscape screen. Before
  ltbodygt tag
• lthtmlgt
• ltheadgt
• lttitlegtThis is Bills Homepage.lt/titlegt
• lt/headgt
• ltbodygt
• ...

23
Header and Title

• Title shows up on the very top of the Netscape
  screen
• Title is often used by search engines

24
About WWW Colors

• You can pick 16,777,216 different colors
• Some early PCs and MACs were limited to only 16
  and then 256 colors
• Modern PCs and MACs handle 65,536 colors
  standard, with 16 million colors if you have
  enough video card memory

25
RGB colors

• Colors are created by mixing
• Red R
• Green G
• Blue B
• The computer monitor uses 3 colors - RGB

26
RGB Colors

• To specify a color, you specify the amount of
  Red, Green, and Blue, in a mixture
• Each color can have a maximum value of 255 in
  hexadecimal system (00-ff)

27
WWW Colors

• You can set the background color of your home
  page
• Within the ltbodygt tag, add in
• bgcolorff0000
• 6 digits in ff0000
• 1st 2 are for R (red) value, next 2 for G (green)
  value, last 2 for B (blue) value

28
Simple RGB colors

• WWW RGB colors as specified like this
• bgcolor000000 gt none black
• bgcolorFF0000 gt red
• all Red, no Green, no Blue
• bgcolor00FF00 gt green
• no red, all green, no blue
• bgcolor0000FF gt blue
• no red, no green, all blue

29
Complex RGB Colors

• Mixing colors is like mixing light
• Mix blue and green, get bluish green color
• Mix red and green, you get yellow
• Mix the right combination, and you can get any of
  16 million colors
• Under the ee/1305 lab resource site, go to
  links to see a site with color samples

30
Other Sources of Information

• On-line information see lab website, or search
  for it
• View the html coding for any page on the WWW
• select VIEW PAGE SOURCE

31
Reminder

• To create your home page, you must do it just
  like we go over in class you cannot use any HTML
  generator (Pagemaker, Netscape Composer,
  FrontPage, etc. )
• Penalties shown in course Syllabus!
• You have to type in the tags yourself!

32
Additional Helps

• www.seas.smu.edu/ee/1305 (Lab Resource website).
  Clink on links
• www.lehnert.awl.com See stuff on Chapters 5 6
• See the tag summary by Esben Laustrup in the
  course pack

33
Next Weeks Topics

• links
• images
• lists
• tables
• counters
• graphical backgrounds
• add SMU disclaimer

34
Assignment

• Read Chapter 5 and Appendix C in Light on the
  Internet
• Start work on your homepage in lab!