Reading...
Play button
Play button
Use LEFT and RIGHT arrow keys to navigate between flashcards;
Use UP and DOWN arrow keys to flip the card;
H to show hint;
A reads text to speech;
63 Cards in this Set
- Front
- Back
|
What is the Internet?
|
- Not a single network but a globe-spanning collection
- Communication infrastructure for exchanging info - Not run by a single person, group, or organization Networks - Networks communicate based on certain protocols (TCP & IP) |
|
|
How the Internet started?
|
- Started as a research project funded by the Advanced Research Projects Agency
- Created Arpanet - WWW is the "killer app" |
|
|
What is a domain name?
|
- Created to provide easy-to-remember monikers for IP addresses
- Translation between domain names and IP addresses is performed by the Domain Name Service |
|
|
Generic Top-Level Domains (gTLD)
|
- .com and .net are operated by VeriSign Global Registry Services
- .org, .gov etc |
|
|
Country code top level domains
|
.us, .ca, .uk, .eu
|
|
|
The Client/ Server Model
|
- Computer wanting the internet is the client
- Other computers are the servers. hosts waiting for requests - Client's browser sends HTTP (hypertext transfer protocol) requests to a host server - Host computer runs the server software that reads the request and performs the asked-for services |
|
|
Internet Addresses
|
-Specific location is known as an address or URL (Uniform Resource Locator)
- Read address from right to left (top level domain, major domain,.... computer running the web server) |
|
|
What is the World Wide Web?
|
- Globally connected network of websites
- Application used to access the WWW is a web browser |
|
|
Web Browsing?
|
- Top part has a control area to enter a location
- Main section displays text graphic images, audio, and video Pages contain hypertext links to other pages - Language used to view web pages is hypertext markup |
|
|
How the WWW works?
|
- Type a URL into your web browser
- Web browser sends a request using a hypertext transfer protocol - The request is sent to the internet with routers figuring out the web server - The web server receives the request using the HTTP protocol - The server find the requested page and sends it back to the web browser client -HTTP connection is closed |
|
|
URL
|
- 1st part (http://) details the protocol use
- 2nd part (www) indicates which type of resource - 3rd (cnn.com) identifies the web server - Last part (/tech/) identifies a specific directory or page |
|
|
How websites can be organized
|
Linear, Tree, Random
|
|
|
Web Browser
|
- Displays information sent form the server so it can be seen and read by the user
- Allows the user to also send data back to the server - Browsers can't display come types of files such as flash (install plug-ins) |
|
|
HTML
|
- The simplest way for server to send information to the user is text
- The web uses hypertext mark-up language (HTML) instead of plain text - Made up of ordinary text plu tags |
|
|
HTML Skeleton
|
<html>
<head> <title> </head> <body> text </body> </html> |
|
|
URL Schemes
|
- The top level part of a uniform resource identifier
- http:// standard hypertext file transfer - https:// secure/ encrypted hypertext transfer protocol (eg credit card info) - ftp:// file that can be obtained via FTP - file:// file on a local disk attached to the computer |
|
|
3 Parts of a URL
|
The protocol - http
The server name - www.cnn.com The file name - web-server.htm |
|
|
HTML Tags
|
- The majority of HTML tags define "states" or modes that you turn on and off
- All tags are defined or delineated by < and > - Tags that insert items do not have modes but rather are one time instructions (<hr>) - Made up of core and attributes |
|
|
HTML vs XHTML
|
- HTML is not case- sensitive
- XHTML is case-sensitive - good practice to use all lowercase when writing code |
|
|
Color
|
- Computer monitors display color RGB mode
- Each color has a value 0-255 |
|
|
Bits and Bytes
|
- Computer Data is stored in binary using 0's & 1's
- The digits in a binary number are called bits - 8 bits = 1 byte |
|
|
Logical Styles
|
- Define how the affected text is to be used on the page
- Browser decides how to display text - eg <cite> <code> |
|
|
Physical Styles
|
- Define how to display the affected text
- eg <b> <big> |
|
|
Style Sheets
|
- To separate the style of a web page form its content
- To define a basic formatting style, first identify which tag you want to affect, such as h2 - Then define its properties, such as font family, color etc |
|
|
Types of Style Sheets
|
- Inline, styles are embedded right within the HTML code they affect <h2 style="font-family: verdana; color:
#003366;">Header 2</h2> - Internal, put style tag in header of page (between <head>) <style type="text/css"> h2 {font-family: verdana; color: blue;} </style> - External, contained in its own text file with link in header <link rel="stylesheet" type="text/css" href="styles.css"> |
|
|
Links to Other web Pages
|
- Add links to other web pages using the a tag
- absolute: <a href="http://www.google.com">Search Google.</a> - Relative: <a href="contactme.html">Contact Me</a> |
|
|
Links to e-mail addresses
|
<a href="mailto:name@domain.com">Email
Me</a> |
|
|
Types of image file types
|
- GIF: best for logos and other simple graphics with solid colors, lines, or text; allows you to make an image with a transparent background
- JPEG: best for photographs and other complex images; can be composed at a variety of different qualities - PNG: allows you to make an image with a transparent backgrouns |
|
|
Lists
|
- Ordered lists <ol>, list items <il>
- Unordered list <ul>, list items <li> - Definition list <dl>, definition term <dt>, definition <dd> |
|
|
CSS
|
- Abbreviation for Cascading Style Sheets
- Used to control the presentation of HTML |
|
|
Element
|
- Matching tags and their closed elements
- Composed of an opening tag, content, and a closed tag - <img> is an exception |
|
|
What goes in the head?
|
Information about the web page
Doesn't actually show up on the page |
|
|
Attributes
|
- Provide additional information about the element
- First comes the name followed by an equals sign, and then the attribute value surrounded in double quotes - eg <a href="top10.html">Great Movies</a> |
|
|
Empty Elements
|
- Elements that don't have any HTML content by design
- <br>, <img> <hr> |
|
|
Links
|
- Use the <a> to link from one page to another
- The content of the <a> element is the label for the link - You can use words or an image as the label for a link - When you click on a link, the browser loads the web page that is specified in the href sttribute |
|
|
Relative Path
|
- A link that points to other files on your website relative to the web page you are linking form
|
|
|
Absolute links
|
Those that include the entire path name
|
|
|
Anchor
|
- Used to link to a section of text within an HTML page
- Create an anchor using the name attribute - |
|
|
Better Links
|
- Keep link labels concise
- Keep labels meaningful - Avoid placing links right next to each other as it can be difficult for users to distinguish between links placed close together |
|
|
How do browsers treat images?
|
After reading the HTML page, the browser retrieves each image from the web server and displays it
|
|
|
Images
|
- <img> is an inline element
- The src attribute is how you specify the location of the image file (you can use either an absolute path or a relative path) - width and height attributes tell the browser what size to display (800 pixels is generally a good size) - Set the align attribute to flow text around an image |
|
|
Pixel
|
- The smallest dot that can be represented on the screen
- Each image is composed of thousands of pixels |
|
|
How to Make Text Wrap Around Tables
|
- set an align attribute to the table just as you would an image
- align="right" |
|
|
Table Nesting
|
- Put the nested table within the td tag of the outer table
- When you reach the fourth- table nesting, you could start to see a slowdown in the rendering of your page with some browsers |
|
|
Forms
|
- Allow you to collect information from users
- Can contain form elements such as text fields, text area fields, drop-down menus, radio buttons, and check boxes |
|
|
Four Main Form Tags
|
- form
- input: main form elements - textarea: creates multi-line text input area, if you put text into the content it will become the default text in an area control on the web page - select: creates a menu which contains one or more <option> elements, they define the items in the menu |
|
|
Method Attribute of Forms
|
- Contains the method of sending the form data: either POST or GET
- POST: forms data and send its as part of the request; use it when the form data should be private or when it is large - GET: packages form data and appends it to the URL; use it for requests that might be bookmarked - When the form is submitted, the form data values are paired with their corresponding names, and all names and values are sent to the server |
|
|
Text Fields
|
- used when you want to user to type letters, numbers, etc in a form
- text fields for passwords show entered text as bullets or asterisks - attributes: size, maxlength, value |
|
|
Radio Buttons
|
used when you want the user to select one of the limited number of choices
|
|
|
Checkboxes
|
used when you want the user to select one or more options of a limited number of choices
|
|
|
Hidden fields
|
data attached to, and processed with, a form that cannot be seen or changed by the user
|
|
|
Text Areas
|
- used when its necessary to allow users to enter more than a single line of text
- attributes: cols, rows |
|
|
Select Menus
|
- when you want users to select from a long list of options
- lists that have been compressed into one or more visible options - attributes: size, multiple, selected |
|
|
Buttons
|
- enable users to interact with a form
- for example, to tell the browser you are finished filling out a form and are ready to process it |
|
|
Common Gateway Interface
|
- refers to a program that sends information to and form the server
- also called script and can be written in several different computer languages - 3 main scripts used commonly used to email content forms: mailform, feedbackform, and formhandler |
|
|
Fieldsets
|
- used to group sets of labels and form elements
- legend tag gives you a heading to the group, if you want to include one |
|
|
Rules
|
- Provides the style for a selection of HTML elements
- A typical rule consists of a selector along with one or more properties and values - the selector identifies which elements the rule applies to - in each rule you can set one or more properties |
|
|
Properties
|
- All properties and values ina rule go between braces {}
- Each property declaration ends with a semicolon - Many properties are inherited but can be overridden by creating a more specific rule for the element you'd like to change |
|
|
Classes
|
- WE can define a class of elements and then apply styles to any element that belongs to that class
- use classes when you might want to use a style with more than one element |
|
|
Id
|
- used strictly for naming unique elements
- unlike a class, you can't have more than one element on a page with the same id - each element can only have one id - id name must start with a letter and be followed by only letters and digits, no spaces or special characters allowed |
|
|
Types of Style Sheets
|
- Inline: styles are embedded right within the HTML code they affect
- Internal: put the style element in the header of the page - External: contained in its own text file using the link element in the head element |
|
|
Style Properties
|
- Margin: the space around the block element
- Padding: the space between the border of the block element and the text inside it - Border |
|
|
Divs <div>
|
- used to group elements together that need a common style
- used nested divs to add further structure to your files - once you set the width property, it no longer expands to fit the entire width of the browser window |
