INTRODUCTION – HTML Overview
Like HTML, which most students should learn, it is fundamental for front-end developers to master most functions of tools that create websites and applications. HTML or HyperText Mark-up Language is one of the most critical for front-end developers. Once a developer grasps the basic tenets behind HTML-the features, the touted browser compatibility, and the scripting bronze-them, the building blocks by which such developers can build and improve on their skills begin taking shape. Proficiency in HTML brings along the skills required in content structuring, multimedia integration, and cross-browser working-all essential factors when creating robust, user-friendly online interfaces.
Learning Outcomes:
- To apprehend the history and aims of HTML.
- To understand the methodology of HTML features in the creation of flexible, interactive websites.
- To understand the purpose and anatomy of the HTML DOM Tree.
- To learn how HTML faces the world with APIs.
- To understand how scripting in a browser can extend functionality.
- To compare HTML’s compatibility in popular browsers.
PRACTICE QUIZ: HTML OVERVIEW
1. What are the building blocks of HTML called?
- Chunks
- Elements (CORRECT)
- Attributes
- Nodes
Correct: It is the basic components in an HTML page that one will use to construct a web page.
2. Which tag is used to provide keywords for search engines?
- <title>
- <header>
- <meta> (CORRECT)
- <footer>
Correct: Correct. The <meta> tag is used for providing metadata and providing the search engines a means of indexing the web page using keywords.
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: Making online workers run computationally heavy tasks in the background without an obstruction in the JavaScript thread as well as hindrance to 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 the code above will give you the expected results.
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> tag is effective in showing pictures while the src attribute determines the place of the picture. Go through the reading on “Common HTML Elements” for a thorough understanding of HTML images.
2. When defining a hyperlink (<a>), which attribute is used to specify the destination address?
- Ref
- target
- src
- href (CORRECT)
Correct: Here in the HREF attribute is where the target address of a hyperlink is defined. See “Common HTML Elements” for further information about 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: The <br> tag is one that breaks a line, and it does not contain any data, meaning that it does not require a closing tag. Read more on common HTML tags in the “Common HTML Elements reading”.
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: For example, there is very good evidence from the video for HTML features.
5. Which tag is used to denote a cell of data within a table?
- <tc>
- <tr>
- <td> (CORRECT)
- <th>
Correct: The <td> is an abbreviation for “table data” and serves to define data in a cell. To know more about using tables see: Common HTML Elements.
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 a directive to the browser on what type of document it should anticipate. See the video on HTML features for further intuition on 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: This <br> tag is content inside the HTML in-between two lines. Know more about this tag in the reading “Common HTML Elements”.
8. Which of the following denotes the least important heading?
- <h10>
- <h5>
- <h6> (CORRECT)
- <h1>
Correct: HTML headings are of the level ranging from <h1> to <h6>, with <h1> considered the most important and <h6> the least important. Read on in the “Common HTML Elements” reading for further information about headings.
9. Which tag is used to create an ordered list?
- <ul>
- <ol> (CORRECT)
- <li>
- <orderedlist>
Correct: The <ol> tag creates an ordered list in which each item is marked with an <li> tag (list item). This can be referenced in the reading “Common HTML Elements”.
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 within the browser for script execution. Full details are available in the HTML scripting video.
Correct: It is necessary that the concerned browser enable scripting for the effective functioning of scripts. See the HTML scripting video for further details.
CONCLUSION – HTML Overview
When it comes to the convergence of front-end development, two principal languages readily come to mind: HTML and JavaScript, making it imperative for any budding or aspiring developer to comprehend the meaning of such terms as “mastery.” Indeed, the factors core to this hallmark of expertise-knowledge of HTML’s features, support, and scripting capabilities-are the basis for making effective, engaging user experiences on the web. Such knowledge equips the developer to build well-structured content, seamlessly integrated multimedia, and to trascend browser compatibility-all working towards the development of robust and user-friendly web interfaces.