Web Site Construction I: HTML for Structure
Total Page:16
File Type:pdf, Size:1020Kb
Web Site Construction I: HTML for Structure David Gerbing School of Business Administration Portland State University Table of Contents Typeface Conventions ....................................................................................................................................... 3 SECTION I STRUCTURE THE WEB PAGE WITH HTML ........... 1 HTML ..................................................................................................................................................................... 2 Text vs. Binary Files .......................................................................................................................................... 2 Creating HTML Text ......................................................................................................................................... 2 An HTML File (for a single web page) ............................................................................................................. 3 Mark-up Tags for Document Structure (Elements) ........................................................................................... 5 paragraph ..................................................................................................................................................... 6 heading ......................................................................................................................................................... 6 lists ................................................................................................................................................................ 6 tables ............................................................................................................................................................. 6 div - generic block element ........................................................................................................................ 8 Mark-up Tags for Graphic and Hypertext Link Elements ................................................................................. 9 image ............................................................................................................................................................ 9 hypertext anchor ........................................................................................................................................ 10 navigation menus ...................................................................................................................................... 11 span - generic in-line element ................................................................................................................. 11 comments ................................................................................................................................................... 11 Example Web Page from HTML ..................................................................................................................... 12 Screen Colors ................................................................................................................................................... 13 INDEX .............................................................................................................. 2 © David W. Gerbing, 2013 Typeface Conventions Typeface Indicates … literal a literal computer keyword, entered exactly as shown example a specific example of a word or phrase the user is free to choose choice the name of the attribute for which the user is free to choose his or her own word or phrase Consider the following actual code, <img src="images/jacket.jpg" alt="jacket"> . Enter the <img src=" exactly as shown. Similarly for the alt=" and ">. The phrase images/jacket.jpg is based on names supplied by the user, in this case a directory called “images” and a file within that directory called “jacket.jpg”. In contrast to the actual code displayed above, the more general definition displays as <img src="name" alt=”description” /> . Here the user specifies his or her own chosen name, such as images/jacket.jpg from the above example code. SECTION I STRUCTURE THE WEB PAGE WITH HTML This section shows how to describe the structure of a document with HTML. Structural elements include paragraphs, headings, lists and tables. Web Site Construction HTML HTML, or Hypertext Mark-up Language, is an integral component of the World Wide Web. Based upon previous work on the concept of mark-up languages, Tim Berners-Lee developed HTML in 1989 while working at CERN, the European Laboratory for Particle Physics in Geneva, Switzerland. As part of HTML, Mr. Berners-Lee specified the form of a hypertext link which, when clicked, transports the user to another web page. He also invented the naming system of www.whatever.com, and he wrote the first browser and web server. Mr. Berners-Lee continues to contribute to the development of the web through the present as Director of the World Wide Web Consortium (W3C), an organization that develops standards and specifications for the web. There is a more industry focused and competing organization called the Web Hypertext Application Technology Working Group (WHATWG). Text vs. Binary Files A web browser constructs much of the display of a web page from a type of computer file called a text file, specifically an HTML text file. A text file contains only digital representations of the standard characters such as the uppercase letter A, punctuation and a few control codes such as tab and linefeed. A text file contains no styling commands for achieving presentation effects such as italicized text or page numbering. As such, a text file is application independent, belonging to no one single application. The same text file can be read and written by many applications that vary from MS Word to specialized text editors for developing web pages, such as Bluefish. Creating HTML Text Visual editors. A visual web page creation program, often called a WYSWYG (What You See is What You Get) application, generates the HTML mark-up from the page laid out by the user. The web site program that is almost a standard among professional designers is Adobe’s Dreamweaver. Most applications today, however, including MS Office, save the on-screen display of a document to a web page. To visualize how these web authoring systems work, consider MS Word, which can serve as a WYSWYG editor for a single web page. Place a title, some 2 Gerbing © 2013 I. HTML pictures and some text on a Word page, and use the Hyperlink… command from the Insert menu to create some links. Then Save as Web Page… and the needed HTML is automatically created. Just move a set of the created HTML files and associated graphics to a web server and you have a web site! These WYSWYG editors work well, but they are expensive (many hundreds of dollars) and do not provide the highest level of control because they, and not the user, generate the HTML mark-up. Ultimately most web site designers also tweak the HTML themselves, or provide all of the mark-up. To do requires another type of editor. HTML text editors. Some text editors, called HTML editors require the designer to write his or her own HTML, which provides the ultimate level of control over the implementation of the web page. Fortunately these editors provide many features that facilitate this hand coding and, are also much more inexpensive than products such as Dreamweaver. For example, a specialized text editor automatically colors the HTML elements differently from the page’s content, and inserts elements into the text directly from a dictionary of HTML tags obtained from a special menu. An excellent and free HTML editor is Bluefish. Besides being free of cost, Bluefish also works on Windows, Mac and Linux/Unix. Any text editor, such as NotePad on windows and TextEdit on the Mac, also work for editing HTML files, but a primary advantage of Bluefish is the ability to browse for linked images and web pages, from which Bluefish constructs the proper code that correctly identifies the linked content. An HTML File (for a single web page) Before beginning a web project there is one step that first must be accomplished. First create a folder on your file system that will contain all of the files of your web site. This folder includes an images folder for storing all graphics to be displayed on the site. From the beginning make sure that all files to be displayed on the finished web site are contained within this same folder on your PC. Later these files will be transferred to a web server for access to the entire Internet. Mark-up. A text file primarily contains only standard text characters, so how is the file styled for display? Embedded in the file are standard text characters called mark-up tags, which indicate structural features such as the beginning of Gerbing © 2013 3 Web Site Construction a paragraph, or a second-level header. An application called a web browser then reads the text file and displays the content according to the styling instructions based on the various mark-up tags. Examples of a web browser include Microsoft’s Internet Explorer, Apple’s Safari, and Google’s Chrome. The file with the embedded mark-up tags is called an HTML file. These tags are specified according to the HTML standard beginning with the work of Tim Berners-Lee. A web browser displays the web page according to the structure of the HTML file provided by the mark-up tags (and their corresponding styling instructions). Figure 1. Initial formulation of input to, and output from,