1. Create and Edit Web Pages
Hal Pruett and
Dolores Noechel
Session IV, Feb. 10, 2017

2. Today’s Topics
Reminder: Feel free to bring a USB drive to class for copying exercises to take home for practice and review.
Revisit one or two of one of last week’s topics
Explore a Kompozer feature to open an external browser.
Continue with the slide that was labeled “Demo’s and Practice—VIII” last week and relabeled as “Demo’s and Practice—I” for today.
To reduce file size, we’ve deleted all of last week’s slides where all of the topics were adequately covered in class.
Hyperlinks types (continued)
Links to file locations in computer being used.
Links to webpages or files in external locations on the Internet.
Building blocks for web page content. (continued)
Our approach will be “bottom up” to create a web page from smaller elements.
By watching the behavior of the Kompozer display as we play with various tags you’ll learn better than by merely hearing or reading about descriptions of the behavior.
Starting with slide #16, “Using <div> tags to create a web page structure—I” we’ll begin a topic that many of you have been waiting for; namely, creating the structure for an actual web page.

3. Revisit a previous topic and Explore a new one
Last week’s exercise included creating a link, placed at the top of page, to jump to the end of the page.
Before leaving the topic of jumping to a target within a page, we’ll demo an easier method to make a link to jump to the top of a page from any location within the page—something you often see on the Internet.
Steps:
In the Kompozer design window, create a dozen or so lines consisting of short words or just random characters, or use an existing web page containing several lines.
Use the Enter key to put a blank line somewhere on the page and leave the cursor there.
Use either the CTL+L shortcut, or the Insert menu, to open the Link Properties form.
Use “Back to Top,” or something similar, as the link text to display.
In the Link Location box in the middle, type a “#” and nothing else.
By default, browsers will jump to the top of a page when the target (anchor) is just a “#”.
Explore a new topic: Kompozer's built-in ability to open an external browser like Explorer, etc.
Until we try it in the classroom, I’m not sure if UWF constraints will allow student users to set up this feature.
If you can, you’ll be able to use the F5 key to test exercises that can’t be demonstrated in directly the Kompozer Design window, but work fine in a regular browser.
Top open form on the right, Click on Tools menu, then on Preferences, then on Applications. Will demo and help you set up capability, if allowed.

4. Revisit ZoomIt for helping Kompozer readability when needed
The UWF computer tech apologized for not installing ZoomIt on your classroom computers last week. Bob Carney ed me this afternoon (Monday) saying that ZoomIt is now installed.
The program wasn’t installed to run automatically when Windows opens; you will need to open it manually by clicking on “…an icon for it in the taskbar on the lower right.”
Below is some info from one of last week’s slides
ZoomIt is a free program for zooming contents in any program, and more.
For use at home, 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 cursor 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
If you want to learn more about how to use ZoomIt, open the brief tutorial:

5. Demo’s and Practice—I
Hyperlink to jump to location in file elsewhere on your computer
Same basic steps used previously for a link within document; you’ll only need to use an external link-target URL, not an internal one.
Open a clean Kompozer screen (use “Revert,” or just open a new tab).
Prepare to add a new link .
Remember, the keyboard shortcut CTL+L opens a new Link Properties quickly.
When you open this form initially, the Link Text box will be blank and you’ll need to type in the label you want.
Snippet at right is an example of what the form would look like with a URL for a file on this computer.
If you need to edit an existing link, right click on the link in Kompozer and select Link Properties in the pop-up menu.
Exercise: Create a local link.

6. Demo’s and Practice—II
Hyperlink to jump to external Internet file
The process is the same as we used previously for a local file; we just use an external ‘HTTP’ Internet address instead of a local URL.
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.

7. First looks a some simple tags
For demo and practice purposes we’ll use the sentence: “The last word in this sentence is italicized.”
First, discuss differences between text formatted and stored in either a Word or an HTML file.
Word format: Above sentence is encoded with a Word-specific encoding procedure.
Text is stored in a file that is machine-readable, but humans can only recognize a few text characters embedded in the code. Other non-printable characters show as blank spaces.
Word’s inherent overhead make the file large, even for a small amount of text. A one-page document that was examined showed that Word required about 500Kb and HTML only required about 40Kb.
HTML format: Above demo sentence is not encoded with any non-viewable characters.
Text is stored in a plain-text file with an embedded tag that is readable by either machines or humans.
The simplest possible HTML “code” for the above sentence is: The last word in this sentence is <i>italicized</i>.
Browsers evaluate text between HTML tags. The above pair, <i></i>, tells the browser to italicize the text embedded between the tags and then present the result on your computer screen.
We’re not yet ready to edit HTML code in Kompozer’s ‘Source’ pane; instead we’ll use an “Insert HTML” code feature to insert code directly into the Design window, or to look at how Kompozer has formatted something for us.
Demo and practice using these steps:
Put the cursor in the design screen where you want to insert some new HTML tagged text.
Type “The last word in this sentence is italicized.” Select “italicized” and click on the “I” icon in the B I U group.
Select the entire short sentence.
With Kompozer open, click on the Insert menu item and then on HTML (shortcut, first type ALT+I and then H )
When the “Insert HTML” form opens, you’ll see “…<i> italicized</i>” that Kompozer created for you. (Had you not selected the sentence first, you would have had to type everything in, including the <i></i> tags
Click on Insert to close the form.
The “Insert HTML” form is a quick method of testing or verifying short HTML fragments; another is to use the W3C school’s TryIt feature that we’ll use frequently later.

8. Digression: HTML design concepts—Contents and Presentation
Basically, contents are what you see and presentation is how the contents look.
In the above bullet, all the words constitute the content; the bold letters the presentation aspect of the content that don’t alter the actual content.
Web-site developers place a lot of importance on keeping the presentation-related tag elements separated from content if possible.
Until you learn how to use styles in Kompozer like in Word, you’ll find it difficult to edit HTML code in its Source window because Kompozer mixes content and presentation together using verbose, antiquated methods.
Learning to use “style sheets” is more complicated at first, but makes your HTML files smaller and much easier to edit later using any HTML editor, including Kompozer.
Kompozer provides a few built-in tags included in the list on the right and used mostly for building text content.
As its name implies, the bottom “Generic container (div)” element is not confined to text; it can contain almost any other type of HTML content.
First, will briefly explain the role of the “Body text” entry in the list.
On the next slide we’ll begin discussing the other items in the list.

9. Continuing look at some simple tags
Kompozer can format text with the “tag elements” shown in the drop-down list on the right. Shortcut to open is ALT+o , then P, or click on down arrow circled in red on the right end of text box.
We’ll now discuss, demo, and practice using the items in the list.
Practice and demo Paragraph. (Recommend you clear residue from previous exercise; click on the document-name tab and select Revert.)
In Kompozer’s Design window, type “This is a paragraph.” and select it.
Open the drop-down menu list and select Paragraph to format sentence as paragraph.
Click on Kompozer’s bottom tab labeled Split and observe that the above phrase is embedded between <p></p> tags.
Will discuss some characteristics of the paragraph tag.
Practice and demo the Heading 1 to 6 tags.
Heading 1 through 6 are for labeling sections of text or content
For example, in a long document, the document’s title should use Heading 1 and appear only once. Chapter headings could use Heading 2, sections within a chapter could use Heading 3, etc.
As an exercise, type three lines of text, select each one separately. From top to bottom, format each line using Headings 1 through 3.
Note that all the “h” tags automatically sets the text in bold and use font sizes in descending order.
Also note that when you put the cursor on any line, the box where “Body Text” appears above will change and show you the format name. (“Body text” is the browser’s default format for text not yet formatted.)
Like a <p>, <h1> to <h6> tags start on a new line and are not embedded in an existing text line.

10. Continuing look at some simple tags: “Generic div”
Version 5 of HTML standards introduces several new types of “containers” with specific names. Kompozer uses version 4.01 and only offers the <div ></div> container.
For designs that include our CLL web site, the HTML4 .01 version <div ></div> container is completely adequate. It provides most of the functionality that the new HTML5 types offer.
Some useful div capabilities
Ordinarily the div tag starts a new line, just like a paragraph tag, but it provides a “float” option that enables other tagged elements to be placed on either side.
The div element is the only structural tag that let's you create a multicolumn web page without using table “cells” to create side-by-side containers.
Using div’s side-by-side feature to create a multicolumn document is recommended instead of using a table. Tables are for presenting data, not for providing web page structure.
Will demo and discuss “floats” later when we start working on complete HTML pages.
A div can act as a “parent” element to provide formatting for “child” elements it contains. This can eliminate the need to format each “child” element separately. Example: A div could provide the formatting for all the paragraphs it contains without needing to format each <p> tag separately.
Will briefly present and discuss the concept of web page structure being a hierarchy where an element can contain one or more other elements that can also contain elements, etc.
Depending on its location in the hierarchy, a given element would be a parent of the element below it and a child of the element above it.
HTML hierarchy resembles a structured text outline formatted with indented “A, B, C,… a, b, c, …, a, b, c (italicized), etc.” It is much easier to edit HTML code if “child” code sections are indented from the parent’s.

11. Continuing look “Generic div” tag—I
Some useful div capabilities
Example: Create a sidebar <div> on a page to allow the user to read many lines of text without being interrupted with less import information like an explanation, definition, or note.
A sidebar could also used for showing resources such a list of clickable links to other sections within the document, or to external sources that contain information relevant to the text.
The note on the right illustrates the above ideas.
Demo “block-level” behavior
Practice using <p> tag (Use “Revert” to clear Kompozer screen.)
Use ALT+o followed by ALT+p to create a <div></div> pair.
Decrease width of <div> to pixels using the mouse.
Type a series of nonsense words until you’ve created several continuous text lines that fit within the div container.
Select all the text in one of the middle lines and copy it.
Use Insert HTML feature to open the insertion form.
Paste the contents into the blank area if not already there.
Use the Example help line on the bottom of the Insert HTML form as a template to format the contents, i.e., use a “p” instead of “i” that is shown in the Example help line. Click OK.
Note how the block behavior of <p> starts the newly formed paragraph on a new line and also forces the text below to begin on a separate line below the paragraph.
Sidebar
The <div> element is a “block-level element” that always start on a new line and takes up the full page width available, i.e., stretches out to the left and right margins unless set narrower on purpose.
Other block-level elements include: <h1> through <h6>, and <p>.
Resource
Notes
The shortcut “ALT+o “ends with the letter “o” not the number zero that looks similar.
Not recommended, but you can often omit the closing </p> tag—it depends.

12. Continuing look at “Generic div” tag—II
Demo “block-level” behavior for <div> tag
Practice inserting a new <div> tag at cursor location.
First, put the cursor anywhere in the paragraph you just made.
Click on the Split tab to see the line and the <p> formatting.
In the Split panel, Kompozer’s line formatting is unpredictable; the complete paragraph HTML code text might be split over several vertically adjacent lines. See additional info in Sidebar.
Delete both the open and closing p-tags, leave the rest of the text.
Again, select all the text in one of the middle lines and copy it.
Open the Insert HTML form ( ALT+I and then H)
Paste the contents into the blank area if not already there.
Use Example on bottom of form to format the contents. Just substitute the “I” in the example with a “div”, then click OK.
You’ve just inserted a div within a div (together they constitute a child and parent)
With the cursor somewhere in the new div, use the mouse cursor to narrow the div width. Note how the div automatically expands vertically to contain all the text. This automatic behavior is why a <div> does not have a height property; it isn’t needed or desired.
Will demo how the block behavior of the new <div> starts on a new line and forces the previous continuous text to also begin on a new line, just like <p> and the <h…> tags.
Sidebar
Kompozer sometimes splits HTML code ina weird way, but this doesn’t affect how it the output appears in the Design window or in an external browser.
Demo: Use the HTML paragraph code below to show that blank lines or multiple spaces between words don’t matter; browsers ignore them.
<p>In the Split panel, the complete paragraph HTML text might be split over
several vertically adjacent lines. Whether or not doesn’t matter. Also there may be blank lines in
between regular lines, or there may be many spaces between words. </p>

13. “Inline” formatting elements
Knowing the difference between non-structure-altering and structure-altering elements is important as you begin to layout any web page.
By default, almost all text elements are “Inline” elements.
Remember: Unlike block-level elements, inline elements do not add line breaks or extra spaces between words or characters.
For example, bold or italic tags only alter the presentation aspect of text; they do not alter the structure like a paragraph or div does.
This is a case where separation between content and presentation is not possible.
Examples of inline elements include <a> and <img> that we’ve already used, and a new one element, <span> that is like a “Swiss Army Knife” for text.
Kompozer uses <span> extensively because it is an inline tag and doesn’t alter structure except when you use its ability to implement structural code.
The sidebar mentions <span> code bloat and more difficult editing with Kompozer.
There are a couple of methods to circumvent Kompozer’s limitations when editing HTML code in the Source screen. Will describe them here, but not demo them.
Use the “CSS Beautifier” at to color-code the various tags in the HTML file. Here is an example: <span style="font-style: italic;”>words… </span>. Also, “beautifier” automatically indents text “child” elements, like an outline.
After “beautifying” code, open it in the PSPad HTML editor that has search-and-replace capability that exactly duplicates Word’s capability. Unlike Beautifier, PSPad does not automatically indent HTML code in an existing file when you open, but does color code content and elements to make the HTML code easier to edit. Particularly useful is that PSPad allow you to zoom the code for editing and also highlights the matching </..> tag when you put the cursor on the <…>.
The above may seem like a lot of work, but it isn’t once you’ve tried it. Actually, it reduces frustration and saves time because of the improved capabilities.
Sidebar
Unless formatted through CSS, Kompozer uses inline elements extensively, even with the simple one-character tags for bold and italic: <b> and <i>. This causes a lot of bloat in the HTML code.
For example, instead of using just <i> to begin italicizing a word or group of words, Kompozer uses “<span style="font-style: italic;">words… </span>” to spell out the font style in detail. The simple one-character tag, <i> becomes 31 characters long with Kompozer.
Unlike HTML editors like PSPad, NotePad++, and others, Kompozer shows all text as black in the “Source” pane. In the Split pane, Kompozer does show the element text in color, which is useful.

14. Digression: A couple of often-confusing terminology words
The meaning of “Inline” when creating HTML code is context dependent.
In the previous slide we described the difference between block-level and inline elements (tags) about how these elements alone affect your layout , if any.
A previous slide contained the example “Inline” tag phrase, <span style="font-style: italic;”>words… </span> (or simply, just <i>words…</i>)
Either version can be located anywhere “Inline” within a line of text, paragraph, or div.
Another verbose example is: <p><span style="color: blue;">Sample line of text. </span> </p> that sets the font color for a complete paragraph.
In both examples we’re using the Inline element <span> and also using the Inline “Style = ” Format “syntax” to set the text color without affecting the layout.
Using the same word, Inline, for a tag and for a formatting method can be confusing.
In addition to encountering Inline as discussed above, you will come across, “Style Sheet;” another confusing term.
As we’ll see later, a “Style Sheet” can actually be an external file, as the name implies, but can also be a special section of style “definitions” embedded in a standard HTML document between a pair of tags labeled <style> and </style>.
This special section of definitions is often called an “Embedded Style Sheet” when it isn’t actually a separate sheet. This will become clearer later when we look at an entire HTML page.
Using style “sheets” of either kind can greatly reduce the large file size caused by Kompozer’s default verbose “Inline” formatting method.

15. The <span> tag is often redundant
The example <p><span style="color: blue;">Sample line of text. </span> </p> can be simplified by simply deleting the letters “><span” and “</span>” in the above to produce: a less verbose version: <p style="color: blue;">Sample line of text.</p>
Exercise: Verify that the above sample can be used as a template and use it to format h1 through h6 and even the <div> “box” container.
Use Revert or open a new Kompozer tab and type the sentence “Sample line of text.”
In the Design window, type “This is a line of text.” and then use Format and Text Color to format it.
Use CTL+A to select all on the design page (Kompozer will copy it internally.)
Open the Insert HTML form (shortcut: ALT+I followed by H).
The text you selected will already be in the Insert HTML form and will read: <span style="color: blue;">This is a line of text.</span>
Directly in the form, replace “span” with just a “p” in both the beginning and ending tabs to convert the <span> into a paragraph.
Click Insert to close the form. Back in Kompozer notice that the new sentence that is displayed on the Design screen looks identical to the one that used <span></span> before.
Repeat by replacing <p></p> tag in step 6 with <h1></h1>.
Repeat by replacing <h1></h1> tag in step 6 with <div></div>.
After step 9 you’ll need to reformat the <div> tag with blue or an arbitrary color.
With the <div> reformatted for color, type a few lines of text in the container; notice how they “inherit” the color setting of their <div> “parent” without being formatted directly.
Formatting a <div> is a method that eliminates the need for formatting paragraphs individually when you want all of them in the <div> to have the same text color, font-family, font-size, etc.

16. Using <div> tags to create a web page structure—I
Both the <div> and the <span> tags are considered “programmable” tags because they aren’t very useful without formatting.
Exercise: Put together the layout for a simple two-column web page.
We’ll use “nested” <div> tags to create a page structure that consists of a “wrapper” that sets the desired width for the web page we want to create.
Inside the “wrapper” we’ll create two new <div> elements in succession with a <br> “line break” in between. Below are the steps (sequence is important to get the <div> tags nested properly): (The steps we’ll use below are for demonstration purposes; later you’ll want to edit the tags directly in the Source screen or in an external HTML editor.)
Start with a new blank Design page in Kompozer
Use the ALT+o and ALT+p and ALT+d shortcut to create the first unused <div></div> pair.
Type the word “Wrapper” on the blank page and hit Enter to add a <br>
Type the word “Main” at the cursor location and hit Enter to add a <br>
Type the word “Sidebar” at the cursor location and hit Enter to add a <br>
At this point we have an outer “wrapper container” that contains two inner ones. Let's now set their widths.
Put the cursor somewhere in the Wrapper” and use the mouse to set its width to about 960px.
Put the cursor somewhere in the “Main” and use the mouse to set its width to about 600px.
Leave the “Sidebar” width alone; the browser will resize it as needed to fit beside “Main”
Note: Instead of steps 1 – 6, we could have used the Insert HTML form to type in the div’s directly.
As we’ll show in short while, we can use Inline Formatting to set widths to an exact numerical value.
Continued on next slide

17. Using <div> tags to create a web page structure—II
Reminder: The steps we’ll use below are for demonstration purposes; later you’ll probably want to edit the tags directly in Insert HTML form, or in the Split or Source screen, or with an external HTML editor.
Exercise (continued):
Use CTL+A to “select all” in the Design screen. (Kompozer will copy internally)
Type ALT+I and then H to open the HTML direct-insert form.
The form contents will look something like that on the right: (We’ve manually “beautified” the code to show how much easier it is to read HTML with indentation and tags separated into groups.)
Note how the two Main and Side tags are nested in Wrapper
For demo purposes, Let's:
Change the Wrapper width to 900px exactly.
Change the Main width to 60% instead of a number.
Leave the Sidebar width unspecified.
Now, we need to set Main div’s “float” capability to open up space on the right for the Sidebar <div> to move there, side-by-side, and create an ultra-simple two-column layout structure.
After changing the main width to 60%, put the cursor just after 60%; and before the double quote.
Insert this text: “ float: left;” without the outside quotes. The style argument should now read: “width: 60%; float: left;” Note the consistent syntax; a property or method (width or float), a colon, a value, and a trailing semicolon
Click Insert to return to the Kompozer design window and view the results.
Demo purposes, we’ll repeat the above and add an all-around black border for each <div> for emphasis.

18. Using <div> tags to create a web page structure—III
To complete a typical two-column layout we can easily add a “Header” <div> and a “Footer” <div>.
You can use the previous process and just type in the extra div’s manually or use the text below.
The HTML code below has a thin border added to outline the shape of the div’s.
<div style="border: thin solid ; width: 911px;"> Wrapper<br>
<div style="border: thin solid ;"> Header<br> </div>
<div style="border: thin solid ; width: 666px; float: left;"> Main<br> </div>
<div style="border: thin solid ;"> Sidebar<br></div>
<div style="border: thin solid ; clear: both;"> Footer<br><div>
</div>
Note the extra argument, clear: both; in the style statement for the footer. This ensures that the footer will begin on a new line below both the Main and Sidebar div’s, regardless of which one is shorter.
When copying text from a file like Word or PowerPoint, pay attention to the quote marks.
Word often turns ordinary quotes into “Curly Quotes” like those here, depending on default setting.
If you paste any text into Kompozer, make sure that you convert “Curly Quotes” into regular quotes; otherwise you’ll get an error.
Next week will continue with discussions about setting margins and paddings in <div> elements, centering <div> elements within the host, etc.