

     

This Lesson File Downloaded from http://www.onlinegiscourses.com Created by Pennstate e-education department of geography Overview Checklist HTML XML/XHTML CSS Assignment: Write a Page Using XHTML and CSS Summary and Final Tasks

This Lesson File Downloaded from http://www.onlinegiscourses.com Created by Pennstate e-education department of geography

Overview A GIS mashup is essentially a web page containing special scripts that dynamically add a map to the page. The bulk of this course will be concerned with writing these map building scripts (using JavaScript). However, mashups are embedded within pages written in the web publishing languages of HTML and CSS. This lesson focuses on those web publishing languages. The lesson covers a lot of material, which is why you'll be given two weeks to complete it instead of one. At the end of the lesson, you'll be given a Word document and asked to apply what you've learned to produce a web page that replicates the formatting of the Word document.

Objectives At the successful completion of this lesson, students should be able to: 

understand the basic rules/terminology of Hypertext Transfer Markup Language (HTML);



author a simple web page containing paragraphs, lists, tables, images, and links without the aid of an HTML editor;



describe notation schemes that are not handled well by HTM;



explain the need for and uses of eXtensible Markup Language (XML);



describe the motivation behind the development of eXtensible HTML (XHTML) and its syntax differences from HTML;



describe the benefits of using Cascading Style Sheet (CSS) technology;



author a simple web page using XHTML and CSS.

Questions? Conversation and comments in this course will take place within the course discussion forums in ANGEL. If you have any questions now or at any point during this week, please feel free to post them to the Lesson 2 Discussion Forum. (That forum can be accessed at any time by clicking on the Communicate tab and then scrolling down to the Discussion Forums section.)

This Lesson File Downloaded from http://www.onlinegiscourses.com Created by Pennstate e-education department of geography

Checklist Lesson 2 is two weeks in length. (See the Calendar in ANGEL for specific due dates.) To finish this lesson, you must complete the actvities listed below. You may find it useful to print this page out first so that you can follow along with the directions.

Steps to Completing Lesson 2 Step Activity

Access/Directions

1

Work through Lesson 2.

You are in the Lesson 2 online content now. The Overview page is previous to this page, and you are on the Checklist page right now.

2

The instructor will e-mail you a Word Document. Reproduce that document as a web page using XHTML and CSS.

Post your web page in your e-portfolio.

3

Take Quiz 2 after you read the online content.

Go to the Quizzes folder and click on the "Lesson 2 Quiz" link to begin the quiz.

This Lesson File Downloaded from http://www.onlinegiscourses.com Created by Pennstate e-education department of geography

HTML HTML Basics HyperText Markup Language (HTML) is the core language involved in the authoring of pages published on the World Wide Web. HTML is simply plain text in which the text is "marked up" to define various types of content, such as headings, paragraphs, links, images, lists, and tables. The markup occurs in the form oftags, special character strings that signal the beginning and end of a content element. For example, the

...

tags are used to define heading elements:

As the figure above shows, a web page can be authored using just a plain text editor. Most web pages (especially static ones) are saved with a .htm or .html file extension. When naming HTML files, it is best to avoid using spaces (use underscores instead) and punctuation.

Basic HTML Rules/Terminology    

The characters that denote an HTML tag (< and >) are referred to as angle brackets. Tags usually come in pairs (e.g., and , where is the start tag and is the end tag). HTML is not case sensitive (i.e., Your content here

Page validation and conversion XHTML and its dialects were developed by a standards organization called the World Wide Web Consortium (W3C). They also provide tools for web authors(link is external) to validate that their pages follow the syntax rules of their selected DOCTYPE and to convert their pages from sloppy HTML to clean XHTML. This conversion tool is called HTML Tidy and can be run on the desktop or online (see links below). HTML Tidy(link is external) HTML Tidy (online version)(link is external)

Recent developments Though XHTML was originally intended to be "the next step in the evolution of the Internet," it never gained a strong foothold in the web development community. A major factor that discouraged its adoption was that in order to reap the full benefit of an XMLbased document, it needed to be served to browsers as "application/xhtml+xml" rather than "text/html." Most major browsers such as Firefox, Chrome and Safari were built to handle the "application/xhtml+xml" content type. The notable exception was Internet Explorer, which until version 9 did not support "application/xhtml+xml" content — users were asked if they wanted to save the file when documents of that type were encountered. In addition to the content type issue, technological advances appear to have undercut the argument that small handheld devices cannot load web pages at an acceptable speed without the use of an XML-based parser. Today's smartphone browsers utilize the same HTML parsers as their desktop counterparts. Thus, in recent years, the notion of a world in which browsers parse all web pages as XML and page developers must author well-formed documents appears less and less likely. The W3C halted their development of a new version of XHTML and shifted their focus towards a new version of HTML (HTML5). This led some to declare that "XHTML is dead(link is external)." When it is complete, the HTML5 standard will require browsers to continue correcting poorly written HTML. This has the effect of allowing sloppy page authors to continue in their sloppy habits. That said, browsers will continue to accept

This Lesson File Downloaded from http://www.onlinegiscourses.com Created by Pennstate e-education department of geography

pages authored with XHTML-style coding. And the ability to incorporate scalable vector graphics (SVG) and MathML into pages will be built into HTML5. Developers who see value in serving their pages as XML may continue to do so. To learn more about HTML5(link is external), see the short tutorial at the w3schools site.

So what language should we use? HTML5 is the current standard for web publishing and you should certainly be looking to employ it in the web pages you develop. I have the content on XHTML in this lesson for a few reasons: 1. to give you an appreciation for the evolution of web publishing standards, 2. you're likely to encounter XHTML in other people's source code, and 3. to encourage you to write clean HTML code. Doing so will enable you to achieve a higher level of consistency in the rendering of your pages than if you allowed yourself to pick up bad habits. At the end of this lesson, you'll be asked to write a web page from scratch using what you learned from the lesson. I'm going to require you to write that page in XHTML Strict. However, for subsequent projects, you will be able to use the less rigid HTML5.

This Lesson File Downloaded from http://www.onlinegiscourses.com Created by Pennstate e-education department of geography

CSS The need for CSS During the early years of the World Wide Web, maintaining a site where all of the pages share the same style was tedious and inefficient. For example, if a web author wanted to change the background color of each page on his/her site, that would involve performing the same edit to each page. Creating alternate versions of the same page (e.g., one for the visually impaired) was also frustrating since it involved maintaining multiple copies of the same content. Any time the content required modification, the same edits would need to be made in multiple files. Also, the mixing of page content with its presentational settings resulted in bloated pages. This was problematic for a couple of important reasons: 

It decreased the readability of the HTML source code, for example when performing edits.



It increased the page's file size, which in turn increased the time required to download it.

The Cascading Style Sheet (CSS) language was developed to address all of these issues. By storing presentational settings in a separate file that can be applied to any desired page, it is much easier to give multiple related pages the same look, to create multiple views of the same content and to reduce the bloating of pages.

How does CSS work? To see how CSS works, go to this w3schools CSS demo(link is external). Click on a few of the "Stylesheet" links beneath the Same Page Different Stylesheets heading and note how the same exact content is displayed in a different way through the use of different style sheets. Next, click on the "Stylesheet1" link beneath the View Stylesheets heading to see the CSS code stored in that style sheet. The beginning of this stylesheet tells the browser to display text within the document's body element at 100% of the size set by the user (as opposed to shrinking or enlarging it) and in the Lucida Sans font. It also applies a 20pixel margin and a line-height of 26 pixels. Scrolling down to the bottom of the stylesheet, note that the a element is set to display in black (#000000) and with an underline. If you scan through the rest of the document, you should notice some other useful settings. Don't worry if you don't follow all of the settings at this point; you should have a clearer understanding after working through this page of the lesson. The basic syntax used in CSS coding is:

selector {property: value} This Lesson File Downloaded from http://www.onlinegiscourses.com Created by Pennstate e-education department of geography

where selector is some element, property is one of its attributes and value is the value that you want to assign to the attribute. I'll again refer you to the w3schools site for more CSS syntax(link is external) and CSS selector(link is external)details. Pay particular attention to the "class selector," which is used when you don't want every element of a particular type to be styled in the same way (e.g., if you wanted some paragraphs to be aligned to the left and some to the right), and the "id selector," which is used to style a specific element.

Where to put CSS CSS code can be written in three places: 

External style sheet - in an entirely separate file from the HTML document



Internal style sheet - in the HTML document's head section



Inline - the style is made an attribute of the desired HTML element

When the CSS code is stored in an external style sheet, a critical step is to add a reference to that style sheet in the HTML document's head section. The screen capture below (from the w3schools site) highlights this important setting.

To implement an internal style sheet, the actual CSS code should be stored in the head section of the HTML document rather than a link to an external file. The code should be surrounded by tags as in this example:

This Lesson File Downloaded from http://www.onlinegiscourses.com Created by Pennstate e-education department of geography

Finally, to apply an inline style, the required CSS code should be assigned to the style attribute of the desired HTML element. Here is an example that changes the color and left margin settings for a paragraph element:

This is a paragraph

Cascade order The CSS language gets its name from the behavior exhibited when a page has styles applied from more than one of the sources described above. Styles are applied in the following order:

external — internal — inline This order becomes important when the same selector appears in more than one style source. Consider the following example in which a page acquires styles from both an external and internal style sheet:

All h3 elements on the page will be colored red based on the setting found in the external sheet. The cascading nature of CSS comes into play with the text-align and font-size attributes. The page's h3 elements will take on the settings from the internal style sheet, since those styles were applied after the styles found in the external style sheet.

This Lesson File Downloaded from http://www.onlinegiscourses.com Created by Pennstate e-education department of geography

Now that you've seen how CSS works, the rest of this section will cover some of the more commonly used styles.

Background styles The background color for any element (though most especially for the page's body) can be set as in the following example from w3schools:

This is header 1

This is header 2

This is a paragraph

Note the different ways that the background-color property can be set. Valid values include names, 6-character hexadecimal values and RGB values. A list of valid color names can be found at w3schools.(link is external)

Text styles The color of text can be altered using the color property. As with background colors, text colors can be specified using names, hexadecimal values or RGB values:

This Lesson File Downloaded from http://www.onlinegiscourses.com Created by Pennstate e-education department of geography

This is header 1

This is header 2

This is a paragraph

Text can be aligned to the left, right or center using the text-align property:

This is header 1

This is header 2

This is a paragraph

Underlining text and producing a strikethrough effect is accomplished using the textdecoration property. Note that this is also the property used to remove the underline that is placed beneath linked text by default. Removing this underline is sometimes desirable,

This Lesson File Downloaded from http://www.onlinegiscourses.com Created by Pennstate e-education department of geography

particularly when lots of links are clustered near each other.

This is header 1

This is header 2

This is header 3

This is a link

Recall from earlier that the font used to display the text of an element can be set using the font-familyproperty and that it is a good idea to list multiple fonts in case the preferred one is not available on the user's machine. Text can be sized using the font-size property. Note that valid values include percentages in relation to the parent element, lengths in pixel units and names like small, large, smaller, and larger.



This Lesson File Downloaded from http://www.onlinegiscourses.com Created by Pennstate e-education department of geography

This is header 1

This is header 2

This is a paragraph

To change the weight of text (i.e., its boldness), the font-weight property is used. Valid values include names like bold, bolder, lighter or multiples of 100 ranging from 100 to 900 with 400 being normal weight and 700 being bold.

This is a paragraph

This is a paragraph

This is a paragraph

This Lesson File Downloaded from http://www.onlinegiscourses.com Created by Pennstate e-education department of geography

Margin styles The space around elements can be specified using the margin-top, margin-right, marginbottom, andmargin-left attributes. These margin attributes can be set using values in pixel units, centimeters or as a percentage of the element's container. For example: {margin-left: 2cm}

{margin-left: 20px} {margin-left: 10%} Note that all four margins can be set at once using the margin property. The values should be specified in the order top, right, bottom and left:

{margin: 2px 4px 2px 4px}

Table styles Some of the more important styles to understand in a mashup context are those involving tables. Theborder properties are used to control the width, color and style (e.g., solid or dashed) of the borders of tables and their cells. Different settings can be applied to each side with separate declarations or the same settings applied to all sides in one declaration. The latter option, which is the most common, has this syntax: border: thin solid gray See w3schools' CSS Border page(link is external) for more details on the usage of the border properties. Tables drawn with a border have their cells detached or separated from one another by default. Personally, I find this behavior to be annoying and prefer to collapse the borders using the setting:

border-collapse: collapse

Table without a border-collapse setting (or set to border-collapse: separate)

Table with border-collapse: collapse setting

Another default behavior that I find annoying is that empty cells are not displayed with a border. (This actually only applies to tables with detached borders; when borders are collapsed, empty cells will be visible no matter what.) To override this behavior, the empty-cells property is used:

This Lesson File Downloaded from http://www.onlinegiscourses.com Created by Pennstate e-education department of geography

empty-cells: show Finally, the padding properties are used to specify the amount of space between the outside of an element's container and its content. Applying padding settings to td elements is commonly done to control the amount of space between a table cell border and its text. Again, padding can be controlled on a side-to-side basis or in a single declaration. The most common setting is to pad the cells equally on all four sides, which can be done as follows: padding: 5px The following CSS styling example(link is external) applies some of these styles and some that were described earlier to produce a visually appealing table:

This Lesson File Downloaded from http://www.onlinegiscourses.com Created by Pennstate e-education department of geography

CSS

HTML

table { background-color:#FFFFFF; border: solid #000 3px; width: 400px; }

	John	Jane	Total
January	123	234	357
February	135	246	381
March	257	368	625
Total	515	848	1363

table td { padding: 5px; border: solid #000 1px; } .data { color: #000000; text-align: right; background-color: #CCCCCC; } .toprow { font-style: italic; text-align: center; background-color: #FFFFCC; } .leftcol { font-weight: bold; text-align: left; width: 150px; background-color: #CCCCCC; }

This code yields:

This Lesson File Downloaded from http://www.onlinegiscourses.com Created by Pennstate e-education department of geography

Assignment: Write a Page Using XHTML and CSS You have been sent a Word document containing text that I’d like you to convert to a valid XHTML Strict document. Match the formatting found in the Word doc as closely as possible, paying particular attention to text alignment, font size and font weight. Some of the formatting will require CSS, which you should write in either an external file or in the head section of the XHTML doc. The goal of this project is to test your ability to code the document from scratch, so avoid using HTML editors such as Word or Front Page. They almost invariably generate more code than is actually needed and your grade will be docked considerably if you use one. Instead, I recommend you use a basic text editor like Notepad. You can refer to the links below for an example in which I've replicated a document similar to the one you've been assigned: Example Word document My XHTML/CSS solution(link is external) You may be tempted to find your assigned document online and copy its source code. To discourage this, I’ve made small modifications to each document. If I find that you’ve submitted a document that matches the original and not the one that I sent you, I will consider it an academic integrity violation (resulting in a grade of 0). The addresses of links can be determined by right-clicking on one in Word and selecting Edit Hyperlink. The URL will be shown in the Address text box. You can highlight the complete URL using Ctrl-a and copy it to the Windows clipboard using Ctrl-c. For full credit, your page must pass through the World Wide Web Consortium’s page validator(link is external) without errors.

Deliverables This project is two weeks in length. Please refer to the course Calendar tab, in ANGEL, for the due date. 1. Post a link to the page you created to your e-portfolio. (70 of 100 points) 2. I will be checking your page against the World Wide Web Consortium’s page validator(link is external). For full credit, your page must pass through without errors. (20 of 100 points) 3. Also include a link to your app from Lesson 1 in your e-portfolio (10 of 100 points). 4. Complete the Lesson 2 quiz.

This Lesson File Downloaded from http://www.onlinegiscourses.com Created by Pennstate e-education department of geography

Summary and Final Tasks In this lesson, you learned about the core languages involved in web publishing. While knowledge of these languages isn't completely necessary for producing maps with the Google Maps API, you are now likely to have a much better understanding of the pages in which your maps will reside and you'll also be better equipped to develop pages of a higher quality. In Lesson 3, you'll be introduced to the Google Maps JavaScript API and use it to create a map of your hometown.

This Lesson File Downloaded from http://www.onlinegiscourses.com Created by Pennstate e-education department of geography