HTML WebPage Creation

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 Thing 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
WS_FTP or other FTP software - transfer web page
to the columbus server for world access. notepad,
wordpad, or nled / vi to change HTML code of
webpage. Web browser as Netscape Navigator /
Microsoft Explorer.
4
Software initially of Assistance
Netscape composer / Microsoft Frontpage web
authoring package. assist in creating a simple
web page get a feel for the - hidden HTML code
created corresponding effect created.
5
Note
You can use nled / vi on your phobos account -
ftp it to your columbus account. your HTML
codes are in Chapter 9 of Capron and man ftp
will give you the method to upload from phobos to
columbus. And Voila similar results as composer
etc.
6
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)
7
HTML and Windows
Microsoft integrated HTML directly into the
Windows operating system, allowing every storage
folder in your computer to be associated with an
HTML page and hypertext links to other folders
and pages.
8
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.
9
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
10
The Parts of a Browser
Browser control panel - shows the web address
currently displayed, buttons to go to the
previous/successive pages visited. Browser
display window - the largest part of the display.
Shows the content of the current web
page. Browser status line - shows the status of
data being loaded or the destination of selected
links (URL)
11
Link Terminology
Links on a web site are easy to see. They appear
as either Hypertext, colored text that shows the
web site to which it links. Or a link can be A
hyperregion, an icon or image with a link or
links to web sites.
12
The Parts of a Browser
Control Panel
Status Line (URL)
Display Window
13
Frames Display Window

• Most browsers support a concept called frames

• Each section can operate independently

Frames let you divide pages into rectangular
sections
14
Competition
Not just functional buttons, but buttons that
illuminate when the cursor passes over them. Not
just English, but French, German, and
Italian. Not just frames, but borderless
frames. Todays browsers are a whole suite of
programs for communicating, sharing information,
mail and security support.
15
Plug-ins
In addition to the browsers themselves, many
vendors offer plug-ins, software that enhances
the value of a browser by increasing its
functionality or features. Typical plug-ins
enhance audio-visual experience or image viewing
capability. Most plug-ins can be downloaded from
their own web sites.
16
Java

• Java is a programming language developed by Sun
  Microsystems, used to write software that can run
  on any machine.
• Java makes possible the dancing icons, sound
  clips, flashing messages, and scrolling banners
  that you see on the Internet today.
• The Java programs that provide multimedia effects
  are called applets.

17
Quick Review

• FTP (File Transfer Protocol)
• Used with TCP / IP connections
• Allows user to download and upload files (in lab
  or remote connection)
• Many manufacturers of FTP programs available
• Uses of FTP Application
• Upload source code to PHOBOS for compiling
• Download source code to PC for editing
• Upload files to webpage on COLUMBUS account

18
Web Pages Can
Have animation Have sound Have video
19
(No Transcript)
20
(No Transcript)
21
(No Transcript)
22
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
23
(No Transcript)
24
(No Transcript)
25
(No Transcript)
26
Just Type in the Code
Instead, you type in the HTML code that tells the
Web browser where to find the media files. The
media files themselves remain separate, even
though the Web browser will make them look as if
they're part of the same document when it
displays the page.
27
Different Browser Versions
Different versions of browsers display different
displays of your web page. Even the same version
of a browser can appear different with different
display options. Screen resolution, window size,
and optional toolbars change how much of a page
someone sees when it first appears.
28
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
29
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
30
Using Netscape Composer

• How to Compose a Web Page
• We have two choices of where to begin.
• Initially we can load (ftp) a copy of 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)

31
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

32
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)

33
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

34
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)

35
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.

36
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)

37
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

38
Upload to columbus

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

39
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/ce124u
• You should now see your webpage through the WWW.

40
Simple Web Page Format
Web Page Title
Heading
HTML Document
Body of Web Page - Purpose of Page - Images -
Links - Email
Main Body
41
HTML Structure Tags (Codes)
ltHTMLgt ltHEADgt ltTITLEgt
lt/TITLEgt lt/HEADgt ltBODYgt lt/BODYgt lt/HTMLgt
42
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

43
Tags

• Certain tags (such as structural tags) require a
  beginning tag and an ending tag. (paired tags)
• 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)

44
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
45
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
46
Text Formatting Tags
Boldface ltBgttextlt/Bgt Underline ltUgttextlt/Ugt Italics
ltIgttextlt/Igt Bullets ltLIgttextlt/LIgt
List ltLUgttextlt/LUgt
47
Simple Operational tags
Line Break ltBRgt New Paragraph ltPgt Horizontal
Line ltHRgt
48
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
49
Images on a Simple Web Page
You can incorporate images onto your Web
Page. Use either images saved as GIF or JPG
(JPEG) files You can scan pictures (Room 2115)
and save as GIF or JPG files
50
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)
51
Attribute Tags
ltFONT COLORredgtlt/FONTgt Set text colour to
red ltFONT COLORhex codegtlt/FONTgt Set text
colour based on hexadecimal code
52
(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!!
53
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/A
uthoring/Basics/ss01.html