Objective: To learn the basics of HTML coding and setup your own web page, publishing to your accoun

1
HTML - Webpage Creation

• Objective To learn the basics of HTML coding
  and setup your own web page, publishing to your
  account on the columbus server.
• Basics What is a web page,
• How do they work,
• What can you achieve with them.

2
First things First

• Have you spent some time exploring the World Wide
  Web.
• Have you noted the design of web pages you liked
  / disliked.
• Have you noted web page addresses that contain
  information or sites you enjoyed and might like
  to include in your web page.

3
Software I need

• Netscape composer / Microsoft Frontpage or other
  web publishing software package. Create a simple
  web page to get a feel for results - hidden HTML
• WS_FTP or other FTP software to transfer my web
  page to the columbus server (the location where
  my webpage will be posted for the world to see)
• notepad, wordpad, or nled / vi to change my HTML
  code of my initial webpage.
• Web browser as Netscape Navigator

4
NOTE

• You can do your entire web page creation on your
  phobos account and then ftp it to your columbus
  web page account. Just use your nled / vi
  editors, your HTML codes And Voila similar
  results to composer etc.

5
(No Transcript)
6
(No Transcript)
7
(No Transcript)
8
Quick Review

• HTML - Hyper Text Markup Language - code in a
  document created to be read by a web browser
  (Netscape Navigator / Microsoft Explorer )
• HTML file consists of ASCII text preceded and
  followed by elements or tags which are used to
  format text or perform operations.
• These tags or codes are used to enhance the
  appearance and provide such functions as linking
  to other websites (more later)

9
(No Transcript)
10
(No Transcript)
11
(No Transcript)
12
(No Transcript)
13
(No Transcript)
14
(No Transcript)
15
Quick Review

• What does HTML stand for?
• Hyperactive Management Language
• Hypertext Markup Language
• Hypermedia Model Linker
• What does hypertext mean?
• The document contains a lot of text.
• Text created with a word processor rather than a
  typewriter.
• Text stored in electronic form with
  cross-reference links between pages.

16
Quick Review

• A collective name for all the documents on the
  Internet is
• World Wide Web
• A Network of networks
• Internet
• A text document using HTML commands
• Web page

17
(No Transcript)
18
(No Transcript)
19
(No Transcript)
20
(No Transcript)
21
(No Transcript)
22
(No Transcript)
23
(No Transcript)
24
Simple Web Page Format

• lthtmlgt
• ltheadgtlttitlegtTITLElt/titlegt
• lt/headgt
• ltbodygt
• lth2gtHeader level 2 lt/h2gt
• Text of document begins. Text may be made
• ltbgtboldlt/bgt or ltugtunderlinedlt/ugt using
• these tags.
• The ltbrgt tag will start a new line and ltpgt
  will
• start a new paragraph.
• lt/bodygt
• lt/htmlgt

25
(No Transcript)
26
(No Transcript)
27
(No Transcript)
28
(No Transcript)
29
Quick Review

• What do you call the type of software application
  you use to view a Web page?
• Browser
• How many files would you need to store on your
  computer to make a Web page with some text and
  two images on it?
• Three
• What components of a Web page are contained
  directly in the HTML document
• text, HTML codes, links to other
  files
• not images, sounds

30
(No Transcript)
31
(No Transcript)
32
(No Transcript)
33
(No Transcript)
34
(No Transcript)
35
(No Transcript)
36
For Your Information

• Some say keep the size of your web page (width x
  height) at 600 pixels or less. (Pixel - short
  for picture element, one of the tiny points of
  glowing phosphor that combine to create the image
  on your computer (or TV) screen.) This will
  assist in making your web page look the same on
  all screens ( 14 and up)

37
Keep It Simple

• Start small from a header - title and a bit of
  text.
• Build on from there.
• Try inserting bold, underline, paragraph and
  lists
• Go to links, then images
• and then your imagination is the limit

38
Your Web Page is Programming

• Remember your Programming Process Steps
• Define your problem- Create a simple web page
• Plan your solution - Design how you wish it to
  look
• Code your program - HTML coding
• Test your program - Use your browser and see how
  it looks. Does it meet your design specs.
• Document - Your HTML source code is documentation
  and your written notes

39
FAQ
40
FAQ
41
FAQ
42
Using Netscape Composer

• How to Compose a Web Page
• We have two choices of where to begin.
• Initially we can load (ftp) a copy to your
  index.html file from the columbus server
  public_html directory to your local machine and
  edit it or
• We can start fresh and make sure that the name of
  the file we create is saved as index.html. (for
  ftp purposes later)

43
Option 1

• In order, to edit our main page, we must have a
  copy of our index page on our local machine to
  edit
• We can get a copy by logging into columbus via
  WS_FTP

44
Option 1

• Once logged into columbus, enter the public_html
  directory
• We choose the index.html file, select the local
  directory we want to download it to and press the
  button (c\temp)

45
Option 1

• We can now log off columbus and locate our
  index.html file on the local drive ( e.g.
  c\temp)
• It would be useful to locate all of our files for
  our homepage in one folder on our local system
  (our homepage folder) if we are editing our page
  from home
• If we are editing our page at school, we must use
  the C/Temp directory

46
Option 1 and 2
Setting Preferences in Composer

• To edit HTML Source code through Netscape, we
  must tell it which Editor we want to use
• EditPreferences Composer
• We can then select wordpad (the Windows default
  program)

47
Edit / Create the HTML file

• We can now edit / create the file by opening
  Netscape Composer
• Select Open and find the file in your system if
  it is already created, else select New.

48
Edit HTML Source Code

• Alternatively, you can edit the source code
• Select Edit HTML Source
• Word pad will open up the source code
• Remember to save your changes in Wordpad
  (index.html)

49
Refreshing our Local Directory

• After we have edited our html page, we must
  upload it
• We log back into Columbus
• Using WS-FTP, we first must refresh our local
  directory as it does not reflect the most recent
  changes to our page. Click Refresh

50
Upload to columbus

• We can then upload to columbus
• Select the index.html file on or local computer
• Open the public_html directory on columbus
• Click the Button

51
Quick Check to see if it worked

• Connect to Netscape Navigator (here at the
  school) or your own web browser. Go to your web
  site
• http//columbus.senecac.on.ca/ce124c
• You should now see your webpage through the WWW.

52
Simple Web Page Format
Web Page Title
Heading
HTML Document
Body of Web Page - Purpose of Page - Images -
Links - Email
Main Body
53
HTML Structure Tags (Codes)

• ltHTMLgt
• ltHEADgt
• ltTITLEgt
• lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• lt/BODYgt
• lt/HTMLgt

Formatting miscellaneous info.
Main area where users will read web page via a
browser
54
HTML Tags

• HTML codes or tags are used as instructions to
  allow the web browser to interpret text.
• Types of Tags
• Web page Structure Format
• Text Format
• Links / Image Information
• Miscellaneous Information

55
Tags

• Certain tags (such as structural tags) require a
  beginning tag and an ending tag.
• For these tags, it is important to match a
  beginning and ending tag.
• It is also recommended to CAPITALIZE and NEST
  these tags for identification. (Not case
  sensitive as UNIX is)

56
Formatting Web page

• ltTITLEgtlt/TITLEgt
• Will label the Windows Titlebar of Web page
• ltBODY BGCOLORgt
• Background colour of web page (Set according to
  hexadecimal code)
• ltMETA NAME CONTENT gt
• Provides author, and link content to other web
  users or search engines

57
Text Formatting Tags

• ltHgtlt/Hgt
• Will Provide a title or Heading for the body of
  the web page (not to be confused with ltTITLEgt
  tag).
• represents the size of the heading where 1
  represents a large size to 6 which represents a
  small size

58
Text Formatting Tags

• Boldface ltBgttextlt/Bgt
• Underline ltUgttextlt/Ugt
• Italics ltIgttextlt/Igt
• Bullets ltLIgttextlt/LIgt
• List ltLUgttextlt/LUgt

59
Simple Operational tags

• Line Break ltBRgt
• New Paragraph ltPgt
• Horizontal Line ltHRgt

60
Image / Link Tags

• lt A HREF http// .. gt lt/Agt
• Links to other Web sites
• lt A HREF mailtoE-mail addressgtlt/Agt
• Links to e-mail web page author
• ltIMG SRCimage.jpggt
• Display image

61
Images on a Simple Web Page

• You can incorporate images onto your Web Page.
• Use either images saved as GIF or JPEG (JPG)
  files
• You can scan pictures (Room ?) (2115?) and save
  as GIF or JPG files

62
Image Formats

• JPEG (JPG) - Joint Photographers Expert Group
• Highly compressed file
• Used for Photographs
• Quality of file may be affected due to degree of
  compression
• GIF - Graphic Interchange Format
• Compressed file
• Used mainly for cartoons or animations (animated
  gifs)

63
Attribute Tags

• ltFONT COLORredgtlt/FONTgt
• Set text colour to red
• ltFONT COLORhex codegtlt/FONTgt
• Set text colour based on hexadecimal code

64
(How to Create a Web page)

• Make sure to launch Netscape another time to open
  your file index.html. This will allow you to view
  your completed work. You should always point
  click the Reload button to show updates you have
  made to your web page!!

65
Web Page Authoring Web sites

• The BareBones Guide to HTML
• (An excellent reference site)
• http//www.werbach.com/barebones/
• CNET Web Authoring Basics
• http//www.builder.com/Authoring/Basics/ss01.html