Transcript SessionIX - Center for Lifelong Learning

Create and Edit Web Pages
Hal Pruett
and
Dolores Noechel
Session I, Jan. 20, 2017
Today’s Topics
• Survey and Get Acquainted Exercise
• Essential features of the Internet and World Wide Web
o
o
o
o
Hypertext
Difference between Internet and World Wide Web
Contribution of Tim Berners-Lee
Servers: Where your web pages are stored
• Demo: Create a web page using Microsoft Word
o Demo only, not recommended for reasons that will be discussed.
• Differences between Word and a HTML text editor like Kompozer
• Basic editing capabilities of a text editor
• Discussion of how we’ll use Kompozer
o First, learn how to use its built-in features as if it were a simple text processor like
Notepad
o Gradually create simple web pages without regard to how Kompozer creates the HTML
code in the background.
o Continue creating simple web pages and look at the HTML tags that Kompozer creates
o Eventually, discuss and use “CSS styles” to produce formatted text similar to what
Microsoft Word produces for regular documents.
Survey and Get Acquainted Exercise
•
•
•
•
Introductions: We’d like each of you to introduce yourselves and describe your
level of computer expertise.
o Benefit: You will learn something about your classmates and Dolores and I will
get calibrated on the level of detail we’ll need to use for the class.
We will be using programs that are “text processors” such as, Notepad, Microsoft
Word, etc. While describing you experience background, please let us know if
you’ve had experience using any of the above, or other similar text processor
programs.
Also, let us know how comfortable you are with using the Internet.
At this time, we’ll start the introductory exercise.
What is Hypertext?
•
•
•
•
•
•
•
•
Hypertext is a key underlying concept of the World Wide Web.
Web pages are mostly written in the Hypertext Markup Language (HTML). This
enables information to be published or accessed easily over the Internet in a
standardized form.
Embedded “hyperlinks” make it easy to jump to text or picture almost anywhere—
either on the local computer , or on the Internet via the World Wide Web.
Implementation of HTML was derived from GML (Standard Generalized Markup
Language) at IBM and later development of SGML (Standard Generalized Markup
Language).
By definition, “…ML” documents are text documents marked up with tags that
define the text in terms of paragraphs, headers, lists, tables, etc.
Specialized processors, like Word, format text in a way similar to that used for a
“..ML” document, but the formatting is not directly accessible to the user.
HTML editors like Dreamweaver or Kompozer allow the user to edit either the
formatted web-page text, or the raw text that contains the HTML tags.
Notepad allows you to edit raw HTML text, but it has no internal features (like
keystrokes or menu items) for adding tags directly; you must know the syntax for
any desired HTML tag and you must type in the desired tag manually.
The Difference Between the Internet
and World Wide Web
Many people use the terms Internet and World Wide Web (aka. the Web) interchangeably, but in fact the two
terms are not synonymous. The Internet and the Web are two separate but related things.
What is The Internet?
•
The Internet is a massive network of networks, a networking infrastructure. It connects millions of
computers together globally, forming a network in which any computer can communicate with any other
computer as long as they are both connected to the Internet. Information that travels over the Internet
does so via a variety of languages known as protocols.
What is The Web (World Wide Web)?
•
The World Wide Web, or simply Web, is a way of accessing information over the medium of the Internet. It
is an information-sharing model that is built on top of the Internet. The Web uses the HTTP protocol,
which is only one of the many languages spoken over the Internet to transmit data. Many Web services
use HTTP to communicate through exchange type business logic to share information. The Web also
utilizes browsers, such as Internet Explorer , Firefox, or Google Chrome to access Web documents called
Web pages that are linked to each other via hyperlinks. Web documents also contain graphics, sounds,
text and video.
The Web is a Portion of The Internet
•
The Web is just one of the ways that information can be disseminated over the Internet. The Internet, not
the Web, is also used for email, which relies on SMTP (Simple Mail Transfer Protocol), Usenet (a collection
of newsgroups where the users can post/read messages ), instant messaging and FTP (File Transfer
Protocol). Thus, the Web is just a portion of the Internet, albeit a large portion, but the two terms are not
synonymous and should not be confused.
WWW founder Sir Tim Berners-Lee
• He obtained his degree in physics, not computer science.
• In 1980, he was employed as an independent contractor at CERN in
Switzerland.
• His responsibility involved the sharing of information with researchers in
different geographical locations. (Note need and incentive for innovation.)
• Originated a project based on hypertext, the backbone of the WWW.
• His contribution to the world wide web, WWW:
o A universal system (Uniform Resource Locator, URL) for address of web
pages or for folders in a computer. (Demo with local file.)
o Use of HTML for file contents.
o Hypertext transfer protocol (HTTP) to open webpages when requested
by user through a browser.
• Later he modestly said that all the technology involved in the web had
already been developed; all he did was put them all together in one
comprehensive package.
• Nonetheless, his contribution has changed the world.
Servers: Where your web pages are stored
• Your web pages must be “uploaded” to a “server” that is accessible to
anyone who has a browser, a valid URL, and access to the Internet.
o Uploading process uses FTP (File Transfer Protocol); free programs are available.
• Hundreds of commercial servers are available throughout the world.
o Some are free and supported with (sometimes annoying) embedded
commercials.
o Many vendors have beginner packages that cost less than $10 per month.
• In addition to a server for your files, you must have a domain name to
enable users to reach the files you upload.
o Domain name is like a file name consisting a unique part and an extension
o Our CLL unique name is “cll-fwb” and our extension is “.org”
o Other available extension include: .com, .net, .org, .biz, .info, .int , .mobi, .org,
.pw, .tel , .travel , .tv, and many more.
• Domain purchase and registration
o Cost can be as little as $12 per year. See https://domains.google.com/ for info
about various Google options, or just do an Internet search for “domain
registration.”
Create a Web Page using only Word
•
•
•
For those who are already familiar with Word, following is a demo of how to create a simple
HTML file.
Steps:
1.
Create a text document in Word. I’ll use the text in the 1st slide to keep it simple.
2.
Copy and paste content, center the text on page in Word.
3.
Using the Word File menu, choose Save As.
4.
Word will have selected the first line of the slide, “Create and Edit Web Pages.docx” as
the filename.
5.
Click the down arrow on the right of “Save as Type.”
6.
Scroll down and select Web Page (*.htm, *.html)
7.
Word will change the filename extension from “docx” to “htm.” You can add an “l” to
make the extension “html” if you want, but it isn’t necessary.
8.
Click on Save.
9.
Open Create and Edit Web Pages.html in the saved location with your browser.
Some limitations and disadvantages of this method:
o Extremely verbose. Five text lines in demo resulted in approximately 500 lines of HTML
code. Same text in HTML editor would require about 10 or so lines of HTML code.
o The file uses non-standard Microsoft specific tags and formatting.
o Microsoft HTM file is difficult to edit and debug with any other HTML editor.
Create a Web Page using Kompozer
• Approach is similar to that shown in previous slide, except that Kompozer :
o Automatically saves document as HTML using the filename you choose.
o Picks up and applies embedded formatting when you copy text from a
Word document and paste it into Kompozer.
o Gives you the option of editing in “Design” (WYSIWYG) mode, or in
“Source” mode where you see unformatted raw text together with the
HTML tags, or in “Split” mode where you see a few lines of each type
separated into two screens split horizontally.
• We’ll use Kompozer only in WYSIWYG Design mode at first.
• Kompozer has features for editing much like those in Word. Before even
looking at HTML code we’ll concentrate on learning how to use Kompozer.
• Unlike Word, Kompozer creates and stores HTML code behind the scenes
as you create or edit a file; you don’t have to do any manual conversion.
Basic editing capabilities of a Text Editor
• Text—Choose , insert, or edit Font-related properties or
features like the following:
o Size, Name, Space between lines, Weight (normal/bold), Style
(italic/normal/all caps, etc.), Alignment (left/right/center/justified), Color,
Subscript/superscript, Symbols and foreign-language accents, Lists,
“Decorations” (Bullets, Underline), etc.
• Pictures and graphics
o Location on page, Size, Shape, Background color, Transparency, Make clickable
as a hyperlink, etc.
• Hyperlinks types
o Links to internal locations within document.
o Links to file locations in computer being used.
o Links to webpages or files in external locations on the Internet.
Discussion of how we’ll use Kompozer
•
First, learn how to use its built-in features as if it were a simple text processor like
Notepad
o
o
•
Gradually create simple web pages without regard to how Kompozer creates the HTML
code in the background.
o
•
We’ll create pages that are mostly text, then add a picture or graphic, and then create a hyperlink or
two using only Kompozer’s built-in capabilities.
Continue creating simple web pages and look at the HTML tags that Kompozer creates.
o
•
Like most Windows programs, Kompozer has a couple of primary methods for performing most
operations: Clickable icons, and access through drop-down menus.
We’ll do exercises that won’t necessarily create HTML code behind the scenes; the purpose will be
for you to gain familiarity with the process for when you will need to create HTML code.
This will be your first formal look at tags, which are composed of simple ordinary text embedded
between two pairs of opening and closing angle brackets like this: <strong>(text to bold here in the
middle)</strong>
Eventually, discuss and use “CSS styles” to produce formatted text similar to way in
which Microsoft Word styles to the facilitate formatting of doc/docx documents.
o
o
All HTML-related formatting in a HTML file is embedded using alphabetic characters, not binary code.
A HTML file is readable with any ordinary text editor.
In contrast, Microsoft Word hides formatting information internally in the “doc” or “docx” file and
only shows the user the result of the formatting, not the code that produces what you see on the
screen.