study guide - Ohio University
advertisement
Midterm Review Contribute answers; ask questions; collaborate to support each other in your preparation for the midterm! Just click the Edit button in the upper right to modify this page. Questions What is the purpose of an FTP client in general terms? - A File Transfer Protocol (FTP) client allows you to upload files and documents to a host site for access from the WWW. What is a WYSIWYG editor? -A What You See Is What You Get (WYSIWYG) editor allows you to edit content (text and graphics) as they appear visually on the screen. What are some differences between HTML and XHTML? One difference is that XHTML requires you to close out all tags. Also, XHTML is case sensitive – tags must be lowercase in XHTML. How are the Internet and the World Wide Web (WWW) different? How are they related? - The Internet is a massive network of networks. It connects computers together globally, in which a computer can communicate with any other computer connected to the Internet. The WWW is an information sharing model built on top of the Internet. The WWW uses the Hyper Text Transfer Protocol (HTTP). Which element is used to nest properties of the document that will not be displayed in the browser window? <title></title> Between which tags do we nest the elements we want to be visible in the browser window?<body></body> What is the difference between a local and remote site? The local site is not viewed by the public -- it is where all the working files are located for the remote site. The remote site is the site viewed by the public. Explain the process of viewing a web page from the time you open your web browser to the time the page appears on your computer screen. When we open our web browsers, code is pulled from a server. Because there are millions of servers, web addresses are used to locate the correct server. Then a browser is used as a translator to interpret the code and make it visible on our computer screen in the form of words and images. (There is a great video on the week 2 pdf if my explanation is confusing to anyone!) What are the domain, file, scheme and directory in the following URL?: http://www.ohio.edu/people/js142808 Scheme: http:// Domain: www.ohio.edu *Directory: /people/ File: js142808 What are the elements, attributes, and values in the following code?: <img src=”images/ou.jpg” alt=”Ohio University” width=”300” height=”240” /> <img src=”images/ou.jpg” alt=”Ohio University” width=”300” height=”240” /> The entire line is the element Attribute- src= Values- “images/ou.jpg We currently know 2 elements that must always be accompanied with attributes and values – what are they? When creating a hyperlink and when using a relative path to embed an image? We currently know 1 self-closing element – what is it? <img /> What is the root element in XHTML? <html></html> Explain the parent/child relationships in terms of nested HTML elements. The example below will be used in the explanation: <head> <title>Hello</title> </head> Elements are nested in the parent/child relationship. The outermost element is the parent and the nested element is the child. So, in the above example <head></head> is the parent and <title></title> is the child. What does it mean to validate your code? Validating it checks to make sure that is transitions to XHTML How do I know if a specific piece of content is protected by copyright on the web? (Someone may be able to provide some better insight on this than I can...) All content on the internet is protected by copyright unless it states otherwise. Can I embed an image I find online that has no copyright indication on it if I provide a credit to the original source? (Again, someone may be able to provide some better insight on this than I can..) You can embed an image if it is NOT copyrighted if you give credit to the source. If it IS copyrighted, you can provide a link to the image. Is it better to resize an image before embedding it in your webpage or through the width and height attributes in your code? Why? It is best to resize an image before embedding it in your webpage because using the width and height attributes in your code can cause distortion or pixilation. Which format would be best for this image? -GIF What format might be best for this image? What if I wanted to display it with an opacity effect? -JPEG..if opacity PNG Which is the relative and which is the absolute path in the following code?: A) src=”http://www.ohio.edu/images/ouws_front_0309_ohiogr.gif” absolute B) src=”images/ouws_front_0309_ohiogr.gif” relative What are 2 reasons for we should provide an alt value for an image? It provides an alternate text if the image cannot be displayed due to a poor connection or if a user cannot view the image because they are using a screen reader. What’s the difference between ordered and unordered lists? -ordered lists put the items in order 1, 2, 3 and it starts with and ends with <ol> </ol> -unordered lists bullett the items and starts with and ends with <ul> </ul> What does the term "satisfice" mean in the context of user navigation of the web? Users, most often, choose the first reasonable option, not the best option. There is no penalty for guessing, afterall. How does one achieve clear visual hierarchy (three general means)? 1) The more important something is, the more prominent it is. 2) Things that are related logically are also related visually. 3) Things are "nested" visually to show what's part of what. If the file index.html is in the root directory and all images for the site are kept in an images directory within the root, what would be the appropriate relative path to provide when embedding the image puppy.jpg in the index.html document? (src=”?”) src="Images/puppy.jpg" How can the use of conventions help users understand your website? The majority of viewers already understand the conventions of viewing a basic website. Most websites are set up in similar, or conventional, ways. If we, as designers, use conventions when designing our websites, it should be easier for users to navigate and understand our websites. Terms and Concepts Internet - The Internet is a massive network of networks. It connects computers together globally, in which an computer can communicate with any other computer connected to the Internet. WWW - The WWW is an information sharing model built on top of the Internet. The WWW uses the Hyper Text Transfer Protocol (HTTP). URL - Uniform Resource Locator, has a specific syntax, or set of structural rules. Protocol - a convention or standard for transferring data HyperText Transfer Protocol (http://) - Provides a way to access resources on the WWW via a protocol that involves requests made by clients to servers and responses made by servers back to the clients Transmission Control Protocol/Internet Protocol (TCP/IP) - used to segment the data into packets (TCP), navigate it to the proper location (IP) and re-assemble it once it reaches our PC (the client machine) Browser - Browsers are used as translators to interpret code and make it visible on a computer screen in the form of words and images. HTML - HyperText Markup Language -- code interpreted by browsers is usually some version of HTML XHTML - eXtensible HyperText Markup Language -- has stricter rules than HTML but is easier for browsers to interpret and can be parsed, which means other programs can analyze it and identify specific elements W3C - World Wide Web Consortium sets the international standards for the web. One goal is to increase accessibility of web content through consistency. Syntax - Structure. Semantics - Meaning. Element - XHTML is expressed in elements, which have opening and closing tags Attribute - many elements have attributes which provide additional information -- attributes end with = Value - attributes come with values and are included in the opening tags -- values are provided with "quotes" Root Folder - the highest folder in the folder directory hierarchy Directory - folders in which files are stored Creative Commons - A set of licensing options which allows individuals to specify how you may use their work in ways that range in restriction. File Size - Measures how heavy the file is in terms of data: measured in bytes. Image Size - Measures the dimensions of the image in pixels. Resolution - Amount of detail an image has. The more pixels that exist in an image, the higher the resolution it will have. Lossy vs Lossless Compression - With lossy data is lost when the image is re-sized, with lossless all data is kept intact. Bit Depth - The number of colors an image contains. Transparency - When an image contains invisible aspects that allows other things (images, text, etc.) to be seen through it Opacity - When aspects of an image are partially invisible Code Be prepared to code all of these elements and to examine pre-coded elements to identify any errors. Basic structure of a document (including html, head, title, and body elements) HEADINGS (all levels) <html> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html> PARAGRAPH (text) <html> <body> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </body> </html> ANCHOR(hyperlinks) <html> <body> <p> <a href="default.asp">HTML Tutorial</a> This is a link to a page on this website. </p> <p> <a href="http://www.google.com/">Google</a> This is a link to a website on the World Wide Web. </p> </body> </html> IMAGES (including alt, width and height attribute/value sets) <html> <body> <p> An image: <img src="smiley.gif" alt="Smiley face" width="32" height="32" /> </p> <p> A moving image: <img src="hackanm.gif" alt="Computer man" width="48" height="48" /> </p> <p> Note that the syntax of inserting a moving image is no different from a non-moving image. </p> </body> </html> ORDERED LISTS (NUMBERED) <html> <body> <h4>An Ordered List:</h4> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html> UNORDERED LISTS (BULLETED) <html> <body> <h4>An Unordered List:</h4> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html> TABLES (including headers, rows, and data) <html> <body> <p> Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag. </p> <h4>One column:</h4> <table border="1"> <tr> <td>100</td> </tr> </table> <h4>One row and three columns:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <h4>Two rows and three columns:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html> TABLE HEADERS (across): <html> <body> <h4>Table headers:</h4> <table border="1"> <tr> <th>Name</th> <th>Telephone</th> <th>Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> VERTICAL HEADERS <h4>Vertical headers:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th>Telephone:</th> <td>555 77 854</td> </tr> <tr> <th>Telephone:</th> <td>555 77 855</td> </tr> </table> </body> </html> Know how to properly nest elements as we have already done in our assignments (e.g., hyperlinking an image, including various elements in a table, etc.) Know how to structure a website with a root and images directory and how to write relative paths to hyperlink pages and embed images within the site. HYPERLINK IMAGES: <html> <body> <p>Create a link of an image: <a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" width="32" height="32" /> </a></p> <p>No border around the image, but still a link: <a href="default.asp"> <img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32" /> </a></p> </body> </html> TWO TYPES OF PATHS TO TAKE: In regards to the Internet, there are two kinds of paths, relative and absolute. An absolute path is the full URL to a file. If you had a link on your index page to your picture page, the absolute path might look like this: <a href="http://www.YourDomain.com/pictures.html">Pics</a> With the absolute path, the browser goes back out onto the Internet and finds your site all over again, then finds the file within your directory. If you're linking to something off your site, then you must use the absolute path because there is no relative path to use. If the page you're linking to is in the same directory as the page being viewed, then the relative path is simply the page name. A relative path points to the location of the file you want to link to in relation to the page being viewed, all within your server space. Using the relative path for the same page above, you'd code it: <a href="pictures.html">Pics</a> By using a relative path, the browser knows to just look within your own web site's server space for the linked file. if you're linking to pages on your own site, using a relative path will make your site respond quicker. It's all about speed! Use relative paths as long as the file is within your own server space Both links take you to the same page, difference is in the way they perform.
