2004-2005 Academic Year, Spring Semester Bilkent University - Faculty of Art, Design and Architecture Department of Communication and Design CS 153 Introduction.

2004-2005 Academic Year, Spring Semester2004-2005 Academic Year, Spring SemesterBilkent University - Faculty of Art, Design and Bilkent University - Faculty of Art, Design and

ArchitectureArchitectureDepartment of Communication and DesignDepartment of Communication and Design

CS 153 Introduction CS 153 Introduction

to Computing Ito Computing I Lesson 4Lesson 4

Review of Last LessonReview of Last Lesson<html><html>

<head> <head> <title>MUSIC</title> <title>MUSIC</title> </head> </head> <body> <body>WELCOME TO MY MUSIC PAGE WELCOME TO MY MUSIC PAGE This page is about pop music. I will list here my favorite This page is about pop music. I will list here my favorite singers and songs.singers and songs.My Favorite Singers:My Favorite Singers:StingStingDire StraitsDire StraitsGippsy KingsGippsy KingsMy Favorite Songs:My Favorite Songs:FragileFragileYour latest trickYour latest trickPharonPharon</body></body>

</html></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

Header TagsHeader Tags

Change the part of your html code to:Change the part of your html code to:

<h2>WELCOME TO MY MUSIC <h2>WELCOME TO MY MUSIC PAGE </h2> PAGE </h2>

Header tags produce different sized headings.

 and tags and tags

Change the part of your html code to:Change the part of your html code to:My Favorite Singers: My Favorite Singers: Sting Sting Dire Straits Dire Straits Gippsy Kings Gippsy Kings My Favorite Songs: My Favorite Songs: Fragile Fragile Your latest trick Your latest trick Pharon Pharon 

 tag starts a new line. tag skips a line then starts a paragraph.

TAG ATTRIBUTE align=center> 


My Favorite My Favorite Singers: Singers: 

Attributes modify tags. align=center will shift the text to center. Other values for align are left, right

<center> <center>


<center>WELCOME TO MY MUSIC <center>WELCOME TO MY MUSIC PAGE </center>PAGE </center>

CENTER tag centers any object in the page

Background color <body Background color <body

bgcolor=yellow>bgcolor=yellow>


<body bgcolor="lightyellow"><body bgcolor="lightyellow">

bgcolor attribute changes the background color of the page.background attribute adds a tiled image to the background of the page.

ColorColor

http://www.w3schools.com/html/html_colornameshttp://www.w3schools.com/html/html_colornames.asp.asp

Any color can be given in two ways:Any color can be given in two ways:

1.1. By name; like "pink", "blue", "green", etc.By name; like "pink", "blue", "green", etc.

2.2. By Hexadecimal codes: Hexadecimal is a By Hexadecimal codes: Hexadecimal is a number system that has 16 numbers(base16-number system that has 16 numbers(base16-0123456789ABCDEF). 0123456789ABCDEF).

1.1. Different colors are formed by the combination of Different colors are formed by the combination of Red, Green, Blue. Such code will look like Red, Green, Blue. Such code will look like "#19A8FE". "#19A8FE".

2.2. "#000000" is black, "#FFFFFF" is white, "#000000" is black, "#FFFFFF" is white, "#FF0000" is red, "#00FF00" is green, "#0000FF" "#FF0000" is red, "#00FF00" is green, "#0000FF" is blue.is blue.

Changing the body text Changing the body text colorcolor


<body text="#0000FF"> <body text="#0000FF">

Seperating the text with Seperating the text with <hr> (horizontal rule)<hr> (horizontal rule)

hr is an empty tag.hr is an empty tag.


<hr> or <hr /><hr> or <hr />

width=number / number%, size=number, noshade, align=left / right / center, color=name / #hex code for RGB

Physical Style: Physical Style: 


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.

Physical Style: Physical Style: 


Fragile Fragile

i tag changes the appearance of the enclosed text to italic.

Physical Style: Physical Style: 


Your latest trick Your latest trick

Physical Style: Physical Style: 

Add to your html code:Add to your html code:

H2O H2O

SUB tag changes the appearance of the enclosed text to subscript.

Physical Style: Physical Style: 


10oC 10oC

SUP tag changes the appearance of the enclosed text to superscript.

Physical Style: <tt> Physical Style: <tt>

Add to the end of your html code:Add to the end of your html code:

<tt>OTHER GROUPS</tt><tt>OTHER GROUPS</tt>

TT tag is the type writer font.

Logical Styles: Logical Styles:

... = Emphasis... = Emphasis... = Stronger emphasis... = Stronger emphasis<code>...</code> = Display an HTML <code>...</code> = Display an HTML

directivedirective<samp>...</samp> = Include sample output<samp>...</samp> = Include sample output<kbd>...</kbd> = Display a keyboard key<kbd>...</kbd> = Display a keyboard key<var>...</var> = Define a variable<var>...</var> = Define a variable<dfn>...</dfn> = Display a definition (not <dfn>...</dfn> = Display a definition (not

widely supported)widely supported)<cite>...</cite> = Display a citation <cite>...</cite> = Display a citation

Text Elements: <pre>, Text Elements: <pre>, <listing> <listing>

Add to the end of your html code:Add to the end of your html code:

<pre><pre> G r o u p C D G r o u p C D Era Era Era Era Santana Santana SmoothSmooth Bueno Vista Social Club Bueno Vista Social Club Chan ChanChan Chan</pre> </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.

<blockquote><blockquote> <blockquote><blockquote>

Write this and copy over and over again. Write Write this and copy over and over again. Write this and copy over and over again. Write this this and copy over and over again. Write this and copy over and over again. Write this and and copy over and over again. Write this and copy over and over again. Write this and copy copy over and over again. Write this and copy over and over again. Write this and copy over over and over again. Write this and copy over and over again. Write this and copy over and and over again. Write this and copy over and over again. Write this and copy over and over over again. Write this and copy over and over again. Write this and copy over and over again. again. Write this and copy over and over again. Write this and copy over and over again. Write Write this and copy over and over again. Write this and copy over and over again. Write this this and copy over and over again. Write this and copy over and over again. and copy over and over again. </blockquote></blockquote>

Defines a long quotation

EntitiesEntities

httphttp://www.w3schools.com/html/html_entitiesref.://www.w3schools.com/html/html_entitiesref.aspasp

&keyword;&keyword;Display a particular character identified by a Display a particular character identified by a special keyword. special keyword. For example:For example:

the entity < specifies the less than ( < ) character. the entity < specifies the less than ( < ) character. Note that the semicolon following the keyword is requiredNote that the semicolon following the keyword is required

&#ascii_equivalent;&#ascii_equivalent;Use a character literally. Use a character literally. For example For example

the entity %specifies (%) character. the entity %specifies (%) character. Again note that the semicolon following the ASCII numeric Again note that the semicolon following the ASCII numeric

value is required. value is required.

EntityEntity

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 The most common character entity in

HTML is the non-breaking space. HTML is the non-breaking space. Normally HTML will truncate spaces Normally HTML will truncate spaces in your text. To add spaces to your in your text. To add spaces to your text, use the character entity text, use the character entity

EntityEntity


This is a text.This is a text.

This This is a text. is a text.

FontFont


 sans ms" size=10 color="green"> New Age GroupsNew Age Groups

Some ExercisesSome Exercises

Exercise 1Exercise 1

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

SolutionSolution<html><html><head><head><title>Clemantis</title><title>Clemantis</title></head></head><body <body

background=background=http://www.bilkent.edu.tr/~ussakli/images/fl1.gif > >

<h1>Welcome to my Clemantis page.</h1><h1>Welcome to my Clemantis page.</h1>I would love to give some information about I would love to give some information about

clemantis.clemantis.<h2>Where we can find information about clemantis flowers?<h2>Where we can find information about clemantis flowers?

</h2></h2>There are several web sites about clemantis, first of all you There are several web sites about clemantis, first of all you

should check <big>International Clematis Society</big>.should check <big>International Clematis Society</big>.</body></body></html></html>

Exercise 2Exercise 2

SolutionSolution<html><html><head><head><title>Definition of Information</title><title>Definition of Information</title></head></head><body bgcolor=black text=white><body bgcolor=black text=white><h1>Welcome!</h1><h1>Welcome!</h1>So what is information?So what is information?<h2>A definition</h2><h2>A definition</h2><tt>Any communication or representation of knowledge such as <tt>Any communication or representation of knowledge such as

facts, data, or opinions, in any facts, data, or opinions, in any medium or form, including textual, numerical, graphic, cartographic, medium or form, including textual, numerical, graphic, cartographic, narrative, or audio-visual forms.</tt>narrative, or audio-visual forms.</tt>

<h2>Yet another definition</h2><h2>Yet another definition</h2>We can also define information as: We can also define information as: The meaning that a human extracts from data by means of known The meaning that a human extracts from data by means of known

conventions of the representation used." (Gould, 1971).conventions of the representation used." (Gould, 1971).</body></body></html></html>

2004-2005 Academic Year, Spring Semester Bilkent University - Faculty of Art, Design and Architecture Department of Communication and Design CS 153 Introduction.

Documents

page slide

html code

favorite songs

favorite singers

music page welcome

music page center tag

latest trick slide

physical style