Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML Tags and Their Functions Introduced In Chapters 1-3 Extra Credit Points For Participation Review 1/11.

Similar presentations


Presentation on theme: "HTML Tags and Their Functions Introduced In Chapters 1-3 Extra Credit Points For Participation Review 1/11."— Presentation transcript:

1 HTML Tags and Their Functions Introduced In Chapters 1-3 Extra Credit Points For Participation Review 1/11

2 HTML Tags and Their Functions Introduced In Chapters 1-3 The Main HTML Tags [The tags that are necessary for every HTML web page to contain.] …know these well enough to recite them in your sleep… Extra Credit Points For Participation Review 2/11

3 HTML Tags and Their Functions Introduced In Chapters 1-3 The Name Comment [The first tag that you must type on every page of HTML code you create.] Extra Credit Points For Participation Review 3/11

4 HTML Tags and Their Functions Introduced In Chapters 1-3 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 or bold tag or italic tag underline tag font size tag text font style tag text font color tag text text *1 through 6 Extra Credit Points For Participation Review 4/11

5 HTML Tags and Their Functions Introduced In Chapters 1-3 The Normal Text Formatting Tags CONT. paragraph tag paragraph alignment tag text Extra Credit Points For Participation Review 5/11

6 HTML Tags and Their Functions Introduced In Chapters 1-3 FORMATTING FONTS Increase Font Size in comparison to surrounding text Decreases Font Size in comparison to surrounding text Designate a Long Quotation indents margins on section of text Sets Enclosed Text as Preformatted Material Extra Credit Points For Participation Review 6/11

7 HTML Tags and Their Functions Introduced In Chapters 1-3 FORMATTING FONTS Subscript Superscript Teletype or Monospace Text Extra Credit Points For Participation Review 7/11

8 Additional Formatting Tags HTML Tags and Their Functions Introduced In Chapters 1-3 text unordered list tags ordered list tags without attributeswith attributes text Extra Credit Points For Participation text text Review 8/11

9 HTML Tags and Their Functions Introduced In Chapters 1-3 Additional Formatting Tags definition list tags term definition background color tag horizontal rule tag Extra Credit Points For Participation Review 9/11

10 HTML Tags and Their Functions Introduced In Chapters 1-3 LINKS Color Change link text Adding an E-Mail Link link text Extra Credit Points For Participation Adding a Text Link… to Another Web Page within the Same Web Site Review 10/11

11 HTML Tags and Their Functions Introduced In Chapters 1-3 IMAGE TAGS Extra Credit Points For Participation Adding an Image including width, height, & alternative text Adding an Image with Wrapped Text Review 11/11

12 HTML Concepts and Techniques Fifth Edition 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 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 Tables CONT. Chapter 4, 15/26

16 Planning tables for a Web page is a three-step process: 1)determining if a table is needed 2)planning the table 3)coding the table Planning, Designing, and Coding a Table Chapter 4, 16/26 As the eSurance commercial says… Lets Code It and Load It!

17 HTML Tags and Their Functions Introduced In This Chapter TABLES Opening & Closing Tags all other tags are inserted within Row Tags consists of heading or data cells Column/Heading Tags defaults bold text & align center Cell Tags defaults normal text & align left Chapter 4, 17/26

18 HTML Tags and Their Functions Introduced In This Chapter FORMATTING TABLES Table Alignment within the main table tags Cell Spacing the amount of space between the cells Cell Padding the amount of space between content & borders Column Span the cells in a column merged together Row Span the cells in a row merged together Chapter 4, 18/26

19 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.] *PLAN AHEAD* Chapter 4, 19/26

20 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.] *PLAN AHEAD* Chapter 4, 20/26

21 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.] *PLAN AHEAD* Chapter 4, 21/26

22 Web Development Life Cycle PlanningAnalysis Design and Development Testing Implementation and Maintenance start end

23 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. Data File located here! Chapter 4, 23/26 Save your work here! When chapter requests you to use a file, cut&paste it out of the chapter folder into the HTML Data Files

24 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 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 Dont Ask For Help Until You Have Less Than 10 Errors!

26 HTML Concepts and Techniques Fifth Edition 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 Genius 2 ? -Wheel of Terms -Crossword Puzzle Challenge Chapter 4, 26/26


Download ppt "HTML Tags and Their Functions Introduced In Chapters 1-3 Extra Credit Points For Participation Review 1/11."

Similar presentations


Ads by Google