Building Your Own Web Site
Download
Report
Transcript Building Your Own Web Site
Building Your Own Web Site
Objectives
• Create and publish a Web site
• Write HTML code
• Use resources to help build a Web site
• Use HTML authoring tools
Creating a Simple Web Site
from Beginning to End
• Creating a Web site is a three-step
process:
1. Create the Web page files. This includes the
Web page and any additional multimedia
content, such as an image file, sound file, or
movie file.
2. View and modify the Web page.
3. Publish the Web site by copying these files to
a Web server.
Creating a Simple Web Site
from Beginning to End
(Continued)
• To publish your Web site, you need
access to storage space on a Web server.
• The Web server that stores your Web site
files is known as your Web host.
Creating a Web Page
• Using HTML, you can create a dynamic Web
page that contains small and large text,
hyperlinks to other Web sites, and even an
image.
• You can create your Web page using a text
editor, such as Notepad or WordPad.
• Although many other tools are available to
create and publish Web pages, for your first
effort, you use the tools that are common to
every computer.
• Notepad to create the Web page file and an FTP
utility to publish the file to a Web host.
Publishing the Web Site
• When you publish a Web site, you copy all
the pages and supplemental files needed
to build the Web site to the Server.
• To copy files to a server, you need:
– The domain name or IP address of the Web server
where your Web site will reside
– A user ID and password that gives you access to
the server and your folder
– The Web site file or files, and any supporting
graphic files
– Software to transport files from your computer to
the server
HTML Structure
• An HTML document is divided into two-parts, the
header and the body.
• The header contains information about the
document, such as the editor that created it, and
keywords that help a search engine find it.
• Interspersed throughout the header and body
are instructions.
• Unlike the text and graphics, these instructions
are not displayed by the browser.
HTML Structure (Continued)
• HTML is interpreted and executed by the
browser.
• HTML instructions are called tags.
• Most tags consist of a keyword.
• An example of a keyword is head.
• HTML tags are not case sensitive.
• You can embed one pair of tags within
another pair of tags.
HTML Structure (Continued)
• All HTML documents should contain at
least the following three sets of tags:
<html></html>
<head></head>
<body></body>
• An attribute allows you to specify how an
HTML tag behaves.
HTML : Using Headings
• Headings and tags assign a
predetermined style to text in an HTML
document and are used to enhance the
appearance of the document.
• Use headings tags to format and set off a
title or subtitle on a page and to
emphasize important text.
HTML : Using Graphics
• Graphics, including photographs, clip art,
background patterns, and artistic fonts,
also are important elements of Web page
design.
• Three popular types of graphic files:
– JPG
– JIF
– PNG
HTML : Organizing Files on a Web Site
• Keeping all your Web site files in one folder can
make managing those files difficult, especially
when the Web site is complex.
• If you are planning a large site, you need to plan
the folder structure before you start creating the
Web site.
• In the top, or root folder, put the home page
(index.htm, default.html, or some other name,
depending on the requirements of the Web
server).
• All other folders should be stored in this main
folder.
HTML : Using Hyperlinks to Point to
Other Web Sites
• One nice thing about hyperlinks is that you
can use them to point to other HTML files,
either on the same Web site or on a
different site.
• The anchor tag, <a>, is a tag that marks
a link to another part of the same
document or to another document.
• The tag must be used with an attribute; the
most common attribute used with the <a>
tag is href.
HTML : Using a Graphic as a
Hyperlink
• A graphic can also be used as a hyperlink.
• Instead of entering text in the anchor tag,
you simply enter the <img> tag for the
graphic.
• Example:
HTML : Using Hyperlinks to Point to
Locations Within One Document
• To create a hyperlink that links to another
point in the same HTML file, you need two
anchor tags: one for the hyperlink itself
and a second anchor tag that marks the
destination place in the Web page.
• The second anchor tag is called the link
target, destination anchor tag, or the
jump link.
HTML : Creating Links That Point to
Other Pages on the Same Web Site
• A hyperlink that points to a different file on
the same site needs an anchor tag that
contains the name of the HTML file that is
the destination, or jump link.
HTML : Using HTML Tables
• Web pages commonly make use of tables
as convenient methods of organizing
information.
• A browser displays a table as a set of rows
and columns.
HTML : Using HTML Tables
HTML : Creating HTML Forms for
Data Input
• It’s often necessary to have your Web page
collect data from the user and transfer it back to
the Web server, or send it to you or someone
else through e-mail.
• To accomplish this, you need to create a form,
which is an HTML element that allows a Web
page to collect data and send it back to the Web
server or an e-mail recipient.
• A form can use standard Windows elements,
such as text boxes, check boxes, radio buttons,
drop-down lists, and other elements to collect
data.
HTML : Testing Your Site
• You should always test your Web site
before you publish it.
• Start by testing all the hyperlinks.
• Be certain to test every hyperlink on every
page to make certain that each link jumps
to the correct location.
• In addition to testing hyperlinks, you need
to check the appearance of your Web
page using different Web browsers in
varying versions, and ensure your Web
page doesn’t take too long to download.
HTML: Testing Your Site
(Continued)
Testing Various Browsers and Screen Resolutions
• Web browsers interpret HTML in ways that are
subtly unique.
• In addition, individual settings such as screen
resolution can dramatically affect the way a Web
page looks.
Calculating Download Rates
• Bandwidth is the speed at which data is
transmitted, usually measured in bits per
second.
HTML: Testing Your Site
(Continued)
• If your Web page takes a long time to
download, users will get frustrated and not
view your page.
• Every communication, every instruction,
and every piece of data in a computer can
be reduced to a series of zeroes and ones.
• The term bit refers to a state, either On
(one) or Off (zero).
HTML: Testing Your Site
(Continued)
• The following list summarizes information
about bits and bytes:
– A bit is either a 0 or a 1
– 1,024 bits = 1 kilobit (1 Kb)
– 8 bits = 1 byte
– 1,024 bytes = 1 kilobyte (1 KB)
– 1,024 kilobytes = 1 megabyte (1 MB)
– 1,024 megabytes = 1 gigabyte (1 GB)
Resources to Help You Develop
Web Design Skills
• Check out these sites, which have much to offer
to both the novice and the expert and also offer
some free graphics and photos:
– HTML Help by the Web Design Group at
www.htmlhelp.com
– CNET Web Building at builder.com and
www.cnet.com
– Web Developer’s Virtual Library at www.wdvl.com
– Refer to page 103 for the remainder of this list.
Using a Simple HTML CodeBased Editor
• Many good code-based HTML editors are
available.
• CuteHTML can be downloaded from the
Web site www.globalscape.com,
www.download.com, or
www.cutehtml.com.
• You can download a free evaluation
version that works for 30 days.
Introducing Microsoft FrontPage
• If you have access to Microsoft FrontPage,
you should complete the steps listed in the
text to create the index.html file.
• Refer to pages 104 through 110 for the
procedures to create the index.htm file in
FrontPage.
Macromedia Dreamweaver
• Dreamweaver, by Macromedia, is a
favorite WYSIWYG HTML editor for
professionals.
• Pages created in Dreamweaver can be
customized using JavaScript, and HTML.
• You can edit tags manually in design view
without using the HTML editing window or
an external HTML editor.
Macromedia HomeSite
• HomeSite, by Macromedia, is an HTML
editor that began as a shareware program
and has evolved to become one of the
most popular code-based HTML editors on
the market.
• Beginners find it easy to master and it also
is popular with more advanced users.
NetObjects Fusion
• NetObjects Fusion is a good tool for those
who have little HTML experience, but who
want to produce a Web site quickly without
having to deal with HTML code.
• NetObjects Fusion is not as popular with
experienced HTML users.
Adobe GoLive
• GoLive, by Adobe, is available for both
Macintosh and Windows systems.
• The interface is easy to use in its
presentation of basic HTML functions, but
not as simple when creating style sheets.
CuteHTML
• It’s an easy-to-use, code-based HTML
editor that offers color-coded tags and
help when entering tags.
• When you begin to type a tag, a dropdown list of tags opens.
• When you select a tag, a drop-down list of
attributes for that tag opens.
1st Page 2000
• 1st Page 2000, by Eversoft Inc., is a free
HTML editor that offers four modes of use:
Easy, Normal, Expert, and Hardcore.
Summary
• A Web Site requires hard drive storage
space on a Web server, together with an
account and password to the server to be
published.
• HTML contains instructions called tags
that are enclosed in angle brackets.
• Three types of graphic files supported by
the Internet are JPEG, for photographs,
and PNG, and GIF files for clip art.
Summary (Continued)
• Hyperlinks are created using the HTML
anchor tags <a>.
• An HTML form receives user input that can
be e-mailed to a recipient or sent back to
the Web server for processing.
• HTML editors are of two types: code-based
and graphical (also known as WYSIWYG).