1 / 22

Review of Last Week

2004-2005 Academic Year, Spring Semester Bilkent University - Faculty of Art, Design and Architecture Department of Communication and Design CS 153 Introduction to Computing I Lesson 7. Review of Last Week. Open notepad. Create a table 6 rows 1 columns Width is 120 pixels

hschindler
Download Presentation

Review of Last Week

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Review of Last Week • Open notepad. • Create a table • 6 rows 1 columns • Width is 120 pixels • 1st and 4th rows have lightblue background. • Content will be in the picture... • Save the html page as menu.html

  3. Create a new html page. • Using header, paragraph, and font tags write briefly about yourself. • Save the html file as aboutme.html to the same directory as menu.html • Using images.google.com find a picture you like about anything. And save it as picture.jpg to the same directory as menu.html

  4. Anchor • Re-open menu.html for editing. • Using anchor tag ( <a href=“...”> ... </a> ) tag “My Favourite Picture” text to link picture.jpg • Also tag About me text to link aboutme.html and “Bilkent” and Metu” texts to link to http://www.bilkent.edu.tr and http://www.metu.edu.tr • Why we use http:// for full web addresses? • Save it and view it. Do you get the pages when you click them?

  5. Organization of HTML pages. http://www.metu.edu.tr Menu.html The Internet http://www.bilkent.edu.tr Aboutme.html Picture.gif

  6. Frames • Frame creates independent sections in a single page. Each section can be used as seperate page. Framed pages codes doesn’t have <body>...</body>, instead they start with <frameset> ... </frameset> tag. • <frameset rows=“f1,f2,...” cols=“f3,f4,...”>...</frameset> creates frames inside the page. • f# can be a number, or a number%, or *. • If number is used: width or height in pixels • If number% is used: width or height in percentage • If * is used: the frame is created with the remaining space (adjusted)

  7. Frames • Inside <frameset> tag, we add each frame by <frame> tag, attributes are: • src=URL • name="window name"Give a name to this frame so later you can use it with anchor tag. • scrolling=yes, no, auto • noresize Means that you cannot resize this frame by mouse • frameborder=yes, no • framespacing= a number in pixel. same as cellspacing in tables. Distance between content and border.

  8. Frames • Open notepad. <html> <head> <title>My First Framed Page</title> </head> <frameset cols=“130,*" frameborder=yes framespacing=0> <frame src=“menu.html” name=“menu" scrolling=no> <frame src=“aboutme.html” name="mainFrame"> </frameset> </html> • Save as index.html

  9. index.html http://www.metu.edu.tr Menu.html The Internet http://www.bilkent.edu.tr Aboutme.html Picture.gif

  10. Frames • Open index.html. When you click on the links at the left of your frame (menu.html) the link that you click is opened at the left frame. To correct it: • Open menu.html • Add target parameter pointing to mainFrame to the 4 anchor tags (picture, aboutme, bilkent, metu): Target=mainFrame • Save it and re-open index.html to test.

  11. Frames • Open a new Notepad <frameset cols="25%,*" rows="25%,25%,*"><frame><frame><frame><frame><frame><frame></frameset> • Save it as sixframes and view it. The <frame> tags should be the same number as cols x rows ( 2 x 3 = 6 ).

  12. Frames • Create six html files with the filenames frame1.html frame2.html..., with backgroud colors red, green, yellow, pink, purple, and brown. • Complete <frame> tags of the sixframes.html file. • Experiment with *, number%, and number values and <frame> parameters for these six frames. • Can you make center row always centered? • Hide/show borders, make frames not resizeable... • Change the number of frames, add other frame files if necessary.

  13. Publishing your web • Bilkent provides web spaces for publishing your web site. • You have your own UNIX accounts at the undergraduate student servers. These servers allows us to use UNIX programs, store files, and publish our web pages. You have about 20 MB storage space.

  14. Telnet • You can login to your UNIX account by your bilkent e-mail username and password. • StartRuntelnet leylak.ug.bcc.bilkent.edu.tr username: ussakli password: sosecret mkdir public_html makes a directory chmod 755 public_html changes access rights cd public_html changes directory cd .. changes directory to upper ls lists files exit quits

  15. FTP • You created the folder for your web. • To transfer files to your web site, you need an FTP (remeber: file transfer protocol) program. • You may login to leylak.ug.bcc.bilkent.edu.tr using any ftp program with your username and password that you used at Telnet. • Login to leylak, change directory to public_html and transfer index.html, menu.html, aboutme.html, and picture.jpg that we created at the beginning of the lesson. • Open your web browser (ie. Internet Explorer) and go to: http://www.ug.bcc.bilkent.edu.tr/~yourusername • If everything is correct, you and anyone in the world will see the pages you created.

  16. HOMEWORK %10 • Create a web site an place it to a folder called web1 inside your public_html folder (you need to create the directory inside public_html, and change access rights. • The web site will be about any 2 cars that you like. • Due date: beginning of the week 8’s lesson. 29 March, Tuesday. You will be graded in the first hour. • Do not use a professional program like frontpage or dreamweaver. You will lose half of the grade.

  17. The web site will contain 4 html pages: • index.html: • a frames page with 2 rows • 200 pixels • Remaining part (*) (name: mainFrame) • Title: Two Cars I Like • top.html: the top frame (200 pixels long) • This page should have • a table • Center aligned to the page • Top row: centered, bold • 2 text links to • car1.html and car2.html • with the target: mainFrame • Each cell is aligned to center.

  18. car1.html & car2.html • These pages are similar. Both have • a table that has • 2 columns 2 rows, • center aligned, • cellspacing=10 • Border =0 • Top row • backcolor=blue • Centered • Has the car’s name. • Colspan =2 • Bottom row • First cell • Width=100 • Valign=top • Has a 100 pixel wide image, when clicked shows larger version of the same image. • Second cell • Width=400 • Has information about car, if you take the text from somewhere give referance.

  19. Expected Results

  20. Expected Results

  21. Expected Results This will be visible when we click on the small picture of the car.

  22. EOL

More Related