The Structure of a Web page
Web pages are actually
text files that are "tagged" with symbols to represent structure
and function. You can prepare and edit Web pages in any text
editor or word processor you like. The system of tags, called HTML
(HyperText Markup Language), is very logical and not difficult to
learn. However, you don't really need to speak fluent HTML in
order to create your own Web pages. There are several shortcuts
that have been developed to simplify the process.
The icons, pictures, sound bites, and video clips that are common
on Web pages are actually separate files that are referred to by
special HTML codes. When the page is viewed by a Web browser, such
as Firefox or Internet Explorer, these HTML codes
are interpreted by the browser, which pulls in all the separate
files and assembles the Web page in the form you finally see it.
This is in contrast to a modern word processor, in which the
editing and viewing functions are integrated into one program and
in which all the text, graphics and other elements of the document
are contained in one document file. For that reason, the process
of creating Web pages is less direct that creating an equivalent
word processor document.
Writing HTML
pages
Text remains the most important part of most Web sites and thus
will be the first element considered here. All of the text of a
Web page is contained in an ASCII text file that is "marked up"
with HTML codes and is usually given a file name that ends in
".html". The "body text" of the page is simply written out in
plain text in the html file. You can use any convenient plain text
editor to write your HTML files, e.g. SimpleText on the
Mac or Notepad on Windows.
Should you learn HTML?
Learning HTML yourself will allow you to customize your Web pages.
It is not hard to learn; in fact, it is a very logical system that
has a certain appeal. Try looking at my
Introductory HTML Tutorial, with working examples. It
explains all of the essential aspects of HTML. There are sections
on text formatting, graphics, hyperlinks, sound, lists, tables,
background colors and patterns, etc.
Do I need to buy a Web editor program?
Not really. All you really need is a Web browser and the text
editor that came with your computer. There is no need to be tied
down to a commercial Web editor that will eventually become
obsolete or require upgrading to a new version. Web editors do,
however, make it easy to create attractive Web pages without
learning HTML. But you don't actually need to spend any money;
there are good free web editors that you can download, such as SeaMonkey,
which is a Web browser with a convenient built-in web editor.
These work a lot like word processors, but they include extra
features for creating links, site management, uploading pages to
your server, cascading
style sheets, etc. There are also Web-based page
editors that do everything within a web browser, for example
Google's easy-to-use Google
Sites.WebsitePlanet
has nice list of
website builder software.
HTML Templates
If you do not want to learn HTML right away, you can still create
Web pages by using a template created by someone else that has all
the required HTML tags in place and that you type or Paste your
text into. Just Google "HTML
templates" or "web
templates " and you will find thousands of colorful,
attractively-designed templates to download.
If you're a teacher looking for simple templates for classroom
Web site construction, see Using Templates
to Produce Web-Publishable Multimedia Projects, which I
created for my wife, who was a 5th grade teacher. These templates
create entire web sites, with multiple pages
linked together in a chain, complete with navigation buttons.
There are links there to downloadable sets of templates for
constructing entire class-project web sites, such as slide
shows, alphabet
books, etc. Complete step-by step instructions are included.
For editing templates, I recommend NoteTab Light, a freeware multi-file text editor that allows all the files in a template to be opened at once and performs search and replace functions within all the files of one template simultaneously. Great for changing background and text color throughout an entire template, adding image and sound links, or changing graphic or sound file types throughout a multi-page site.
Some
tips on creating Web pages
If you are developing a Web page using a text editor to write
HTML, it's convenient to keep your Web browser and the html file
open in a text editor (such as Notepad, NoteTab, or SimpleText) at
the same time. To view the page as it will appear in your Web
browser, click on the browser window, pull down the File
menu and select Open File , select the html file and
click on Open. If you want to make a change, click on the
text editor window, edit the html text, Save it, then
click on the browser window and click on the Reload
button.
You may find it easier to type up your text in your favorite
word processor, where you will have access to a spell checker,
etc., then Copy and Paste the text into the
template. Don't attempt to format the text in the word processor,
as all formatting is lost when the text is copied and pasted,
unless you "Save As..." in HTML format, then copy and past the
HTML code into your template. Rather, formatting codes can be
added to the text afterwards. Don't worry about line length and
line breaks; Web browsers ignore carriage returns and other line
break characters and automatically format text to the width of the
window (which is controlled by the user, not by the author). To
separate paragraphs, add a <p> tag between paragraphs.
You can use your word processor to create and edit HTML templates,
but be sure to Save As... in TEXT-only format.
Converting Word Processor files to HTML
You can use the "Save as HTML" command to convert your documents
into HTML. This automatically converts the text portion of the
document into HTML format and saves all the graphics in the
document a a separate folder. Therefore a single word processor
document with pictures will be converted into one HTML document
and one folder of graphics; keep them together so they won't get
separated. You will find that the HTML produced by a word
processor is very messy and hard to read, but it works.
Finding Graphics for your Web Pages
The icons, background patterns, and pictures on Web pages are
actually separate files that are referred to by special HTML
codes. The graphics files are either in GIF, JPG, or PNG format.
You can create such graphics in many ways; for example by drawing
them in a drawing program, capturing screen shots, taking pictures
with a digital camera, scanning photographs and flat artwork with
a scanner, capturing still frames from a video source, etc. A
graphics editor program can then be used to convert the files into
the required PNG, GIF or JPG formats. JPG is the best format for
photographs; PNG and GIF are best for line drawings and graphs.
The easiest way to obtain graphics to adorn your new Web pages is to capture them from other Web pages. ANY graphic that is is displayed on a Web page can be easily captured by you and saved for your own use. All you have to do is to position the mouse pointer on the graphic you want and hold down the mouse button (the right mouse button on a PC). A pop-up menu appears; move the pointer to select "Save picture as..." and let up the mouse button. The "Save As..." dialog will appear, displaying the name of the graphic file (with a .png, .gif or .jpg extension indicating whether it is a PNG, GIF or a JPG file type). Navigate to the desired location and click on Save.
Graphics saved in PNG, GIF or JPG format are ready to use on Web pages; to display such a graphic on your page, just save the graphic file in the same directory (folder) as the HTML file and add to the HTML file an image reference tag: <img src="FILE NAME OF GRAPHIC"> where FILE NAME OF GRAPHIC is replaced by the full file name of the graphic. For example, if the name of the graphic file is "mypicture.jpg", then the HTML code would read <img src="mypicture.jpg">.
There are many sources of graphics on the Web. Use a search engine to search for "clip art" or "free pictures" or "free images". A convenient way to locate images is to use Google's image search. Type in one or more search terms and this image search engine will return a list of results illustrated with thumbnail previews (little postage-stamp sized images) of each image it finds.
Making your
own Digital Images
There are two basic ways to make your own digital images to
display on your Web pages: use a digital camera to take the
pictures, or use a scanner to scan photographs or other flat-copy
material. Both digital cameras and scanners are now widely
available and relatively inexpensive.
A digital camera is ideal for taking portraits of
people, artwork, classroom activities, and field trips. Most of
them come with a cable and software to transfer the pictures to
your computer. Most cameras save their images as JPG files,
which is a format used for photos on the Web. However, most
digital cameras take pictures that are far too big to fit
on a Web page and take too long to display, but you can use a
graphics editor program to crop or reduce the images to a more
manageable size.
A color scanner is ideal for scanning printed pictures
magazines and flat artwork such as paintings and drawings.
Scanners come with their own software - refer to your scanner's
documentation to learn how to operate it. Before you start
scanning, set the scanning resolution to 72 dpi or 75 dpi (dpi =
dots per inch). (Follow the scanner's instructions to learn how to
set the resolution). This will result in images that are 'life
size", that is, as big as the original scanned object. To make the
image larger that life-size, set the scanning resolution
greater than 75 dpi; to make the image smaller that
life-size, set the scanning resolution less than 75 dpi. Most
scanners can save scanned images in various formats: JPG format is
usually the best choice. When you save the scanned image, choose
JPG in the "Format" pop-up menu in the Save dialog box. However,
if you are using a web editor such as SeaMonkey, you can
Insert, or Copy and Paste, graphics in any pixel size and then
resize them as in a word processor by dragging the "handles" at
the corners.
Changing
graphic formats
The graphics and icons that are displayed on Web pages are
separate files that must be in either PNG, GIF or JPG format. To
crop images or convert from one format to another, you can use a
free graphics program, such as Graphic
Converter for the Mac, or Paint (a simple
graphic editor that comes with all PCs) or Irfanview for
Windows.
The choice between PNG, GIF or JPG formats depends on the nature
of the graphic. GIF format is most efficient for sharp-edged
computer-generated charts and graphs and flat-colored cartoon-like
drawings, PNG handles colors more accurately and is better if
there are graduated shadings, and JPG is most efficient for
digital photographs, captured video frames, and other pictures of
natural objects. Using the proper format will give you the best
image quality AND the smallest file sizes, which minimizes the
time it takes to view the pictures with a slow Internet
connection.
GIF images can also be animated and they will play on
any web browser without any add-ons, plug-ins, or any action on
the part of the viewer. I use ScreenCast-O-Matic,
a free one-click screen capture recording on Windows or Mac
computers with no install. You can use it to capture the animated
screen display of any program. Very convenient.
To open a picture with a graphics editor program, you can
either:
2. Plug the microphone into the back of the computer, in the
small round jack that is labeled with a picture of a microphone.
If you are recording from a tape recorder or CD player, connect
its output into the microphone input. (You will need to obtain a
suitable connector cable, which you can get from Radio Shack).
3. Launch you sound recorder program. Follow its instructions to
record the sounds. Adjust the sound volume to get a clear
recording. Save the sound files in mp3 or wav format. Place the
sound files in the same folder as the HTML and graphic files.
4. To get the sound to play from your Web page, create a hyperlink to the file. For example, if you saved your sound file as "sound1.mp3", you could add this to your Web page:
Click <a href="sound1.mp3">here</a> to download a sound bite.
This creates a hyperlink to the sound file "sound1.mp3", assuming that it is stored in the same directory as the calling page.
When the user clicks on the link, the browser downloads the
file, looks at the file extension, determines what helper
application is designated for that type of file, launches it (if
it is not already open), and then loads and plays the sound
file.
Click <a href="geetar.mid">here</a> to hear a brief sample of music.
Adding video is exactly like adding sound, except that the file name must refer to a video file, such as an mpeg, mov, wmv, or avi file. Most digital cameras are capable of taking small videos in a size and format suitable for a web page. Video works just like sound; clicking the the link downloads the video and summons whatever video playing software you have installed on your computer. Click <a href="fireworks.mpg">here</a> to see a brief video.
You may even consider using a Web browser as a sort of low-end multimedia presentation system for stand-alone use in a classroom or computer lab. Web browsers are free; support formatted text, color graphics, and digitized sounds and video; are available in identical versions for both PCs and Macs; and the presentations so produced are easily converted between PC and Mac formats and are ready to be put "on the Web" when and if you have access to a Web server. Web pages can be distributed on and read from CD-R disks or USB drives or local area network file servers. Because of their speed and capacity, USB drives disks are especially good for pages that have lots of large graphics, sound files, or video clips.
Note: if you using a PC-based CD-R writer ("burner") to produce Web sites on CD-R for playing on both PCs and Macs (taking advantage of the Mac's ability to read PC-formated disks), be sure to limit all HTML, graphic, and sound file names to 8 characters with a 3-character extension (for example "PAGE1.HTM"). Otherwise, older Macs will not be able to read the site.
Finding a Host to Serve your PagesMany commercial Internet service providers (ISPs) and Internet companies like Google provide Web page ("home page") space for their customers; it's not uncommon to be given 10-30 MBytes free (Google gives you 100 MBytes!), with more space available at extra cost. See your provider's documentation for more information. Do a Google search on your ISP's name and "personal web pages" for more information. Look for sections titled something like "Connecting to Your Site", "Web Site Management", "Uploading Files", "Determining Your URL", "Linking Your Pages", "Publicizing Your Web Pages" or something like that. (These section titles are taken from the Verizon web server documentation; other ISPs will use other terminology).
Most web site hosters have an online "site builder" that allows you to construct web pages online, using only a web browser. For example, Google has the easy-to-use Google Sites. - here's a simple home page I created in 2008. The big advantage of this approach is that you don't need to find a host to serve you pages - the pages that you develop are automatically hosted on the same site, greatly simplifying the edit/upload/view cycle because a single program (web browser) and web site is used to create, edit, upload, and view the developing site. However, using a site builder such as this binds you to that particular site; there may not be an easy way to transfer your site to a new server in the future. I suggest that you create your site on your own computer, keep a copy of the files yourself, then upload the files to your Web server. That way you can simply upload the files to a new server anytime you change ISPs in the future.
Uploading your PagesSome hosts allow you to use a separate FTP program for uploading (FTP = File Transfer Protocol), for for example WSFTP LE or WinSCP, for educational uses. Such programs allow you to upload whole folders of files at once, making it relatively easy to upload and download an entire previously-developed site or to move a site from one web server to another. Of course, you can also upload a single page or image, for example to correct a error. Again, you have to set up these programs with the correct server address, user name, and password.
For business or professional purposes, your company or school
system may operate a central Web server that is operated by a Web
administrator; in that case you can usually just submit all your
HTML files and graphics to the Web server administrator on a CD-R
or a USB drive and they will take care up putting it on the Web
server. Ask them to tell you the URL (Web address) once it is on
the server.
Going Further
Robert Mening's "HTML5 Beginner’s Guide" (websitesetup.org/html5-beginners-guide)
is a beautifully designed instructional site that explores the
most recent incarnation of HTML, namely HTML5, which has unproved
support for the latest multimedia. Web Hosting Rating
has a huge
list of the top 100 web development resources and tools. If
you are interested in creating a blog (short for Web Log), have a
look at https://makeawebsitehub.com/how-to-start-a-blog/.
Also How
to make a website with WordPress and How
to start an eCommerce Website. Periodic
Table of HTML is a Beginner-Friendly HTML5 Table of
Elements. Other tutorials:
Build
Your Own Blog With WordPress, How
To Install a WordPress Website in 4 Minutes – The Definitive
2020 Guide, and WebsiteSetup's
"How to create a website". How to
start a student blog. How
to start a student website.