Chapter 1: an Introduction to HTML, Css, and XML Preliminaries

Chapter 1: An Introduction to HTML, css, 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 pages. The “languages” or really encoding procedures—“code,” for short—that we will discuss in this chapter (and a later chapter, in the case oF RDF), have been created and designed by the World Wide Web 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 computer, iPad, or phone, you go to it via a browser oF some sort: SaFari, Internet Explorer, Google Chrome, FireFox: Figure 1.1.1, the Google Chrome browser A Web Page 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, Drupal, 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 space—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 soFtware, 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 xslt. 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 web browser (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 Hypertext Markup Language, 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 “<html>” a “tag”: it can be called, tag, element, or node, and in Fact to be most precise, <html> is a root node. Tags | Elements | Nodes appear in angle brackets 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 <html> 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 <head> and <body> tags. Inside the body tag, we have two other kinds oF elements: <h#> and <p>. “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 <p> tag is a paragraph tag, and it contains normal-sized fonts. The size, color, and font 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 <html> element with a document declaration <!DOCTYPE html>, as in the first coding example oF HTML at the W3C Tutorial: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html> Figure 1.1.4.d: W3C’s minimal web encoding. The exclamation point 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: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 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 links (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.

Load more