Week-1 

Week One – HTML/Web basics

1. What does HTML stand for?

Hypertext Markup Language 

 

2. HTML5 tags have the same semantic meaning, regardless of the browser being used.

  • True
  • False

 

3. FTP stands for

  • Files to Push
  • File Transmission Pipe
  • File Transfer Protocol

 

4. What does HTTP stand for?

Hypertext Transfer Protocol

 

 

 

5. Which of the following is part of a URL?

  • editor
  • HTML
  • domain (or host)

 

6.The Internet is a type of

  • Hypertext Network
  • Local Area Network
  • Wide Area Network

 

7. What is the Request/Response Cycle?

  • The process that happens when a client requests a page and a server responds with the appropriate files
  • The process that happens when a server requests a page and a client responds with the appropriate files
  • The process that happens when a HTML5 is created with an editor

 

 

8.A ________________________ is a computer that is in charge of handling resource requests from multiple computers.

Server

 

 

9.Which of the following is an example of a top-level domain?

  • .biz
  • umich.edu
  • mysite

 

 

10. The Domain Name Service looks up the domain and returns the

  • IP address
  • server
  • host
  • document

 

 

11. Which organization is responsible for assigning top-level domain names?

  • Internet Corporation for Assigned Numbers and Names (ICANN)
  • Internet Domain Name Server (IDNS)
  • World Wide Web Consortium (W3C)

 

 

12. A single web page may require several iterations of the Request-Response Cycle.

  • True
  • False

 

 

13.What does LAN stand for?

Local Area Network

 

 

 

14.What does WAN stand for?

Wide Area Network

 

 

15.Which is the correct file extension for a web page?

  • .ppt
  • .doc
  • .html
  • .txt

 

 

 

16. HTML uses _________ to annotate documents. This is a way of marking up the content to identify specific HTML elements.

Tags

 

 

17.The original web was developed

  • as a way to display graphical images.
  • as way to increase international commerce
  • as a way for scientists to exchange information

 

 

 

18.The first graphical browser was…. (please use one word answer)

ViolaWWW

 

 

 

19. What are proprietary tags?

  • Tags used to define ownership of the content
  • Tags that displayed copyright information
  • Tags that work only on certain browsers

 

 

 

20. Which of these tags breaks the tenet of the separation of content and layout?

  • br
  • center
  • p

 

 

21. Which of the following are browsers?

  • Firefox, Chrome, Safari, Sublime
  • Internet Explorer, Windows, Safari
  • Safari, Chrome, Internet Explorer

 

 

 

22. W3C stands for

  • WWW Consortium
  • World Wide Web Cooperation
  • World Wide Web Consortium

 

 

23. A basic functionality of browsers is to translate HTML documents into viewable webpages.

  • True
  • False

 

 

24. Which version of HTML introduced different document types?

  • HTML 4.01
  • HTML 3.2
  • HTML 2.0
  • HTML5

 

 

25. The predecessor of the internet was

  • CompuServe
  • Arpanet
  • DARPA
  • Al Gore

 

 

 

 

26.URL stands for

  • Universal Relation Locator
  • Unordered Resource Location
  • Uniform Resource Locator

 

 

27. _____________ is used to create rules about the color, font, and layout of our pages

Css

 

 

28.CSS1 was introduced for public use in?

December 1996

 

 

29.What editor are you using?

CoffeeCup HTML Editor · Komodo Edits · NetBeans · Notepad++

 

 

30.

Question 30

What browser(s) are you using?

Chrome, Internet Explorer, Firefox

 

 Week-2 

Tags!

 

1. Semantics is

  • the practice of giving content on the page meaning and structure by using proper element
  • the set of rules that defines the combinations of symbols that are considered to be a correctly structured document or fragment in that language
  • circular

 

2. Semantic code describes the ___ of content on a page, regardless of the style or appearance of that content.

  • number
  • value
  • language

 

 

3. Using tags that have semantic meaning

  • increases accessibility and improve search engine optimization
  • increases search engine optimization
  • breaks the separation between content and layout

 

 

4. Every well-formed HTML document should include:

  • doctype, head, body
  • doctype, header, body
  • header, nav, footer
  • alt text

 

 

5. What is wrong with the following code?

  • The alt text attribute is missing from the tag
  • This link doesn’t provide any way to click on the link.
  • The anchor link is self-closing. Remove the </a> and the code will work.
  • This code is semantically and syntactically correct.

 

 

6. Block-level elements begin on a new line

  • True
  • False

 

7. Inline-level elements begin on a new line

  • True
  • False

 

8. A <div> block is an inline-level element

  • True
  • False

 

9. A <span> block is an inline-level element

  • True
  • False

 

10. Which tag represents a line break (new line)?

  • <break>
  • <line>
  • <lb>
  • <br>

 

11.Which of the following is the correct way to comment on HTML5?

  • <?– HTML –>
  • <#– HTML –>
  • <!– HTML –>
  • <$– HTML –>

 

12. Which set of element tags is used to create the highest level heading?

  • <header>..</header>
  • <h9>..</h9>
  • <h1>…</h1>
  • <h6>…</h6>

 

13. All of the content you wish to appear on the screen should be in which tag?

  • <main>
  • <content>
  • <body>
  • <html>

 

14. Which tag is used to create a link?

  • <link>
  • <a>
  • <anchor>
  • <hyper>

 

15. Which of the following code is the correct way to link to an email address?

  • <a href= “mailto:shayhowe@awesome.com?subject=Hi&body=How are you”>Email</a>
  • <a href= “mailto:shayhowe@awesome.com?subject=Hi&body=How%20are%20you”>Email</a>
  • <a href= “mailto:shayhowe@awesome.com?subject=Hi&body=How%are%you”>Email</a>
  • <a href= “mailto:shayhowe@awesome.com?subject=Hi&body=How%20are%20you”>Email<a>

 

 

16. Which HTML element will number items for you?

  • <ul>
  • <ol>
  • <num>
  • <dl>

 

 

17. The start attribute defines the number from which an unordered list should start.

  • True
  • False

 

18. The reverse attribute allows a list to appear in a reverse order in an unordered list.

  • True
  • False

 

19. Which attribute can be used to change its number within an ordered list?

  • num
  • skip
  • change
  • value

 

 

20. Which code properly creates the nested list structure shown here?

1. Vegetables
2. Fruit
  ·Blueberries
  ·BananasCopy

Notice that the blueberries and bananas are part of the fruit component.

 

  • <ol>		
        <li>Vegetables</li>	
        <li>Fruit>/li>
        <ul>				
           <li>Blueberries</li>
           <li>Bananas</li>
        </ul>
    </ol>Copy
  •   <ol>		
        <li>Vegetables</li>	
        <li>Fruit
           <ul>				
              <li>Blueberries</li>
    	  <li>Bananas</li>
           </ul>
        </li>
    </ol>Copy
  • <ul>		
        <li>Vegetables</li>	
        <li>Fruit>/li>
        <ol>				
           <li>Blueberries</li>
           <li>Bananas</li>
        </ol>
    </ul>Copy
  • <ul>		
        <li>Vegetables</li>	
        <li>Fruit
           <ol>				
              <li>Blueberries</li>
    	  <li>Bananas</li>
           </ol>
        </li>
    </ul>?Copy

 

??

21. The <ul> and <ol> elements may contain only <li> elements.

  • True
  • False

 

22. The tags to create definitions are:

  • <dl>, <dt>, <dd>
  • <dl>, <term>, <def>
  • <def>, <dt>, <dd>
  • <def>, <dt>, <li>

 

23. What should target = “_blank” do when included in a link tag?

  • Opens the link in a new tab or window
  • Opens the link in a in a tab called “_blank”
  • This is not a valid expression.

 

 

24.In order for the <img> element to work, a src attribute and value must be included to specify the source of the image.

  • True
  • False

 

25. The alt text of an image should describe the appearance of an image

  • True
  • False

 

26. When should an image have null (empty) alt text (alt – “”)

  • When the image is black and white
  • When the image is complex
  • When the image is decorative
  • When the image already displays descriptive text

 

 

27. Which of the following is the best way to use a Font Awesome icon to link to Twitter?

  • <a href=”https://twitter.com/” aria-label=”Twitter”> <i class=”fa fa-twitter”></i></a>
  • <a> <i class=”fa fa-twitter”></i></a>
  • <a href=”https://twitter.com/” > <i class=”fa fa-twitter” aria-label=”Twitter”></i></a>
  • <a href=”https://twitter.com/”> <i class=”fa fa-twitter”></i></a>

 

 

28. What are the elements to help organize the data and structure of a table?

  • <caption>, <head>, <body>, <foot>
  • <caption>, <thead>, <tbody>, <foot>
  • <caption>, <thead>, <tbody>, <tfoot>
  • <caption>, <thead>, <body>, <foot>

 

29. What does <thead> stand for?

  • The head
  • Table head
  • Table header
  • None of the above

 

30. Which code will properly insert headings along each row?

 

  • <table>
      <tr><th>Name</th><th>Age</th><th>Team</th></tr>
      <tr><td>Colleen</td><td>26</td><td>Browns</td></tr>
    </table>Copy
  • <table>
      <tr><td>Name</td><td>Age</td><td>Team</td></tr>
      <tr><td>Colleen</td><td>26</td><td>Browns</td></tr>
    </table>Copy
  • <table>
      <tr><td>Name</td><td>Age</td><td>Team</td></tr>
      <tr><th>Colleen</th><th>26</th><th>Browns</th></tr>
    </table>Copy
  •   <table>
      <tr><th>Name</th><td>Colleen</td></tr>
      <tr><th>Age</th><td>26</td></tr>
      <tr><th>Team</th><td>Browns</td></tr>
    </table>Copy

 

 Week-3 

 

Hosting and Validation

1. What validation error will this code produce?

<!DOCTYPE html>
<html lang="en">
<head>	
   <meta charset="UTF-8">
   <title>Testing</title>
</head>
<body>
   <p>		
     <h2>Validate me!</h2>	
   </p>
</body>
</html>Copy
  • No p element in scope but a p end tag seen.
  • No error
  • Start tag seen without seeing a doctype first. Expected e.g. <!DOCTYPE html>.

 

2. What validation error will this code produce?

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>	
   <p> Validate me! </p>
</body>
</html>Copy
  • End of file seen when expecting text or an end tag.
  • Element head is missing a required instance of child element title.
  • No error.

 

 

3. To access your cPanel account, you need …

  • a username and password from your hosting server
  • the username and password for your computer
  • the port number for your account

 

4. To publish your site online you need

  • a domain name and hosting service
  • an account through work or school
  • a client

 

5. To use ftp software to transfer files you will typically need to know your site’s ftp address or ip address.

  • True
  • False

 

Final Quiz – Putting it Together

 

1. Which is the best/proper way to declare that your page uses the HTML5 protocol?

  • <!DOCTYPE html>
  • <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
  • <!DOCTYPE>
  • <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 5.01//EN” “http://www.w3.org/TR/html5/strict.dtd”>
  • <!html>

 

 

2. Which is the best/proper way to declare that the language for your page is English?

  • <html lang=en>
  • <html lang=”english”=”at is the best/proper way to create the meta-data for your page?
  • <head>
        <meta charset="utf-8">
    </head>
    <body>
        <title>Mister Rogers</title>
    </body>Copy
  • <header>
        <meta charset="utf-8">
        <title>Mister Rogers</title>
    </header>Copy
  • <head>
        <meta charset="utf-8">
    </head>Copy
  • ?  <head>
    	<meta charset="utf-8">
    	<title>Mister Rogers</title>
    </head>Copy
  • <meta charset="utf-8">
        <title>Mister Rogers</title>
    </meta>Copy
  • <meta charset="utf-8">
        <title>Mister Rogers</title>
    </meta>Copy
  • <head>
        <meta charset=utf-8>
        <title>Mister Rogers</title>
    </head>Copy

?

4. Which is the best/proper way to declare the header for a page?

 

??

  • <header>
        <h1>Mister Rogers</h1>
        <nav>
    </header>
    	<a href="one.html">one</a>
    	<a href="two.two.html">two</a>
    	<a href="three.html">three</a>
    	<a href="songs.html">Songs</a>
        </nav>Copy
  •   <header>
        <h1>Mister Rogers</h1>
        <nav>
    	<a href="one.html">one</a>
    	<a href="two.two.html">two</a>
    	<a href="three.html">three</a>
    	<a href="songs.html">Songs</a>
        </nav>
    </header>Copy
  • <head>
        <h1>Mister Rogers</h1>
        <nav>
    	<a href="one.html">one</a>
    	<a href="two.two.html">two</a>
    	<a href="three.html">three</a>
    	<a href="songs.html">Songs</a>
        </nav>
    </head>Copy
  • <div id = "header">
        <h1>Mister Rogers</h1>
        <div id = "nav">
    	<a href="one.html">one</a>
    	<a href="two.two.html">two</a>
    	<a href="three.html">three</a>
    	<a href="songs.html">Songs</a>
        </div>
    </div>Copy

??

 

5. Which is the best/proper way to declare a section that has an h2 heading and an unordered list?

 

  • <section>
    	<h2>Favorite Foods</h2>
            <p>
    	    <ul>
    		<li>stuff</li>
    		<li>more</li>
    		<li>stuff</li>
    		<li>again</li>
    	    </ul>
            </p>
    </section>Copy
  •   <section>
    	<h2>Favorite Foods</h2>
    	<ul>
    		<li>stuff</li>
    		<li>more</li>
    		<li>stuff</li>
    		<li>again</li>
    	</ul>
    </section>Copy
  • <section>
    	<h2>Favorite Foods</h2>
    	<ol>
    		<li>stuff</li>
    		<li>more</li>
    		<li>stuff</li>
    		<li>again</li>
    	</ol>
    </section>Copy
  • <section>
    	<h2>Favorite Foods</h2>
    </section>         <ul>
    		<li>stuff</li>
    		<li>more</li>
    		<li>stuff</li>
    		<li>again</li>
    	</ul>Copy

??

6. Which is the best/proper way to declare a section that has an h2 heading and three progress elements?

  • <section>
       Achievements
          <p>Progress in this course (100%)<progress>100%</progress><br/>
          Progress in the Specialization capstone (20%)<progress>20%</progress><br/>
          Progress in life goals (70%)<progress>70%</progress></p>
    </section>Copy
  • <section>
       <h2>Achievements</h2>
          <p>Progress in this course (100%)<progress value="1"></progress>
          Progress in the Specialization capstone (20%)<progress value="20" max="100"></progress>
          Progress in life goals (70%)<progress value="70" max="100"></progress></p>
    </section>Copy
  •  <section>
       <h2>Achievements</h2>
          <p>Progress in this course (100%)<progress value="1"></progress><br/>
          Progress in the Specialization capstone (20%)<progress value="20" max="100"></progress><br/>
          Progress in life goals (70%)<progress value="70" max="100"></progress></p>
    </section>Copy
  • <section>
       <h2>Achievements</h2>
          <p>Progress in this course (100%)<progress>100%</progress><br/>
          Progress in the Specialization capstone (20%)<progress>20%</progress><br/>
          Progress in life goals (70%)<progress>70%</progress></p>
    </section>Copy

 

??

7. What is the best/proper way to declare a section that has an h2 heading and uses a detail tag?

  •  <section>
       <h2>More about me</h2>
       <details open>
    	<h2>My Childhood</h2>
    	<p>stuff happened, I grew up</p>
       </details>
    </section>Copy
  • <section>
       <h2>More about me</h2>
       <details>
    	<summary>
             My Childhood
    	 <p>stuff happened, I grew up</p>
            </summary>
       </details>
    </section>Copy
  • <section>
       <h2>More about me</h2>
       <details>
    	<summary>My Childhood</summary>
    	<p>stuff happened, I grew up</p>
       </div>
    </section>Copy
  • ?<section>
       <h2>More about me</h2>
       <details open>
    	<summary>My Childhood</summary>
    	<p>stuff happened, I grew up</p>
       </details>
    </section>+Copy

??

8. What is the best/proper way to create a footer that has an image, paragraph, and link? Be careful, that paragraph includes a special entity.

  • <footer>  <p> <img src="http://www.intro-webdesign.com/images/newlogo.png" alt="new logo"/>  This page was created by Mister Rogers &amp; Colleen van Lent. To learn more about web design, visit <a href="http://www.intro-webdesign.com">Intro to Web Design</a>  </p><footer>Copy
  •  <footer>
    <p>
    		<img src="http://www.intro-webdesign.com/images/newlogo.png" alt="new logo">
    		This page was created by Troy &amp; Colleen van Lent. To learn more about web design, visit
    		<a href="http://www.intro-webdesign.com">Intro to Web Design</a>
    	</p>
    </footer>Copy
  • <div id = "footer">    <p> <img src="http://www.intro-webdesign.com/images/newlogo.png" alt="new logo"/>  This page was created by Mister Rogers &amp; Colleen van Lent. To learn more about web design, visit <a href="http://www.intro-webdesign.com">Intro to Web Design</a></p>
    </div>Copy
  • <div id = "footer">    <p> <img src="http://www.intro-webdesign.com/images/newlogo.png" alt="new logo"/>  This page was created by Mister Rogers &amp; Colleen van Lent. To learn more about web design, visit <a href="http://www.intro-webdesign.com">Intro to Web Design</a></p></div>