Week 3 Topic 1: Introduction to the web and HTML

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to Lesson

Podcast

Play an AI-generated podcast conversation about this lesson
Download our mobile app to listen on the go
Get App

Questions and Answers

What is the primary function of HTML in web development?

  • To add interactivity to webpages using JavaScript.
  • To style webpages using cascading style sheets.
  • To define the structure and content of webpages. (correct)
  • To manage server-side operations and database interactions.

Which of the following best describes the relationship between the Internet and the World Wide Web?

  • The Internet and the World Wide Web are the same thing.
  • The Internet is the underlying infrastructure, while the Web is a collection of information accessed via it. (correct)
  • The Web is a network infrastructure, while the Internet is a collection of information.
  • The Internet is a collection of information accessed via the Web.

Who is credited with inventing the World Wide Web and the HTML protocol?

  • Tim Berners-Lee (correct)
  • Bill Gates
  • Mark Zuckerberg
  • Steve Jobs

In a basic HTML structure, which tag contains metadata about the HTML document?

<p><code>&lt;head&gt;</code> (A)</p> Signup and view all the answers

Which of the following is a 'void element' in HTML?

<p><code>&lt;br&gt;</code> (D)</p> Signup and view all the answers

What is the correct HTML for creating a hyperlink?

<p><code>&lt;a href=&quot;http://example.com&quot;&gt;Example</code> (C)</p> Signup and view all the answers

How can you ensure that special characters, such as < and > are displayed correctly in HTML?

<p>By using HTML entities like <code>&amp;lt;</code> for <code>&lt;</code> and <code>&amp;gt;</code> for <code>&gt;</code>. (A)</p> Signup and view all the answers

Which HTML tag is used to define a table row?

<p><code>&lt;tr&gt;</code> (B)</p> Signup and view all the answers

In HTML, what is the purpose of the alt attribute in the <img> tag?

<p>To provide alternative text for the image if it cannot be displayed. (C)</p> Signup and view all the answers

What is the purpose of comments in HTML code?

<p>To add notes and explanations for developers without affecting the displayed content. (C)</p> Signup and view all the answers

Which HTML element is typically used for the main content area of a webpage?

<p><code>&lt;article&gt;</code> (C)</p> Signup and view all the answers

What is the purpose of the href attribute in the <a> tag?

<p>To indicate the destination URL of the link. (B)</p> Signup and view all the answers

Which of the following is the correct way to create an ordered list in HTML?

<p><code>&lt;ol&gt;</code> (B)</p> Signup and view all the answers

What is the significance of the DOCTYPE declaration in an HTML document?

<p>It instructs the browser about the HTML version being used. (C)</p> Signup and view all the answers

When should relative URLs be used instead of absolute URLs in HTML?

<p>When linking to resources within the same website. (D)</p> Signup and view all the answers

How do you create an internal jump to a specific section within an HTML page?

<p>Using the <code>&lt;a&gt;</code> tag with <code>href</code> set to <code>#sectionID</code>. (C)</p> Signup and view all the answers

You need to display the following HTML code snippet on a webpage: <p>This is a paragraph.</p>. How would you encode this to ensure it displays correctly?

<p><code>&amp;lt;p&amp;gt;This is a paragraph.&amp;lt;/p&amp;gt;</code> (A)</p> Signup and view all the answers

In the context of webpage layout, what is the primary purpose of a website footer?

<p>To contain copyright information, links to privacy policies, and contact information. (D)</p> Signup and view all the answers

Which attribute is used to define inline styles for an HTML element?

<p>style (A)</p> Signup and view all the answers

Suppose you want to link to a specific section on another page of your website. The other page is named about.html and the section has the id team. What is the correct HTML to achieve this?

<p><code>&lt;a href=&quot;about.html#team&quot;&gt;Our Team&lt;/a&gt;</code> (B)</p> Signup and view all the answers

What is the purpose of the <meta> tag in HTML?

<p>To provide metadata about the HTML document. (C)</p> Signup and view all the answers

Which of the following is NOT a typical component of a webpage layout?

<p>Kernel (C)</p> Signup and view all the answers

What is the correct HTML to insert an image?

<p><code>&lt;img src=&quot;image.gif&quot; alt=&quot;MyImage&quot;&gt;</code> (C)</p> Signup and view all the answers

What does the term 'DOM' refer to in the context of HTML?

<p>Document Object Model (C)</p> Signup and view all the answers

How do you create a hyperlink that opens in a new tab or window?

<p><code>&lt;a href=&quot;url&quot; target=&quot;_blank&quot;&gt;Link&lt;/a&gt;</code> (A)</p> Signup and view all the answers

What is the appropriate use-case for the HTML <aside> element?

<p>To mark content that is tangentially related to the main content. (D)</p> Signup and view all the answers

Which HTML element is used to represent a thematic break, such as a scene change, in content?

<p><code>&lt;hr&gt;</code> (C)</p> Signup and view all the answers

You need to define the character set for your HTML5 document. Which <meta> tag is correct?

<p><code>&lt;meta charset=&quot;UTF-8&quot;&gt;</code> (B)</p> Signup and view all the answers

What is the primary advantage of using HTML5 over its predecessors in terms of multimedia content?

<p>HTML5 provides native support for video and audio elements, reducing reliance on plugins. (B)</p> Signup and view all the answers

Which of the following is a valid use of the colspan attribute in an HTML table?

<p>To specify the number of columns a cell should span. (D)</p> Signup and view all the answers

How can you link to a downloadable file (e.g., a PDF document) using HTML?

<p><code>&lt;a href=&quot;file.pdf&quot; download&gt;Download PDF&lt;/a&gt;</code> (D)</p> Signup and view all the answers

Which of the following is the most semantically correct way to mark up a navigation section in HTML5?

<p><code>&lt;nav&gt; ... &lt;/nav&gt;</code> (C)</p> Signup and view all the answers

In HTML, what is the correct way to create a text input field?

<p><code>&lt;input type=&quot;text&quot;&gt;</code> (D)</p> Signup and view all the answers

What is the purpose of the viewport meta tag?

<p>To define the visible area of the webpage for the user. (B)</p> Signup and view all the answers

What is the key benefit of using semantic HTML elements like <article>, <aside>, <nav>, and <footer>?

<p>They provide a more structured HTML document with clear meaning, improving accessibility and SEO. (A)</p> Signup and view all the answers

Consider a scenario where you want to create a custom HTML element, such as <my-element>. What is the correct approach to ensure it is rendered properly by modern browsers?

<p>You must define the element using JavaScript with <code>document.createElement('my-element')</code> and apply CSS to style it. (B)</p> Signup and view all the answers

You are tasked with optimizing a webpage for accessibility. Which of the following techniques provides the most significant improvement for users with screen readers?

<p>Ensuring all images have descriptive <code>alt</code> attributes and using semantic HTML elements. (A)</p> Signup and view all the answers

What is the primary purpose of ARIA attributes in HTML?

<p>To enhance accessibility by providing semantic information about elements to assistive technologies. (B)</p> Signup and view all the answers

Imagine you have a complex web application where state management is crucial. Which of the following approaches would be the MOST efficient and semantically correct for storing and manipulating application states directly within HTML, without relying on external JavaScript frameworks or libraries?

<p>The premise of the question is flawed; storing and manipulating complex application states directly within HTML without external JavaScript frameworks is inherently anti-pattern and technically unfeasible due to security restrictions and limitations of the HTML specification. (B)</p> Signup and view all the answers

Flashcards

World Wide Web (WWW)

An information system where documents are identified by URLs, interlinked by hypertext, and accessible over the internet.

Internet

A global network of networks, the underlying infrastructure for the web.

HTML

A standardised language for creating websites, using tags to format text and structure content.

HTML Tags

Special codes embedded in HTML files to communicate style and formatting.

Signup and view all the flashcards

HTML 5

The current standard of HTML, aiming to reduce reliance on external plugins and improve browser compatibility.

Signup and view all the flashcards

HTML Document

Text files containing embedded HTML markup tags that define the structure and content of a webpage.

Signup and view all the flashcards

Doctype

Version of HTML being used in the document.

Signup and view all the flashcards

Head (HTML)

Section containing metadata about the HTML document, such as title and character set.

Signup and view all the flashcards

Body (HTML)

Section containing the displayable content of a webpage.

Signup and view all the flashcards

HTML Attributes

Provide extra information about a tag, specified within the opening tag.

Signup and view all the flashcards

Void Elements

HTML elements that do not have closing tags because they don't contain any content.

Signup and view all the flashcards

    Tag

HTML tag used to create an unordered list, typically displayed with bullet points.

Signup and view all the flashcards

    Tag

HTML tag used to create an ordered list, typically displayed with numbers.

Signup and view all the flashcards

  • Tag

    • HTML tag used to define an individual item within an ordered () or unordered () list.

    Signup and view all the flashcards

    HTML Entities

    Characters that have special meanings in HTML, represented by entity names or ASCII numbers (e.g., < for <).

    Signup and view all the flashcards

    Tag

    HTML tag used to create a table in a webpage.

    Signup and view all the flashcards

    Tag

    HTML tag used to define a row in a table.

    Signup and view all the flashcards

    Tag

    HTML tag used to define a standard data cell in a table.

    Signup and view all the flashcards

    		Tag

    HTML tag used to define a header cell in a table, often displayed in bold.

    Signup and view all the flashcards

    tag

    Element giving a summary of the table’s contents.

    Signup and view all the flashcards

    Hyperlink

    A link that a user can select to navigate to another page or resource.

    Signup and view all the flashcards

    Tag

    HTML tag used to create a hyperlink.

    Signup and view all the flashcards

    href Attribute

    The attribute of the tag that specifies the URL the link goes to.

    Signup and view all the flashcards

    Absolute URL

    A URL that is a complete address.

    Signup and view all the flashcards

    Relative URL

    A URL that is relative to the current page's location.

    Signup and view all the flashcards

    Internal Jump

    A link that jumps to a specific section within the same page.

    Signup and view all the flashcards

    Tag

    HTML tag is used to insert an image in a webpage.

    Signup and view all the flashcards

    src Attribute

    The attribute of the tag that specifies the URL of the image file.

    Signup and view all the flashcards

    The tag used to insert a comment to an HTML document.

    Signup and view all the flashcards

    Header (Webpage)

    The top section of webpage; usually contains a logo, a call to action and contact information

    Signup and view all the flashcards

    Navigation Bar

    The section that contains links to other parts of the website, often at the top or left of the page.

    Signup and view all the flashcards

    Content Area

    The main area of a webpage where the primary content is displayed.

    Signup and view all the flashcards

    Footer (Webpage)

    An area at the bottom of every page, typically containing copyright, links and contact information

    Signup and view all the flashcards

    Study Notes

    • Structured Query Language (SQL) queries are created to extract data from a database
    • Views are created to save queries

    Introduction to HTML

    • Hypertext Markup Language (HTML) is key to web development, found in almost every webpage
    • The World Wide Web (WWW) is an information system where documents and web resources are identified by URLs, interlinked by hypertext, and accessible via the internet
    • The internet is a global network of networks
    • The web is a collection of information accessed via the internet, served atop the internet's infrastructure
    • Tim Berners-Lee invented the first web browser and the HTML protocol around 1990 while working at CERN, opening up the WWW

    Basic Steps of Web Development

    • Develop a website with tools
    • Deploy the website on a web server
    • Transmit data via the internet (or an intranet)
    • View the website via web browsers/apps

    Hypertext Markup Language (HTML)

    • HTML: A standardized language for creating websites
    • Uses plain text files containing ASCII characters
    • Uses tags in plain text files to communicate style and formatting
    • The World Wide Web Consortium (W3C) oversees the evolving language
    • The current HTML standard is HTML 5
    • HTML 5 aims to reduce dependence on external add-on programs and improve standardization among web browsers

    HTML Files

    • HTML document: A text file with embedded HTML markup tags
    • HTML markup tags demarcate an element, e.g., <elementname> content
    • Tags are surrounded by < >
    • Tags are case insensitive
    • Tags separate the elements of a HTML document
    • Most tags have a starting tag (e.g., <p>) and an ending tag (e.g., </p>), with the ending tag using a forward slash
    • HTML is built on the Document Object Model (DOM)
    • A webpage consists of elements that indicate the webpage's structure to the browser
    • The child elements of <html> are <head> and <body>
    • The child elements of <head> are <title> and <meta>

    Using HTML Tags

    • A webpage’s source code contains text marked up with HTML tags that instruct a browser how to display that content
    • A well-formed document has three parts:
      • Doctype: The version of HTML
      • Head: Metadata
      • Body: Displayable content

    HTML Tags

    • HTML tags can also have attributes that provide extra information
    • The format for an attribute is <tag attribute="value">content
    • Attributes should always have quotes around the value and are always in the opening tag, never in the closing tag
    • The id refers to a specific tag on the whole page, and you should never have multiple elements using the same id on the same page

    Void Elements

    • Some tags do not have closing tags because they do not have any content
    • void elements: <br>, <img>, <meta>
    • Self-closing syntax can be used optionally (<br />) only on void elements

    HTML Lists

    • Two list tags for creating lists in HTML:
      • <ul>: unordered list (dot points)
      • <ol>: ordered list (numbered)
    • These tags only contain <li> list item tags
    • Lists can also be nested, and the numbers can be changed to letters

    HTML Entities

    • Special characters need to be avoided because they have specific meanings
    • HTML entities are written as &entity_name OR &#ascii_number;

    Table Tags

    • Tables can contain anything, including text, graphics, videos, and nested tables
    • <caption>: Gives a summary of the table’s contents
    • <th>: Column or row headings
    • <tr>: The row may contain <th> and <td> cell elements
    • <td>: Shows data in each cell
    • Hyperlink: A link that a user can select to get to another page, typically uses the <a> tag
    • The href attribute indicates the URL
    • A URL can be absolute (a full URL) or relative
    • Relative URLs:
      • /mypage.html: mypage.html in the web root
      • ../mypage.html: mypage.html in the parent directory
      • mypage.html: mypage.html in the current directory
    • The browser converts relative URLs to absolute URLs when the page is loaded

    Internal Jumps

    • Jump to a particular webpage section
    • Include an element id, e.g., <h3 id="sec4">Section 4
    • Create a hyperlink with a # and the id, e.g., <a href="#sec4">Jump to Section 4
    • Jump to specific sections on another page by including the URL and the id number, e.g., <a href="someOtherPage.html#sec4">Section 4 — different page

    Adding Images

    • Use the <img> tag to insert an image
    • src attribute is the URL of the image file
    • The <img> tag is a void element, so it has no closing tag
    • Supports height and width attributes (in pixels)

    Comments

    • The <!--...--> element is used to add a comment to an HTML document
    • HTML comments are visible to anyone that views the page source code, but are not visible when the HTML document is rendered by a browser

    Webpage Layout

    • Predictable website layout includes:
      • Header: Top section with logo, call to action, and contact information
      • Navigation bar: Generally on the left or top of the page
      • Content area: Main area for content display
      • Footer: Bottom area with copyright notice, privacy policy link, sitemap, logo, contact information, social media icons, and an email sign-up form
    • Before coding, draw a plan to visualize the needed elements

    Studying That Suits You

    Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

    Quiz Team

    More Like This

    HTML Elements and Web Development Quiz
    3 questions

    HTML Elements and Web Development Quiz

    DelightedNobility avatar
    DelightedNobility
    Mastering HTML: Web Development Fundamentals
    20 questions

    Mastering HTML: Web Development Fundamentals

    EnviousYew avatar
    EnviousYew
    HTML Web Development Course and Project Ideas
    12 questions

    HTML Web Development Course and Project Ideas

    BrighterShakuhachi avatar
    BrighterShakuhachi
    WWW Programming
    43 questions

    WWW Programming

    HandierJadeite2200 avatar
    HandierJadeite2200
    Use Quizgecko on...
    Open
    Browser
    Browser