Transcript SessionVX
Create and Edit Web Pages Hal Pruett and Dolores Noechel Session V, Feb. 17, 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. • Check if ZoomIt is actually installed on classroom computers. • Discuss methods to cope with Kompozer’s small text size. o For text on Design screen only, use View >> Text Zoom and select zoom %. o In the revised exercises, we’ll use “TryIt” at W3Schools site because it is an on-line web page that is interactive and can be zoomed like any other web page. • To reduce file size, we’ve deleted all of last week’s slides where all of the topics were adequately covered in class. • Building blocks for web page content • o Continue demos and exercises for formatting <p> and <div> tags. o Practice how to set the width, margins, and padding of <h1…h6>, <p>, and <div> tags. Quick look at overall structure of a web page before using “TryIt” at W3Schools site o Later, we’ll copy the TryIt exercise back to Kompozer and show structure in outline format with left sidebar. Revised look at <p> and “Generic div” tags—I • Demo and exercise: <p> and <div> “block-level” behavior o Practice using <p> and <div> tags o Note: Use the Open file method in Item 1 below , not the “Open Web Location” option. The latter opens web in a mode where changes can supposedly be written back to the on-line file; this feature is not reliable. 1. Use ALT+F and O to open a form. In the filename box enter: http://cllfwb.org/EditWebpages/Lorem.html 2. Use CTL+A to select all the Lorem text. 3. Use ALT+O followed by P (or your favorite method), to select Generic Container <div> and make the whole page into a single <div>. 4. Decrease width of <div> to 800-900 pixels using mouse. (Note: The Lorem.html file was formatted with <p> tags before it was uploaded to web site.) 5. Select one of the middle paragraphs and copy it to the clipboard. 6. Use ALT+I and H to open the Insert HTML form. 7. Paste the contents into the blank area if it isn’t already there. Revised look at <p> and “Generic div” tags—II 8. Somewhere in one the middle paragraphs, type </p><p>” and use Insert (Note: The </p> tag serves as the closing tag for the previous opening tag, the <p> is an opening tag for the closing tag that still exists at the end of the paragraph.) 9. Use Insert to return to the Design screen and note how a <p> tag’s block behavior starts the newly formed paragraph on a new line and also forces the text below it to begin on a separate line below the paragraph. • Digression: Why extra space above/below newly inserted <p> paragraphs? o All browser, including the internal one that Kompozer uses to display the Design screen, have default settings for margins. o You often want to set the top and bottom margins and paddings for <p> and <h1…6> tags to control the space above and below the text to display with those tags. Very similar to using “Paragraph spacing, before and after” in Word. o Last week we showed absorbing the in-line format of a <scan> into a <p> tag. We’ll use a W3Schools feature to format not only <p>, but also various other tags in-line. o Before presenting and discussing the W3Schools’ “TryIt” feature we need to discuss what tags you’ll see on a simple complete web page. Quick Look at a Simple Complete Web Page • The simplest possible version of a complete page consists of a “<!Doctype html …>” declaration at the very top, followed by the <html> tag pair that, in turn, contains the <body> tag pair. o Doctype declaration: Kompozer uses 4.01 “Transitional.” Won’t discuss now, except to mention you can change Doctype to HTML 5 with an editor. o <html> tag: It is a container for everything below it, including <body>. In practice, almost all web pages will have other tag pairs between <html> and <body> o <body> tag: It contains the links, text, pictures, etc., that you will see on your screen when the HTML file is opened with a browser. o Recommended convention is to use lowercase for all tags. Doctype is often typed in upper case, but can be either case. • Introduction to W3Schools “TryIt” web page o When you open the TryIt page, Paragraph and Heading Tags, you’ll see a simple complete web page that only has two text tags, <h1> and <p> in the <body>. o With TryIt, you can format any tag and click on the Run button to see the results immediately in the half-screen on the right. o TryIt is much better than Kompozer for many exercises, such as link demos. You can copy lines of Kompozer code and execute them in the TryIt screen for quick results and copy they back to Kompozer to continue developing your web page. Contingency plan • The link, https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elements opens an unedited web page. • We’ve edited the above page and saved our edits using TryIt’s Save feature to obtain a new URL that appears automatically. o Unfortunately, it looks like there may be a time limit on how long an edited TryIt page is saved. • If you get a “The file you asked for does not exist” error when you click a link to a TryIt web page link in these notes, then the limit has expired. • In such a case, we’ll need to reconstruct a new TryIt page from the unedited web page and project the new URL on the screen during class. o This is a quick and easy process. First exercises with TryIt • We’ve modified the web page, Paragraph and Heading Tags, and added a line of text after the original paragraph. o The added text contains “property and values” pairs for in-line formatting. Briefly describe “property and values” pairs and their purpose for formatting. o The above pairs provide items that you can copy and paste into the <h1…h6> and <p> tags to perform in-line formatting. o We humans are better at recognizing and then using formatting information displayed for us rather recalling property/values and syntax from memory. o Note the added line contains: “border: 1px solid red; margin: 0; padding: 0; font-family: Georgia; font-size: 110%; line-height: 100%; color: black; font-weight: normal; font-style: normal;” and you could always include more if it would be useful. • Exercise: Open, TryIt1-Exercise. o First we’ll format the <h1> tag. o The <p> tag is formatted in the same way as <h1…h6>, but will use other property/value pairs, as appropriate for the context. o To start, edit <h1> to read <h1 style= " "> and <p> to read <p style= " "> . Click on Run. o We’ll choose various property/value pairs to insert between the quotes in style= " " o Details about specific exercises continue on next slide. TryIt1 Exercises–I • Notice the large amount of space between the <h1> line and the <p> line in the TryIt result display after you first click the Run button before editing. o Browsers use a default value for the space before and after text-type tags. o Correction to previous version: “…the adjacent vertical margins (top and bottom margins) will collapse into each other so that the distance between the blocks is not the sum of the margins, but only the greater of the two margins or the same size as one margin if both are equal.” See new demo at: Margin-Padding-Demo The exercises will clarify how you can adjust the above property values to change the space between lines to what you want. You can add as many property/value pairs as you need to the in-line style= " “ statement. o Typically you’ll want to set some (or all) of the tag’s margin and padding values to zero and then adjust their corresponding top, bottom, left, right values subsequently to control the space between lines. o To override a value set to 0, just enter the new non-zero value later in the “style=“ text property/value pair with a non-zero value. TryIt1 Exercises–II • To begin the exercise, copy the text margin: 0; padding: 0; and paste these two property/value pairs in between the quotes in style= " " for both <h1> and <p> o Notice how the space between <h1> line and the <p> lines has decreased immediately after you use the Run button. • We’ll walk you through the process of adjusting, margins, padding, borders, fonts, etc. while you use the TryIt Run button for quick results. Using <div> tags to create a web page structure—I • Exercise: Use TryIt again to create the layout for a simple two-column web page. • Similar to how we used the previous TryIt exercise, we’ll use the DIY-Demo-Kit web page to construct a two-column web-page layout. o The tag layout, before adding contents, will be like that shown here on the right. • This TryIt page, like the previous one, will have a “crib sheet” of tag and property/value pairs that you can use to copy the elements you want to use for formatting and then paste them where you want them. 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 Formatting <h3> will be like formatting <h1> was, but we’ll suggest trying text-align: center; to center <h3> in the display window, a frequent task. o It will be useful to use border: 1px solid red; temporarily for the various <div> tags to show where a given tag is located relative to its parent and sibling. • We’ll now begin the demo and the exercise using the “DIY-Demo-Kit” Using <div> tags to create a web page structure—II • The graphic snippet on the right shows what the layout would look like with a red border around each of the <div>’s that you added. • 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 adjacent W3Schools web page to search and find syntax for any HTML tag or CSS styling property/value or usage. o You can then copy syntax, etc., in the new page’s extensive documentation and paste it back on the TryIt page that you are exploring. • The styling syntax used for property/values 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 If we are able to get far enough this semester to work with “embedded CSS style pages” you’ll see that CSS property/value syntax is not only the same, but Kompozer’s excellent CSS editor does much of the work for you. • Would like to get your input for what you’d like covered in the next three weeks.