Lecture 7: Introduction to HTML

Questions and Answers

What does HTML stand for?

Hypertext Markup Language

What are HTML markup tags?

Special codes that tell the web browser how to display the HTML document

Which of the following is NOT a type of file path for web documents?

Document-relative paths

Relative paths

Script-relative paths (correct)

Absolute paths

XHTML can be used as a replacement for HTML.

True Signup and view all the answers

What is the purpose of a DOCTYPE declaration in an XHTML document?

To specify the document type and version of the markup language being used Signup and view all the answers

What is a web browser?

An application that can interpret HTML and display the document Signup and view all the answers

Which of the following is an example of an HTML tag?

All of the above Signup and view all the answers

What is the main function of JavaScript in web pages?

To add interactivity and dynamic content Signup and view all the answers

A ______ is a unique identifier for an HTML element.

id attribute Signup and view all the answers

Match the following HTML elements with their descriptions:

= Defines a paragraph <h1> = Defines the largest heading <img> = Defines an image <a> = Defines a hyperlink Signup and view all the answers

What is a URL?

Uniform Resource Locator Signup and view all the answers

What are Cascading Style Sheets (CSS) used for?

Web page design and layout Signup and view all the answers

Study Notes

Learning Objectives

Understand the basic structure of an HTML document.
Learn to use HTML tags effectively.
Differentiate between absolute and relative file paths in web development.
Embed images effectively within a web page.

Key Terms

Web Pages: Documents written in HTML.
HTML: Hypertext Markup Language, used for structuring web content.
HTML Markup Tags: Codes that instruct web browsers on how to display the content.
Web Browser: Software application that interprets and displays HTML documents.
HTML Document: Created using text editors or web page editors like Adobe Dreamweaver.

File and Resource Addressing

URL: Uniform Resource Locator, the standardized address for web resources (e.g., http://www.schoolname.edu/departments/compsci/index.html).
Absolute Path: Full URL directing to a file on a different website.
Document-Relative Path: Path relative to the current document's location.
Site Root-Relative Path: Path starting from the root directory of the site (e.g., /products/coffee/french-roast.html).

XHTML

XHTML: Extensible Hypertext Markup Language, more strict than HTML.
Requires all elements to be properly closed and in lowercase.
Must have a DOCTYPE declaration and designate the XHTML namespace.

HTML5 Features

Newest standard for HTML, fully backward compatible.
Includes video and audio tags, content-specific tags (e.g., header, footer), and enhanced form elements.
Introduces the <canvas> element for dynamic graphics and game development.
Allows local data storage on users' devices, surpassing cookies' limitations.

Markup Basics

Tags: Formatted using angle brackets, with start (e.g., ) and end tags (e.g., ).
Attributes: Properties of elements (e.g., id attribute in id="value").
Nesting: HTML elements can contain other elements to create complex structures.

HTML Document Structure

Basic structure includes <html>, <head>, and <body> tags.
Structure is consistent across XHTML and HTML with additions like DOCTYPE declaration in XHTML.

Lists and Formatting

Ordered and Unordered Lists: Use <ol> and <ul> tags respectively, with individual items in <li> tags.
Text Formatting: Use  for bold and  for italics.

Images and Links

Image Tag: Uses <img src="url" alt="description"> syntax; no closing tag.
Link Tag: Anchors link using <a href="url">link text</a> format.

Tables

Basic structure involves <table>, <tr> for rows, and <td> (table data) within those rows.

Path Construction Examples

For linking to files, paths are created based on the location of the source document.
Document-relative paths simplify linking, using filenames or variations as necessary based on the document's location.

HTML5 Improvements

Flexibility in adding attributes: quotation marks are not mandatory around attribute values.
The presence of boolean attributes signifies a true value.
Closing tags are not required for certain tags without content (e.g.,   and <img>).

Description

This quiz covers the fundamental concepts of HTML, including the basic structure of an HTML document, the usage of HTML tags, and the construction of file paths. Additionally, it explores how to embed images within web pages. Perfect for students looking to understand web development basics.