Review of Last Lesson

2004-2005 Academic Year, Spring SemesterBilkent University - Faculty of Art, Design and ArchitectureDepartment of Communication and DesignCS 153 Introduction to Computing ILesson 5

Review of Last Lesson <html> <head> <title>Colors</title> </head> <body>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 Red: #FF0000 Green: #00FF00 Blue: #0000FF Yellow:#FFFF00 Aqua(Cyan): #00FFFF Fuchsia(Magenta): #FF00FF Gray: #C0C0C0 White: #FFFFFF </body> </html>

Background Image Change the part of your html code to: <body background=“http://www.bilkent.edu.tr/~ussakli/images/strps.jpg”> Header tags produce different sized headings.

 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.

Seperating the text with <hr> (horizontal rule) Insert <hr> or <hr /> 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

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

Acronym tag We have a acronym sRGB, create a defintion for it. <acronym title=“Standard RGB">sRGB</acronym>

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

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

Scrolling Text (Marquee) • If you use alot: annoying. • <marquee> HTML Colors</marquee> • <marquee width=200> HTML Colors</marquee> • <marquee width=200 bgcolor="lightgreen"> HTML Colors</marquee> • <marquee width=200 bgcolor="lightgreen" direction="right"> HTML Colors</marquee> • <marquee width=100 bgcolor="lightgreen" loop=1 direction=right scrolldelay=10> HTML Colors</marquee> • <marquee width=100 bgcolor="lightgreen" loop=1 direction=right scrolldelay=10 scrollamount=10> HTML Colors</marquee> Change the values to see the effect.

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)

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

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

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

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

Bullet Type <ul type=square> • Disk bullets: disk • Circle bullets: circle • Square bullets: square

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

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

Ordered List Types <ol type=i> • 1 • A • a • I • i

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

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

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

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

Image • You can add Images to your HTML pages. • 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. • JPG supports 16 million colors. Photographical images are best viewed in JPG file type.

Image <img> • 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 <img src="bilkentlogo.gif">

Image Parameters • src • This attribute is required for every IMG element. It specifies a URL for the image resource • 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. • align • 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=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=left floats the image to the current left margin • align=right floats the image to the current right margin • width • height • border • 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

Some Examples of Image • <IMG SRC="bilkentlogo.gif" ALT="Bilkent Logo" BORDER=1> • <IMG SRC="bilkentlogo.gif" ALT="Bilkent Logo" ALIGN=“left”> • <IMG SRC="bilkentlogo.gif" ALT="Bilkent Logo" ALIGN=“left” width=50 height=50 hspace=20 vspace=20>

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

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

Anchor Internal Hyperlink <a name=ch2>Chapter 2:</a> This is Chapter 2 content <h2>Content:</h2> <a href=#int>Introduction</a> <a href=#ch1>Chapter 1</a> <a href=#ch2>Chapter 2</a> <A name=int>Introduction:</A> This is introduction part content. <a name=ch1>Chapter 1:</a> This is Chapter 1 content

Internal Hyperlink <a href=#con>back</a> <a name=ch2>Chapter 2:</a> This is Chapter 2 content <a href=#con>back</a> <h2><a name=con>Content:</a></h2> <a href=#int>Introduction</a> <a href=#ch1>Chapter 1</a> <a href=#ch2>Chapter 2</a> <A name=int>Introduction:</A> This is introduction part content. <a href=#con>back</a> <a name=ch1>Chapter 1:</a> This is Chapter 1 content

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

Opening default Email editor • <a href="mailto:ussakli@bilkent.edu.tr"> click here to send a mail to me</a> • Well what if a user doesn’t have an email program like Outlook Express or Eudora? • This will not work.

An Image Link! <a href=http://www.bilkent.edu.tr> <img src=http://www.bilkent.edu.tr/~ussakli/images/billogo.gif> </a>

EOL

Review of Last Lesson

Review of Last Lesson

Presentation Transcript

Review of Last Lecture

Last lesson….

Summary of last lesson

Review of last week

Review of Last Week

Last lesson

Last lesson ..

Last Lesson:

Review of last lecture

Review of Last Week

Review of last session

Review of last class

Last lesson

Last lesson

Review from last lesson

Let’s review last Lesson!

Review of last session

REVIEW OF LAST LESSON:

Review of Last Class

Review of Last Week

Review of Last Lecture

Review of Last Lesson