2. Reviewing HTML

What We Will Cover Announcements Please silence all cell phones and pagers When class is over, please shut down your computer if it is on. Elucidations 2.1: The World Wide Web and HTML 2.1.1: Introducing the Internet and the World Wide Web 2.1.2: HTML: The Language of the Web 2.1.3: Creating an HTML Document 2.1.4: Structure of an HTML File 2.1.5: Working with the Document Head 2.1.6: Summary Activity 2.1 2.2: Working with Block-level Elements 2.2.1: About Block-level Elements 2.2.2: Creating Headings 2.2.3: Creating Paragraphs 2.2.4: Creating Lists 2.2.5: Generic Blocks and Other Block-level Elements 2.2.6: Summary Activity 2.2 2.3: Inline Elements and Other Items 2.3.1: About Inline Elements 2.3.2: Working with IDs and Classes 2.3.3: Creating Links 2.3.4: Working with Images 2.3.5: Special Characters and Codes 2.3.6: Embedding Media Clips 2.3.7: Summary Activity 2.3 2.4: Tables, Forms and Frames 2.4.1: Creating Web Tables 2.4.2: Creating Web Forms 2.4.3: Creating a Form Element 2.4.4: Input Elements 2.4.5: Other Form Elements 2.4.6: Working with Frames 2.4.7: Summary Activity 2.4 Wrap Up Due Next: A2: Applying HTML (9/18/06) Discussion 1 and Quiz 1 (9/18/06) Elucidations Questions from last class? What to do when WebCT has problems Room Policies Homework Questions? A1: Information Please! (9/11/06) Homework Discussion Questions Did anyone try a custom install of Firefox? Did anyone try to install the Script Debugger for IE? ^ top 2.1: The World Wide Web and HTML Learner Outcomes At the end of the lesson the student will be able to: Discuss the history of the Web and HTML Create elements and attributes Discuss the elements of the document head ^ top 2.1.1: Introducing the Internet and the World Wide Web Networking is about moving data from one computer to another Internet: a set of networks connected together with routers Routers: special computers that move data between networks All computers on the Internet talk to each other using the Internet Protocol (IP) A Brief History of the Internet 1969: Internet started by US DOD with 4 computers -- called ARPANET 1983: Internet (1000 computers) split into two parts -- military and university 1987: High-speed backbone added to solve performance issues (10K computers) 1989: World-Wide Web and HTML invented by Tim Berners-Lee at CERN 1992-3: US Government decides to commercialize Internet 1993: first graphical browser invented by Marc Andreessen While a student at the University of Illinois 1998 - E-commerce becomes a "hot" technology About the World-Wide Web Researchers at CERN developed a system of interconnected documents using hypertext Documents are stored on computers called servers Using the Internet, you can access documents from client computers One of the innovations of the web was hypertext Hypertext allows users to click items called links to open documents Using links allowed users to move around the Internet without needing to know the address of a document Documents on the world-wide web are known as web pages Each page can contain images, video and sound clips All files are stored on web servers A web browser is used to view a web page You can see an example of how this works in the following image from the textbook ^ top 2.1.2: HTML: The Language of the Web A web page is a text file written in Hypertext Markup Language (HTML) HTML is a markup language that describes structure and content of a document Competing browsers added many extensions to basic HTML, resulting in many incompatibilities One way to resolve incompatibilities is to have a set of standards The World Wide Web Consortium (W3C) Creates standards for browser manufacturers W3C has no enforcement power but recommendations are usually followed In 2001, the language of the web started a shift to Extensible HTML (XHTML) A reformulation of HTML 4.01 in XML Requires a change in coding Also, many presentation tags were deprecated Future directions of the web are XML and XHTML Brief History of HTML and XHTML HTML 1.0 (1989-1993): included support for inline images and text controls HTML 2.0 (1995): supported by all graphical browsers HTML 3.0 (1996): proposed replacement for HTML 2.0 was not widely accepted HTML 3.2: (1997): added support for tables, more options for form elements and introduced limited programming using scripts HTML 4.01 (1999): add support for style sheets and expanded options for tables, forms and scripting XHTML 1.0 (2001): reformulation of HTML 4.01 in XML, adding XML rigor to web pages XHTML 1.1 (2002): minor update to XHTML 1.0 XHTML 2.0 (2004): the latest version, designed to remove most of the presentational features left in HTML ^ top 2.1.3: Creating an HTML Document HTML documents are composed of various elements An element is a distinct feature of an HTML document Each element is marked within the HTML file using a tag Two-sided and One-sided Elements Elements can be either two sided or one sided Syntax of a two-sided element: <element>content</element> The scope of a two-sided tag is bounded by its opening tag (<p>) and its closing tag (</p>) A one-sided tag, in contrast, contains no content Syntax of a one-sided tag: <element /> An example of a one-sided tag is the line break: <br /> Since they have no content, one-sided tags are sometimes called empty elements White Space and HTML White space is blank spaces, tabs, and line breaks within the file Browsers see no difference between a blank space, a tab, and a line break Element Attributes Attributes give browsers more information about how to treat them They are inserted into element's opening tag using the syntax: attribute1="value1" attribute2="value2" ^ top 2.1.4: Structure of an HTML File An HTML 4 document is composed of: A line containing the HTML version information The root element of the HTML document The root element contains all other elements in the document Inside the root HTML element are a: Head element: containing information about the document Body element: containing content to be displayed in the Web page You nest the rest of the elements inside either the head or body elements You nest elements by placing one inside another Proper nesting means you close inner tags before closing outer tags The following is simple example showing the structure of an HTML document HTML Example 1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Page title</title> </head> <body> <h1>Heading Size 1</h1> <p>Some example text content for display</p> </body> </html> Viewing the File Locally We can view the file locally by copying it into a text editor like TextPad Then we save the file to some location on our computer, like the Desktop To view the file in a browser, we can usually just double-click it on the Desktop or from an explorer window Another way to view the file is by using the File menu of the browser to open the file ^ top 2.1.5: Working with the Document Head The head element contains various nested elements One of the required (by specification) elements is the title <title>Page title</title> The title element is displayed in the title bar of a user's Web browser The head element can contain meta data as well Later in the course we will add CSS and script elements to the head section ^ top 2.1.6: Summary In this section, we discussed the history of the Web and HTML Documents are stored on computers called servers Using the Internet, you can access documents from client computers We also covered the basic syntax of HTML and how to insert elements and attributes Elements can be either two sided or one sided Syntax of a two-sided element: <element>content</element> The scope of a two-sided tag is bounded by its opening tag (<p>) and its closing tag (</p>) A one-sided tag, in contrast, contains no content Syntax of a one-sided tag: <element /> Attributes give browsers more information about how to treat them They are inserted into element's opening tag using the syntax: attribute1="value1" attribute2="value2" An HTML 4 document is composed of: A line containing the HTML version information The root element of the HTML document The root element contains all other elements in the document Inside the root HTML element are a: Head element: containing information about the document Body element: containing content to be displayed in the Web page You nest the rest of the elements inside either the head or body elements Check Yourself What is a server? What is a client? What is hypertext? What is a markup language? What is a markup tag? Why was the World Wide Web Consortium created? What is a deprecated feature? What is XHTML? What is the relationship between HTML and XHTML? What is the syntax of a two-sided tag? What is the syntax of a one-sided tag? What is whitespace? How do browsers handler whitespace within an HTML file? What is the root element of an HTML file? What two elements are contained in the root element? What code would you add to an HTML document to set the page title to "My Grand Party Site"? ^ top Activity 2.1 Take one minute to read over the following Quick Quiz questions. We will discuss the questions in one minute. Quick Quiz If an element is deprecated, it means the element: is used less frequently than other elements may not be supported in current or future browsers is considered to be the element of choice when using XHTML no longer works AnswerB Another markup language, other than XHTML, that represents the future directions of web development is ____XML. The World Wide Consortium may comment about Web standards but it cannot actually develop them. True False AnswerFalse ^ top 2.2: Working with Block-level Elements Learner Outcomes At the end of the lesson the student will be able to: Create basic block-level elements ^ top 2.2.1: About Block-level Elements Within a documents body element, page content is categorized as either block-level or inline Block-level elements contain content displayed in a separate section within the page Inline elements are placed within block-level elements and are not separated from other page content For instance, a paragraph is a block-level element but a link is an inline element We will cover some of the most popular block-level elements in this section ^ top 2.2.2: Creating Headings Headings are titles placed within the page body HTML supports six heading elements, numbered h1 through h6 Syntax to mark a heading element, where x is a number from 1 to 6: <hx>content</hx> For example: <h1>Heading Size 1</h1> Displays the following output Heading Size 1 ^ top 2.2.3: Creating Paragraphs Paragraphs are another popular block-level element Syntax to mark a paragraph element: <p>content</p> For example: <p>Some example text content for display</p> Displays the following output Some example text content for display ^ top 2.2.4: Creating Lists HTML supports three types of list: ordered, unordered and definition The following is a brief introduction and some examples For more information see your textbook or the HTML specification for lists Ordered Lists Ordered lists are used for items that have a prescribed sequential order For example: <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> Produces the output: Coffee Tea Milk Unordered Lists Unordered lists are used for items do not need to be placed in any special order For example: <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> Produces the following output Coffee Tea Milk Definition Lists Definition list contains list of definition terms with each term followed by a definition description For example: <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> Produces the following output Coffee Black hot drink Milk White cold drink ^ top 2.2.5: Generic Blocks and Other Block-level Elements The div element is a generic container for any block-level content Syntax to mark a div element: <div> content </div> Browsers display the content as a block but do not apply any other formatting For example: <div>My generic block</div> Displays the following output My generic block Other Block-level Elements HTML supports other block-level elements you may find useful in your Web documents See your textbook for more information We will cover tables, another block-level element, later in this lesson A handy online list is: HTML 4.0 Block-Level Elements ^ top 2.2.6: Summary In this section we examined some popular block-level elements and how to use those elements in a Web page We looked at the heading element used to place title in the page body Syntax to mark a heading element, where x is a number from 1 to 6: <hx>content</hx> We also looked at the ever-useful paragraph element, which has the syntax: <p>content</p> In addition, we discussed lists and generic blocks Check Yourself What is a block-level element? What is an inline element? What code would you add to an HTML document create an h1 heading containing the text "My Grand Party Site"? What code would you enter to create an ordered list containing the items: Bread, Cheese, and Fruit? What code would you use to place the text "My Grand Party Site" in a generic block-level element? ^ top Activity 2.2 Take one minute to read over the following Quick Quiz questions. We will discuss the questions in one minute. Quick Quiz The div tag is a generic block-level element used in HTML and XHTML. True False AnswerTrue Most block-level elements are ________two-sided tags. Which of the lists below are NOT supported in HTML? ordered lists unordered lists definition lists none of these lists AnswerD ^ top 2.3: Inline Elements and Other Items Learner Outcomes At the end of the lesson the student will be able to: Create inline elements Insert nontextual objects such as inline images into a Web page ^ top 2.3.1: About Inline Elements An inline element is used to structure smaller sections of a document One type of inline element is used to define the format of text within a block For example, you use <b> and </b> to mark text in boldface: <p>This is <b>boldface text</b></p> Which displays the line: This is boldface text For a list of inline elements see: HTML 4.0 Inline Elements Why Duplicate Formatting? As you try different inline tags, you may notice that many of them format in the same way For instance, there are at least four ways to italicize text: <dfn>, <em>, <i>, <var> Why does HTML support so many alternate ways of formatting text? The reason is that the main purpose of HTML is not to format text but to structure the content of a document Logical elements are created with tags like <cite> and <code> These tags describe the nature of enclosed content but not how content should appear Physical elements are created with tags like <b> and <i> They describe how text should appear and do not indicate nature of element's content You should use a logical element whenever that element accurately describes the content it encloses You should use physical elements only for general content ^ top 2.3.2: Working with IDs and Classes As you add more elements to a web page, you often find that you need to identify unique elements and groups of elements You use the id attribute to identify a unique element Syntax to mark an id attribute: id="label" For example, to indicate a leading paragraph on a page, you can use: <p id="leading">Welcome to my web site.</p> Then you could format the leading paragraph in a unique way for the page A particular id value can appear only once on a page To mark several elements as related, you use the class attribute Syntax to mark a class attribute: class="label" For example, the following code uses the class attribute to group items in a list: 1 2 3 4 5 6 7 8 <ul> <li class="dairy">Milk</li> <li class="dairy">Cheese</li> <li class="produce">Apples</li> <li class="produce">Oranges</li> <li class="bakery">Bread</li> <li class="bakery">Cake</li> </ul> We will use these features more when we review CSS ^ top 2.3.3: Creating Links One of the great features of HTML is the ease of creating links to other documents To change content into a link, you mark the content with a two-sided <a> tag: <a href="url">content</a> For example: <a href="http://www.edparrish.com">Edward Parrish</a> Produces the hyperlink: Edward Parrish ^ top 2.3.4: Working with Images Inline images must be placed within a block-level element Syntax to mark an inline image: <img src="url" alt="text" /> Note that XHTML requires the alt attribute For example, given the generic image available here, the code: <img src="genericimage.jpg" alt="Generic image" /> Produces the output: ^ top 2.3.5: Special Characters and Codes Sometimes you need to display special characters not available on your keyboard HTML supports use of a code number or name The following table shows some samples of special characters For a more comprehensive list, see: Character entity references in HTML 4 HTML 4.0 Character Entity References Symbol Code Name Description & &#38 &amp; Ampersand < &#60 &lt; Less-than symbol > &#62 &gt; Greater-than symbol   &#160 &nbsp; Nonbreaking space, used to insert consecutive spaces © &#169 &copy; Copyright symbol ^ top 2.3.6: Embedding Media Clips You can embed multimedia clips in web pages using the syntax: <embed src="url" width="value" height="value" autostart="type" /> Embed element is not part of the official HTML specifications Support may be discontinued in the future The official specification calls for the object element However, the object element is not well supported by most browsers ^ top 2.3.7: Summary In this section, we looked at inline elements used to structure smaller sections of a document In addition, we discussed IDs and Classes Syntax to mark an id attribute: id="label" Syntax to mark a class attribute: class="label" One of the great features of HTML is the ease of creating links to other documents, using the syntax: <a href="url">content</a> Also, we looked at how to display nontextual objects such as inline images Syntax to mark an inline image: <img src="url" alt="text" /> Additionally, we looked at how to handle special characters and codes Finally, we discussed embedding media clips using the syntax: <embed src="url" width="value" height="value" autostart="type" /> Check Yourself What is a character formatting element and what are some examples of character formatting elements? What is a logical element? What is a physical element? What code would you use to display an inline image containing the image file party.gif and with the alternate text "My Grand Party Site" ^ top Activity 2.3 Take one minute to read over the following Quick Quiz questions. We will discuss the questions in one minute. Quick Quiz When creating a link to an external Web site, you must specify a protocol like HTTP. True False AnswerTrue Unique elements are created by using a(n) ___id attribute. You can tell that &#188; is a special character because it: begins with a "&" sign has numeric content included in it ends with a semi-colon all the above AnswerD ^ top 2.4: Tables, Forms and Frames Learner Outcomes At the end of the lesson the student will be able to: Create and populate Web tables Work with Web forms and their content Create Web frames and inline frames ^ top 2.4.1: Creating Web Tables You can use HTML tables to neatly format data in rows and columns You mark a table with the two-sided <table> tag You add rows to your table by nesting the <tr> tags Then you nest <td> tags to add the table data as cells or columns Each row can have one or more table-data tags For table headings, you use the <th> tag instead of <td> The following code shows an example table HTML Code for an Example Table 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <table border="1" cellspacing="0" cellpadding="5"> <tr> <th>Heading 1</th> <th>Heading 2</th> </tr> <tr> <td>row 1, column 1</td> <td>row 1, column 2</td> </tr> <tr> <td>row 2, column 1</td> <td>row 2, column 2</td> </tr> </table> Display of the Example Table Heading 1 Heading 2 row 1, column 1 row 1, column 2 row 2, column 1 row 2, column 2 Spanning Rows and Columns By default, a table has the same number of cells in every row However, you can make a cell cover more than one column or row Cells that cover more than one column or row are called spanning cells You create a spanning cell with either the rowspan or colspan attribute: <td rowspan="value" colspan="value"> When a table includes a spanning cell, you must remember to adjust the number of rows in other columns The following code shows an example table with spanning cells HTML Code for an Example Table with Spanning Cells 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <table border="1"> <tr> <th>Heading 1</th> <th>Heading 2</th> </tr> <tr> <td colspan="2">This cell spans two columns</td> </tr> <tr> <td rowspan="2">This cell spans two rows</td> <td>row 2, column 2</td> </tr> <tr> <td>row 3, column 2</td> </tr> </table> Display of the Example Table with Spanning Cells Heading 1 Heading 2 This cell spans two columns This cell spans two rows row 2, column 2 row 3, column 2 Other Table Options You can create a table border using the attribute border <table border="value"> ... </table> To change cell spacing you use: <table cellspacing="value"> ... </table> Cell padding is the space between content of each table cell and the cell's border Tables have many other options as well, which you can review in the textbook See also: Tables in HTML Documents The Table Sampler ^ top 2.4.2: Creating Web Forms An important use of the web is to collect information from people This is often done using web forms Once the data from a form is collected, it must be sent to the server for processing We discuss how to process this server-side processing toward the end of the course Elements of a form in which a user can enter information are called control elements The following image from the textbook shows a form with several control elements ^ top 2.4.3: Creating a Form Element You construct a form using this syntax: <form attributes> page elements </form> Form attributes control how the form is processed Page elements include control elements but can include other elements as well such as tables, paragraphs and headings Here is an example form element: <form action="myscript.php" method="post" name="cardinfo"> </form> Some important attributes include: action: specifies the URL where the form sends the data for processing method: specifies how to send the information The get method appends the information to the URL The post method sends the data within the body of the request You usually use the post method name: useful for differentiating between forms if a page has more than one form id: newer standard for naming forms It is a good idea to have both an id and a name element with the same value ^ top 2.4.4: Input Elements Most form elements in which users enter data are marked with an input element Syntax of an input element: <input type="type" id="id" name="name" /> The name or id attributes are required for processing the data Since older browsers only support name, it is common to use both name and id Usually, you assign the same value to both id and name HTML has 10 different input types as shown in the following table Each of them has various attributes that specify their behavior You can view the source to see how some of the attributes are used Input Types Type Description Example type="button" Display a button to perform an action from a script type="checkbox" Display a check box type="file" Display a control to locate and select a file type="hidden" Create a hidden field not viewable in the form type="image" Display an inline image that can be clicked to submit data type="password" Display an input box that hides text entered by the user type="radio" Display an option (radio) button One Two type="reset" Display a button to clear the form data when clicked type="submit" Display a button to submit the form data when clicked type="text" Display an input box that displays text entered by the user ^ top 2.4.5: Other Form Elements Forms have other ways for users to enter data We look at some of those ways in this section Selection Lists A selection list is a list box from which a user selects a value or values Selection lists are a good idea when the field's input has a fixed set of possible responses You create a selection list with the select tag with each individual item specified with the option tag The syntax for the select and option elements is: <select id="id" name="name"> <option value="value1">Item1</option> <option value="value2">Item2</option> ... </select> For example, this code produces the selection list that follows 1 2 3 4 5 <select id="state" name="state"> <option value="CA">California</option> <option value="OR" selected="selected">Oregon</option> <option value="WA">Washington</option> </select> California Oregon Washington Text Area Boxes Text areas are like text boxes except you can have multiple lines The syntax to create a text area box is: <textarea name="name" rows="value" cols="value"> default text </textarea> For example, this code produces the text area that follows: <textarea id="comments" name="comments" rows="3" cols="50"> Your comments here </textarea> Your comments here The name or id attribute allows the receiving script to identify the form element The rows attribute sets the number of lines The cols attribute sets the number of columns Text areas also need a closing tag Any text between the tags appears as the initial default text ^ top 2.4.6: Working with Frames A frame is a section of the browser window capable of displaying the content of an entire Web page A common use of frames is displaying a list of links in one frame while showing individual pages from the site in another As an example, this technique is used in WebCT Creating a Frameset Frames are arranged in a frameset General syntax: <html> <head> <title>title</title> </head> <frameset attributes> <frame src="frame_a.htm" name="name"> <frame src="frame_b.htm" name="name> ... (more frames possible) </frameset> Where the frame elements are the documents to display in the frameset The syntax for a row or column layout is: <frameset rows="row1,row2,..."> ... </frameset> or <frameset cols="column1,column2,..."> ... </frameset> Where rowX is the height of a frame row and columnX is the width of a frame column Row and column sizes can be specified in three ways: Number of pixels Percentage of total size (%) An asterisk (*) The asterisk tells the browser to allocate any unclaimed space to the row or column For example: <frameset rows="160,25%,*"> lays out a column 160 pixels wide, followed by another that is 25% of the width and a third that covers whatever space is left over. If you use more than one asterisk, the browser will allocate available space evenly between them The following diagram shows both a column and row frame layout Also, here are links to example frames: vertical frameset: from w3schools horizontal frameset: from w3schools Frame Layouts Formatting Frames By default, a scroll bar is displayed when the content of the source page does not fit within a frame Scrolling attribute used to override default setting Syntax: scrolling="type" Working with Frames and Links To assign a name to a frame, add the name attribute to the frame element Syntax for name attribute: <frame src="url" name="name" /> Reserved target names cause a linked document to appear within a specific location in the browser as listed in the textbook on page REV 44 Using the noframes Element Some browsers that do not support frames Known as frame-blind browsers To deal with these browsers, you use the noframes element Marks a section of HTML file for code that frame-blind browsers can use A document can contain only one noframes element Inline Frames An inline frame is displayed as a separate box or window within a Web page Syntax: <iframe src="url"> alternate content </iframe> Problems with Frames Frame-based web sites have many problems that have led many designers to avoid using them A browser that opens a framed site has to load multiple HTML files before the user can view any of them Also, it is difficult to bookmark pages in a frame-based system In addition, search engines may not catalog all the pages Another issue is that links to external sites may retain the frame Still another issues is that it is hard for users to print the entire page Finally, some users detest frame-based sites Thus, if you want to use frames, you should have both framed and non-frame versions available for users ^ top 2.4.7: Summary In this section, we looked at how to create Web tables, forms and frames Check Yourself Refer to page REV 48 of the textbook and review questions #20-33. ^ top Activity 2.4 Take one minute to review the Check Yourself questions. We will discuss the questions as time permits. ^ top Wrap Up Due Next: A2: Applying HTML (9/18/06) Discussion 1 and Quiz 1 (9/18/06) ^ top Home | WebCT | Announcements | Schedule | Room Policies | Course Info Help | FAQ's | HowTo's | Links Last Updated: April 08 2007 @20:05:17