COURSE 5: INTRODUCTION TO HTML, CSS, & JAVASCRIPT

Module 1: HTML Overview

IBM AI DEVELOPER PROFESSIONAL CERTIFICATE

Complete Coursera Study Guide

Enroll in Coursera IBM AI Developer Professional Certificate

Last updated:

August 2, 2024

TABLE OF CONTENT

Introduction
Practice Quiz: HTML Overview
Graded Quiz: HTML Overview
Conclusion

INTRODUCTION – HTML Overview

For front-end developers, the most fundamental tools are the languages used in creating websites or applications, with Hyper Text Markup Language (HTML) being paramount among them. A comprehensive understanding of HTML, including its various features, levels of support across different browsers, and scripting capabilities, is essential for establishing a solid foundation on which to build and enhance development skills. Mastering HTML provides developers with the necessary framework to effectively structure content, integrate multimedia, and ensure compatibility, which in turn enables the creation of robust, user-friendly web interfaces.

Learning Objectives

Discuss the history and objectives of HTML.
Describe how HTML features enable you to build flexible and interactive websites.
Explain the purpose of the HTML DOM Tree.
Describe how HTML uses APIs.
Explain how scripting can be enabled in a browser to provide extended functionality.
Outline how HTML is supported by common browsers.

PRACTICE QUIZ: HTML OVERVIEW

1. What are the building blocks of HTML called?

Chunks
Elements (CORRECT)
Attributes
Nodes

Correct: Elements are the building blocks of HTML.

2. Which tag is used to provide keywords for search engines?

<title>
<header>
<meta> (CORRECT)
<footer>

Correct: Correct. The <meta> tag stands for metadata, and provides keywords for search engines

3. Fill in the blank: In HTML5, ______________ allow you to run processing intensive tasks without blocking the user interface.

Web workers (CORRECT)
DOM accessors
Non-blocking feeds
Structural elements

Correct: Web workers provide a way to run other, processing intensive tasks without blocking the main JavaScript code or the user interface

4. How do you properly recreate the following table using HTML code?

Date	Language
2014	HTML5
1999	CSS3
1995	JavaScript

<table> <td> <th>Date</th> <th>Language</th> </td> <td> <tr>2014</tr> <tr>HTML5</tr> </td> <td> <tr>1999</tr> <tr>CSS3</tr> </td> <td> <tr>1995</tr> <tr>JavaScript</tr> </td> </table>
<table> <tc> <th>Date</th> <th>Language</th> </tc> <tc> <td>2014</td> <td>HTML5</td> </tc> <tc> <td>1999</td> <td>CSS3</td> </tc> <tc> <td>1995</td> <td>JavaScript</td> </tc> </table>
<table> <tr> <th>Date</th> <th>Language</th> </tr> <tr> <td>2014</td> <td>HTML5</td> </tr> <tr> <td>1999</td> <td>CSS3</td> </tr> <tr> <td>1995</td> <td>JavaScript</td> </tr> </table> (CORRECT)
<table> <tr> <td>Date</td> <td>Language</td> </tr> <tr> <th>2014</th> <th>HTML5</th> </tr> <tr> <th>1999</th> <th>CSS3</th> </tr> <tr> <th>1995</th> <th>JavaScript</th> </tr> </table>

Correct: Running this code will produce the expected result.

5. Which of the following statements about document.images is correct?

document.images is a DOM property
document.images returns a collection of image elements in a document
document.images is part of the HTML document API
All of the above (CORRECT)

Correct: All the options listed are true.

GRADED QUIZ: HTML OVERVIEW

1. Which of the following statements embeds an image in an HTML document?

<image>link_to_image</image>
<figure src=”image URL”>image name</figure>
<img src=”image URL”> (CORRECT)
<img href=”image URL”>image name</img>

Correct: The <img> element is used for images, with the “src” attribute defining the location of the image. Review the “Common HTML Elements” reading for further review on HTML images.

2. When defining a hyperlink (<a>), which attribute is used to specify the destination address?

Ref
target
src
href (CORRECT)

Correct: This attribute defines the destination address in a hyperlink. Review the “Common HTML Elements” reading for further review on hyperlinks.

3. Which tag CANNOT be used as a container for text? I.e. does not use both an opening <> and closing </> tag

<h1>
<br> (CORRECT)
<p>
<body>

Correct: This is used as a single line break, and therefore does not need to enclose any data within it, making it able to be used without a closing tag. Review the “Common HTML Elements” reading for more practice with common HTML tags.

4. How are comments written in HTML?

“””This is a comment”””
#This is a comment
< !– This is a comment — > (CORRECT)
/*This is a comment*/

Correct: An example of this can be found in the HTML features video.

5. Which tag is used to denote a cell of data within a table?

<tc>
<tr>
<td> (CORRECT)
<th>

Correct: This HTML tag stands for “table data” and is used to specify data within a table cell. Review the “Common HTML Elements” reading for further review on working with tables.

6. Which of the following is NOT an HTML tag?

<!DOCTYPE html> (CORRECT)
<li>
<p>
<ul>

Correct: The <!DOCTYPE> declaration is not an HTML tag. It is an instruction to the browser about what document type to expect. Review the HTML features video for a more detailed explanation of this.

7. What is the <br> tag used for?

To make text bold
To change the border
To add a line break (CORRECT)
To change the text color to brown

Correct: The <br> tag is used to add a line break to your HTML content. Review the “Common HTML Elements” reading for further review about this.

8. Which of the following denotes the least important heading?

<h10>
<h5>
<h6> (CORRECT)
<h1>

Correct: HTML headings go from <h1> to <h6>, to represent a descending order of importance. Review the “Common HTML Elements” reading for further review about headings.

9. Which tag is used to create an ordered list?

<ul>
<ol> (CORRECT)
<li>
<orderedlist>

Correct: The <ol> tag stands for ordered list, and can be used to create a list with each item denoted with an <li> tag (list item). Review the “Common HTML Elements” reading for more review with this.

10. Which of the following conditions must be met for scripting to be enabled in browsers? Select one or more options.

An embedded object is used without the sandbox attribute
The browser context has the sandboxed browsing context flag set
The user has not disabled scripting for the current browser context (CORRECT)
The browser supports scripting (CORRECT)

Correct: Scripting must be enabled in the browser. Review the HTML scripting video.

Correct: The browser in question must support scripting. Review the HTML scripting video.

CONCLUSION – HTML Overview

In conclusion, mastering the essential languages for front-end development, especially HTML, is crucial for any aspiring developer. A deep understanding of HTML’s features, support, and scripting capabilities provides a strong foundation, enabling the creation of effective and engaging web experiences. This foundational knowledge not only facilitates the development of well-structured content and seamless multimedia integration but also ensures compatibility across different browsers, ultimately leading to the design of robust and user-friendly web interfaces.

Weekly Breakdown

Next Module

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!