Web Design Semester 1
Gives you structure and text
<html>
finds the image located at the a URL and the src attribute and then displays it.
<img> tag finds;
Be easy to read Be easy to navigate Use a consistent color scheme Use the same layout on all pages
A good website should
emedded
An _________ style consists of code that is stored in a page's head content.
Advanced or Compound
An __________ style is used to format combinations of page elements
element that wraps everything that is visible on the page.
Body tags are used;
Carousel
COMPONENT used in Bootstrap to cycle through elements, like a slideshow.
<h1>
Choose the correct HTML element for the largest heading:
<strong>
Choose the correct HTML element to define important text
Jumbotron
Class used to create a big box for calling extra attention in Bootstrap
<em>
Correct HTML element to define emphasized text
.container
Fill in the Blank: Contents of a navbar need to go inside a _______ div.
Dropdown menus
Fill in the blank: ________ are a great way to pack more options into a navigation bar while keeping the interface clean and simple.
<ul>
How can you make a bulleted list?
<ol>
How can you make a numbered list?
semi-colon ;
If you want to have more than one declaration in a CSS rule, what character separates them?
semi-colon (;)
If you want to have more than one property for a CSS selector, what character separates them?
declaration
In CSS code, the ________ consists of the property and the value.
HTTPS
One way to tell if the website you are on is secure is to look for this:
Heading Body Title
Parts of a structure website.
.jpg
Photographs on a web-page are usually good candidates for this file type:
Used at the top of the page to apply a style to the entire document
Style tags are used to;
12
The Bootstrap grid system is based on these number of columns
related files toolbar
The _______ _____ ________ displays under the file tab listing the style sheet file name.
HTTPS is a secure website
The difference between HTTP and HTTPS is:
message
The main purpose of your properly designed webpage is to first consider what __________ you want to convey to the viewer.
selector
The name or tag to which the style declarations have been assigned is called the ___________
starts a command in an element.
The opening tag
Tags
The parts of HTML source code that mark the start and end of various parts of a webpage, and which consist of command between they symbols < and > are called what?
White space
The portion of a page left unmarked, left blank or the empty space in a page is called:
True
True or False. Being a web-designer for a career is a job that you could do from anywhere, not requiring an office.
True
True or False. HTML comments start with <!-- and end with -->
True
True or False. No one owns the World Wide Web
False
True or False. Online validation will check your grammar and spelling and autocorrect your HTML.
False
True or False. The World Wide Web is the same thing as the Internet?
True
True or False. The layout of a website is very important. Users should have access to main information easily.
True
True or False: Bootstrap example websites can be used as a starter template for your own projects.
Wireframes
Very crude and simplistic drawings and/or layouts of a webpage, which typically have no design applied are called:
<body></body>
Visible part of the HTML document is between
p {text-align: center;}
What CSS code centers text?
Inline style
What CSS level overrides all others?
<footer>
What HTML element is used to specify a footer for a document or section?
Chrome, Firefox, Safari
What are examples of browsers:
Communication Colors Images Load time
What are principles of good web design?
Web Designer Coder Graphic Designer Social Media specialist
What careers can be pursued after taking a Web Design class?
<a href="https://codehs.com/" class="thumbnail"> <img src="codehs_logo.jpg" alt="CodeHS Logo"> </a>
What correctly creates a thumbnail of the CodeHS logo that links to https://codehs.com?
<div class="table-responsive"> <table class="table"> ... </table> </div>
What creates a table that is responsive to screens of different sizes?
File Transfer Protocol
What does FTP stand for?
Uniform Resource Locator
What does URL stand for?
It applies formatting to all web pages on your site
What does a CSS (Cascading Style Sheet) do?
<table><tr><td>
What elements are <table> elements?
<img src=". ./images/orange.jpg">
What file structure will work if you are trying to access the picture "orange.jpg" inside the images folder?
A program on your computer that allows you to visit websites
What is a browser?
body {color:black;}
What is a correct CSS syntax?
A network of networks A way for humans to communicate with each other A philosophy of making information and knowledge open and accessible for all
What is the Internet?
<br>
What is the correct HTML element for inserting a line break?
<body style="background-color:yellow;">
What is the correct HTML for adding a background color?
<a href="http://www.UrTeacherIsAmazing.com">SayWhat</a>
What is the correct HTML for creating a hyperlink?
<img src="image.gif" alt="MyImage">
What is the correct HTML for inserting an image?
p { color:#ff0000; }
What is the correct way to specify the color of a paragraph of text?
A router connects multiple networks and directs communication between devices.
What is the function of a router?
A government filtering search results to limit the access of information and suppress discussion amongst its citizens
What is the issue of censorship on the Internet?
planning
What is the most important part of web design?
.wmv
What is the movie file extension?
Security
What is the number one concern about cloud computing?
.jpg
What is the photo file extension?
p {color: green;}
What is the proper format to make a paragraph tag green in CSS?
color
What is the property in this CSS? p {color: red;}
p
What is the selector in this CSS? p {color: red;}
red
What is the value in this CSS?p {color: red;}
Nothing
What is wrong with the following code? <html> <head><title>My 1st Web Page</title></head> <body> <h1>Hello World!</h1> <p>This is a paragraph</p> </body></html>
The tags do not match
What is wrong with the following code? <h1>This is a heading tag</h2>
It is missing a <th>Table Header</th> tag
What is wrong with the following code? <table border="5"> <tr> <th>Table Header</th></tr> <tr> <td>Item 1</td> <td>Item 2</td> </tr> </table>
Nesting errors Missing ALT attributes Forgetting to convert special characters
What kind of error messages do you get in HTML validation?
Social media Mobile phones Tablets Laptops
What plays a part in creating your digital footprint?
border:
What property changes the border for an image/table?
Google Chrome
What software allows you to view websites?
{ }
What symbols go around the properties for each CSS selector?
<div class="page-header"> <h1> This is the header <small> This is the subtext </small> </h1> </div>
What will correctly display a page header with subtext?
What type of site you will have its purpose-Goals/Objectives Target audience Website layout
When create a website it is important to know the following information:
Forever
When it comes to your digital footprint, how long will images/videos/social media posts stay on the Internet?
Chunking
When you divide large tasks into smaller more manageable tasks is called what?
View the source code
Where do you find the code for an existing web site on the Internet?
<title>
Which HTML element defines the title of a document?
<header>
Which HTML element is used to specify a header for a document or section?
/
Which character is used to indicate an end tag?
<!DOCTYPE html>
Which doctype is correct for HTML5?
.htm, .html, .css
Which file extensions are used with standard web pages?
Age-related impairments Color blindness Blindness
Which of the following would be a disability that should be considered when designing a web-site?
profile.html
Which page should the following nav-tabs be added to? <ul class="nav nav-tabs"> <li><a href="home.html">Home</a></li> <li class="active"><a href="profile.html">Profile</a></li> <li><a href="messages.html">Messages</a></li> </ul>
Adobe Photoshop
Which program is great for editing pictures?
Tim Berners-Lee
Who is the inventor of the World Wide Web?
Protocols ensure that all computers interpret information the same way Protocols make sure that all types of devices can communicate Protocols make sure that no matter how information is being sent, the information layout remains the same.
Why are Internet Protocols important?
To group options together in a way that makes sense To have a simple interface without too many buttons To save space and keep a clean website layout
Why might you decide to use a dropdown menu on your website?
Inline
_____ style is stored in a page's body content.
Class
______ style can be used to format any page element, such as a paragraph of text or an image.
body { background-color: #000000; }
code that uses CSS to configure a background color of #000000 for a web page.
