2004-2005 Academic Year, Spring Semester Bilkent University - Faculty of Art, Design and Architecture Department of Communication and Design CS 153 Introduction.

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. Open notepad. Create a table Create a table 6 rows 1 columns 6 rows 1 columns Width is 120 pixels Width is 120 pixels 1st and 4th rows have lightblue background. 1st and 4th rows have lightblue background. Content will be in the picture... Content will be in the picture... Save the html page as menu.html Save the html page as menu.html

Create a new html page. Create a new html page. Using header, paragraph, and font tags write briefly about yourself. Using header, paragraph, and font tags write briefly about yourself. Save the html file as aboutme.html to the same directory as menu.html 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 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. Re-open menu.html for editing. Using anchor tag (... ) tag “My Favourite Picture” text to link picture.jpg Using anchor tag (... ) 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 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 http://www.bilkent.edu.tr http://www.metu.edu.tr http://www.bilkent.edu.tr http://www.metu.edu.tr Why we use http:// for full web addresses? Why we use http:// for full web addresses? Save it and view it. Do you get the pages when you click them? Save it and view it. Do you get the pages when you click them?

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

Frames Frame creates independent sections in a single page. Each section can be used as seperate page. Framed pages codes doesn’t have..., instead they start with... tag. Frame creates independent sections in a single page. Each section can be used as seperate page. Framed pages codes doesn’t have..., instead they start with... tag.... creates frames inside the page.... creates frames inside the page. f# can be a number, or a number%, or *. 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 pixels If number% is used: width or height in percentage If number% is used: width or height in percentage If * is used: the frame is created with the remaining space (adjusted) If * is used: the frame is created with the remaining space (adjusted)

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

Frames Open notepad. Open notepad.<html><head> My First Framed Page My First Framed Page </head> </frameset></html> Save as index.html Save as index.html

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

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 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 Open menu.html Add target parameter pointing to mainFrame to the 4 anchor tags (picture, aboutme, bilkent, metu): 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. Save it and re-open index.html to test.

Frames Open a new Notepad Open a new Notepad Save it as sixframes and view it. The tags should be the same number as cols x rows ( 2 x 3 = 6 ). Save it as sixframes and view it. The 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. Create six html files with the filenames frame1.html frame2.html..., with backgroud colors red, green, yellow, pink, purple, and brown. Complete tags of the sixframes.html file. Complete tags of the sixframes.html file. Experiment with *, number%, and number values and parameters for these six frames. Experiment with *, number%, and number values and parameters for these six frames. Can you make center row always centered? Can you make center row always centered? Hide/show borders, make frames not resizeable... Hide/show borders, make frames not resizeable... Change the number of frames, add other frame files if necessary. Change the number of frames, add other frame files if necessary.

Publishing your web Bilkent provides web spaces for publishing your web site. 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. 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. You can login to your UNIX account by your bilkent e-mail username and password. Start  Run  telnet leylak.ug.bcc.bilkent.edu.tr Start  Run  telnet leylak.ug.bcc.bilkent.edu.tr username: ussakli password: sosecret mkdir public_htmlmakes a directory chmod 755 public_html changes access rights cd public_htmlchanges directory cd..changes directory to upper lslists files exitquits

FTP You created the folder for your web. You created the folder for your web. To transfer files to your web site, you need an FTP (remeber: file transfer protocol) program. 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. 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. 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 Open your web browser (ie. Internet Explorer) and go to: http://www.ug.bcc.bilkent.edu.tr/~yourusername http://www.ug.bcc.bilkent.edu.tr/~yourusername http://www.ug.bcc.bilkent.edu.tr/~yourusername If everything is correct, you and anyone in the world will see the pages you created. 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. 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. 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. 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. 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: The web site will contain 4 html pages: index.html: index.html: a frames page with 2 rows a frames page with 2 rows 200 pixels 200 pixels Remaining part (*) (name: mainFrame) Remaining part (*) (name: mainFrame) Title: Two Cars I Like Title: Two Cars I Like top.html: the top frame (200 pixels long) top.html: the top frame (200 pixels long) This page should have This page should have a table a table Center aligned to the page Center aligned to the page Top row: centered, bold Top row: centered, bold 2 text links to 2 text links to car1.html and car2.html car1.html and car2.html with the target: mainFrame with the target: mainFrame Each cell is aligned to center. Each cell is aligned to center.

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

Expected Results

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

2004-2005 Academic Year, Spring Semester Bilkent University - Faculty of Art, Design and Architecture Department of Communication and Design CS 153 Introduction.

Similar presentations

Presentation on theme: "2004-2005 Academic Year, Spring Semester Bilkent University - Faculty of Art, Design and Architecture Department of Communication and Design CS 153 Introduction."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

2004-2005 Academic Year, Spring Semester Bilkent University - Faculty of Art, Design and Architecture Department of Communication and Design CS 153 Introduction.

Similar presentations

Presentation on theme: "2004-2005 Academic Year, Spring Semester Bilkent University - Faculty of Art, Design and Architecture Department of Communication and Design CS 153 Introduction."— Presentation transcript:

Similar presentations

About project

Feedback