Download presentation
Presentation is loading. Please wait.
1
HTML Tags and Their Functions
Introduced In Chapters 1-3 * R E V I E W * Extra Credit Points For Participation Review 1/11
2
HTML Tags and Their Functions
Extra Credit Points For Participation Introduced In Chapters 1-3 * R E V I E W * The Main HTML Tags [The tags that are necessary for every HTML web page to contain.] <html> <head> <title> </title> </head> <body> </body> </html> …know these well enough to recite them in your sleep… Review 2/11
3
HTML Tags and Their Functions
Extra Credit Points For Participation Introduced In Chapters 1-3 * R E V I E W * The Name Comment [The first tag that you must type on every page of HTML code you create.] <!- - Your First & Last Name - -> Review 3/11
4
HTML Tags and Their Functions
Extra Credit Points For Participation Introduced In Chapters 1-3 * R E V I E W * The Normal Text Formatting Tags [NOTE: Although it was not covered in the steps, it is noted in the chapter that text (a.k.a. Normal Text) can be formatted a variety of ways. The following formatting tags were pointed out (additional formatting tags are available).] heading tag <h1>text</h1> *1 through 6 bold tag <strong> or <B> italic tag <em> or <I> underline tag <u> font size tag <FONT SIZE=”?”> text </FONT> font style tag <FONT FACE=”Arial, Comic”>text </FONT> font color tag <FONT COLOR=”?”>text</FONT> Review 4/11
5
HTML Tags and Their Functions
Extra Credit Points For Participation Introduced In Chapters 1-3 * R E V I E W * The Normal Text Formatting Tags CONT. paragraph tag <p> paragraph alignment tag <h1 align=”center/left/right”>text</h1> <p align=”center/left/right”>text</p> Review 5/11
6
HTML Tags and Their Functions
Extra Credit Points For Participation Introduced In Chapters 1-3 * R E V I E W * FORMATTING FONTS Increase Font Size in comparison to surrounding text <big> </big> Decreases Font Size in comparison to surrounding text <small> </small> Designate a Long Quotation indents margins on section of text <blockquote> </blockquote> Sets Enclosed Text as Preformatted Material <pre> </pre> Review 6/11
7
HTML Tags and Their Functions
Extra Credit Points For Participation Introduced In Chapters 1-3 * R E V I E W * FORMATTING FONTS Subscript <sub></sub> Superscript <sup></sup> Teletype or Monospace Text <tt> </tt> Review 7/11
8
HTML Tags and Their Functions
Extra Credit Points For Participation Introduced In Chapters 1-3 * R E V I E W * Additional Formatting Tags without attributes with attributes unordered list tags <ul> <li>text</li> </ul> <ul type=”figure2-11”> <li>text</li> </ul> ordered list tags <ol> <li>text</li> </ol> <ol type=”figure2-12”> <li>text</li> </ol> Review 8/11
9
HTML Tags and Their Functions
Extra Credit Points For Participation Introduced In Chapters 1-3 * R E V I E W * Additional Formatting Tags definition list tags <dl> <dt>term</dt> <dd>definition</dd> </dl> background color tag <body bgcolor=”#6 digit no. code”> horizontal rule tag <hr /> Review 9/11
10
HTML Tags and Their Functions
Extra Credit Points For Participation Introduced In Chapters 1-3 * R E V I E W * LINKS Color Change <body link=“color” vlink=“color” alink=“color”> Adding a Text Link… to Another Web Page within the Same Web Site <a href=“URL”>link text</a> Adding an Link <a text</a> Review 10/11
11
HTML Tags and Their Functions
Extra Credit Points For Participation Introduced In Chapters 1-3 * R E V I E W * IMAGE TAGS Adding an Image including width, height, & alternative text <img src=“image.jpg” width=“308” height=“205” alt=“text” > Adding an Image with Wrapped Text <img src=“image.jpg” width=“308” height=“205” alt=“text” align=“left/right/center> Review 11/11
12
Creating Tables in a Web Site
CHAPTER 4: Creating Tables in a Web Site Chapter 4, 12/26
13
Creating Web Pages with Tables
Tables allow the developer to organize information on a Web page using HTML tags. Tables are useful for a variety of reasons: to store information in a tabular form, and to create a layout on a Web page.* *Layouts created with tables give the Web developer more flexibility and control over the placement of information and images. Many popular Web sites use tables today. Tables can be either complex [using attributes to span rows and columns with background colors in cells and borders to provide formatting] or simple [with a basic grid format and no color] Chapter 4, 13/26
14
Tables CONT. Tables consist of rows, columns, and cells (similar to an Excel Spreadsheet). COLUMN ROW CELL Chapter 4, 14/26
15
Tables CONT. Tables include features such as:
Table Border: the line that encloses the perimeter of the table Table Header: (the same as a heading cell) any cell with bold text that indicates the purpose of the row or column Table Caption: descriptive text located above or below the table that further describes the purpose of the table Rules Attribute: allows a Web developer to select which internal borders to show in a table Chapter 4, 15/26
16
Planning, Designing, and Coding a Table
Planning tables for a Web page is a three-step process: determining if a table is needed planning the table coding the table As the eSurance commercial says… Lets Code It and Load It! Chapter 4, 16/26
17
HTML Tags and Their Functions
Introduced In This Chapter TABLES Opening & Closing Tags all other tags are inserted within <table> </table> Row Tags consists of heading or data cells <tr> </tr> Column/Heading Tags defaults bold text & align center <th> </th> Cell Tags defaults normal text & align left <td> </td> Chapter 4, 17/26
18
HTML Tags and Their Functions
Introduced In This Chapter FORMATTING TABLES Table Alignment within the main table tags <table align=“left/right/center”> </table> Cell Spacing the amount of space between the cells Cell Padding the amount of space between content & borders <table cellspacing=“#” cellpadding=“#”> </table> Column Span the cells in a column merged together <th colspan=“#”> </th> Row Span the cells in a row merged together <th rowspan=“#”> </th> Chapter 4, 18/26
19
Identify How to Format Various Table Elements
*PLAN AHEAD* Identify How to Format Various Table Elements Before inserting tables or graphical elements on a Web page, plan how to format them. Consider the following formatting suggestions: Format tables to organize Web page content. [Sometimes it is better to have no border around the table, while other times borders enhance the look of the table, depending on the content and purpose of the table.] Effectively utilize graphics. [An important part of Web development is the use of graphics to call attention to a Web page.] Chapter 4, 19/26
20
*PLAN AHEAD* Navigational Table
Determine what table formatting to use. [When using a table to organize text links, it is important to first decide how to format the table. Creating a borderless table with separators between the text links helps organize but not distract from the links.] Identify what links are needed. [Each Web page should have a link back to the home page of the Web site. There also should be links to the other pages in the Web site from each Web page. Placing these links in a table at the top of each page helps visitors navigate easily. If an individual Web page is very long, it is also a good idea to place the same table at the bottom of the page.] Chapter 4, 20/26
21
*PLAN AHEAD* Page Layout Table
Determine what table formatting to use. [Borderless tables often are appropriate when the tables are used to position text and image elements. In other instances, such as when a table is used to structure columns and rows of information, borders are appropriate.] Identify what color schemes work and do not distract from the purpose. [It is important to add an element of color to the pages in order to make the appearance attractive. However, the developer must make sure that the color does not distract from the message of the content.] Chapter 4, 21/26
22
Web Development Life Cycle
* R E V I E W * start Planning Analysis Design and Development Testing Implementation and Maintenance end
23
NOTE On Data Files & Saving While Completing The Steps
NOTE: We will not be using a USB/Flash/Thumb/Memory Stick to save the steps. Instead save your work inside the HTML Folder located in our class folder within your student folder on the student server drive. Save your work here! Data File located here! When chapter requests you to use a file, cut&paste it out of the chapter folder into the HTML Data Files Chapter 4, 23/26
24
NOTE On Viewing a Web Page in a Browser
* R E V I E W * NOTE: We will not be following the steps in the book to view our code in browser view. Instead do the following: minimize Notepad double click the “My Computer” Icon on your desktop navigate to the HTML folder where you saved your work make sure it is saved with the .html extension double click on the icon to view it in browser view Chapter 4, 24/26
25
Validating HTML Code validator.w3.org
Don’t Ask For Help Until You Have Less Than 10 Errors! * R E V I E W * To use the Validating Website, follow the below steps: Go To validator.w3.org Click the Validate by File Upload tab Click the Browse button Navigate to the Web Page Location Double Click the Page Click the Check button. [The resulting validation should be displayed.] Chapter 4, 25/26
26
Creating Tables in a Web Site
CHAPTER 4: Creating Tables in a Web Site End of Follow Up Assignment: Complete one(1) of the “Learn It Online” activities found at the end of the Chapter. Print any summary/completion screens provided, verify your name is on the print outs, and submit for completion points. Choose One(1) Of The Following: -Flashcards [set to 15] -Who Wants to Be a Computer Genius2? -Wheel of Terms -Crossword Puzzle Challenge Chapter 4, 26/26
Similar presentations
