Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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 1st and 4th rows have lightblue background. Content will be in the picture... Save the html page as menu.html 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 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? Organization of HTML pages. The Internet Menu.html http://www.metu.edu.tr http://www.bilkent.edu.tr Aboutme.html Picture.gif 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) 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. 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 index.html The Internet Menu.html http://www.metu.edu.tr http://www.bilkent.edu.tr Aboutme.html Picture.gif 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. 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 ). 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. 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. Telnet You can login to your UNIX account by your bilkent e-mail username and password. StartRuntelnet 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 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. 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. 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. 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. Expected Results Expected Results Expected Results This will be visible when we click on the small picture of the car. EOL