1 / 27

HTML Lesson 5

HTML Lesson 5. TBE 540. Prerequisites. The user must be able to… Create basic web pages with a text editor and/or a web page editor. Objectives. After completing all activities related to this lesson, the learner will be able to… Describe the use of relative addressing.

hedva
Download Presentation

HTML Lesson 5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Lesson 5 TBE 540

  2. Prerequisites • The user must be able to… • Create basic web pages with a text editor and/or a web page editor.

  3. Objectives • After completing all activities related to this lesson, the learner will be able to… • Describe the use of relative addressing. • Insert a table in a web page. • Format the table and fill it with information. • Create a frameset document and accompanying pages. • List advantages and disadvantages of tables and frames.

  4. Relative Addressing • Though putting all web site files in the same folder is the simplest method, it is more common to organize the file into folders. • For example, all graphics (especially those common to several pages) might be placed in a folder called IMAGES

  5. Relative Addressing • Relative addressing means that you will specify a “path” when you specify file names. • Here are two IMG tags that show graphic files in a location other than the folder that contains the page: <IMG SRC=“IMAGES/cow.gif”> <IMG SRC=“../IMAGES/cow.gif”>

  6. Relative Addressing • <IMG SRC=“IMAGES/cow.gif”> means that there is a folder called IMAGES inside the folder where the page is. The image cow.gif will be there. • <IMG SRC=“../IMAGES/cow.gif”> means to “go up one level” (../) then look for a folder called IMAGES. The image cow.gif will be there.

  7. Relative Addressing • Here is a sample site organization: MySite home.htm IMAGES cow.gif sheep.gif animals back.gif farm.htm arrow.gif

  8. Relative Addressing • To put back.gif into home.htm, the IMG tag in home.htm would be: <IMG SRC=“IMAGES/back.gif”> • To put back.gif into farm.htm, the IMG tag in farm.htm would be: <IMG SRC=“../IMAGES/back.gif”>

  9. Tables • A web page table is very much like a table in word processing or a spreadsheet. • It has rows, columns and cells.

  10. Tables • When tables are created, most web editors will ask for the number of rows and columns. • You can change these settings later. • You may also want to set the border (0 = “invisible”, 3 or more gives a 3-D effect).

  11. Tables • Tables are often used to line up text and/or graphics. • These tables often have a border of 0. border=1 border=0

  12. Tables • Most commercial web pages use tables to arrange graphics and text exactly as the designer planned it. • Many pages use tables within tables (a larger table with smaller tables inside its cells).

  13. Tables (CSUDH Homepage) Click to see the tables

  14. Tables (CSUDH Homepage)

  15. Frames • In web pages, frames are areas into which whole web pages can be loaded. • Though frames are not commonly used (most sites use tables instead), Blackboard is a good example of the use of frames. • Click to see examples of Blackboard frames.

  16. Frames - Blackboard stays here all the time changes when you click the buttons stays while you are in a class area

  17. Frames • The Blackboard page you just looked at is made from four web page documents. • Each of the three frames is a separate web page file. • There is a FRAMESET document (also a web page file) that sets up the frames.

  18. Frames • A FRAMESET document uses <FRAMESET> and </FRAMESET> instead of <BODY> and </BODY>. • The type of frames (rows or columns) must be specified, and each frame must be described with a <FRAME> tag like this: <FRAME SRC =”content1.htm" border="0" NORESIZE >

  19. Here is the FRAMESET code for the example --> <HTML> <HEAD></HEAD> <FRAMESET COLS=“100,*”> <FRAME SRC=“left.htm”> <FRAME SRC=“right.htm”> </FRAMESET> </HTML> FRAMESET Sample WELCOME! • Links • One • Two • Three Join us..etc. left.htm right.htm

  20. <HTML> <HEAD></HEAD> <FRAMESET COLS=“100,*”> <FRAME SRC=“left.htm”> <FRAME SRC=“right.htm”> </FRAMESET> </HTML> Two “column” frames - the first (left) is 100 pixels wide. The right frame takes up whatever space is left over (*) on the screen. left.htm is the web page file for the left frame. right.htm fills the right frame. FRAMESET Sample

  21. Try this! • For more information on frames and tables, see the links from the class page: http://www.csudh.edu/fisher/tbe540/540html.htm • Try the hands-on exercise to experiment with tables.

  22. Self Check HTML Lesson 5 • You are working on a web page in the HOME folder, and you want to include a picture called me.jpg that is stored in the PIX folder (inside the HOME folder). Which is the correct pathname? <IMG SRC=“../PIX/me.jpg”> <IMG SRC=“PIX/me.jpg”> <IMG SRC=“IMAGES/me.jpg”>

  23. Self Check HTML Lesson 5 • You are working on a web page in the HOME folder, and you want to include a picture called me.jpg that is stored in the PIX folder (inside the HOME folder). Which is the correct pathname? <IMG SRC=“../PIX/me.jpg”> <IMG SRC=“PIX/me.jpg”> <IMG SRC=“IMAGES/me.jpg”>

  24. Self Check HTML Lesson 5 • What is the format of the table below? 3 rows, 2 columns, border=2 2 rows, 3 columns, border=0 2 rows, 3 columns, border=2

  25. Self Check HTML Lesson 5 • What is the format of the table below? 3 rows, 2 columns, border=2 2 rows, 3 columns, border=0 2 rows, 3 columns, border=2

  26. Self Check HTML Lesson 5 • Does the display below show the use of tables or frames? How can you tell? LEFT SIDE RIGHT SIDE 1 2 3 4 5

  27. Self Check HTML Lesson 5 • Does the display below show the use of tables or frames? How can you tell? Right side moves, but left side stays as is. LEFT SIDE RIGHT SIDE 1 2 3 4 5

More Related