1. Create and Edit Web Pages
Hal Pruett and
Dolores Noechel
Session II, Jan. 27, 2017

2. Late Addition to Notes
Thanks to Diane Harrison for sending the information below that I forwarded to all of you earlier this week. I’ve added a couple of comments of my own.
Kompozer web authoring software is a free download.  It is cross platform compatible.  The application can be loaded from
The user guide for Kompozer is available online. 
This site has a detailed tutorial for a beginner.
My comments about the above tutorial:
Overall, the site wizard tutorials are very good, but…
The method described for a creating multicolumn layout using HTML tables is discouraged for several reasons. Table-based layouts are slow to load and editing content in the table cells is difficult. Methods that use CSS are encouraged instead because of improved design flexibility and code that is easier to edit. Note: The HTML file that opens when you use the URL, is a table-based page that makes it easy to present links to class files in tabular form.
Feedback forms need to be crafted carefully because web page integrity and security is a major concern. Improperly crafted forms open any web site to data theft and site hi-jacking. 

3. Today’s Topics Reminder of how we intend to structure course
Session will be demo’s and exercises to show the similarities and differences between a HTML editor, like Kompozer, and a text editor like Microsoft Word.
Reminder of how we intend to structure course
Some tips on zooming temporarily in Kompozer for readability
Text entry and formatting
Setting size of “container” for your text and pictures, etc.
Menus and keystrokes for text formatting using the list presented last week, namely: Font size, Font name, Space between lines, Font weight (normal/bold), Font style (italic/normal/all caps, etc.), Text alignment (left/right/center/justified), Font color, Text subscript/superscript, Special symbols and foreign-language accents, Ordered and unordered lists, List decorations (Bullets, etc.)
Pictures and graphics (if time permits)
Location on page, Size, Shape, Background color, Transparency, Make clickable as a hyperlink, etc.
Hyperlinks types (if time permits)
Links to internal locations within document.
Links to file locations in computer being used.
Links to webpages or files in external locations on the Internet.

4. Some tips on zooming temporarily in Kompozer for readability
Windows programs allow you to “zoom in” on the contents of the screen by holding the Control key and rolling the mouse button toward the front of the mouse. (Roll in opposite direction to decrease the zoom.) Unfortunately, this feature doesn’t work when running Kompozer that has tiny hard-to-decipher icons and small lettering on labels.
ZoomIt is a free program for zooming contents in any program, and more.
Download ZoomIt at
Initial (settable) default zoom factor is 2x. Just roll the mouse wheel to increase or decrease the amount of zooming.
Move the mouse to choose what part of the screen you want to enlarge.
ZoomIt eliminates need to squint at tiny features of Kompozer
Default shortcut key combination is CTL+1 ( the number 1)
Will demo and describe basic features
Will ask if we can get it installed in Room 357
If you want to learn more about how to use ZoomIt, open the brief tutorial:

5. Reminder: How we intend to use Kompozer
First, learn how to use its built-in features as if it were a simple text processor like Notepad, but with some ones like those in Word
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.
Gradually create simple web pages without regard to how Kompozer creates the HTML code in the background.
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.
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.
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.

6. Demo’s and Practice Kompozer defaults versus Word defaults
Margins:
Word has options for setting page size and margins for each of four sides
In contrast, a HTML web page has a definite width as well as left and right margins.
Page top margin can be zero if you want first line of text to be at top of browser window.
Demo/practice: Open Kompozer and type “abc.” Note position at top of Design window
Web page height can be as large as you want because browser will scroll down as needed.
Web page height only a consideration if you need to create a PDF version.
Demo/practice changing width of “page” in Kompozer
Put mouse cursor on right end of long horizontal box that shows width in pixels.
Hold left mouse key down and drag end of box left to create size of about 960 px.
Default font name/size
Kompozer default “Body Text” appears to be Times New Roman, size = ?
Easy to set in Word; also, successive paragraphs “inherit” font of previous
Kompozer: Each paragraph text will be default “body” font (not specified) when not explicitly formatted individually.
Later you’ll learn how to create a “style” to set a default font and size.

7. Demo’s and Practice—II
Word “text boxes” vs HTML “containers”
A Word text box lets you constrain text, or other content, in a box having dimensions you choose and to locate it anywhere you choose on a page.
HTML code has several equivalent options for placing content where you want it.
Kompozer basically only offers one option, “div” until you progress to where you can define a style for an arbitrary size “container” and place it where you want.
Will defer demo of Kompozer “div” feature until later.
Demo and practice font-related formatting
Delete any text you have on the Kompozer design screen.
Type, “The quick brown fox jumps over the lazy dog.” to use for formatting.
Select “quick” and use CTL+B to make it bold. (Same as Word.) Alternatively, click on the “B” icon on the bottom line of the menu options
Select “lazy” and use CTL+I to italicize it. (Again, same as Word). Alternatively, click on the “I” icon on the bottom line of the menu options
Select the whole sentence and click in box just above the Design tab that originally is labeled “(untitled)” until you give the file a name. Pick a font such as “Arial.”
Alternatively, click on the “Format” menu tab (ALT+O), select Font (just press F) and choose Arial from the drop-down list.
Use Format menu tab and select Size (just press Z). Will discuss what the options mean. To set a precise size, you need to be able to use “styles”
Use Format menu tab and select Text Style (just press S). Notice various options.

8. Demo’s and Practice—III
Continue demo and practice font-related formatting
For practice, enter a “2” after “dog.” in the sentence, then select just the 2.
Use Format menu tab and select Text Style (just press S).
Select “Superscript” (just type a “P”) to change the 2 to a superscript. Repeat above step to return the 2 to normal Repeat above first step and select “Subscript”
Select whole sentence again.
Use the Format menu again and select “Text Color,” or click on black icon. Note that this option gives you option to choose a color precisely by clicking with a mouse, or by using a defined name, or by entering a numeric value, etc .
There are 16 "predefined" HTML colors that can be specified by name: Black; Silver; Gray; White; Maroon; Red; Purple; Fuchsia; Green; Lime; Olive; Yellow; Navy; Blue; Teal; Aqua
Using a numeric value or defined name can ensure consistency among web pages
If you accidentally choose white text on a white background, use the mouse to swipe across the text area and then choose a text color other than white.
HTML colors can also be described in terms of “rgb” (red, green, blue): Demo: Change “dog” into a blue “dog” with value “rgb(0,0,255)

9. Demo’s and Practice—III
Continue demo and practice font-related formatting
Text alignment (left/right/center/justified)
Series of icons to right of “B I U” icons are similar to those in Word.
Options are left, center, right, and justify.
To demonstrate justify option, paragraph has to have more than one line. Will discuss and demo obtaining sample using Lorem Ipsum pseudo Latin text.
To obtain this text in Word, type =lorem() and then press Enter.
Special symbols and foreign-language accents
In top menu line, click on Insert and then Characters and Symbols
Some of the options are shown in the snippet on the right.
Kompozer departs from usual practice of inserting “entity names” that use only alphabetic and numeric characters available on the keyboard for special symbols; instead, Kompozer inserts the actual symbol in the text displayed both on the design screen and in the actual HTML source code.
An example of an “entity name” is “copy” for “copyright.” Such names are normally entered in HTML code as a several-character sequence embedded between an ampersand and a semicolon; not the actual symbol. Thus, copyright would be entered as ©
“Entity numbers” have a form like < for a “<“
Demo entering “euro” entity (case sensitive) to obtain € directly in the Design screen.

10. Demo’s and Practice—IV
Present, demo, and practice layout-related formatting
Ordered and unordered lists
A list of steps in sequence need to perform a task is an ordered list.
A list where order is unimportant is an unordered list.
Kompozer can format either type
Practice: Type a series of lines that represent a task like baking a cake
Entries might be something like “Preheat oven to 325 degrees”, “Put cake mix in a large bowl”, “Add one cup of milk”, “With a mixer, or by hand, thoroughly mix the ingredients”, “Put mixed ingredients in a cake pan”, etc.
Make a list like the above in Kompozer’s Design screen, one item per line.
Select all the lines and then locate the icon pair that looks like this:
Click the left-side icon to create an ordered list.
Click the left icon again and then click the right-side icon to make it an unordered list . Note that Kompozer has added bullets at the beginning of each line automatically.
Right click on the list and select List Properties. Note that in the Bullet Style box you can change the line “decoration” to an open circle or a solid square. Had you wanted earlier, you could have changed the starting number for the ordered list. Will demo.
Comment: An icon operate like a toggle switch; click it once to turn on, click again to turn off.

11. Demo’s and Practice—V Pictures and Graphics
Kompozer has a couple of methods for entering an “image” file
Click on Insert menu and then on Image… or click on the Image icon in the row of icons just below the Menu row
Practice: Insert a copy of our web site masthead picture
With Kompozer open, use one of the above methods to show the form for entering the location (link) of the image file.
In the location box, type the address shown at the end of the red arrow above.
Enter “CLL Masthead Picture” as the Alternate Text. I’ll explain Alternate Text.
To change the image size, click on the Dimensions tab and edit it.
Enter “Nearby Emerald Coast Beach” in the Tool Tip box. I’ll explain Tool Tip.
For now I’ll not discuss Spacing, etc. under the Appearance tab.

12. Demo’s and Practice—VI
Anatomy of hyperlinks
Previous slide used a hyperlink for a picture file located on CLL-FWB.org
Location could have been anywhere on the Internet, or on a local disk, or even elsewhere in the same active web page.
Kompozer has a feature to handle any of the above for text or pictures.
We’ll first discuss a hyperlink for jumping to a location within the web page being edited, then opening an HTML file stored elsewhere on the same computer, and lastly, a file stored somewhere on the Internet.
Hyperlink to jump to location within web page being viewed
We’ll use several paragraphs of Lorem Ipsum pseudo Latin for the exercise.
Will demo how to obtain in Word and copy to Kompozer’s design screen.
At end of the last paragraph, type “End” (without quotes), select it.
Click on the Anchor icon (or select the Insert menu item), choose Named Anchor… Pop-up form will display End as the anchor name; click OK.
Before continuing, discuss how a Kompozer “Anchor” is just a target for a hyperlink . Although all HTML5 browsers now continue to support link-targets created by this method, the W3C has implemented a new preferred method. Old one will be denigrated. The new method is similar, but much more flexible.

13. Demo’s and Practice—VII
Hyperlink to jump to location within web page being viewed (continued)
An anchor isn’t of much use alone; to use it we need a hyperlink that Kompozer is able to create for us.
Below, general method of creating any hyperlink with Kompozer is described.
Create a hyperlink
First, put the cursor where you want the link to appear. Put it at top for purpose of this exercise .
Next, use any of these three methods: Click on the Link icon in the icon row, or use the Insert menu and choose Link, or just type CTL+L.
When the Link Properties form opens, note the blank Link Location box near the middle. Click on the down arrow at the end of the blank box.
Because we’ve already created a target (anchor) named “End” for our link, Kompozer has placed it in a selectable drop-down list (that may have other link targets that you have created previously).
(Will discuss why “anchor” name begins with a # sign in dropdown list.)
Select #End, click in “URL is relative…” box, and then click OK.
In top empty box, type Jump to end of document and click OK.

14. Demo’s and Practice—VIII
Hyperlink to jump to location within web page being viewed (continued)
Demo: Right-click on the Jump to end of document link and then select Link Properties.
In the Link Text box we could have typed anything we wanted as a label, even if the text didn’t relate to the target in any way.
This ability to display text, but not showing the target hyperlink, is an easy way for scammers to entice you to jump to a site that, when you click on the link, loads malware on your computer, or sends you to a pornographic site.
Example: A bad guy could enter “Free iPad to 1st 100 users” and in the box where we selected #End, he could put a hyperlink to malicious site like BadGuysRus.com!
Because of this ability to disguise links, never click on a link that you haven’t verified by some independent means—even if you received it from a friend.
At the very least, rest your cursor on the link and look at the bottom left corner of your browser screen. You will see a hyperlink that would look like this: file://C:/CreateEditWebPages/LinkDemo.html#End for a link demo created earlier, or like: if you’ve chosen our home page is the destination.
Demo Jump to end of document link in a browser and explain why the link changes color
Click moves cursor to front of target (anchor) location; doesn’t select anything.
Kompozer doesn’t have ability to execute links; you’ll need to use a browser.
For demo purposes, make the browser screen width narrow so that the link target is below the bottom of screen; else you will think the link didn’t work. Reason: The cursor moves, but doesn’t select anything to make it visible.

15. Demo’s and Practice—VIII
Hyperlink to jump to location in file elsewhere on your computer
Same basic steps as previous for link within document, but you need to change the link target.
Delete text on Kompozer screen and prepare a new link (CTL+L to open)
Snippet at right is an example of what the form would look like to open an existing web page on this computer.
When you open this box initially, the Link Text box will be blank and you’ll need to type in the label you want.
If you need to edit an existing link, right click on the link in Kompozer and select Link Properties in the pop-up menu.

16. Demo’s and Practice—IX
Hyperlink to jump to external Internet file
The process is the same as we used for a local file earlier; we just use an ‘HTTP’ Internet address instead of a local address.
With Kompozer open, place the cursor to where you want the link to appear.
Use CTL+L, or one of the other methods to open the Link Properties form shown at right.
Use whatever label you want for the Link Text.
Type in a valid HTTP address for the Link Location. Click OK.
I’ll explain what an “index.html” file is and why it can be omitted in an HTTP address.