CS100: Introduction to Computer Science
advertisement
Review: Internet, WWW, HTML CS100: Introduction to Computer Science n Internet q q q q Lecture 12: More about HTML n WWW q q q Review: Internet, WWW, HTML n q q q Review: Strategies for connecting to the Internet (home, school, small business) Browser Web server HTTP URL n n Internet Service Provider (ISP): Provides connectivity to the Internet Popular means of connecting: q q HTML & XML q q HTML : appearance, structure XML: semantics/meaning, nontextual materials T1, T3 lines (Large company to ISP ISP to Internet infrastructure) n n n n n Hypertext Web page Web site How to access a web page q n Domain Gateway IP Address Domain Name and Host names q q Traditional telephone (dial up connection, 56Kbps) Cable connections (30 Mbps) DSL (256Kb/s – 24Mbps) Wireless (11Mps – 54 Mbps) Review: A simple Web page The T-carrier system, introduced by the Bell System in the U.S. in the 1960s, Extremely reliable Expensive: q A T1 line might cost between $1,000 and $1,500 per month. The first successful system that supported digitized voice transmission. q T1 line: 1.544 Mbps , T2 line: 6.312 Mbps q Twisted-pair, coaxial cable, or optical fiber q T3 line, providing 44.736 Mbps, optical fiber Other transmission technologies. q http://whatis.techtarget.com/definition/0,,sid9_gci214198,00.html 1 HTML editors n Style Tags Any editors that can save a file as text file. Notepad, word (on Windows) q Pico, Vi (on Unix or Linux) n q n n Special editors q Focus on code n q n n HTML kit, insert tags and check codes. Focus on the visual result, WYSIWYG editor ("What You See Is What You Get"). n q n uses fonts, styles, paragraphs, and lists, and includes an integrated spelling checker. Dreamweaver q n n Word, Netscape composer n <B>...</B> <I>...</I> <U>...</U> <BIG>...</BIG> <SMALL>...</SMALL> <SUB>...</SUB> <SUP>...</SUP> Bold Italic Underline Big font Small font Subscript Superscript Also supports other web technologies, such as JavaScript Example of Formatting Text Apply Color to Text: an example of specify a <html> particular piece of text in the color green <html> <head> <title>Example of Applying Color to Text</title> </head> <body> <p><font COLOR="#00FF00">This text is Green</font></p> </body> </html> <head> <title> Example of formatting Text </title> </head> <body> <p><b>This text is displayed as Bold</b></p> <p><u>This text is displayed as being underlined</u></p> <p><i>This text is displayed as italicized</i></p> <p><b><i>This text is displayed as Bold and Italicized</i></b></p> <p><b><i><u>This text is displayed as Bold and Italicized and underlined</i></b></u></p> <body> </html> Hexadecimal Codes: (216 web-safe colors) List Elements n <ul>…</ul> unordered lists q % ! ! q $$ n <ol>…</ol> ordered lists q # " q n ! Surround the list with <ul>..</ul>, surround the list entries with <li>…</li> These appear as lists of bulleted items Surround the list with <ol>..</ol>, surround the list entries with <li>…</li> These appear as numbered lists. <dl>…<dl> definition lists q q These appear as a glossary with terms being defined in a left column and their definitions indented to the right Surround the term you are defining with <dt>...</dt>, Surround its definition with <dd>...</dd> 2 All HTML Tags n http://www.echoecho.com/htmlreference.htm HTML Links HTML Backgrounds n More than 90 percent have a plain white background. n The few pages that actually do use images use very discrete and fast loading images for the purpose. HTML Links n n <a href="URL of the Web page to go to">Text that will be the link</a> n There are three different kinds of links you can have on your website: Links to anchors on the current page (Internal). q q q Links to anchors on the current page (Internal). q Links to other pages within the current site (Local) n Links to other pages within the current site (Local) q n Links to pages outside the current site (Global). HTML Images n The two main image types on web pages: jpg and gif. <img src=“David.jpg" width="200" height="150" alt="My friend David"> <a href=“http://www.mtholyoke.edu/courses/xli/100/CS10 0-Spring2007.html”>cs100 Course Schedule</a> Tables in Web Pages n Dividing the page into separate sections. n Creating menus. q n <a href=“labs/cs100_lab1.htm">Lab 1</a> Links to pages outside the current site (Global). q q the named portion of the page n <a name="internal">Internal Links</a> the link itself n <a href="#internal">go to internal links</a> Typically with one color for the header and another for the links following in the next lines. n Adding interactive form fields. n Easy alignment of images that have been cut into smaller pieces. n A simple way to allow text to be written in two or more columns next to each other. q Typically a gray area containing a search option. 3 Table Tags: n n Every table is wrapped by the <table>...</table> tag. Then, the columns are surrounded by the <tr>...</tr> tag. You can have one column or as many as you want. HTML Frames n Frames can divide the screen into separate windows n Each of these windows can contain an HTML document n How to make a homepage that uses frames q Make an HTML document with the frameset n n HTML Forms n A form is simply an area that can contain form fields. n Form fields are objects that allow the visitor to enter information for example text boxes, drop-down menus or radio buttons. n n q Each column has its own tag: <td>...</td>. When the visitor clicks a submit button, the content of the form is usually sent to a program that runs on the server. Javascript is sometimes used to create magic with form fields, You can use some tools to create such a menu in less than 5 minutes - without knowing anything about Javascript. A file that specifies how the screen is divided into frames is called a frameset Make the normal HTML documents that should be loaded into each of these frames. HTML Meta Tags n Meta tags are used to store information usually relevant to browsers and search engines. q q q some search engines look to meta tags for descriptions, keywords, etc. tags telling browsers to load a specific url after x seconds Another example is the ICRA meta tag. This tag can prevent sites with adult content from being seen on IE browsers. Next Lecture: n n Images in HTML, Photoshop Reading assignments: q Photoshop (search related information on the Web) 4
