Web Site Construction I: HTML for Structure

Transcription

1 Web Site Construction I: HTML for Structure David Gerbing School of Business Administration Portland State University

2 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 navigation menus span - generic in-line element comments Example Web Page from HTML Screen Colors INDEX... 2 David W. Gerbing, 2013

3 Typeface Conventions Typeface literal example choice Indicates a literal computer keyword, entered exactly as shown a specific example of a word or phrase the user is free to choose 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.

4

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

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

7 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

8 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, a web browser. The web browser reads and transforms the HTML file into the displayed web page 1. Each HTML file corresponds to a single web page. An HTML file specifies the document s structure with marked-up content. The structure of any document a web page, an office memo, or a term paper consists of different logical parts, such as paragraphs and headings. Each logical part of a document is an element. The mark-up in an HTML file explicitly delineates, or marks up, the different elements of a document with tags. Markup tags set off an element with a start tag that contains the tag s name between angle brackets, as <name>, and a matching ending tag either another tag with a backslash in front of the name, as </name>, or, if only one tag is needed, a backslash at the end of the start tag, />. 1 As we see later, Section II, each browser contains default styling instructions for each markup tag. A web page also benefits from a customized design, provided by a technology called CSS. So ultimately both HTML files and CSS files typically contribute to the browser s rendered web page, as well as a third technology called JavaScript. 4 Gerbing 2013

9 I. HTML For example, <p> and </p> tags embedded in the HTML file instruct the browser that the enclosed content is a paragraph element. The browser then displays the content formatted as a paragraph, by default with a leading blank line before the content. The content, the body of the paragraph, begins on a new line when the web page is displayed on the computer screen. HTML file structure. An HTML file begins with a DOCTYPE declaration that indicates the file is of type HTML. An html tag marks the beginning of HTML information with the <html> tag. Each HTML file contains a Head and a Body, delineated by the <head> and <body> tags. The Head generally contains at least the <title> tag to specify the title of the browser s window (not the web page per se) and also the <meta> tag to specify the character set used to encode the characters in the file. All of the marked-up contents of the web page appear in the Body. Everything that appears on the generated web page appears in the Body. This general structure of every correct HTML file follows. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>title of browser window</title> </head> <body> ---- entire marked-up contents of the web page ---- </body> </html> Obtain this template from the Bluefish HTML Text Editor with: File à New From Template à HTML5. Mark-up Tags for Document Structure (Elements) The elements described below delineate a document s structure in terms of its constituent elements its internal organization. All of these elements appear in the Body of the HTML file. An element s corresponding tags set off the element from the rest of the document. The elements defined below, each with its own set of mark-up tags are paragraph, heading, list, table, and the generic div Gerbing

10 Web Site Construction (division). The web browser interprets these elements to construct the displayed web page. paragraph <p>some blah blah blah blah text</p> By default, a web browser renders all information contained between <p> and </p> as a separate block from the remainder of the document. The information appears beginning on its own line, separated by a blank line from the information that preceded it. Then the browser displays a new line after displaying the paragraph. When a browser displays an HTML file, the browser automatically compresses any series of white space characters including spaces, tabs and carriage returns into a single space. So in the HTML file this same paragraph listed above could be written as <p> some blah blah blah blah text </p> The browser identically displays either version of the HTML file. heading HTML defines six levels of headings, numbered 1 through 6, where 1 refers to the top most or first level heading. Headings typically display in larger fonts and often in different colors than normal body text contained within paragraphs. Mark-up the first, top-level heading element, as <h1>text of level 1 heading</h1>. Specify subsequent heading levels with numbers from 2 to 6 such as <h2>. lists <ul> <li> list item 1</li> <li> list item 2</li> <li> list item 3</li> </ul> displays as The ul tag in this mark-up refers to an unordered list. Use <ol> and </ol> for an ordered (numbered) list. The <li> stands for list item. tables Tables have traditionally played a major role in the layout of the entire web page. In the modern world, preferably restrict tables for their intended purpose: 6 Gerbing 2013

11 I. HTML the display of tabular text, a table of data with rows and columns. The most basic mark-up of a table consists of three sets of tags: 1. <table> and </table> which define the beginning and the end of the table 2. <tr> and </tr> which define a table row 3. <td> and </td> which define a cell (of data) within each row of the table A table displays content between <td> and </td> tags. Each set of <td> and </td> tags defines a single table cell and appears within a table row marked by the <tr> and </tr> tags. The HTML for the basic form of a table with two rows and three columns follows. <table border= 1 > <tr> <td>r1c1</td> <td>r1c2</td> <td>r1c3</td> </tr> <tr> <td>r2c1</td> <td>r2c2</td> <td>r2c2</td> </tr> </table> displays as A key aspect of tables that makes them so versatile for web page display is that virtually any content can appear inside a table cell, that is, between a matched set of <td> and </td> tags. Not only can ordinary text be placed in a table cell, as in the above example, but also images, video, forms, and even another table. For example, the upper left-hand cell of a table may contain a picture, and the upper right-hand cell of the same table may contain text that describes the contents of the picture. Or, an entire table can be placed inside a table cell, which results in a nested table. Using a table to format the entire page, particularly a table with nested tables, is an outdated 20 th century technique for web page layout. The more modern method for web page layout uses CSS, discussed later. Still, sometimes the more modern techniques do not work reliably on all browsers, particularly Microsoft s buggy Internet Explorer 6, so web page design still typically depends on a limited use of tables for page layout. Gerbing

12 Web Site Construction div - generic block element The paragraph, header, list, and table elements are all examples of block elements. The browser display separates a block element from the rest of the text. When displayed on the web page, each block begins on a new line and all content within the block shares at least some of the same styling characteristics. Different elements of a document are often grouped into their own section. The header at the top of a web page may contain a logo, a contact link, and a phone number. Or, a navigation menu that consists of a series of links organized by category may appear in the left column. When constructing an HTML file, enclose the different elements that form a coherent logical group within their own generic block element. This element delineates its own logical section or division. Elements enclosed with <div> and </div> tags form a section (division) of the document. The div tags function as a container that sets off the enclosed content from the remainder of the document. Suppose a group of paragraphs and associated images are all centered. One means to accomplish this centering is to separately style each paragraph and image. A more straightforward alternative encloses the entire group of paragraphs and associated images within the <div> and </div> tags. To indicate centering or any other presentation styles, first identify the specific div block of interest with the id attribute, such as <div id="mycontent">. In this example, a set of CSS style rules defines the styling for the div block named mycontent. The id attribute uniquely identifies this particular div block, and attaches the specific set of styling rules with the same name of mycontent to it. The modern focus on using CSS to format the display of a web page relies heavily upon dividing or laying out an entire document into specific sections, such as with the <div> tag. The entire document is first divided into sections, each of which in turn consists of a set of individual marked-up elements. The CSS styling rules specify how the tags are formatted in the web page that the browser constructs. The HTML for a three-column web page is structured such as the following. 8 Gerbing 2013

13 I. HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>3-columns</title> <link rel="stylesheet" href="3colcss.css" type="text/css" /> </head> <body> <div id="container"> <h1>this is the header area</h1> <div id="leftcol"><!-- Left column --> ---- entire marked-up contents of left column ---- </div> <div id="rightcol"><!-- Right column --> ---- entire marked-up contents of right column ---- </div> <div id="centercol"><!-- Center column --> ---- entire marked-up contents of center column ---- </div> <div id="footer"> <p>this is the footer, which lies beneath all three columns.</p> </div> </body> </html> The <div id= whatever > and </div> tags delineate an entire section, and also link to the corresponding CSS style rules that govern the display of the section. Mark-up Tags for Graphic and Hypertext Link Elements In the following definitions, name refers to a file name or URL (web address) and description refers to a description of the name, both specified by the designer. image <img src="name" alt= description /> Gerbing

14 Web Site Construction Example. <img src= images/jacket.jpg alt= jacket /> refers to a jpeg file (photograph) named jacket.jpg located in the images subdirectory. Note that the expression images/ refers to content within the specified folder, here called images. The browser displays the image at the point in the document where the img tag appears. Specify the image tag with at least two attributes. The src attribute, for source, specifies the location of the image on the hard disk s file directory. The alt attribute facilitates web browsing for the visually impaired who have a text reader attached to their computer. A text reader literally reads the text that appears on the screen. When encountering an image the text reader reads the contents of the alt attribute to the user. In practice an img tag also typically includes the optional height and width attributes such as height="31" and width="88", expressed in pixels. When the img tag specifies the image s height and width, the browser more quickly renders the corresponding web page without first having to separately calculate the height and width. hypertext anchor <a href="name">the link</a> All content between the anchor tags becomes a link on the corresponding web page. The link is usually text, a word or phrase, but it could be other content such as an image. Clicking the on-screen link transports the user to the reference specified in the href attribute. This reference can be a web page on another web site located somewhere else on the World Wide Web, which requires the full web address or URL for universal resource locator beginning with the http. Or, the reference can be to another page on the same web site. Example 1. HTML Code to link the abbreviation PSU to another site on the web: Check out <a href=" as a place to matriculate. Displays as: Example 2. HTML Code to link the phrase new products to a page on the same site (in this example to a web page called products.html in the same directory as the current web page): Check out our <a href="products.html">new products</a>. 10 Gerbing 2013

15 I. HTML When referring to another web page on the same site, the is no longer used. navigation menus A navigation menu consists of a list of links. Within each link is the hypertext link to the corresponding web page. Replace the # symbols with the actual destination of the link. If the page to link to is not yet available, leave the # symbol in the link until the page exists and the file name can be entered. <nav> <ul> <li><a href="#">blog</a></li> <li><a href="#">about</a></li> <li><a href="#">archives</a></li> <li><a href="#">contact</a></li> </ul> </nav> Usually these links are styled, such as, for example, to provide color and rollover effects. This styling is with CSS, explained in the next section. span - generic in-line element Image and hypertext elements are examples of in-line elements. In contrast to block level elements, an inline element flows with the text within which it is placed. An example of an in-line element is an italicized word. The word appears on the web page in the flow of text without beginning on a new line. The generic inline element mark-up are the <span> and </span> tags. The designer uses these tags to add styling features to an in-line element not otherwise marked-up, such as changing the color of several words within a sentence from black to red. As an example, the browser displays the words Hi There in red when processing the following HTML. new. We say <span style="color: red;">hi There</span> when seeing someone A later section on CSS styling provides more detail regarding these style rules. comments A comment is text in the HTML file that the browser ignores. The purpose of a comment allows the author to document his or her work. That is, the comment should clarify the purpose of a segment of HTML code. All HTML comments are text enclosed within a <!-- and a -->. For example, the text string <!-- Left column --> is a comment. Gerbing

16 Web Site Construction Example Web Page from HTML The HTML input shown below is displayed in the Bluefish editor. One of the many features of this type of specialized text editor is the display of different structural elements of the code in different colors and fonts. An HTML text editor allows the different aspects of the markup, such as tags and paragraph content, to be more easily visually distinguished from each other and from the actual content of the page, displayed as ordinary black text. HTML Input To display the web page from Bluefish, click on the Globe icon in the Toolbar at the top-right of the window. The corresponding web page follows. Browser Output 12 Gerbing 2013

17 I. HTML The preceding browser output rendered the corresponding input HTML file for screen display. The displayed logo from file LogoColorW.gif resides in the images subdirectory relative to the HTML file. Clinking on the underlined word link calls up the home page for Unlike most web pages, this page contains no special styling for the browser display. Instead, the browser formats each element according to it s default settings. For example, the default setting for the browser that generated the previous web page (Apple s Safari) displays lines of text within a paragraph as black with one blank line inserted in front of the paragraph. Before showing how to customize the presentation of the page, the next section shows how to specify the colors on a computer display. Screen Colors Color is an important aspect of a web page. On a computer monitor each screen pixel combines the three primary colors for light: red, green, and blue. The RGB color model specifies the intensity of each of the three primary colors on a scale from 0 to 255. For example, content formatted as rgb(255,0,0) displays as red because red light is at maximum without any green or blue light. Some often-used colors such as red can also be referred by their name. All three primary colors at the full intensity of 255 yield white light. All three colors at zero intensity yield black. Other combinations of red, green, and blue provide for more than 16 million possible colors, of which some appear in the following table. Color Specification Description Pattern rgb(0,0,0) black absence of all color rgb(255,255,255) white full strength of all colors rgb(255,255,0) yellow full strength of red and green rgb(0,0,255) blue full strength blue only rgb(102,0,255) purple partial red and full blue rgb(204,204,204) light gray high red, green & blue Choosing an appropriate color scheme for a web site can involve both analysis and intuition developed from experience. Though the process can be fairly involved, here is a simple style guide. If one or two more colors are needed to complement a chosen color, a pleasing possibility scrambles the red, green and blue intensities. For example, to complement rgb(153,204,255), try rgb(255,153,204) and/or rgb(153, 255,204). Gerbing

18 Web Site Construction INDEX E element, 3 block, 7 inline, 10 F file binary, 2 H HTML, 2 M markup tag, 3 markup-tag body, 4 div, 7 head, 4 heading, 6 html, 4 hypertext anchor, 9 image, 9 lists, 6 paragraph, 5 span, 10 tables, 6 T text editor, 4 U URL, 9 W white space, 5 2 Gerbing 2012