Review of Last Lesson
Post on 13-Jan-2016
39 Views
Preview:
DESCRIPTION
Transcript
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.
<p> and <br> tags<p> and <br> tags
Use <p> and <br> tags to have Use <p> and <br> 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 <p> tag Also use align parameter of <p> 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.<font [face, color, size]> </font><font [face, color, size]> </font>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: <font <li>Black: <font color=#000000>#000000</font> </li>color=#000000>#000000</font> </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><font color="#FFFF66">Light <li><font color="#FFFF66">Light Yellow</font></li>Yellow</font></li>
<li><font color="#FFFFCC">Lighter <li><font color="#FFFFCC">Lighter Yellow</font></li>Yellow</font></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: <font <li>Black: <font color=#000000>#000000</font> </li>color=#000000>#000000</font> </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><font color="#FFFF66">Light Yellow</font></li><li><font color="#FFFF66">Light Yellow</font></li>
<li><font color="#FFFFCC">Lighter Yellow</font></li><li><font color="#FFFFCC">Lighter Yellow</font></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><font color="#FFFF66">Light <li><font color="#FFFF66">Light Yellow</font></li>Yellow</font></li>
<li><font color="#FFFFCC">Lighter <li><font color="#FFFFCC">Lighter Yellow</font></li>Yellow</font></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><p><a <p><a
href=#int>Introduction</a><br>href=#int>Introduction</a><br> <a href=#ch1>Chapter 1</a><br><a href=#ch1>Chapter 1</a><br> <a href=#ch2>Chapter 2</a><br><a href=#ch2>Chapter 2</a><br> </p></p><p><A name=int>Introduction:</A> <p><A name=int>Introduction:</A>
This is introduction part This is introduction part content.<br>content.<br>
</p></p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p><a name=ch1>Chapter 1:</a> This <p><a name=ch1>Chapter 1:</a> This
is Chapter 1 content<br>is Chapter 1 content<br></p></p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p><a name=ch2>Chapter 2:</a> <p><a name=ch2>Chapter 2:</a>
This is Chapter 2 content<br>This is Chapter 2 content<br></p></p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
Internal HyperlinkInternal Hyperlink<h2><h2><a <a
name=con>name=con>Content:Content:</a></a></h2></h2><p><a href=#int>Introduction</a><br><p><a href=#int>Introduction</a><br> <a href=#ch1>Chapter 1</a><br><a href=#ch1>Chapter 1</a><br> <a href=#ch2>Chapter 2</a><br><a href=#ch2>Chapter 2</a><br> </p></p><p><A name=int>Introduction:</A> This <p><A name=int>Introduction:</A> This
is introduction part content.<br>is introduction part content.<br></p></p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p><a href=#con>back</a><p><a href=#con>back</a><p><a name=ch1>Chapter 1:</a> This is <p><a name=ch1>Chapter 1:</a> This is
Chapter 1 content<br>Chapter 1 content<br></p></p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p><a href=#con>back</a><p><a href=#con>back</a><p><a name=ch2>Chapter 2:</a> <p><a name=ch2>Chapter 2:</a>
This is Chapter 2 content<br>This is Chapter 2 content<br></p></p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p><a href=#con>back</a><p><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:ussakli@bilkent.edhref="mailto:ussakli@bilkent.edu.tr"> 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
top related