Academic Year, Spring Semester Bilkent University - Faculty of Art, Design and Architecture Department of Communication and Design CS 153 Introduction to Computing I Lesson 3
Answers to Homework 1 1. Name 2 Peer to Peer networks. 1. Edonkey 2. Icq 5. Send a to me with the topic “Homework Question 5” and your name and number at the body, of which I cannot see who you send the mail to. (so my outlook will say Undisclosed recipients at to: field of the mail I receive.) 1. You should use Bcc: field when sending the and leave To: and CC: fields empty. 6. Search and find five FTP Client Programs and a FTP Server program using your favorite web search engine. (Do not just take the list from your friends.) 1. BulletProof FTP Client, FTP Voyager 11.2, AutoFTP Professional 4.4, FTP Navigator 7.4, BitKinex 2.4, Robo-FTP, AceFTP, AbleFTP, CuteFTP, CyDFTP Serv-U 7. Define the cycle of processing and state which computer hardware is used in the cycle of processing. Which stages do we store data, if we don’t store the data what happens? 1. Input processing output. We store data in every stage and every intermediate stage. Because if we don’t store the data, it’s lost. For input: HDD, FDD, System memory; for processing: Registers and Cache at processor; for output: system memory, memory of our video card, HDD, FDD Give two reasons why today we start to have 64 bit processors(i.e. Athlon 64, Itanium). Wasn’t 32 bit processor (i.e. Pentium 4, Athlon XP) enough for todays computing needs? 1. Most important reason is as 2^32 = 4 billion, memory of a computer is limited to 4GBs, and this is limiting to have more memory. Another reason, with 64 bits we can move data faster, 64 bits a time instead of What is a DVD and name and list the capacities of a DVD. 1. Digital Versatile Disk, Digital Video Disk. Single layer single side: ~ 4.7 GB, double layer single side ~ 8.5GB, double layer dual side: ~ 17 GB<
HTML Hyper Text Markup Language Hyper Text Markup Language A text containing small markup tags A text containing small markup tags The markup tags tell the Web browser how to display the page. The markup tags tell the Web browser how to display the page.
HTML as a Markup Language HTML has a set of rules: HTML has a set of rules: It’s tag based. It’s tag based. A tag is opened by a “ ”, the content which tag marks, and then closing of a tag comes with “ ”. content to be tagged content to be tagged A tag can be empty:
HTML as a Markup Language Tags can contain tags: Tags can contain tags: content to be tagged content to be tagged If there is a tag inside another, the lower tag should be closed before higher: If there is a tag inside another, the lower tag should be closed before higher: content to content to be tagged be tagged </tag1> content to content to be tagged be tagged </tag2>
HTML as a Markup Language A Tag may contain parameters, the order is not important: A Tag may contain parameters, the order is not important: content to be tagged content to be tagged
HTML as a Markup Language Number of spaces if more than 1 inside tags and in tags are not important. Number of spaces if more than 1 inside tags and in tags are not important. content content to be tagged to be tagged Same as Same as content to be tagged content to be tagged There is a space here!
HTML is a Markup Language You should write your HTML code layed out neatly! You should write your HTML code layed out neatly! <tag1><tag2><tag3></tag3></tag2><tag4></tag4></tag1> <tag1><tag2><tag3></tag3></tag2><tag4></tag4></tag1>
General Structure of HTML Every HTML document starts with html tag. Every HTML document starts with html tag. An html tag should contain head and body tags. An html tag should contain head and body tags.<html><head>...</head><body>...</body></html>
General Structure of HTML Head tag only contains tags that define the page itself. Head tag is the header of the html page. Head tag only contains tags that define the page itself. Head tag is the header of the html page. TITLE defines the document title, and is always needed. TITLE defines the document title, and is always needed. This is the title of the document. This is the title of the document. SCRIPT reserved for future use with scripting languages. SCRIPT reserved for future use with scripting languages. If Javascript is used in the document it may go here. If Javascript is used in the document it may go here. STYLE reserved for future use with style sheets. STYLE reserved for future use with style sheets. If you define styles for your document (see CSS). If you define styles for your document (see CSS). META used to supply meta info as name/value pairs. META used to supply meta info as name/value pairs. LINK used to define relationships with other documents. LINK used to define relationships with other documents. BASE used for base URL address of this document. BASE used for base URL address of this document. Also... {ISINDEX} Also... {ISINDEX}
META Tag These tags mainly used for search engines. These tags mainly used for search engines. Robots: You only need it if you DO NOT want your pages indexed. Robots: You only need it if you DO NOT want your pages indexed. Description: Description of your web page. Description: Description of your web page. Keywords: Possible keywords for the content of your web page. Keywords: Possible keywords for the content of your web page.
Body Tag Body Tag contains what you will display to the user. May get content from head tag. Body Tag contains what you will display to the user. May get content from head tag. Parameters of body tag are: Parameters of body tag are: bgcolor: Specifies the background color for the document body. bgcolor: Specifies the background color for the document body. text: Specifies the color used to stroke the document's text. text: Specifies the color used to stroke the document's text. link: Specifies the color used to stroke the text for unvisited hypertext links. link: Specifies the color used to stroke the text for unvisited hypertext links. vlink: Specifies the color used to stroke the text for visited hypertext links. vlink: Specifies the color used to stroke the text for visited hypertext links. alink: Specifies the highlight color used to stroke the text for hypertext links at the moment the user clicks on the link. alink: Specifies the highlight color used to stroke the text for hypertext links at the moment the user clicks on the link. background: Specifies a URL for an image that will be used to tile the document background. background: Specifies a URL for an image that will be used to tile the document background.
Some Named Colors
sRGB Red Green Blue: values in hexadecimal order. (0) 16 = 0, (1) 16 = 1 (2) 16 = 2... (9) 16 = 9, (A) 16 = 10, (B) 16 = 11, (C) 16 = 12, (D) 16 = 13, (E) 16 = 14, (F) 16 = 15; (10) 16 = 16, (11) 16 = (FF) 16 = 255 Red Green Blue: values in hexadecimal order. (0) 16 = 0, (1) 16 = 1 (2) 16 = 2... (9) 16 = 9, (A) 16 = 10, (B) 16 = 11, (C) 16 = 12, (D) 16 = 13, (E) 16 = 14, (F) 16 = 15; (10) 16 = 16, (11) 16 = (FF) 16 = 255 FF0000 = pure Red. (this means there are 255 levels from black to pure Red) FF0000 = pure Red. (this means there are 255 levels from black to pure Red) 00FF00 = pure Green 00FF00 = pure Green 0000FF = pure Blue. 0000FF = pure Blue = black = black FFFFFF = white FFFFFF = white How many colors do we have in sRGB? How many colors do we have in sRGB?
Comments Comments should be used to describe sections, notes, ideas on the page... Comments should be used to describe sections, notes, ideas on the page... Will be discarded by the browser. Will be discarded by the browser.
Some Examples to Start! My First Page This is my first page. My First Page This is my first page.
Headings Optional Parameter “align” with values left | center | right Optional Parameter “align” with values left | center | right My First Page This is my first page. This line is h1 This line is h2 This line is h3 This line is h4 This line is h5 This line is h6 My First Page This is my first page. This line is h1 This line is h2 This line is h3 This line is h4 This line is h5 This line is h6
Address For giving an Address. For giving an Address.<address> Computer Engineer Computer Engineer Sinan Uşşaklı Sinan Uşşaklı Engineering Department room 528, Bilkent, Ankara Engineering Department room 528, Bilkent, Ankara Tel: </address>
Line Break Used to force a line break. This is an empty element so the end tag is forbidden. Used to force a line break. This is an empty element so the end tag is forbidden.<br>Or
Block vs Text Tags We will divide the HTML tags into two groups. We will divide the HTML tags into two groups. Block tags Block tags Text tags Text tags Block level tags which cause paragraph breaks, and text level tags which don't.
Some Text Tags (more will come) Font Style tags: Font Style tags: tt teletype or monospaced text tt teletype or monospaced text i italic text style i italic text style b bold text style b bold text style u underlined text style u underlined text style s strike-through text style s strike-through text style big places text in a large font big places text in a large font small places text in a small font small places text in a small font sub places text in subscript style sub places text in subscript style sup places text in superscript style sup places text in superscript style
More Examples My First Page Welcome to My Page This is my first page. My First Page Welcome to My Page This is my first page.
More Examples My First Page Welcome to My Page This is my first page. The major aim of the Department of Communication and Design is to educate media professionals who are both knowledgeable about global culture and art, and competent in recent developments in modern technology of communications, especially visual technologies. My First Page Welcome to My Page This is my first page. The major aim of the Department of Communication and Design is to educate media professionals who are both knowledgeable about global culture and art, and competent in recent developments in modern technology of communications, especially visual technologies.
Paragraph, Line Break Paragraph, Line Break My First Page Welcome to My Page This is my first page. My First Page Welcome to My Page This is my first page. The major aim of the Department of Communication and Design is to educate media professionals who are both knowledgeable about global culture and art, and competent in recent developments in modern technology of communications, especially visual technologies. The major aim of the Department of Communication and Design is to educate media professionals who are both knowledgeable about global culture and art, and competent in recent developments in modern technology of communications, especially visual technologies.
Paragraph Paragraph Used markup paragraphs. Used markup paragraphs. Optional parameter “align” with values right | center | left | justified Optional parameter “align” with values right | center | left | justified
More Examples My First Page Welcome to My Page This is my first page. The major aim of the Department of Communication and Design is to educate media professionals who are both knowledgeable about global culture and art, and competent in recent developments in modern technology of communications, especially visual technologies. My First Page Welcome to My Page This is my first page. The major aim of the Department of Communication and Design is to educate media professionals who are both knowledgeable about global culture and art, and competent in recent developments in modern technology of communications, especially visual technologies.
More Examples (bgcolor) My First Page Welcome to My Page This is my first page. The major aim of the Department of Communication and Design is to educate media professionals who are both knowledgeable about global culture and art, and competent in recent developments in modern technology of communications, especially visual technologies. My First Page Welcome to My Page This is my first page. The major aim of the Department of Communication and Design is to educate media professionals who are both knowledgeable about global culture and art, and competent in recent developments in modern technology of communications, especially visual technologies.