Lesson 2 Web Publishing Technologies HTML-XHTML-CSS.pdf ...



     

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.)


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.


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., is the same as ), though lowercase is the recommended standard. Tags and their associated text form HTML elements.


A simple HTML document All HTML documents should be enclosed within tags and should contain a head section and a body section. The head section contains meta> Some important points to note about this example: 1. img elements don't have an end tag. 2. src is an example of an element attribute. 3. Attribute values should be specified in quotes, preferably double quotes. 4. The web browser will look for brown_MarkerA.png in the same folder that the HTML document is in. 5. It is also possible to load images using a full web address (URL):


Adding links Links are added to a web page using the anchor tag () and its href attribute:

Penn State Note that the text that you want to display as a link should be placed between the and tags. The URL that you want to load should be used to specify the href attribute value. You've probably encountered pages with links that jump to other locations in the same page (e.g., a "Back to top" link). Creating this type of link is a two-step process: 1. Create an anchor somewhere in the document: 2. Link to that anchor: Back to top Note that the value assigned to the id attribute ("top" in this case) is entirely up to you. The key is to plug the same value into the href attribute and precede that value with a pound sign to specify that you're linking to an anchor in the same document.

HTML entities Some of the characters you might want to display on your page require special coding because they have special meanings in HTML. For example, if you wanted to display an algebraic expression like x > 5, you'd need to use the code > since angle brackets are used to produce start and end tags. Another aspect of HTML that can prompt the use of one of these entities is the fact that consecutive spaces in your HTML source code are treated as one. You can get around this by inserting one or more non-breaking spaces with the entity. Some other commonly used entities include:


Commonly Used Entities Output char

HTML code

&

&

"

"

©

©

÷

÷

×

×

HTML tables Tables are commonly used in mapping mashups to display information associated with features on the map. A table is defined using the and
tags. A row can be added to the table using the and tags. Individual cells of > Penn State Nittany Lions Ohio State Buckeyes


To include column headings, add a row containing elements instead of elements. By default, web browsers will display the elements in bold:

School Mascot

Penn State Nittany Lions

Ohio State Buckeyes

and elements have an attribute called colspan that can be used to spread the element's text across multiple columns:

2000 2006

Males Females Males Females

5,929,663 6,351,391 6,043,132 6,397,489

Likewise, and elements also have a rowspan attribute for spreading text across multiple rows.


Miscellaneous notes Comments can be inserted into an HTML document using the following syntax:

Also, as mentioned above, consecutive spaces are ignored by web browsers. This means that you should feel free to indent your HTML code (as shown in the table examples) and use line spacing to make it easier to read and follow.

Online tutorials/cheatsheets This section of the lesson is just an introduction to the basics of HTML. There are many other helpful online HTML tutorials that can help you learn the language, along with cheatsheets that can be used for quick reference once you've gained some coding experience. Here is a list of sites that I've found to be helpful:    

w3schools.com (HTML Tutorial)(link is external) killersites.com (HTML Codes Cheat Sheet)(link is external) webmonkey (HTML Cheatsheet)(link is external) mindprod.com (HTML Cheat Sheet)


XML/XHTML What is XML? HTML handles the needs of most web authors, but there are some kinds of information that it is not well-suited for presenting (e.g., mathematical notations, chemical formulae, musical scores). The eXtensible Markup Language (XML) was developed to address this shortcoming. XML is a language used to define other languages, a meta-language. Just as HTML has its own syntax rules, you can create your own markup language with its own set of rules. For example, here is an example of a markup language(link is external) used to store information about CDs in a CD catalog. Unlike HTML, in which the root element is called , this language has a root element called . A element is composed of one or more elements. Each element in turn has a , , , , , and . So, like HTML, XML documents use tags to define > CORRECT



XHTML is case sensitive. and are different tags. The standard is to use lowercase.

Flavors of XHTML HTML was originally developed such that the actual informational content of a document was mixed with presentational settings. For example, the tag was used to tell the browser to display bits of text in italics and the tag was used to produce bold text. An important aspect in the development of web publishing has been its push for the separation of content from presentation. This resulted in the creation of an tag to define emphasized text and a tag to define strongly emphasized text. It turns out that the default behavior of browsers is to display text tagged with in italics and text tagged with in bold, which may leave you wondering what purpose these new tags serve if they only replicate the behavior of and . The answer lies in the use of Cascading Style Sheets (CSS). With CSS, web authors can override the browsers' default settings to display elements differently. Authors can also develop multiple style sheets for the same content (e.g., one for desktop browsers, one


intended for printing, etc.). The usage of style sheets also makes it much easier to make sweeping changes to the look of a series of related pages. We'll talk more about CSS in the next section. So, while it is possible to override the behavior of the and tags just as easily as any other tags, the and tags were added and recommended over and to encourage web authors to move away from the practice of mixing content with presentation. XHTML has two main dialects that differ from one another in terms of whether they allow the use of some presentational elements or not. As its name implies, the XHTML Strict dialect does not allow the usage of elements like and . It also does not allow the usage of element attributes like align and bgcolor. Presentation details like font size/type and alignment must be handled using CSS. The Strict dialect also requires that all text and images be embedded within either a
element or a element (used to define divisions or sections of a document). The XHTML Transitional dialect does not prohibit the use of presentational elements and attributes like those described in the previous paragraph. Generally speaking, XHTML Transitional was intended for developers who want to convert their old pages to a newer version, but would probably not bother to do it if they had to eliminate every presentational setting. XHTML Strict was intended for developers creating new pages. XHTML developers specify which set of rules their page follows by adding a DOCTYPE line to the top of the page. For example, here are the DOCTYPE statements for XHTML Strict and XHTML Transitional, respectively: OR

Browse this article for more details on the differences between the two dialects.(link is external) The basic skeleton of an XHTML Strict document looks like this:

Your title here 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


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.


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:


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.


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 is a paragraph
Text can be aligned to the left, right or center using the text-align property:

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,


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 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


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:


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:


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:


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.


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.


Lesson 2 Web Publishing Technologies HTML-XHTML-CSS.pdf ...

Lesson 2 Web Publishing Technologies HTML-XHTML-CSS.pdf ...

Suggest Documents

Web Publishing Basics 2

Web 2 Technologies for Net Native Language

web technologies

Lesson 217 March 2, 2014 - The Full Gospel Baptist Publishing

LEVEL 2 LESSON 2 - Libsyn

Desktop Publishing Lesson and Materials

Lesson 2 Lesson 2 - Phases of the Moon

Lesson 2- Theology

Grade 2 Lesson Plan

Lesson 2 - onefd

Ch5, Lesson 2

wildlife lesson _k-2

Lesson 2: Exponents - levine.wiki.dublinschools.net

Book 5: Lesson 2

Lesson 2: Greetings

Lesson Transparencies Grade 2

Lesson 2 - NPTel

Lesson 2 Making Choices

Lesson 2- Theology

Lesson 2 - Hortcourses.com

Lesson 2 New England

Vocab Lesson 2

Lesson 2 - Ocean Ministries

Lesson 2 - Ocean Ministries

2000		2006
Males	Females	Males	Females
5,929,663	6,351,391	6,043,132	6,397,489

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