review of last lesson

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 5Lesson 5

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

<head> <head> <title>Colors</title> <title>Colors</title> </head> </head> <body> <body>HTML ColorsHTML ColorsHTML allows a wide range of colors.HTML allows a wide range of colors.These colors can be represented in a hexadecimal form (called sRGB) or in a named These colors can be represented in a hexadecimal form (called sRGB) or in a named form.form.Some basic color codes are:Some basic color codes are:Black: #000000 Black: #000000 Red: #FF0000Red: #FF0000Green: #00FF00Green: #00FF00Blue: #0000FFBlue: #0000FFYellow:#FFFF00Yellow:#FFFF00Aqua(Cyan): #00FFFFAqua(Cyan): #00FFFFFuchsia(Magenta): #FF00FFFuchsia(Magenta): #FF00FFGray: #C0C0C0Gray: #C0C0C0White: #FFFFFFWhite: #FFFFFF</body></body>

</html></html>

Background ImageBackground Image

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

<body <body background=“http://www.bilkent.edbackground=“http://www.bilkent.edu.tr/~ussakli/images/strps.jpg”>u.tr/~ussakli/images/strps.jpg”>

Header tags produce different sized headings.

and tags and tags

Use and tags to have Use and tags to have paragraphs and line breaks so that paragraphs and line breaks so that your list looks tidy.your list looks tidy.

Also use align parameter of tag Also use align parameter of tag to allign some parts if you feel to allign some parts if you feel necessary.necessary.

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

Insert <hr> or <hr /> tag to create a Insert <hr> or <hr /> tag to create a horizontal rule.horizontal rule.

Try to add one or more of these Try to add one or more of these parameters:parameters:

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

Adding a entityAdding a entity

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

Acronym tagAcronym tag

We have a acronym sRGB, create a We have a acronym sRGB, create a defintion for it.defintion for it.

<acronym title=“Standard <acronym title=“Standard RGB">sRGB</acronym>RGB">sRGB</acronym>

FontFont

Change the font of your HTML output.Change the font of your HTML output. Some Font Faces:Some Font Faces:

ArialArial Comic Sans MSComic Sans MS GeorgiaGeorgia Times New RomanTimes New Roman TahomaTahoma VerdanaVerdana

Font Sizes:Font Sizes:font size 1font size 1 font size 2font size 2 font size 3 font size 3 font size 4font size 4

font size 5font size 5 font size 6font size 6

font size 7font size 7

FontFont

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

Scrolling Text (Marquee)Scrolling Text (Marquee)

If you use alot: annoying.If you use alot: annoying. <marquee><marquee> HTML Colors HTML Colors</marquee></marquee> <marquee <marquee width=200width=200> HTML Colors</marquee>> HTML Colors</marquee> <marquee width=200 <marquee width=200 bgcolor="lightgreen"bgcolor="lightgreen"> HTML > HTML

Colors</marquee>Colors</marquee> <marquee width=200 bgcolor="lightgreen" <marquee width=200 bgcolor="lightgreen"

direction="right"direction="right"> HTML Colors</marquee>> HTML Colors</marquee> <marquee width=100 bgcolor="lightgreen" loop=1 <marquee width=100 bgcolor="lightgreen" loop=1

direction=right direction=right scrolldelay=10scrolldelay=10> HTML Colors</marquee>> HTML Colors</marquee> <marquee width=100 bgcolor="lightgreen" loop=1 <marquee width=100 bgcolor="lightgreen" loop=1

direction=right scrolldelay=10 direction=right scrolldelay=10 scrollamount=10scrollamount=10> HTML > HTML Colors</marquee> Colors</marquee>

Change the values to see the effect.Change the values to see the effect.

Marquee ParametersMarquee Parameters

widthwidth=100/50%=100/50%

bgcolorbgcolor=name/#HEX=name/#HEX

looploop=number/infinite=number/infinite

directiondirection=left/right=left/right

scrolldelayscrolldelay=number (number of pixels =number (number of pixels to move the text with each successive to move the text with each successive redraw)redraw)

scrollamountscrollamount=10 (number of =10 (number of milliseconds between redraws) milliseconds between redraws)

ListsLists

There are 3 kinds of listsThere are 3 kinds of lists Bulleted (Unordered)Bulleted (Unordered) NumberedNumbered DefinitionDefinition

Bulleted Lists Bulleted Lists ((UUnordered nordered LLists)ists)

<ul>...</ul> Tag defines bulleted lists.<ul>...</ul> Tag defines bulleted lists. Using type attribute you can select fromUsing type attribute you can select from

Disk bulletsDisk bullets Circle bulletsCircle bullets Square bulletsSquare bullets

<ul> tag: initiates an unordered list.<ul> tag: initiates an unordered list.<lh> tag: is creating list header. <lh> tag: is creating list header.

(opt)</lh> (opt)</lh> <li> tag: each item. </li><li> tag: each item. </li>

</ul></ul>

Bulleted ListsBulleted Lists

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

</ul></ul>

More Levels!More Levels!

<li>Yellow:#FFFF00 <li>Yellow:#FFFF00

<ul><ul>

<li>Light <li>Light Yellow</li>Yellow</li>

<li>Lighter <li>Lighter Yellow</li>Yellow</li>

</ul></ul>

</li></li>

Bullet TypeBullet Type

<ul type=square> <ul type=square> Disk bullets: diskDisk bullets: disk Circle bullets: circleCircle bullets: circle Square bullets: squareSquare bullets: square

Numbered Lists (Numbered Lists (OOrdered rdered LLists)ists)

<ol>...</ol> Tag defines numbered lists.<ol>...</ol> Tag defines numbered lists. Using type attribute you can select fromUsing type attribute you can select from

11 AA aa II i i

<ol> tag: initiates an unordered list.<ol> tag: initiates an unordered list.<lh> tag: is creating list header. <lh> tag: is creating list header.

(opt)</lh> (opt)</lh> <li> tag: each item. </li><li> tag: each item. </li>

</ol></ol>

<ol><ol><lh>Some basic color codes are</lh><lh>Some basic color codes are</lh><li>Black: Black: #000000 </li>color=#000000>#000000 </li><li>Red: #FF0000 </li><li>Red: #FF0000 </li><li>Green: #00FF00 </li><li>Green: #00FF00 </li><li>Blue: #0000FF </li><li>Blue: #0000FF </li><li>Yellow:#FFFF00 <li>Yellow:#FFFF00 <ol><ol> <li>Light Yellow</li><li>Light Yellow</li>

<li>Lighter Yellow</li><li>Lighter Yellow</li> </ol></ol></li></li>

<li>Aqua(Cyan): #00FFFF </li><li>Aqua(Cyan): #00FFFF </li><li>Fuchsia(Magenta): #FF00FF </li><li>Fuchsia(Magenta): #FF00FF </li><li>Gray: #C0C0C0</li><li>Gray: #C0C0C0</li><li>White: #FFFFFF</li><li>White: #FFFFFF</li>

</ol></ol>

Ordered List TypesOrdered List Types

<ol type=i> <ol type=i> 11 AA aa II i i

Definition ListsDefinition Lists

<dl>...</dl> creates a definition list <dl>...</dl> creates a definition list <dt> definition term <dt> definition term <dd> definition data tags<dd> definition data tags

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

Definition ListsDefinition Lists

<html><html> <head><title>definition list example</title></head> <head><title>definition list example</title></head> <body> <body> Following is an example for "Definition List" Following is an example for "Definition List" <dl> <dl> <dt>URL</dt> <dt>URL</dt> <dd>URL means Uniform Resource Locator.</dd> <dd>URL means Uniform Resource Locator.</dd> <dt>HTTP</dt> <dt>HTTP</dt> <dd>HTTP means HyperText Transfer Protocol.</dd> <dd>HTTP means HyperText Transfer Protocol.</dd> <dt>FTP</dt> <dt>FTP</dt> <dd>FTP means File Transfer Protocol.</dd> <dd>FTP means File Transfer Protocol.</dd> <dt>SMTP</dt> <dt>SMTP</dt> <dd>SMTP means Send Mail Transfer Protocol.</dd> <dd>SMTP means Send Mail Transfer Protocol.</dd> </dl> </dl></body></body></html></html>

You can add a list inside You can add a list inside anotheranother

<li>Yellow:#FFFF00 <li>Yellow:#FFFF00

<ol><ol>

<li>Light <li>Light Yellow</li>Yellow</li>

<li>Lighter <li>Lighter Yellow</li>Yellow</li>

</ol></ol>

</li></li>

Change the <ol> tag to <ul>Change the <ol> tag to <ul>

ImageImage

You can add Images to your HTML You can add Images to your HTML pages.pages.

There are 2 standard graphic file There are 2 standard graphic file formats that most browsers supports: formats that most browsers supports: GIF and JPG. GIF and JPG. GIF supports 256 colors. Graphical images GIF supports 256 colors. Graphical images

are best viewed in GIF file type. are best viewed in GIF file type. JPG supports 16 million colors. JPG supports 16 million colors.

Photographical images are best viewed in Photographical images are best viewed in JPG file type.JPG file type.

Image <img>Image <img>

Download and place it to the same Download and place it to the same directory of your html document.directory of your html document.

http://www.bilkent.edu.tr/~ussakli/images/http://www.bilkent.edu.tr/~ussakli/images/billogo.gifbillogo.gif

Add this line to the top of your html Add this line to the top of your html pagepage

<img src="bilkentlogo.gif"><img src="bilkentlogo.gif">

Image ParametersImage Parameters srcsrc

This attribute is required for every IMG element. It specifies a URL for the This attribute is required for every IMG element. It specifies a URL for the image resourceimage resource

altalt This is used to provide a text description of the image and is vital for This is used to provide a text description of the image and is vital for

interoperability with speech-based and text only user agents. interoperability with speech-based and text only user agents. alignalign

This specifies how the image is positioned relative to the current textline in This specifies how the image is positioned relative to the current textline in which it occurs: which it occurs:

align=topalign=top positions the top of the image with the top of the current text line. positions the top of the image with the top of the current text line. align=middlealign=middle aligns the middle of the image with the baseline for the current aligns the middle of the image with the baseline for the current

textline. textline. align=bottomalign=bottom is the default and aligns the bottom of the image with the baseline. is the default and aligns the bottom of the image with the baseline. align=leftalign=left floats the image to the current left margin floats the image to the current left margin align=right align=right floats the image to the current right marginfloats the image to the current right margin

widthwidth heightheight borderborder hspacehspace This can be used to provide white space to the immediate left and This can be used to provide white space to the immediate left and

right of the image. right of the image. vspacevspace This can be used to provide white space above and below the This can be used to provide white space above and below the

imageimage

Some Examples of ImageSome Examples of Image

<IMG SRC="bilkentlogo.gif" <IMG SRC="bilkentlogo.gif" ALT="Bilkent Logo" BORDER=1> ALT="Bilkent Logo" BORDER=1>

<IMG SRC="bilkentlogo.gif" <IMG SRC="bilkentlogo.gif" ALT="Bilkent Logo" ALIGN=“left”> ALT="Bilkent Logo" ALIGN=“left”>

<IMG SRC="bilkentlogo.gif" <IMG SRC="bilkentlogo.gif" ALT="Bilkent Logo" ALIGN=“left” ALT="Bilkent Logo" ALIGN=“left” width=50 height=50 hspace=20 width=50 height=50 hspace=20 vspace=20>vspace=20>

Anchor <a>Anchor <a>

We said, HTML allows We said, HTML allows hyperlinkshyperlinks, , the anchor tag is what allows the anchor tag is what allows hyperlinking.hyperlinking.

Two versions:Two versions: Internal hyperlinkInternal hyperlink External hyperlinkExternal hyperlink

Anchor <a> ParametersAnchor <a> Parameters Anchor parameters areAnchor parameters are

name name Name parameters allows a named anchor for internal Name parameters allows a named anchor for internal

hyperlinkshyperlinks hrefhref

If href is used on an anchor the anchored text is now If href is used on an anchor the anchored text is now clickable and goes to the destination specified on href.clickable and goes to the destination specified on href.

titletitle The title of anchor, mostly displayed on status bar The title of anchor, mostly displayed on status bar

when the mouse is over the hyperlink.when the mouse is over the hyperlink. TargetTarget

Where the link is opened?Where the link is opened? _blank: new window_blank: new window

Anchor Internal Anchor Internal HyperlinkHyperlink

<h2>Content:</h2><h2>Content:</h2><a <a

href=#int>Introduction</a> href=#int>Introduction</a> <a href=#ch1>Chapter 1</a> <a href=#ch1>Chapter 1</a> <a href=#ch2>Chapter 2</a> <a href=#ch2>Chapter 2</a> <A name=int>Introduction:</A> <A name=int>Introduction:</A>

This is introduction part This is introduction part content. content. 

 <a name=ch1>Chapter 1:</a> This <a name=ch1>Chapter 1:</a> This

is Chapter 1 content is Chapter 1 content 

 <a name=ch2>Chapter 2:</a> <a name=ch2>Chapter 2:</a>

This is Chapter 2 content This is Chapter 2 content

Internal HyperlinkInternal Hyperlink<h2><h2><a <a

name=con>name=con>Content:Content:</a></a></h2></h2><a href=#int>Introduction</a> <a href=#int>Introduction</a> <a href=#ch1>Chapter 1</a> <a href=#ch1>Chapter 1</a> <a href=#ch2>Chapter 2</a> <a href=#ch2>Chapter 2</a> <A name=int>Introduction:</A> This <A name=int>Introduction:</A> This

is introduction part content. is introduction part content. <a href=#con>back</a><a href=#con>back</a><a name=ch1>Chapter 1:</a> This is <a name=ch1>Chapter 1:</a> This is

Chapter 1 content Chapter 1 content 

 <a href=#con>back</a><a href=#con>back</a><a name=ch2>Chapter 2:</a> <a name=ch2>Chapter 2:</a>

This is Chapter 2 content This is Chapter 2 content <a href=#con>back</a><a href=#con>back</a>

External HyperlinkExternal Hyperlink

<a <a href=http://www.google.com>Google</a>href=http://www.google.com>Google</a>

To open in different windowsTo open in different windows<a href=http://www.google.com <a href=http://www.google.com target=“_blank”>Google</a>target=“_blank”>Google</a>

To open in same window {just give a name}To open in same window {just give a name}<a href=http://www.google.com <a href=http://www.google.com target=“myWindow”>Google</a>target=“myWindow”>Google</a><a href=http://www.yahoo.com <a href=http://www.yahoo.com target=“myWindow”>Yahoo</a>target=“myWindow”>Yahoo</a>

Opening default Email Opening default Email editoreditor

<a <a href="mailto:[email protected]="mailto:[email protected]"> u.tr"> click here to send a mail to click here to send a mail to meme</a></a>

Well what if a user doesn’t have Well what if a user doesn’t have an email program like Outlook an email program like Outlook Express or Eudora?Express or Eudora? This will not work.This will not work.

An Image Link!An Image Link!

<a href=http://www.bilkent.edu.tr><a href=http://www.bilkent.edu.tr>

<img <img srcsrc==http://www.bilkent.edu.tr/~ussakli/images/billogo.gihttp://www.bilkent.edu.tr/~ussakli/images/billogo.gi

ff>>

</a></a>

EOLEOL

review of last lesson

Documents

html code

list header

lesson colors html colorshtml

html output

unordered lists

from1aaii tag

parameter of tag

aaii definition lists