sign in sign up
<<
Home , CSS, CSS box model, XML

Chapter 1: An Introduction to HTML, , and XML

Preliminaries: download the oXygen XML Editor (you do not need Author, but it may come with it—that’s ok, too) from http://www.oxygenxml.com.

We will be learning here the basics of HTML and css, and then how to transform XML documents into HTML-and-css encoded web . The “languages” or really encoding procedures—“code,” for short—that we will discuss in this chapter (and later chapter, in the case of RDF), have been created and designed by the Consortium (W3C) organization.1 Consequently, you can find online tutorials from W3Schools that teach each of these encoding procedures as well as the documentation for each language:

Code Documentation Tutorial (section) HTML2 http://www.w3.org/TR/html4 http://www.w3schools.com/html/ (1.1) / http://www.w3.org/TR/xhtml http://www.w3schools.com/html/ht 1/ ml_xhtml.asp XML http://www.w3.org/XML/ http://www.w3schools.com/xml/ (1.3) CSS http://www.w3.org/Style/CSS http://www.w3schools.com/css/ (1.2) /Overview.en.html RDF http://www.w3.org/RDF/ http://www.w3schools.com/webserv (18.1) http://www.w3.org/TR/REC- ices/ws_rdf_intro.asp rdf-syntax/

Each of these languages are explained below.

1.1 HTML The Most Basic Introduction to Web-Page Coding (please read only 1.1.3, concerning our class setup, if you already know what HTML is and how it works.)

1.1.1 From the Outside When you go to a web site on your , iPad, or phone, you go to it via a browser of some sort: , Explorer, , :

Figure 1.1.1, the Google Chrome browser

A is anything that displays on that browser.

1.1.2 From the Inside

Figure 1.1.2.a, a Web Page

When you navigate to a webpage such as Figure 1.1.2.a that has not been made by a content management system – WordPress, , Media Commons, etc. – you can reveal the code that runs behind it. You simply navigate in your browser to “View Source,” as here in Chrome (Figure 1.1.2.b):

Figure 1.1.2.b, View Source in Chrome

Clicking on View Source reveals the HTML code that the browser has interpreted in order to display the web page you saw before revealing the source (Figure 1.1.2.c):

Figure 1.1.2.c, HTML Code that causes the display seen in Figure 1.1.2.b

The HTML code lives on a server at the web address where the browser visits (Figure 1.1.2.d):

Client (User) Side Server (Maker) Side Figure 1.1.2.e, The Two Sides

1.1.3 Accessing Inside and Out For information concerning how to get to your server —whether space that has been set up by your IT Services Department, or space that you have purchased, see Appendix A.

For the rest of this book, all the web pages that we will make can be put on your computer, locally, and we will view them using the browser(s). I will now have you set up your computer so that we can see both the inside and the outside, saving things as if they were going on the server, and then looking at them using a browser, as if you were coming to them via the Internet.

a. First, make file extensions visible. Right now, on your computer, you might see only file names. We want you to be able to see the file name plus the “extension,” which is to say, the letters indicating what kind of document it is: “letter.docx” = a file called “letter” that is a Word Document. You may google how to show/hide file extensions on your computer for your , but I offer two sets of instructions here (Figure 1.1.3.a.1 and Figure 1.1.3.a.2):

Figure 1.1.3.a.1, Making File Extensions Visible on a PC with Windows 7:

The instructions above are for Windows 7. You can go to the site itself to see the instructions for previous versions as well as Windows 10: http://windows.microsoft.com/en-us/windows/show-hide-file-name- extensions#show-hide-file-name-extensions=windows-7

Figure 1.1.3.a.2, making file extensions visible on a Mac with OS X Yosemite.

b. Second, set up a file structure that we will use as you work through the exercises in this book (Figure 1.1.3.b):

Figure 1.1.3.b File Structure

Your Digital Edition folder does not need to be on your desktop—it can be anywhere—but make the four subfolders shown above: css, HTML, XML, and .

c. When you create your HTML pages, as you will for the exercises in this first chapter, you will use TextWrangler or Notepad++, then save the document with an .html extension, just as you would when creating web files to send to your server (Figure 1.1.3.c):

Figure 1.1.3.c, Saving an HTML document in TextWrangler.

d. You will then pretend you are a user, looking at the file by opening it in your (Figure 1.1.3.d):

Figure 1.1.3.d, View local files in the same way as would a user coming to your server

1.1.4 Basic HTML Code

HTML, or the , is “the publishing language of the World Wide Web”3 and is part of the XML and SGML families of languages.4 Here follows the most basic code for a web page (Figure 1.1.4.a):

Figure 1.1.4.a, Minimal Web Code

When viewed in a browser, either locally on your computer or on the Internet, this code makes a page that looks like the following (Figure 1.1.4.b):

Figure 1.1.4.b, Minimal code viewed in a browser.

Here in Figure 1.1.4.c, you can see the two together, the viewable results of the code:

Figure 1.1.4.c, HTML Code and its effect in the browser window.

Notice that, in talking about this code, I have called “” a “tag”: it can be called, tag, element, or , and in fact to be most precise, is a root node. Tags | Elements | Nodes appear in angle in all the coding languages that we will learn, with the sole exception of CSS, as well as in the scripting language that is the main topic of this book, XSLT.

Notice also that nodes are nested inside each other. The root element is the highest in the hierarchy: every other node occurs inside it. The next two elements in the hierarchy, elements that each minimal HTML document must contain, are and tags. Inside the body tag, we have two other kinds of elements: and

. “H” in the first stands for “header,” and you can use numbers 1 through 6 along with it, 1 being the largest header, and 6 the smallest. The

tag is a paragraph tag, and it contains normal-sized . The size, color, and can all be adjusted by adding information, and we will see how to make those adjustments in web-page style by using cascading stylesheets (section 1.2 below).

Our minimal HTML code is lacking in one way. We should precede the root element with a document declaration , as in the first coding example of HTML at the W3C Tutorial:

Page Title

This is a Heading

This is a paragraph.

Figure 1.1.4.d: W3C’s minimal web encoding.

The exclamation inside the first open bracket indicates to web browsers interpreting this code for proper viewing that the content of the angle brackets is information rather than something to be displayed, so the output of that code, the web view of it, given on the W3C tutorial site is the following (Figure 1.1.4.e):

Figure 1.1.4.e, W3C’s minimum web page, viewed in a browser.

Usually, more information is included in the document declaration: Here we are presented with the information that the definition of the HTML language is public, and it is given by the W3C in a “DTD” or Document Type Declaration with the name “HTML 4.01,” in “EN” (English), and that you can find this Document Type Declaration, the list of rules that our code follows, at the URL given: http://www.w3.org/TR/html4/strict.dtd.

When you are using WordPress or other content- or course-management systems, you can often switch to the HTML view of whatever document you are composing or editing: in that view, HTML tags can be added using angle brackets, by coding directly. Those views do not need to have the document declaration, html, head, or body tags in them.

For more about HTML codes, keep reading. HTML attributes (1.2.1) and (1.2.3.d) will be discussed in the process of explaining Cascading Stylesheets.

1.2 Cascading Stylesheets

Figure 1.2.a, a definition of CSS from W3C Tutorials

The best way to see how using cascading stylesheets can affect the way that your HTML code looks when it is seen in a browser is to go to Zen Garden: http://www.csszengarden.com. All of the pages that you can see at this site USE THE SAME HTML code, and simply “inform” that html code with a .css file. The difference between how the pages look is quite amazing:

Cascading Stylesheet or css code can be part of your HTML page, or it can be a separate document that your HTML page “calls” when it is loaded into the browser.

To see what I mean, before learning any css language, let’s just use one css code in two ways. Don’t worry about the details as you look at these two examples; we will go over the detailed information about the codes momentarily. For now, just look at the difference between including css information in the HTML page directly, and indirectly calling upon it.

1.2.1 Using css codes in HTML files. First, we add a css command as a line in the HTML code, using the