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 4

2. Review of Last Lesson MUSIC WELCOME TO MY MUSIC PAGE This page is about pop music. I will list here my favorite singers and songs. My Favorite Singers: Sting Dire Straits Gippsy Kings My Favorite Songs: Fragile Your latest trick Pharon MUSIC WELCOME TO MY MUSIC PAGE This page is about pop music. I will list here my favorite singers and songs. My Favorite Singers: Sting Dire Straits Gippsy Kings My Favorite Songs: Fragile Your latest trick Pharon </html> Any HTML file starts with and ends with... is the title of the page and given in... part... contains the information which will be displayed in the page

3. Header Tags Change the part of your html code to: WELCOME TO MY MUSIC PAGE WELCOME TO MY MUSIC PAGE Header tags produce different sized headings.

4. and tags and tags Change the part of your html code to: My Favorite Singers: My Favorite Singers: Sting<br> Dire Straits Dire Straits Gippsy Kings Gippsy Kings My Favorite Songs: My Favorite Songs: Fragile<br> Your latest trick Your latest trick Pharon<br> tag starts a new line. tag skips a line then starts a paragraph.

5. TAG ATTRIBUTE TAG ATTRIBUTE Change the part of your html code to: My Favorite Singers: My Favorite Singers: Attributes modify tags. align=center will shift the text to center. Other values for align are left, right

6. <center> Change the part of your html code to: WELCOME TO MY MUSIC PAGE WELCOME TO MY MUSIC PAGE CENTER tag centers any object in the page

7. Background color Background color Change the part of your html code to: bgcolor attribute changes the background color of the page. background attribute adds a tiled image to the background of the page.

8. Color http://www.w3schools.com/html/html_colornames.asp Any color can be given in two ways: 1. By name; like "pink", "blue", "green", etc. 2. By Hexadecimal codes: Hexadecimal is a number system that has 16 numbers(base16- 0123456789ABCDEF). 1. Different colors are formed by the combination of Red, Green, Blue. Such code will look like "#19A8FE". 2. "#000000" is black, "#FFFFFF" is white, "#FF0000" is red, "#00FF00" is green, "#0000FF" is blue.

9. Changing the body text color Change the part of your html code to:

10. Seperating the text with (horizontal rule) hr is an empty tag. Change the part of your html code to: or or width=number / number%, size=number, noshade, align=left / right / center, color=name / #hex code for RGB

11. Physical Style: Physical Style: Change the part of your html code to: My Favorite Songs: My Favorite Songs: b tag changes the appearance of the enclosed text to bold. Note: In the nested usage of the tags, any opening and closing tag pair shouldn't cross the other pairs.

12. Physical Style: Physical Style: Change the part of your html code to: <i>Fragile</i> i tag changes the appearance of the enclosed text to italic.

13. Physical Style: Physical Style: Change the part of your html code to: Your latest trick Your latest trick

14. Physical Style: Physical Style: Add to your html code: <p>H₂O SUB tag changes the appearance of the enclosed text to subscript.

15. Physical Style: Physical Style: Add to your html code: <p>10^oC SUP tag changes the appearance of the enclosed text to superscript.

16. Physical Style: Physical Style: Add to the end of your html code: OTHER GROUPS OTHER GROUPS TT tag is the type writer font.

17. Logical Styles:... = Emphasis... = Emphasis... = Stronger emphasis... = Stronger emphasis... = Display an HTML directive... = Display an HTML directive... = Include sample output... = Include sample output... = Display a keyboard key... = Display a keyboard key... = Define a variable... = Define a variable... = Display a definition (not widely supported)... = Display a definition (not widely supported)... = Display a citation... = Display a citation

18. Text Elements:, Text Elements:, Add to the end of your html code: G r o u p C D Era Era Santana Smooth Bueno Vista Social Club Chan Chan G r o u p C D Era Era Santana Smooth Bueno Vista Social Club Chan Chan PRE tag tells that text is already formatted, it must be displayed as it is. Permits some tags inside. LISTING tag does the same except it doesn't run the tags inside.

19. <blockquote> Write this and copy over and over again. Write this and copy over and over again. Write this and copy over and over again. Write this and copy over and over again. Write this and copy over and over again. Write this and copy over and over again. Write this and copy over and over again. Write this and copy over and over again. Write this and copy over and over again. Write this and copy over and over again. Write this and copy over and over again. Write this and copy over and over again. Write this and copy over and over again. Write this and copy over and over again. Write this and copy over and over again. Write this and copy over and over again. Write this and copy over and over again. Write this and copy over and over again. Write this and copy over and over again. Write this and copy over and over again. Write this and copy over and over again. Write this and copy over and over again. Write this and copy over and over again. Write this and copy over and over again. Defines a long quotation

20. Entities http://www.w3schools.com/html/html_entitiesref.asp http://www.w3schools.com/html/html_entitiesref.asp &keyword; Display a particular character identified by a special keyword. &keyword; Display a particular character identified by a special keyword. For example: For example: the entity < specifies the less than ( < ) character. Note that the semicolon following the keyword is required &#ascii_equivalent; Use a character literally. &#ascii_equivalent; Use a character literally. For example For example the entity %specifies (%) character. Again note that the semicolon following the ASCII numeric value is required.

21. Entity A character entity has three parts: A character entity has three parts: an ampersand (&), an ampersand (&), an entity name or an entity name or a # and an entity number, a # and an entity number, and finally a semicolon (;). and finally a semicolon (;). The most common character entity in HTML is the non-breaking space. Normally HTML will truncate spaces in your text. To add spaces to your text, use the character entity The most common character entity in HTML is the non-breaking space. Normally HTML will truncate spaces in your text. To add spaces to your text, use the character entity

22. Entity Add to your html code: Add to your html code: This is a text. This is a text.

23. Font Add to your html code: New Age Groups New Age Groups

24. Some Exercises

25. Exercise 1 The address of background image is http://www.bilkent.edu.tr/~ussakli/images/fl1.gifhttp://www.bilkent.edu.tr/~ussakli/images/fl1.gif

26. Solution <html><head><title>Clemantis</title></head> Welcome to my Clemantis page. Welcome to my Clemantis page. I would love to give some information about clemantis. I would love to give some information about clemantis. Where we can find information about clemantis flowers? Where we can find information about clemantis flowers? There are several web sites about clemantis, first of all you should check International Clematis Society. There are several web sites about clemantis, first of all you should check International Clematis Society.</body></html>

27. Exercise 2

28. Solution <html><head> Definition of Information Definition of Information </head> <h1>Welcome!</h1> So what is information ? So what is information ? A definition A definition Any communication or representation of knowledge such as facts, data, or opinions, in any medium or form, including textual, numerical, graphic, cartographic, narrative, or audio-visual forms. Any communication or representation of knowledge such as facts, data, or opinions, in any medium or form, including textual, numerical, graphic, cartographic, narrative, or audio-visual forms. Yet another definition Yet another definition <p> We can also define information as: We can also define information as: The meaning that a human extracts from data by means of known conventions of the representation used." (Gould, 1971). The meaning that a human extracts from data by means of known conventions of the representation used." (Gould, 1971). </body></html>