Create and Edit Web Pages

Today’s Topics
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
o Setting size of “container” for your text and pictures, etc.
o 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)
o Location on page, Size, Shape, Background color, Transparency, Make clickable as a hyperlink, etc.
• Hyperlinks types (if time permits)
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.
 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
https://technet.microsoft.com/en-us/sysinternals/zoomit.aspx
o Initial (settable) default zoom factor is 2x. Just roll the mouse wheel to increase or
decrease the amount of zooming.
o Move the mouse to choose what part of the screen you want to enlarge.
o ZoomIt eliminates need to squint at tiny features of Kompozer
o Default shortcut key combination is CTL+1 ( the number 1)
o Will demo and describe basic features
o Will ask if we can get it installed in Room 357
o If you want to learn more about how to use ZoomIt, open the brief tutorial:
http://screencast-o-matic.com/watch/c2ViqEnftK
 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
o Like most Windows programs, Kompozer has a couple of primary methods for performing most operations:
Clickable icons, and access through drop-down menus.
o 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.
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 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 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.
o 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.
 Demo’s and Practice

• Kompozer defaults versus Word defaults

o 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
o Kompozer default “Body Text” appears to be Times New Roman, size = ?
o Easy to set in Word; also, successive paragraphs “inherit” font of previous
o 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.
 Demo’s and Practice—II
• Word “text boxes” vs HTML “containers”
o 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.
o HTML code has several equivalent options for placing content where you want it.
o 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.
o Will defer demo of Kompozer “div” feature until later.
• Demo and practice font-related formatting
o Delete any text you have on the Kompozer design screen.
o Type, “The quick brown fox jumps over the lazy dog.” to use for formatting.
o 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
o 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
o 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.”
o Alternatively, click on the “Format” menu tab (ALT+O), select Font (just press F) and choose Arial from
the drop-down list.
o 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”
o Use Format menu tab and select Text Style (just press S). Notice various options.
 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.
o Use Format menu tab and select Text Style (just press S).
o 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.
o 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)
 Demo’s and Practice—III
Continue demo and practice font-related formatting
• Text alignment (left/right/center/justified)
o Series of icons to right of “B I U” icons are similar to those in Word.
o 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
o In top menu line, click on Insert and then Characters and Symbols
o Some of the options are shown in the snippet on the right.
o 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.
o 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 &copy;
o “Entity numbers” have a form like &#60; for a “<“
o Demo entering “euro” entity (case sensitive) to obtain € directly
in the Design screen.
 Demo’s and Practice—IV
Present, demo, and practice layout-related formatting
• Ordered and unordered lists
o A list of steps in sequence need to perform a task is an ordered list.
o A list where order is unimportant is an unordered list.
o Kompozer can format either type
• Practice: Type a series of lines that represent a task like baking a cake
o 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.
o Make a list like the above in Kompozer’s Design screen, one item per line.
o Select all the lines and then locate the icon pair that looks like this:
o Click the left-side icon to create an ordered list.
o 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.
o 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.
o Comment: An icon operate like a toggle switch; click it once to turn on, click again to turn of.
 Demo’s and Practice—V
Pictures and Graphics
• Kompozer has a couple of methods for entering an “image” file
o 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
o With Kompozer open, use one of
the above methods to show the
form for entering the location
(link) of the image file.
o In the location box, type the
address shown at the end of the
red arrow above.
o Enter “CLL Masthead Picture” as the Alternate Text. I’ll explain Alternate Text.
o To change the image size, click on the Dimensions tab and edit it.
o Enter “Nearby Emerald Coast Beach” in the Tool Tip box. I’ll explain Tool Tip.
o For now I’ll not discuss Spacing, etc. under the Appearance tab.
 Demo’s and Practice—VI
Anatomy of hyperlinks
• Previous slide used a hyperlink for a picture file located on CLL-FWB.org
o Location could have been anywhere on the Internet, or on a local disk, or even elsewhere
in the same active web page.
o Kompozer has a feature to handle any of the above for text or pictures.
o 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
o We’ll use several paragraphs of Lorem Ipsum pseudo Latin for the exercise.
o Will demo how to obtain in Word and copy to Kompozer’s design screen.
o At end of the last paragraph, type “End” (without quotes), select it.
o 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.
o 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.
 Demo’s and Practice—VII
• Hyperlink to jump to location within web page being viewed (continued)
o An anchor isn’t of much use alone; to use it we need a hyperlink that Kompozer
is able to create for us.
o Below, general method of creating any hyperlink with Kompozer is described.
• Create a hyperlink
o First, put the cursor where you want the link to appear.
Put it at top for purpose of this exercise .
o 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.
o 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.
o 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).
o (Will discuss why “anchor” name begins with a # sign in dropdown list.)
o Select #End, click in “URL is relative…” box, and then click OK.
o In top empty box, type Jump to end of document and click OK.
 Demo’s and Practice—VIII
• Hyperlink to jump to location within web page being viewed (continued)
o Demo: Right-click on the Jump to end of document link and then select
Link Properties.
o 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.
o 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:
http://cll-fwb.org 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
o Click moves cursor to front of target (anchor) location; doesn’t select anything.
o Kompozer doesn’t have ability to execute links; you’ll need to use a browser.
o 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.
 Demo’s and Practice—VIII
• Hyperlink to jump to location in file elsewhere on your computer
o Same basic steps as previous for link within document, but you need to
change the link target.
o Delete text on Kompozer screen and prepare a new link (CTL+L to open)
o Snippet at right is an example
of what the form would look
like to open an existing web
page on this computer.
o When you open this box
initially, the Link Text box will
be blank and you’ll need to
type in the label you want.
o If you need to edit an existing
link, right click on the link in
Kompozer and select
Link Properties in the pop-up
menu.
 Demo’s and Practice—IX
• Hyperlink to jump to external Internet file
o 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.
o With Kompozer open, place
the cursor to where you want
the link to appear.
o Use CTL+L, or one of the other
methods to open the Link
Properties form shown at right.
o Use whatever label you want
for the Link Text.
o Type in a valid HTTP address
for the Link Location. Click OK.
o I’ll explain what an “index.html”
file is and why it can be omitted
in an HTTP address.