Chinese Building

21
Chinese Building Chinese Building

description

Chinese Building. Today’s Topic. Review last lab Links. Skeleton of a html page. < html> . Attributes. Attributes supplement information an elements (tags) give to the browser -- tags tell browsers what to do - PowerPoint PPT Presentation

Transcript of Chinese Building

Page 1: Chinese Building

Chinese BuildingChinese BuildingChinese BuildingChinese Building

Page 2: Chinese Building

Today’s Topic

• Review last lab• Links

Page 3: Chinese Building

Skeleton of a html page

<html> <head> </head> <body> </body>

</html>

Page 4: Chinese Building

Attributes

• Attributessupplement information an

elements (tags) give to the browser -- tags tell browsers what to do -- attributes tell browsers how to do

Page 5: Chinese Building

<HR> horizon line

• <HR>’s attributes(1) size <hr size = 10>(2) width < hr width= 50> <hr width= 50%>

(3) align <hr align=left> <hr align = right>

Page 6: Chinese Building

Formatting Text(1)• Headers

six levers <h1> … <h6><H1> … </H1>..<H6> … </H6>

Page 7: Chinese Building

Font --Formatting Text(2)

• The <FONT> tag uses following attributes:– Size: can be relative (+2, -2 ,etc..) or

absolute (1-5)– Color: for now you can make this red, blue,

etc...

<FONT size='+2' color='red'>Born: November 16, 42 BC</FONT><BR>

Page 8: Chinese Building

Control Size?• Absolute size (1.. 7)

<font size= 4> … </font>

Page 9: Chinese Building

Changing the actual Font?

• In that case use the face attribute

<FONT face='arial'>Navigating the Internet

</FONT><BR>

Page 10: Chinese Building

Background Color

• The bgcolor of the <BODY> tag<BODY bgcolor='yellow'>

a summary is at plaza.ufl.edu/yuyang/lab4/bgcolor.htm

Page 11: Chinese Building

<CENTER> tag• Causes enclosed block to be

centered

<CENTER> …… </CENTER>

Page 12: Chinese Building

Links

•Relative–Links to things on your website

•Absolute–Links to things not on your website

•Others–Things like email links

Page 13: Chinese Building

Absolute Links

• These are the complete urls that you see in a browser address bar.

• Specify the absolute location of a website or a page

Ex. http://www.yahoo.com

http://www.cise.ufl.edu/class/cgs3066sp04

Page 14: Chinese Building

Relative Links

• Relative to what?– Relative to our current page, could be

just a filename•myimage.jpg

– Or a directory and filename•pictures/myimage.jpg

– Relative to our site•/myimage.jpg

Page 15: Chinese Building

Mail Link

• This works somewhat like a absolute link– mailto:[email protected]

<A HREF=mailto:[email protected]>… </A>

Page 16: Chinese Building

More about mailto link

<A href="mailto:[email protected]? [email protected]& [email protected]& subject=Summer%20Party& body=Hello%20world! ">

Send mail! </A>

Page 17: Chinese Building

How do we put it on our page

• The Anchor tag <A> – Has a attribute href which value is our link– Inside the Anchor block we put the text or

image that we want to click.<A href='http://www.yahoo.com'>Yahoo</A>

<A href=“lab1.html”>Lab 1</A>

Page 18: Chinese Building

Open a link in a new browser window

<a href=“mypage.htm" target="_blank">

My page </a>

Page 19: Chinese Building

Link to a location on the same page

• Pagemark (bookmark) #mymark Define: <A NAME=“mymark”> …</A> Usage: <A href=“#mymark”> … </A>

Page 20: Chinese Building

Link to named anchor in other pages

• In page one, page1.html, we have <A name=“anchor1”> Here are

</A>… In page two, we can write <A href=“page1.html#anchor1> …. </A>

Page 21: Chinese Building

Assignment