1. 2004-2005 Academic Year, Spring Semester Bilkent University - Faculty of Art, Design and Architecture Department of Communication and Design CS 153 Introduction to Computing I Lesson 5

2. Review of Last Lesson Colors HTML Colors Colors HTML Colors HTML allows a wide range of colors. These colors can be represented in a hexadecimal form (called sRGB) or in a named form. Some basic color codes are: Black: #000000 Black: #000000 Red: #FF0000 Green: #00FF00Blue: #0000FFYellow:#FFFF00Aqua(Cyan): #00FFFFFuchsia(Magenta): #FF00FFGray: #C0C0C0White: #FFFFFF</body></html>

3. Background Image Change the part of your html code to: Header tags produce different sized headings.

4. and tags and tags Use and tags to have paragraphs and line breaks so that your list looks tidy. Also use align parameter of tag to allign some parts if you feel necessary.

5. Seperating the text with (horizontal rule) Insert or tag to create a horizontal rule. Try to add one or more of these parameters: width=number / number%, size=number, noshade, align=left / right / center, color=name / #hex code for RGB

6. Adding a entity Add a nonbreaking space entity to the “HTML Colors” so that the space between HTML and Colors is larger Add a nonbreaking space entity to the “HTML Colors” so that the space between HTML and Colors is larger

7. Acronym tag We have a acronym sRGB, create a defintion for it. sRGB sRGB

8. Font Change the font of your HTML output. Some Font Faces: Arial Arial Comic Sans MS Comic Sans MS Georgia Georgia Times New Roman Times New Roman Tahoma Tahoma Verdana Verdana Font Sizes: font size 1 font size 2 font size 3 font size 4 font size 5 font size 6 font size 7

9. Font Change the color of each sRGB value to its value. Change the color of each sRGB value to its value.

10. Scrolling Text (Marquee) If you use alot: annoying. If you use alot: annoying. HTML Colors HTML Colors Change the values to see the effect.

11. Marquee Parameters width=100/50% bgcolor=name/#HEX loop=number/infinite direction=left/right scrolldelay=number (number of pixels to move the text with each successive redraw) scrollamount=10 (number of milliseconds between redraws)

12. Lists There are 3 kinds of lists There are 3 kinds of lists Bulleted (Unordered) Bulleted (Unordered) Numbered Numbered Definition Definition

13. Bulleted Lists (Unordered Lists)... Tag defines bulleted lists.... Tag defines bulleted lists. Using type attribute you can select from Using type attribute you can select from Disk bullets Disk bullets Circle bullets Circle bullets Square bullets Square bullets tag: initiates an unordered list. tag: is creating list header. (opt) tag: each item. tag: initiates an unordered list. tag: is creating list header. (opt) tag: each item. </ul>

14. Bulleted Lists <ul> Some basic color codes are Some basic color codes are Black: #000000 Black: #000000 Red: #FF0000 Red: #FF0000 Green: #00FF00 Green: #00FF00 Blue: #0000FF Blue: #0000FF Yellow:#FFFF00 Yellow:#FFFF00 Aqua(Cyan): #00FFFF Aqua(Cyan): #00FFFF Fuchsia(Magenta): #FF00FF Fuchsia(Magenta): #FF00FF <li>Gray: #C0C0C0</li><li>White: #FFFFFF</li></ul>

15. More Levels! <li>Yellow:#FFFF00 Light Yellow Light Yellow Lighter Yellow Lighter Yellow </li>

16. Bullet Type Disk bullets: disk Disk bullets: disk Circle bullets: circle Circle bullets: circle Square bullets: square Square bullets: square

17. Numbered Lists (Ordered Lists)... Tag defines numbered lists.... Tag defines numbered lists. Using type attribute you can select from Using type attribute you can select from 1 A a I i tag: initiates an unordered list. tag: is creating list header. (opt) tag: each item. tag: initiates an unordered list. tag: is creating list header. (opt) tag: each item. </ol>

18. <ol> Some basic color codes are Some basic color codes are Black: #000000 Black: #000000 Red: #FF0000 Red: #FF0000 Green: #00FF00 Green: #00FF00 Blue: #0000FF Blue: #0000FF <li>Yellow:#FFFF00 Light Yellow Light Yellow Lighter Yellow Lighter Yellow </li> Aqua(Cyan): #00FFFF Aqua(Cyan): #00FFFF Fuchsia(Magenta): #FF00FF Fuchsia(Magenta): #FF00FF <li>Gray: #C0C0C0</li><li>White: #FFFFFF</li></ol>

19. Ordered List Types 1 A a I i

20. Definition Lists... creates a definition list... creates a definition list definition term definition term definition data tags definition data tags

21. Create a new file for this, do not lose old data. Create a new file for this, do not lose old data.

22. Definition Lists definition list example Following is an example for "Definition List" URL URL means Uniform Resource Locator. HTTP HTTP means HyperText Transfer Protocol. FTP FTP means File Transfer Protocol. SMTP SMTP means Send Mail Transfer Protocol. definition list example Following is an example for "Definition List" URL URL means Uniform Resource Locator. HTTP HTTP means HyperText Transfer Protocol. FTP FTP means File Transfer Protocol. SMTP SMTP means Send Mail Transfer Protocol.

23. You can add a list inside another <li>Yellow:#FFFF00 Light Yellow Light Yellow Lighter Yellow Lighter Yellow </li> Change the tag to Change the tag to

24. Image You can add Images to your HTML pages. You can add Images to your HTML pages. There are 2 standard graphic file formats that most browsers supports: GIF and JPG. There are 2 standard graphic file formats that most browsers supports: GIF and JPG. GIF supports 256 colors. Graphical images are best viewed in GIF file type. GIF supports 256 colors. Graphical images are best viewed in GIF file type. JPG supports 16 million colors. Photographical images are best viewed in JPG file type. JPG supports 16 million colors. Photographical images are best viewed in JPG file type.

25. Image Image Download and place it to the same directory of your html document. Download and place it to the same directory of your html document.http://www.bilkent.edu.tr/~ussakli/images/billogo.gif Add this line to the top of your html page Add this line to the top of your html page

26. Image Parameters src src This attribute is required for every IMG element. It specifies a URL for the image resource This attribute is required for every IMG element. It specifies a URL for the image resource alt alt This is used to provide a text description of the image and is vital for interoperability with speech-based and text only user agents. This is used to provide a text description of the image and is vital for interoperability with speech-based and text only user agents. align align This specifies how the image is positioned relative to the current textline in which it occurs: This specifies how the image is positioned relative to the current textline in which it occurs: align=top positions the top of the image with the top of the current text line. align=top positions the top of the image with the top of the current text line. align=middle aligns the middle of the image with the baseline for the current textline. align=middle aligns the middle of the image with the baseline for the current textline. align=bottom is the default and aligns the bottom of the image with the baseline. align=bottom is the default and aligns the bottom of the image with the baseline. align=left floats the image to the current left margin align=left floats the image to the current left margin align=right floats the image to the current right margin align=right floats the image to the current right margin width width height height border border hspace This can be used to provide white space to the immediate left and right of the image. hspace This can be used to provide white space to the immediate left and right of the image. vspace This can be used to provide white space above and below the image vspace This can be used to provide white space above and below the image

27. Some Examples of Image

28. Anchor Anchor We said, HTML allows hyperlinks, the anchor tag is what allows hyperlinking. We said, HTML allows hyperlinks, the anchor tag is what allows hyperlinking. Two versions: Two versions: Internal hyperlink Internal hyperlink External hyperlink External hyperlink

29. Anchor Parameters Anchor parameters are Anchor parameters are name name Name parameters allows a named anchor for internal hyperlinks Name parameters allows a named anchor for internal hyperlinks href href If href is used on an anchor the anchored text is now clickable and goes to the destination specified on href. If href is used on an anchor the anchored text is now clickable and goes to the destination specified on href. title title The title of anchor, mostly displayed on status bar when the mouse is over the hyperlink. The title of anchor, mostly displayed on status bar when the mouse is over the hyperlink. Target Target Where the link is opened? Where the link is opened? _blank: new window _blank: new window

30. Anchor Internal Hyperlink <h2>Content:</h2> Introduction Introduction Chapter 1 Chapter 1 Chapter 2 Chapter 2 Introduction: This is introduction part content. Introduction: This is introduction part content. </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p> Chapter 1: This is Chapter 1 content Chapter 1: This is Chapter 1 content </p><p> </p><p> </p><p> </p> <p> </p><p> </p><p> </p> Chapter 2: This is Chapter 2 content Chapter 2: This is Chapter 2 content </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>

31. Internal Hyperlink Content: Content: Introduction Introduction Chapter 1 Chapter 1 Chapter 2 Chapter 2 Introduction: This is introduction part content. Introduction: This is introduction part content. </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p> back back Chapter 1: This is Chapter 1 content Chapter 1: This is Chapter 1 content </p><p> </p><p> </p><p> </p> <p> </p><p> </p><p> </p> back back Chapter 2: This is Chapter 2 content Chapter 2: This is Chapter 2 content </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p> back back

32. External Hyperlink Google Google To open in different windows Google Google To open in same window {just give a name} Google Google Yahoo Yahoo

33. Opening default Email editor click here to send a mail to me click here to send a mail to me Well what if a user doesn’t have an email program like Outlook Express or Eudora? Well what if a user doesn’t have an email program like Outlook Express or Eudora? This will not work. This will not work.

34. An Image Link! </a>

35. EOL