1 / 15

Creating Web Pages

Learn how to create web pages with links, graphics, lists, and tables. Understand different types of links and graphics formats like jpg and gif. Explore creating lists with <ul> and <ol> tags, and structuring tables effectively.

seaman
Download Presentation

Creating Web Pages

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. Creating Web Pages Part 2

  2. TOPICS • Links • Web Graphics • Lists • Tables

  3. LINKS:The Three Types href=“fullurl” 1. To another site: href=“http://www.yahoo.com” 2. To another page on the same site: href=“file1.html” href=“relativepathname” 3. To another location on the same page: href=“#name” href=“#sectiona” name=“sectiona” name=“name” Type 1 is pretty straight-forward, types 2 and 3, however, require a little more explanation …

  4. LINKS:Type 2 – Specifying the href attribute (same directory) • Because of the large number of files involved, Web sites usually need to have a hierarchical subdirectory structure file1.html file2.html file2.html file1.html • To make it easier to create files on one machine and then upload them onto another (server) machine, the href pathnames in links are usually stated in relative, rather than absolute, terms. • For example, if file1.html and file2.html were in the same directory and file1.html contained a link to file2.html, the href would simply be the name of the file (i.e.,“file2.html”) rather than being a reference to the entire path from the root (i.e., “c:\webdocs\file2.html”).

  5. LINKS:Type 2 – Specifying the href attribute (1 level apart) home.html / clothing.html products clothing.html / .. home.html

  6. LINKS:Type 2 – Specifying the href attribute (2 levels apart) file3.html / / destinations file4.html services file4.html / / .. .. file3.html

  7. LINKS:Type 2 – Specifying the href attribute (directories at same level) shoes.html / / travel.html services .. travel.html / / shoes.html products ..

  8. LINKS:Type 3 – To another location on the same page

  9. WEB GRAPHICS:The <img> element • General Syntax • Sample HTML file • Resulting Web page

  10. WEB GRAPHICS:Bitmaps • These files are too large for the Web and should be avoided. (The file for the .bmp bitmap picture to the right is 193K.) • A “raw” graphic file in the form of a bitmap or a working file from a graphic editing tool defines the color of each individual pixel.

  11. WEB GRAPHICS:jpg and gif jpg gif • JPG compresses images and is best for full-color photographic images. • GIFs are best for line art, logos, and cartoons. • Large image file sizes mean slow load time for users. Factors that determine file size include: • The size of the image. • The type of compression. • The amount of detail and color. • A good rule of thumb is to keep graphic files smaller than 50KB.

  12. WEB GRAPHICS:Other kinds of gif files • Transparent • Animated

  13. LISTS:<ul> and <ol> Sample HTML code As displayed in browser • Unordered • Ordered

  14. TABLESBasic Structure Syntax HTML file Web page

  15. TABLES:colspan and rowspan HTML file Web page <table border="1"> <tr> <td>Name</td> <td colspan="2">Telephone Numbers</th> </tr> <tr> <td>Bill Gates</td> <td>111-1111</td> <td>222-2222</td> </tr> </table> <table border="1"> <tr> <td>Name</td> <td>Bill Gates</td> </tr> <tr> <td rowspan="2">Telephone Numbers</td> <td>111-1111</td> </tr> <tr> <td>222-2222</td> </tr> </table>

More Related