1 / 28

Review of Last Lesson

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. Review of Last Lesson.

gmisty
Download Presentation

Review of Last Lesson

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. 2004-2005 Academic Year, Spring SemesterBilkent University - Faculty of Art, Design and ArchitectureDepartment of Communication and DesignCS 153 Introduction to Computing ILesson 4

  2. Review of Last Lesson <html>  <head>    <title>MUSIC</title>  </head>  <body>WELCOME TO MY MUSIC PAGE This page is about pop music. I will list here my favorite singers and songs.My Favorite Singers:StingDire StraitsGippsy KingsMy Favorite Songs:FragileYour latest trickPharon</body> </html> • Any HTML file starts with <html> and ends with </html> • <title>...</title> is the title of the page and given in <head>...</head> part • <body> ... </body> contains the information which will be displayed in the page

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

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

  5. TAG ATTRIBUTE <p align=center> <p> Change the part of your html code to: <p align="center">My Favorite Singers: </p> 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: <center>WELCOME TO MY MUSIC PAGE </center> CENTER tag centers any object in the page

  7. Background color <body bgcolor=yellow> Change the part of your html code to: <body bgcolor="lightyellow"> 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: • By name; like "pink", "blue", "green", etc. • By Hexadecimal codes: Hexadecimal is a number system that has 16 numbers(base16-0123456789ABCDEF). • Different colors are formed by the combination of Red, Green, Blue. Such code will look like "#19A8FE". • "#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: <body text="#0000FF">

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

  11. Physical Style: <b> Change the part of your html code to: <b>My Favorite Songs:</b> 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: <i> 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: <u> Change the part of your html code to: <u>Your latest trick</u>

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

  15. Physical Style: <sup> Add to your html code: <p>10<sup>o</sup>C SUP tag changes the appearance of the enclosed text to superscript.

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

  17. Logical Styles: <em>...</em> = Emphasis <strong>...</strong> = Stronger emphasis <code>...</code> = Display an HTML directive <samp>...</samp> = Include sample output <kbd>...</kbd> = Display a keyboard key <var>...</var> = Define a variable <dfn>...</dfn> = Display a definition (not widely supported) <cite>...</cite> = Display a citation

  18. Text Elements: <pre>, <listing> Add to the end of your html code: <pre>   G r o u p                                  C D   Era                                           Era   Santana                                    Smooth   Bueno Vista  Social Club          Chan Chan</pre>   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> • <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. </blockquote> Defines a long quotation

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

  21. Entity • A character entity has three parts: • an ampersand (&), • an entity name or • a # and an entity number, • 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 &nbsp; character entity

  22. Entity • Add to your html code: This is a text. This &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; is a text.

  23. Font Add to your html code: <font face="arial, verdana, comic sans ms" size=10 color="green"> New Age Groups</font>

  24. Some Exercises

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

  26. Solution <html> <head> <title>Clemantis</title> </head> <body background=http://www.bilkent.edu.tr/~ussakli/images/fl1.gif > <h1>Welcome to my Clemantis page.</h1> <p>I would love to give some information about <b>clemantis</b>.</p> <h2>Where we can find information about clemantis flowers?</h2> <p>There are several web sites about clemantis, first of all you should check <big>International Clematis Society</big>. </body> </html>

  27. Exercise 2

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

More Related