SessionVIII

SessionVIII - cll

Create and Edit Web Pages
Hal Pruett
and
Dolores Noechel
Session VIII, March 10, 2017
Today’s Topics
• Begin a demo of Kompozer’s build-in style-sheet editor.
• List some the advantages for designing with CSS styles.
• List a couple of free HTML editors, PSPad and NoteTab Light, that
complement Kompozer’s features and demo some features of one of them.
o Primary limitation of PSPad is that, like Kompozer, PSPad uses
Doctype 4.01 and not the HTML5 doctype.
o NoteTab Light: Has all the features of Window’s NotePad, and much more.
 It is a Swiss product that is like a “Swiss knife” of text editors; not much that it can’t do!
 Many HTML features including HTML5 support.
 Recommend using it in place of NotePad for most of your regular text editing.
• Solicit feedback about how our course could have been made more
understandable.
• Review of any topic you want, as time permits.
Kompozer’s CSS Style Editor-I
• Begin a demo of Kompozer’s built-in style editor.
o Show how the following line of tag code can be simplified from:
This is a paragraph.
to: This is a paragraph.
by putting all the style information in the embedded style sheet. This separates the
content of the paragraph from its presentation, as described earlier, and shortens the
amount of HTML code.
o Demo using http://cll-fwb.org/EditWebpages/ParagraphStyling.html
in Kompozer together with inline style listed on 3rd line above.
• Exercise: Create and format a simple paragraph using
Kompozer controls to minimize the amount of typing required.
o In a new Kompozer page, in the 3rd line of menus, click on
down arrow and then on Paragraph.
o In Design window, type (w/o quotes) “This is a paragraph.”
o Use Split to verify that Kompozer embedded the text between
 and tags.
o You could have typed the text first, selected it, and then tagged it.
o (continue next slide)
Kompozer’s CSS Style Editor-II
• Click on the CSS editor icon:
• Kompozer will require that you give the page a title and save it before
continuing. Use any title you want.
• When the editor opens, note that
the top option is selected.
• Click on the down arrow on the
right of the empty box
and select “p (paragraph)”
• Next, click on Create Style rule.
• Kompozer will open a “Style Sheet”
form that has a series of tabs along
the top.
o Each tab has options for formatting the tag that you chosen to work on.
o We’ll guide you through an exercise to choose several property/value pairs.
Explain CSS formatting options and
demo using “p” and “div” as “selectors”
•
•
•
•
•
The blank area below “Selector p” on the form
will show all of the property/value pairs, if any, that
you have already applied to the chosen “Selector.”
When the CSS editor is opened and the top option, “Style applied to…type” is selected
(by default), you can either type a selector (tag) name in the blue box shown on
previous slide, or choose a name from the dropdown list.
When you first open the CSS editor or any of the tabs, don’t be overwhelmed with the
options; most can be left blank. Browsers will use defaults for non-specified items.
First, we’ll use the Text tab to set: font-family: ‘Comic Sans MS’; font-weight: bold;
color: red; (Note that text color can be any one selected via the color-picker feature.)
Next, we’ll use Box tab to set: margin-left: 10px;
o
o
o
•
•
Values can be set individually for both margins and paddings.
Start with the first dropdown arrow to choose 0px, then use the up/down arrows to increase/decrease.
Its usually faster to just type in a number to replace the zero.
For additional practice, let’s add both a border and a background color behind the 
paragraph text, or for the entire <body> tag.
Will briefly describe purposes of the other option buttons on the opening page.
Incentives for designing websites with CSS
• Here are some advantages,
o CSS Save lots of time — CSS gives lots of flexibility to set the properties of an
element. You can write CSS once; and then the same code can be applied to
the groups of HTML elements, and can also be reused in multiple HTML pages.
o Easy maintenance — CSS provide an easy means to update document
formatting and maintain consistency across multiple documents. By making
one change to the website's CSS, elements in all the web pages will be
updated automatically.
o Pages load faster — CSS enable multiple pages to share formatting, and
reduce complexity and repetition in the structural content. It significantly
reduces the file transfer size, which results in a faster page loading.
o Superior styles to HTML — CSS has much wider presentation capabilities than
HTML, so you can give far better look to your HTML pages in comparison to
the HTML presentational elements and attributes.
o Multiple Device Compatibility — CSS can also allow the HTML document to
be optimized for more than one type of device or media. Using CSS the same
HTML document can be presented in different viewing styles for different
rendering devices such as computer screen, cell phones, printer, etc.
o Long Term Outlook — Eventually, inline formatting will be denigrated and
browser support will gradually disappear.
PSPad
• PSPad download link: http://www.pspad.com/en/download.php
• Does not require installation, it can be simply unpacked into any directory.
o Suggest installing it on a USB drive to make it portable.
• Some features:
o Compete text editing capability for HTML, regular TXT, etc., but is not a
“WYSIWYG” editor, but built-in browser provides instant viewing of editing
changes.
o Excellent zoom capability
o Copy, search and replace (CTL+F and CTL+H) mimics Word keyboard shortcuts.
o Tag matching:
 Very useful when end tag widely separated from the beginning tag, as is often the
case when working with a length web page.
o “Reformat HTML code” feature removes blank lines, indents the code, and
greatly improves code readability.
NoteTab Light
• NoteTab Light is a program I’ve used instead of Notepad for 10 or 15 years.
o Just recently updated to latest version.
o While preparing slides on Tuesday, noticed that it now has HTML5 features and support.
o Like Kompozer, has features for inserting and editing both HTML tags and CSS elements.
 However, Kompozer’s CSS style-sheet editor is still easier to use than NoteTab’s for
beginners.
• Download link: http://www.notetab.com/get.php?ntl
o Can also be installed on USB.
 Will bring my USB to class. It has an installation configuration that can be copied to your
USBs and is ready to use immediately.
• Some of NoteTab’s notable built-in HTML features:
o
o
o
o
Strip all tags from a HTML file to obtain content
Convert text file into a HTML document.
Excellent search and replace capability that includes wildcards and “regular expressions.”
Also, ability to find and replace special characters, particularly the “¶” (paragraph) and
“new line” characters in Word. (Found by using ^p or ^l in search/replace boxes).

NoteTab uses ^P or ^L (note caps) in its search/replace boxes.
o Remove styling from copied Word text or other formatted documents.
NoteTab Light –Demo
• Will run both Kompozer and NoteTab from a USB drive.
• Demo: Strip tags from HTML file (use http://cll-fwb.org) to plain text file
• Demo: Convert a plain text file into an HTML document
o Use menu shown on the right.
o NoteTab will create a complete web page,
but the only tags will be , not any
<div>’s, clickable links, etc.
o In a class exercise we created a structure
consisting of wrapper, header, main,
sidebar, and footer and then added content.


Instead, it might have been more instructive to
have used NoteTab to convert our Home page to
plain-text content and then created the structure
around the plain-text contents.
This is easy to do using NoteTab, but not using Kompozer in Design screen “WYSIWYG” mode.
• After experimenting with NoteTab’s HTML design features for a couple of days,
have decided that Kompozer’s WYSIWYG mode isn’t as useful as the name
implies.
o Will discuss details later if time permits.
NoteTab Light – user interface
• There is a comprehensive 144 page user manual that you can download:
http://www.notetab.com/doc/NoteTab-Manual.pdf
• Click on NoteTab’s View menu to select and display the “library list”
along the bottom of the user interface.
• Note that the HTML-CSS library is selected in the graphic snippet
surrounding this text.
• The HTML tags and formatting options are in the scrollable sidebar on
the left.
• Note tab offers all the HTML tags and formatting options that Kompozer
offers, but presents them differently.
• Just like Kompozer, you can construct an embedded style-sheet and
format it manually, but Kompozer does most of the work for you.
NoteTab Light and Kompozer combination
• NoteTab has feature to set up one or two browsers to view HTML editing
results immediately with F8 or Shift+F8.
• Kompozer has feature to set up an external text editor to view and edit the
HTML code by clicking on the
icon.
• For my CLL web-page editing needs I’ve set up Kompozer’s feature to switch
to NotePad for code editing and set up one of NoteTab’s features to switch
to Kompozer for CSS style-sheet editing.
o This combination lets me use the best features of the two programs, as
needed.
Solicit Feedback
• For general discussion:
o
o
o
o
o
o
What HTML concepts were the easiest to grasp?
What were the hardest?
Where should we have spent more time?
Where, less time?
What concepts were omitted and should be included?
If we were to offer the course again, what could we do to make it more
understandable?

Download Report

SessionVIII - cll

Paperzz.com

Your Paperzz