4.01
External Styles
Are saved in an external .css file. A single external style sheet can style an entire web site. -easier update and save time.
The CSS Box Model
-All HTML elements can be considered as boxes. In ________, the term "_______________" is used when talking about design and layout. -The ________ box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. -The box model allows us to place a border around elements and space elements in relation to other elements.
URL
An address or Uniform Resource Locator is the method for locating a document on the Web. -The ___________ typically points to the home page or default page (often index.html) that is located in the root folder of the website.
absolute link
defines the location of the document including the protocol required to get the document, the server, the directory and the name of the document. Ex<ahref="http://www.w3.org/Consortium/mission">Mission statement</a>
Internal Styles
-Are contained in the head section and style a single web page. -save time and easier update -_____________ styles a single web page according to the rules entered in the <head> section of the document. -The <style> tag is required. -CSS rules have two parts: a selector and one or more declarations. -The selector is the HTML element to be styled. -The declaration specifies the property and value. -The <style> tag must be in the <head> section of the HTML page.
Additive Color
-Colors on your computer monitor are displayed by combining red, green, and blue light. -It's a process known as "additive color". A computer works with light. Mix a computer's additive colors, red, green, and blue, together, you get white. -_______________ are generated by light.
CSS Comments
-Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers. -A ____________ begins with "/*", and ends with "*/".* -______________ are different from HTML comments. They are two different languages.
When to use External CSS
-External CSS is ideal when the styles should be applied to many pages. -The styles in one file can be changed and the look of the entire web site will be updated. -External styles can be written in a text editor. -The file is then saved with .css extension.
Hex color codes
-Hexadecimal uses the numbers 0 to 9 and the letters A to F to represent color values. -In Hex the smallest representation of color is "00" and the largest representation of color is "FF".
CSS and Colors
-In ________________ is most often specified as either a HEX value (#ff0000), an RGB value (rgb(255,0,0) or a color name (red). -Refer to a color chart for a complete list of values.
Subtractive color system
-In contrast, the ______________ color system is the mixing of colors. In _______________, the colors mix to create black
RGB color
-The combination of red, green, and blue values ranges from 0 to 255. -That means there are 256 values for each color. 256 x 256 x 256 gives us more than 16 million colors that can be created using the ____________ system. -Zero, "0", is the smallest representations of a color. -255 is the largest representation of a color.
Simplified Explanation of Web browser and Web Server
-The content on the Web is available because the Web is a network of computers all over the world. -The interconnected devices on the Web use a communication standard known as http (hypertext transfer protocol).
Inline Styles
-Use the style attribute within an HTML tag. Inline styles only apply to that single instance of an HTML element. -The syntax for an inline style: <element-name style="property: value;"> Example: <body style="background-color: black;"> -Multiple CSS property:value pairs can be entered in the same style attribute.
Multiple Style Sheets
-__________________ will cascade into one -Inline styles have highest priority, then Internal styles, then External styles and then the Web browser default.
John wants to insert a CSS comment identifying himself as the author. Which line of code correctly inserts a CSS comment?
/*Written by John Doe*/
Which line of code correctly creates a link to Amazon's website?
<a href="http://www.amazon.com">Amazon</a>
Which hyperlink shows an absolute link?
<a href="http://www.target.com">Target</a>
Sarah wants to create a webpage displaying text in the Arial typeface. Which CSS inline style should she use?
<body style="font-family:arial">
A designer would use which tag to create a web page with sections of specific styles?
<div>
The web developer wants to group the school's spring activities together on a web page and apply a particular style to that section. What layout tag would help her to group these elements together?
<div>
Where would Will put the contact information and links to terms of use for his website?
<footer>
External CSS
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
Mary is adding a introductory introductory content to her webpage. What layout tag would help her to add this to her page?
<header>
Which line of code correctly places a gif image named "tiger" into a webpage?
<img src="tiger.gif" alt="BengalTiger" />
Which tag provides information about a web site?
<meta>
Which tag defines the set of navigation links?
<nav>
Which is an example of using an inline CSS style in a webpage?
<p style="color:blue">
Which CSS inline style results in the text size of a webpage paragraph displaying at 14px?
<p style="font-size:14px">
Jed is compiling weather information on a web site for local farmers. To organize the data, Jed should use which type of tag?
<table>
Tiffany's creating a multiple page website and wants consistency in appearance. Which method permits her to update the appearance of all pages by changing one file?
CSS External Style Sheet
CSS
Colors should be defined using Cascading Style Sheets.
Role of the Web Browser
HTML code is interpreted by a web browser. (a software application designed to retrieve and present content on the Web) -The web browser fetches a Web page from a server by a request. A standard http request includes a page address. -Web servers are also called web hosts. -The web server fetches pages by request and sends them to the client's browser.
CSS Rule for h1
Heading 1 will display in text color blue and a 12 pixel font.
HTML5
Is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG) -In _________ there is only one <!doctype> declaration, and it is very simple: <!DOCTYPE html> -The doctype is not an HTML tag. It is a declaration. It tells the browser the version of HTML.
Web page
Is a document which can display text, graphics, audio, video and other elements through a web browser. -________________are documents stored on web servers. -______________ contain instructions on how to display content. The most common instructions are in hypertext markup language (HTML).
HTML
Is a markup language which means that special codes are used to define elements. It is not a scripting or a programming language. -____________ code is often referred to as source code. _____________ can be coded using a plain text editor. -stands for Hyper Text Markup Language
open standard
Is a standard that is publicly available and has various rights to use associated with it, and may also have various properties of how it was designed (e.g. open process)
IP address
Is a unique string of numbers separated by periods that identifies each computer using the Internet Protocol to communicate over a network
The World Wide Web Consortium (W3C)
Is an international community that develops open standards. -The ________ developed the standards for HTML and CSS. -The ___________ mission is to lead the __________________ to its full potential by developing protocols and guidelines that ensure the long -term growth of the Web. -The HTML standards are constantly evolving to meet the needs of Web users. The current standard is HTML5. -The ___________ also creates standards for website accessibility, mobile web, etc.
HTML element
Is everything between the start tag and the end tag, including the tags: -HTML Element: <p>This is a paragraph </p>
Web site
Is typically a collection of related webpages with a starting point or home page. -_____________ are organized in a directory structure on a web server. The web server runs special software to serve up the content by responding to requests.
relative link
Means that it is relative to the current document. The Web server knows the location of the current document so it knows how to find relative links. Ex.<a href="notes.html">Notes</a><a href="/biology/notes.html">Notes</a>
Previewing the File
Open the HTML page in a Web browser to preview it. -You should view your page in multiple Web browsers. Most likely it will not look exactly the same in every Web browser.
Attributes
Provide additional information about an element.
<head>
Section contains information about your page.
<body>
Section contains the visible content of your page.
Jenny has created a <header> section for her store website. What information should be included within that <header> tag?
Store name
Web Accessibility Initiative (WAI)
The W3C has a _____________ Which develops strategies, guidelines, and resources to help make the Web accessible to people with disabilities.
Hyperlinks
The documents within a web site are typically ______________ and a navigation system (or menu) permits the user to move between pages. -A simple website could be organized in just one folder, but large websites need to be organized in some manner because of the large number of files.
Web Browser
The purpose of a _______________ (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages. -The ____________ does not display the HTML tags, but uses the tags to determine how the content of the HTML page is to be presented/displayed to the user.
Color Names
There are currently 140 color names supported in HTML and CSS.
What section information contains the author of the document'copyright information'links to the terms of the use, contact information, etc.
footer
What document or section information contains introductory content or a set of navigational links for the webpage?
header
Anthony is creating a webpage on seals. To ensure that his page can be found through Google,Anthony must include pertinent information in which tag section?
meta
John wants the name of his book to appear in search results for Google. Where should this information be placed within his webpage?
meta