1. Web Page Creation Part I ST: Introduction to Web Interface Design Prof. Angela Guercio

2. Objective In this lecture, you will learn: More tags in HTML More tags in HTML Differences between HTML and XHTML Differences between HTML and XHTML Cascading Style Sheets (CSS) Cascading Style Sheets (CSS)

3. Image Files GIF (Graphic Interchange Format) GIF (Graphic Interchange Format) extension.gif extension.gif JPEG (Joint Photographic Expert Group) JPEG (Joint Photographic Expert Group) extension.jpg extension.jpg Scanner create TIFF (Tagged Image File Format) file Scanner create TIFF (Tagged Image File Format) file conversion in GIF or JPEG is done in software conversion in GIF or JPEG is done in software image in GIF is smaller but still good image in GIF is smaller but still good BMP (bitmap) digital image BMP (bitmap) digital image

4. Insert Images IMG creates an inline image IMG creates an inline image i.e. treated like a single alphanumeric character which has a larger size than a regular character i.e. treated like a single alphanumeric character which has a larger size than a regular character SRC specifies the image file and the physical location SRC specifies the image file and the physical location ALT specifies the size of the image ALT specifies the size of the image Use it all the time because: Use it all the time because: Lynx user (an old text-based browser) will recognize what they are missing if ALT is specified Lynx user (an old text-based browser) will recognize what they are missing if ALT is specified Text-to-voice browser for visually impaired, get a great amount of information from it. Text-to-voice browser for visually impaired, get a great amount of information from it.

5. Aligning and resizing images ALIGN inside IMG tag can be equal to ALIGN inside IMG tag can be equal to 1. Center 2. Top 3. Bottom 4. Middle WIDTH and HEIGHT are used to resize WIDTH and HEIGHT are used to resize resize but preserve original scale resize but preserve original scale resizing does not reduce memory or bandwidth requirements resizing does not reduce memory or bandwidth requirements Large image require long time to load. Large image require long time to load. BORDER is used to frame a picture BORDER is used to frame a picture 0 no border 0 no border

6. Colors Insert a background color Insert a background color 16,777,216 colors 16,777,216 colors or 216 Web-safe colors or 216 Web-safe colors colors are in hexadecimal notation (base 16) colors are in hexadecimal notation (base 16) Obtained as a mix of Red, Green and Blue (RGB) Obtained as a mix of Red, Green and Blue (RGB)

7. Graphics Insert a background color Insert a background color </body> Colors the background in black </body> Uses an image as background Uses an image as background Image is repeated to fill the whole area Image is repeated to fill the whole area

8. Design Hints use bold headings and oversized fonts use bold headings and oversized fonts do not overload your page do not overload your page avoid to put images on top of a patterned background avoid to put images on top of a patterned background do not use a pattern that distracts the reader from the page do not use a pattern that distracts the reader from the page images, background and special effects should not fight each other. images, background and special effects should not fight each other. if you use many pictures use a solid color for the background if you use many pictures use a solid color for the background

9. HW: to start in class Write a html file that produces this page (see next slide) as output. Write a html file that produces this page (see next slide) as output. The instructions about the Format, the Style, the Font, and the Color are in the page. The instructions about the Format, the Style, the Font, and the Color are in the page. When completed, e-mail the file to your teacher (aguercio@kent.edu ) When completed, e-mail the file to your teacher (aguercio@kent.edu )aguercio@kent.edu Deadline: Before next class. Deadline: Before next class.

10. Homework 2 Write a html file that produces this page as output. Write a html file that produces this page as output.

12. Styles in XHTML Every tag you have seen so far can be used in HTML, however styles in XHTML is described Every tag you have seen so far can be used in HTML, however styles in XHTML is described Either in the section of an XHTML document Either in the section of an XHTML document Use this when you want to apply the style only to that file Use this when you want to apply the style only to that file Or in a separate file with the extension.css Or in a separate file with the extension.css Use this when you want to apply the style to all the pages of your site. Use this when you want to apply the style to all the pages of your site.

13. Hands on #1….(Graded practice) 1. Open Dreamweaver 2. Select File -> New 3. In “PageType” select HTML and press “Create” The template of an html file is provided The template of an html file is provided 4. Click on “Split” so that you can see both the Code and the Design window 5. After the tag, insert the code of next slide and save the file as “YourFirstCSS”. 6. Press “Live View” to see the page result.

14. Code to insert after the tag SCENE I. Rousillon. The COUNT's palace. SCENE I. Rousillon. The COUNT's palace. Enter BERTRAM, the COUNTESS of Rousillon, HELENA, and LAFEU, all in black Enter BERTRAM, the COUNTESS of Rousillon, HELENA, and LAFEU, all in black COUNTESS COUNTESS In delivering my son from me, I bury a second husband. In delivering my son from me, I bury a second husband. <h2>BERTRAM</h2> And I in going, madam, weep o'er my father's death And I in going, madam, weep o'er my father's death anew: but I must attend his majesty's command, to anew: but I must attend his majesty's command, to whom I am now in ward, evermore in subjection. whom I am now in ward, evermore in subjection. <p><h2>LAFEU</h2></p> You shall find of the king a husband, madam; you, You shall find of the king a husband, madam; you, sir, a father: he that so generally is at all times good must of necessity hold his virtue to you; whose sir, a father: he that so generally is at all times good must of necessity hold his virtue to you; whose worthiness would stir it up where it wanted rath

15. Hands on ….(cont.) 7. Insert in the head area of the file the code of Example 1 (in the next slide). Insert it soon after the tag Insert it soon after the tag The code describes the style of the page The code describes the style of the page 8. Save the page and view the results in the browser. What do you notice? What do you notice? 9. Replace the code you just inserted with the code of Example 2 (two slides after) What do you notice? What do you notice?

16. Example 1 – Cascading Style Sheets (CSS) h1 { h1 { font-family: Verdana; font-family: Verdana; font-size: 18pt; font-weight: bold; font-weight: bold; text-align: center; } h2 { h2 { font-family: Verdana; font-family: Verdana; font-size: 12pt; font-size: 12pt; font-weight: bold; font-weight: bold; } body { font-family: Georgia; font-family: Georgia; background-color: aqua; }</style>

17. Example 2 – Cascading Style Sheets (CSS) h1 { h1 { font-family: Verdana, Arial, sans-serif; font-family: Verdana, Arial, sans-serif; font-size: 2em; font-weight: bold; font-weight: bold; color: green; text-align: center; } h2 { h2 { font-family: Verdana, Arial, sans-serif;; font-family: Verdana, Arial, sans-serif;; font-size: 1.1em; font-size: 1.1em; font-weight: bold; font-weight: bold; color: red; margin-left: -1.5em; } body { body { font-family: Georgia, "Times New Roman", serif; color: #000066; background-color: #eff; margin-left: 10%; margin-right:10%;}</style>

18. Hands on ….(cont.) 10. Remove the code you just inserted and replace it with the line of code 11. Select File -> New 12. In “PageType” select CSS and press “Create” The template of an CSS file is automatically provided The template of an CSS file is automatically provided This time you can see only the code window. This time you can see only the code window. 13. Insert the code you have just removed and save the file as “style.css”. ATTENTION: Be sure you save it in the same folder where you saved your “YourFirstCSS” html file. ATTENTION: Be sure you save it in the same folder where you saved your “YourFirstCSS” html file. 14. Go back to your “YourFirstCSS” file. 15. Make changes in the style and save. Go back to your file. Do you see the changes? 16. Turn your html and css file to your instructor for grade.