Validación del PMP

4.1.1. Format of Web Page Markup. Documents can be presented in many forms. A simple editor

like Idle or Windows’ Notepad produce plain text: essentially a long string of meaningful characters. Documents can be displayed with formatting of parts of the document. Web pages allow different fonts, italic, and boldfaced emphases, and different sized text, all to be included. Microsoft Word, Open Office, and Latex, all display documents with various amounts of formatting. The syntax for the ways different systems encode the formatting information varies enormously.

If you look at a Microsoft Word document in a plain text editor like notepad, you should be able to find the original text buried inside, but most of the symbols associated with the formatting are unprintable gibberish as far as a human is concerned.

Hypertext markup language (HTML) is very different in that regard. It produces a file of entirely human-readable characters, that could be produced with a plain text editor.

For instance in HTML, the largest form of a heading with the text “Web Introduction”, would look like <h1>Web Introduction</h1>

The heading format is indicated by bracketing the heading text ’Web Introduction’ with markup sequences, <h1> beforehand, and </h1> afterward. All HTML markup is delimited by tags enclosed in angle brackets, and most tags come in pairs, surrounding the information to be formatted. The end tag has an extra ’/’. Here ’h’ stands for heading, and the number indicates the relative importance of the heading. (There is also h2, h3, .... for smaller headings.) In the early days of HTML editing was done in a plain text editor, with the tags being directly typed in by people who memorized all the codes!

With the enormous explosion of the World Wide Web, specialized software has been developed to make web editing be much like word processing, with a graphical interface, allowing formatting to be done by selecting text with a mouse and clicking menus and icons labeled in more natural language. The software then automatically generates the necessary markup. An example used in these tutorials is the open source Kompozer, available at http://kompozer.net. (Careful – although this is free, open source software, the URL is Kompozer.net, not Kompozer.org. There is a site Kompozer.org that is designed to confuse you!) You can open Kompozer and easily generate a document with a heading, and italic and boldfaced portions....

4.1.2. Introduction to Static Pages in Kompozer. This section introduces the Kompozer web

page editor to create static pages. Kompozer is used because it is free software, and is pretty easy to use, like a common word processor. Unlike a common word processor you will be able to easily look at the HTML markup code underneath. It is not necessary to know a lot about the details of the markup codes for HTML files to use Kompozer.

We will use static pages later as a part of making dynamic pages, using the static pages as templates in which we insert data dynamically.

To creating static web pages

(1) If you are in a Loyola University Windows lab, go to the start menu -> Loyola software -> Internet -> Kompozer. (It may be under Math and Comp Sci instead.) You may get pop-up window wanting to count users of Kompozer. Click OK as another user of Kompozer.

(2) However you start Kompozer, go to the File menu and click on New. You will get what looks like an empty document.

(3) Look at the bottom of your window. You should see a ’Normal’ tabs selected, with other choices beside it, including a Source tab. Click on the Source tab. You should see that, though you have added no content, you already have the basic markup to make an html page!

(4) Click again on the Normal tab to go back to the Normal view (of no content at the moment). (5) Assume you are making a home page for yourself. Make a title and some introductory text. Use

regular word processor features like marking your title as Heading 1 in the drop down box on a menu bar. (The drop down menu may start off displaying ’Paragraph’ or ’Body Text’.) You can select text and make it bold or italics; enlarge it ... using the editing menu or icons.

(6) Before getting too carried away, save your document as index.html in the existing www directory under your earlier Python examples. It will save a lot of trouble if you keep your web work together in this www directory, where I have already placed a number of files yo will want to keep together in one directory.

(7) Just for comparison, switch back and forth between the Normal and Source views to see all that has gone on underneath your view, particularly if you edited the format of your text. Somewhere embedded in the Source view you should see all the text you entered. Some individual characters have special symbols in HTML that start with an ampersand and end with a semicolon. Again, at this point it is more important the understand that there are two different views than to be able to reproduce the Source view from memory.

(8) You can use your web browser to see how your file looks outside the editor. The easiest way to do this is to go to the web browser’s File menu and Open File entry, and find the index.html file. It should look pretty similar to the way it looked in Kompozer, but if you put in hyperlinks, they should now be active.