Create and Edit Web Pages
Hal Pruett
and
Dolores Noechel
Session VI, Feb. 24, 2017
Today’s Topics
Reminder: Feel free to bring a USB drive to class for copying exercises to take
home for practice and review. Recommended for the new exercises.
• Discuss link for default TryIt web page and discuss copying HTML to/from it.
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
•
Introduce exercises where the necessary HTML code is already written.
o Using the “crib sheet” idea didn’t work very well; we’ll try a new approach.
o The goal of the exercises isn’t to test your typing; the goal is for you to interact with
HTML code to see how it provides instructions for a browser.
"Make it as simple as possible, but not simpler."
Albert Einstein
•
•
Finish discussion and exercise for <p> and <h1…6> margins and paddings.
Demo and exercise: Creating a two-column “floated” layout.
o
Copy the TryIt exercise back to Kompozer and show the structure in outline format
Use the F9 function key to open the Kompozer left sidebar.
•
•
Add a few brief comments about inline vs. style-sheet formatting.
Demo and exercise: “Edit a partially formatted two-column layout
of the present CLL Home page.”
Default TryIt web page
•
•
Link is: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
When you open it, notice that the TryIt Doctype declaration is <!DOCTYPE html>,
which means that TryIt is configured to execute HTML5 code automatically.
o If you have a Kompozer program that you want to test with TryIt, first click on
the Kompozer Source tab to open the HTML code screen.
o Use CTL+A (select all) to copy all the Kompozer HTML code.
o Important note: When you copy an entire Source page code, Kompozer does
not include the Doctype declaration
o If you deleted all the TryIt default code (to have a clean screen before pasting
the Kompozer code) you should retype TryIt’s Doctype default declaration,
“<!DOCTYPE html>” at the top of the TryIt window.
TryIt will actually run your code without a Docktype declaration, but it is good practice to
always include it.
In fact, is you want to try out just a few lines of code, you can delete all the existing TryIt code,
paste your code fragments in the code window and click on Run. TryIt will show the partial
result without requiring a Doctype, <html> <html>tag pair, or a <body> </body> pair!
Wrap up discussion of <p> formatting using TryIt
• In a previous exercise we pointed out the large amount of space between a <h1…6>
line and a <p> line in the TryIt result display after you first click the Run button
before editing. Here are some reminders about spacing.
o Browsers use a default value for the space before/after text tags.
o When you have two text-type tags (<p> and <h1…6>, or <p> and <p>, etc.) stacked vertically,
the total separation between the content (yellow) of the two elements is:
the sum of the upper and lower padding values (blue), plus
the sum of the upper and lower border sizes (red), plus
the value of either the upper tag’s bottom margin (white), or
the lower tag’s top margin (also white), whichever is greater.
The dashed lines mark the outer edge of the margin and
are not a HTML border. Mention “inverted” nature of a margin.
o See new demo at: Demo-paragraph-spacing
The demo will show you how you can adjust the above
margin, padding, and border values to change the space
between two successive paragraphs, or between a heading
and a following paragraph.
Demo uses property/value pair, “display: none” to prevent
browser from displaying results for tag.
We’ll explain how to “unhide” successive paragraphs.
Note: The reason for “hiding” pre-formatted paragraphs is
to provide the exercise in smaller chunks that are less intimidating.
Exercise: Change one or more of the margin, padding,
border values, or border/text color in the TryIt window and see results.
Using <div> tags to create a web page layout
• Exercise: Use TryIt again to create the layout for a simple two-column web page.
o We’ll use SessionVI-ClassDemo in a manner similar to the previous exercise.
o On the right is an outline of the layout that shows the tags without any contents or
comments. We’ll demo this simplified view later.
• The new TryIt page uses a different method to hide tags and
reveal them in sequence as a means of not overwhelming you
with details all at once.
o This time the unrevealed tags are hidden by “comment” tags
o This is a common coding method often used when you want to test
a program by preventing certain code from running temporarily.
o Browsers don’t show any HTML code embedded between <!-- and --> comment tags.
o During the exercise, one by one, you’ll remove the opening <!– tag before the particular
HTML <div> code that we want to execute
o As before, we’ll walk you through the process and you’ll be able to see results immediately
in the right-side pane of the TryIt window.
o Remember: The link to the demo can be refreshed (F5) anytime you need to start the
exercise over again from the beginning.
• We’ll now begin the demo and the exercise using the Demo in the URL below.
o Instead of using separate slides for notes, the Demo file has extensive explanations.
o When you open SessionVI-ClassDemo , click on the Run button and look at the result on
the right; don’t bother reading the HTML code until we discuss preliminary information.
Rehash of using <div> tags to create a web page structure
• As mentioned earlier, you can zoom the TryIt screen whenever you want.
o This is particularly useful for selecting not only the property/value pair you want, but
also for pasting or typing your choice exactly where you want it in the class = “…” string.
• Another benefit while working with an open TryIt screen is that you can easily open
a new W3Schools web page in an adjacent browser tab. This enables you to search
and find syntax for any HTML tag or CSS styling property/value or usage in context.
o You can then copy syntax, etc., from the adjacent page’s extensive
documentation and then paste it back on the TryIt page that you are
exploring.
o Using copy-and-paste minimizes typing and reduces syntax errors.
• The styling syntax used for property/value pairs while formatting web page content
is essentially the same for both in-line and CSS style sheets; the difference is mainly
where the styling is listed within a given HTML file and how the styling is applied.
o You caught a glimpse of an “embedded CSS style sheet” in the two-column
layout exercise.
o Hopefully, by the end of the semester, we’ll be able to present Kompozer’s
excellent CSS editor that does much of the work of creating tag formats for you
by enabling you to select from a list of properties and values and doesn’t require
you to recall them from memory.
Inline versus style-sheet formatting
• In the process of formatting web page content, the syntax for styling
“property/value pairs” is essentially the same for both in-line and CSS style
sheets.
o The difference is mainly where styling statement are listed within a given HTML file and
how the styling is applied.
For inline formatting, you must place a style=“…” statement just before the
ending “>” character of the opening tag.
For style-sheet formatting, you first create a <style></style > tag pair between the
<head></head > tag pair that always exists in a complete HTML file.
Instead of style=“…” you use {…} where the formatting represented by … is identical.
The complete inline formatting can be represented by <tagname style=“…”> while
the corresponding style-sheet formatting can be represented by tagname {…}
o You caught a glimpse of an “embedded CSS style sheet” in the two-column
layout exercise; the next slide has some additional discussion.
Additional comments: Inline versus style-sheet formatting
• Hopefully, by the end of the semester, we’ll be able to present Kompozer’s
excellent CSS editor that does much of the work involved in creating a
variety of tag formats.
o The CSS editor provides a pop-up form that you can use for any tag, etc .
o The CSS editor’s form lists all the available properties for the selected tag; you
don’t need to dredge them up from memory.
o Adjacent to each property is a box in which you to enter property values
(usually just numbers) and type or choose the unit name (px, cm, mm, %, etc.)
• The very best feature of Kompozer is the CSS editor
• Using Kompozer and the PSPad editor together provides a combination
that is about a simple as possible, but will meet the HTML editing needs of
almost anyone except a professional web designer.
o PSPad has full-featured text-editing capabilities similar to Word, as well as numerous
other desirable features for editing HTML and viewing results immediately.
(May demo PSPad later if we have time.)
Quick look at the Kompozer page outline tags
• Demo: Click on the title, “Footer” and notice this
along the lower left bottom of the screen.
o The string of tags constitutes a “breadcrumb” trail that shows:
1.
2.
3.
4.
the <h3> tag is contained in a parent; the <div> (the Footer), and
the footer <div> is contained in a parent; the <div> tag (the Wrapper), and
the wrapper <div> is contained in a parent; the <body> tag, and finally,
the <body> tag is contained in the overall parent; the <html> tag.
o In the Kompozer Design pane, you can identify and highlight the contents any of
the tags by just clicking on the tag in the line of tags described above.
•
Use the F9 key to open the “DOM Explorer” (Document Object Model)
o With the <h3> tag in Footer still selected, you’ll see this sidebar
that shows where the tag is located within in the hierarchy.
o Clicking on the h3 tag in the side bar identifies and highlights
the contents of the tag in Kompozer’s design window, the same as
clicking on the tag in the string of tags along the bottom.
• Depending on time remaining, we may do a short demo of
Kompozer’s cumbersome “in-line formatting” feature that you
start by clicking on a tag in the Explorer sidebar.
Exercise: Edit a partially formatted two-column layout
of the present CLL Home page
• Using the concept, “…[our] goal is for you to interact with HTML code to see how it
provides instructions for a browser,” we’ve constructed a special page described in
the slide’s title above.
o The exercise will require minimal typing; mostly, you will be removing a series of HTML
comment characters, each of which is located at the beginning of a block of HTML code.
o The starting comment character tag <!-- temporarily prevents any browser from
executing the code that is sandwiched between it and the ending --> tag.
•
•
•
The complete URL for the TryIt exercise is:
https://www.w3schools.com/code/tryit.asp?filename=FCZPAXZN0473
When you open the file in TryIt and Run it the first time you’ll be able to read the
first of several instruction lines about how to proceed.
The HTML code written specifically for this exercise uses several of the formatting
constructs that you’ve seen already in class.
o We’ll take the time to point out and discuss any formatting that is not familiar
to you.
o The lengthy exercise will probably stretch into next week’s session.
© Copyright 2026 Paperzz