META BACK-END DEVELOPER PROFESSIONAL CERTIFICATE

Course 1 – Introduction to Back-End Development

Week 2: Introduction to HTML and CSS

Coursera Study Guide

Click to Enroll in Coursera Meta Back-End Professional Certificate

CONTENT

In this module you will learn how to construct HTML documents and add basic styling and layout using CSS.

Learning Objectives

  • Use HTML to create a simple web page
  • Use CSS to define style of a simple web page

KNOWLEDGE CHECK – GETTING STARTED WITH HTML

1. An HTML document begins with ______________.

  • The html tag
  • The DOCTYPE declaration (CORRECT)
  • The head tag
  • The body tag

Correct: That’s correct! An HTML document always begins with a DOCTYPE declaration followed by the html tag.

2. To display a link to another HTML document, the ______________ tag is used.

  • link
  • html
  • anchor (a) (CORRECT)
  • img

Correct: That’s correct! The anchor tag is used to link to another HTML document.

3. To add an image to a webpage, the ______________ tag is used.

  • Img (CORRECT)
  • image
  • anchor (a)
  • link

Correct: That’s correct! The img tag is used to include images in an HTML document.

4. To represent the HTML document in JavaScript, the browser builds  _____________.

  • an HTML Element Model
  • an HTML Script
  • Document Object Model (CORRECT)

Correct: That’s correct! A Document Object Model (DOM) is built to represent the HTML document in JavaScript.

5. Which of the following answer choices improves web accessibility for people with disabilities? Select all that apply.

  • Correct HTML structure (CORRECT)
  • Accessible Rich Internet Application (ARIA) techniques (CORRECT)
  • Appropriate use of HTML elements (CORRECT)

Correct: That’s correct! ARIA techniques improve accessibility for complex web applications.

Correct: That’s correct! Ensuring correct HTML structure will help assistive technologies to describe, navigate and interact with the content.

Correct: That’s correct! Using HTML elements appropriately such as using paragraph tags for text and button tags for buttons will help assistive technologies to describe, navigate and interact with the content.

KNOWLEDGE CHECK: CSS BASICS

1. To reference a CSS file in an HTML document, you use the ______________ tag.

  • head
  • script
  • style
  • link (CORRECT)

Correct: That’s correct! The link tag is used to reference a CSS file.

2. In the following CSS rule, the `h1` part of the rule is called the ______________.

1   h1 {
2      color: green;
3   }
  • Box model
  • Selector (CORRECT)
  • Inheritance
  • HTML

Correct: That’s correct! In this CSS rule h1 is called the selector.

3. What is the padding box width of the following CSS rule?

1   div {
2       width: 10px;
3       padding: 20px;
4       margin: 40px;
5   }
  • 10 pixels
  • 30 pixels
  • 50 pixels (CORRECT)
  • 70 pixels

Correct: That’s correct! The padding box width is the sum of the content width and the padding width. In this rule, it is 10 (content width) + 20 (padding left) + 20 (padding right) = 50.

4. Which CSS property and value change the HTML element to a block-level element?

  • align-content 
  • content
  • list-style
  • display: block (CORRECT)

Correct: That’s correct! The display property and block value are used to change the HTML element to a block-level element.

5. Which CSS property and value change the text to center alignment?

  • text-align: center (CORRECT)
  • align-self  
  • vertical-align  
  • align-items  

Correct: That’s correct! The text-align property and center value change the text to center alignment.

MODULE QUIZ: INTRODUCTION TO HTML AND CSS

1. Which two elements should be added to the html element to make the structure of an HTML document?

1 <!DOCTYPE html>
2 <html>
3 </html>
  • <div>
  • <p>
  • <head> (CORRECT)
  • <body> (CORRECT)

Correct: That’s correct! The head element is added to the html element.

Correct: That’s correct! The body element is added to the html element.

2. When using the anchor tag <a>, which attribute determines where the hyperlink links to?

  • src
  • href (CORRECT)
  • link

 Correct: That’s correct! The href attribute specifies where the hyperlink links to. <a href=”index.html”>Link</a>

3. When adding an image to a web page, which of the following is the correct HTML tag?

  • <img> (CORRECT)
  • <link>
  • <image>

Correct: That’s correct. The img tag adds an image to a web page.

<img src="image.jpg">

4. How many columns exist on the following HTML table?

1 <table>
2     <tr>
3         <td>Falafel</td>
4         <td>$10.00</td>
5     </tr>
6     <tr>
7         <td>Pasta Salad</td>
8         <td>$12.00</td>
9     </tr>
10    <tr>
11        <td>Dessert</td>
12        <td>$8.00</td>
13    </tr>
14 </table>
  • 1 column
  • 2 columns (CORRECT)
  • 3 columns

Correct: That’s correct. There are 2 columns and 3 rows in this HTML table.

5. When an HTML form is submitted to a web server, which HTTP methods can be used? Select all that apply.

  • DELETE
  • PUT
  • POST (CORRECT)
  • GET (CORRECT)

Correct: That’s correct. A POST method can be used for the form submission. <form method=”post”>

Correct: That’s correct. A GET method can be used for the form submission. <form method=”get”>

6. For the following HTML code, which CSS selectors can be used to select the h1 element? Select all that apply.

1 <h1 id="title">Welcome</h1>
  • Element Selector (CORRECT)
  • ID selector (CORRECT)
  • Class Selector
  • Descendant Selector

Correct: That’s correct. The ID selector can be used to select the h1 element based on its ID attribute.

1 #title {
2 
3 }

Correct: That’s correct. The element selector can be used to select the h1 element based on its h1 tag.

1 h1 {
2
3 }

7. In the following CSS code, what is the color: part known as?

1 h1 {
2     color: purple;
3 }
  • CSS Property (CORRECT)
  • CSS Selector
  • CSS Rule
  • CSS Attribute

Correct: That’s correct. The CSS properties are defined inside the curly brackets in a CSS rule.

8. Based on the following CSS, what will be the margin-box width for div elements?

div {
    width: 10px;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 5px;
    margin-right: 5px;
}
  • 10 pixels
  • 20 pixels
  • 30 pixels (CORRECT)
  • 40 pixels

Correct: That’s correct. The margin-box width = content width + padding width + border width + margin width. In this scenario, the margin-box width is 30 pixels.

9. True or false. In document flow, block-level elements always start on a new line.

  • True (CORRECT)
  • False

Correct: That’s correct. Block-level elements always start on a new line.

10. Based on the following CSS code, how will the text be aligned for the p element?

1 p {
2     text-align: justify;
3 }
  • The text will be aligned to the left of the p element.
  • The text will be spread out so that every line of the text has the same width within the p element. (CORRECT)
  • The text will be aligned to the right of the p element.
  • The text will be centered inside the p element.

Correct: That’s correct. The justify value will spread out the text within the p element so that every line has the same width.

11. You want to insert a paragraph on your website. Choose the correct format for the opening and closing paragraph tags:     

  • Opening tag: <p> Closing tag: <p/>
  • Opening tag: <p> Closing tag: <p>
  • Opening tag: <p> Closing tag: </p> (CORRECT)
  • Opening tag: <p/> Closing tag: </p>

Correct: That’s correct! This is the format required for opening and closing paragraph tags.

12. The structure of an HTML document starts with:   

  • <!DOCTYPE html> (CORRECT)
  • <HTML>
  • <head>
  • <body>

Correct: That’s right! The first element in an HTML document is the DOCTYPE declaration which notifies the web browser that it is an HTML document.   

13. You are creating a website and you want to add a link to the about.html page on your home.html page. What is the correct notation to create this link?  

  • <a href = “about.html”>About</a> (CORRECT)
  • <a> about.html </a>
  • <a> href = about.html </a>
  • <a href = “home.html”>About</a>

Correct: Yes, that’s correct. The href attribute is inside the anchor tag.    

14. You want to add an image to your webpage. What should you add within the image tag? Please select all that apply.   

  • The href attribute
  • The alt description (CORRECT)
  • The link to the source file (CORRECT)
  • The width and height specifications (CORRECT)

Correct: That’s correct! Adding alt descriptions is not required to add an image on your website but it is certainly best practice. This is helpful when the image becomes unavailable, for instance, if the image file is accidentally deleted. But, most importantly, it improves the accessibility of your website to those who are differently abled. Screen readers and other accessibility tools use the Alt attribute to provide information to their users.    

Correct: That’s correct! Just like when linking to a file, you need to provide the link to the image. The code will be <img src= “example.jpg” width=”100″ height=”100″ />

Correct: That’s correct! The image will display at its actual size if you do not specify the dimensions in the img tag. The code will be <img src= “example.jpg” width=”100″ height=”100″ />

15. You are developing a website for a shoe shop. In order to add a table to your website, which tags can you use? Select all that apply.

  • The table column tag: <tc> </tc>
  • The table header tags: <th> </th> (CORRECT)
  • The table row tag: <tr> </tr> (CORRECT)
  • The table tag: <table> </table> (CORRECT)
  • The table data tags: <td> </td> (CORRECT)

Correct: Correct. You use the table header tags to add headings to the table which makes it easier to understand the data.

Correct: Correct. You need to add table row tags for each line of information in your table.

Correct: Correct. The table tag is the first tag that you need to insert in order to add a table to a webpage.

Correct: Correct. You need to add table data tags for each cell in each row.

16. You are building an e-commerce site for a client. What kind of input types could you use? Check all that apply.

  • Username
  • Number (CORRECT)
  • Textarea (CORRECT)
  • Email (CORRECT)
  • Password (CORRECT)
  • Checkbox (CORRECT)
  • Text (CORRECT)
  • Radio (CORRECT)

Correct: Text, password, checkbox, radio, textarea, email and number are all types of input.

17. True or false. The Document Object Model allows you to update all HTML elements on a web page.

  • True (CORRECT)
  • False

Correct: That’s correct. The DOM allows you to update and delete existing elements on the web page.

18. Which of the following technologies are examples of assistive technologies? Select all that apply.   

  • Microphones
  • Speakers
  • Screen reader software (CORRECT)
  • Subtitles in videos (CORRECT)
  • Speech recognition software (CORRECT)

Correct: Well done. Other assistive technologies include subtitles in videos and speech recognition software.

Correct: Well done. Other assistive technologies include screen reader software and speech recognition software.

Correct: Well done. Other assistive technologies include subtitles in videos and screen reader software.  

19. When you create a CSS rule, the part inside the curly brackets is called the:

  • Selector
  • Declaration block (CORRECT)
  • Property
  • Value

Correct: That’s right. Everything between the curly brackets is called the declaration  block.

20. You are busy designing a web page for a small company. They supplied you with an image that needs to be in the center on the landing page. The image has a content width of 100px, 10px padding on both left and right sides, a 10px border on both left and right sides and a 10px margin on both left and right sides. What is the border box width?

  • 160px
  • 140px (CORRECT)
  • 180px

Correct: Well done. Border box width = content width (100) + padding width (2×10) + border width (2×10)

21. True or false. Inline elements appear on a new line.

  • True
  • False (CORRECT)

Correct: That’s right. Inline elements only occupy the width and height of their content and they don’t appear on a new line, hence the name “inline”.

Next – Week 1
Next – Week 3

Subscribe to our site

Get new content delivered directly to your inbox.

Quiztudy Top Courses

Popular in Coursera

Liking our content? Then, don’t forget to ad us to your BOOKMARKS so you can find us easily!

Subscribe