HTML Links and Basics

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

What attribute is used to specify the URL of an image in HTML?

image

link

src (correct)

href

Which CSS property is used to make an image float next to text?

display

align

float (correct)

position

Which list type is created using the
tag?

Ordered list

Definition list

Unordered list (correct)

Numbered list

What is the default bullet type for an unordered list in HTML?

Disc Signup and view all the answers

Which attribute can be used to provide alternative text for an image?

alt Signup and view all the answers

How can you specify the size of an image in HTML?

width and height attributes Signup and view all the answers

What HTML tag is used to start a definition list?

<dl> Signup and view all the answers

Which attribute can be used with the
tag to specify the type of bullet?

type Signup and view all the answers

What tag is used to create an ordered HTML list?

<ol> Signup and view all the answers

Which type attribute for an ordered list starts the numbering with Roman numerals?

i Signup and view all the answers

What does the start attribute in an ordered list do?

It specifies the starting point of numbering. Signup and view all the answers

Which of the following is NOT a valid option for the type attribute in an ordered list?

Special Symbols Signup and view all the answers

Which tag is used to define a description list in HTML?

<dl> Signup and view all the answers

What can you NOT use to control the starting point of an ordered list?

Upper-Case Letters start at C. Signup and view all the answers

What is the representation of 1 in the ordered list by default?

1 Signup and view all the answers

In HTML, which list provides a term and its description?

Description List Signup and view all the answers

Which HTML tag is used to create a single-line text input control?

<input> Signup and view all the answers

What attribute specifies the maximum number of characters a user can enter into a text box?

maxlength Signup and view all the answers

Which of the following is NOT a type of text input control mentioned?

Toggle button input Signup and view all the answers

For password input controls, which attribute is specifically used to mask characters?

type Signup and view all the answers

What is the primary use of multi-line text input controls?

For detailed user input over multiple sentences Signup and view all the answers

Which attribute allows specifying the width of the text input control in terms of characters?

size Signup and view all the answers

Which of the following controls is most suitable for collecting a user's first name?

Single-line text input Signup and view all the answers

What does the `dt` tag represent in a description list?

Represents a term or name in the list Signup and view all the answers

What does the 'name' attribute do in a text input control?

Assigns a label to the control for server recognition Signup and view all the answers

Which attribute is used to set the space between the actual content and the cell border in a table?

cellpadding Signup and view all the answers

What is the purpose of the `th` tag in an HTML table?

To define a table header, which is bold and centered Signup and view all the answers

How do you merge two or more columns in a table?

Using the colspan attribute Signup and view all the answers

Which tag is used to define a data cell in an HTML table?

td Signup and view all the answers

What does the `cellspacing` attribute control in a table?

Space between the borders of table cells Signup and view all the answers

Which attribute would you use to set a background color for an entire table?

bgcolor Signup and view all the answers

What is the default alignment of text inside a `th` element?

Center-aligned Signup and view all the answers

What is the main purpose of the href attribute in an HTML link?

To indicate the link's destination Signup and view all the answers

Which attribute should you use to specify the URL of an image in an HTML link?

src Signup and view all the answers

What happens to the mouse cursor when it hovers over a link?

It changes to a hand icon Signup and view all the answers

What does the alt attribute in an image tag do?

Provides alternative text if the image cannot be displayed Signup and view all the answers

Which attributes are used to set the colors of links in HTML?

link, alink, and vlink Signup and view all the answers

What does a border thickness of 0 mean when applied to an image in HTML?

The image will have no border Signup and view all the answers

When using an image as a link, which of the following correctly nests the tags?

<a><img></a> Signup and view all the answers

How can you specify that a link should open in a new window?

Using the target attribute with '_blank' Signup and view all the answers

Which attribute is used to allow a user to select multiple items from a menu?

multiple Signup and view all the answers

What does the 'value' attribute specify in a select box?

The value used when an option is selected Signup and view all the answers

In which scenario is the 'accept' attribute used in a file upload box?

To specify valid file types for upload Signup and view all the answers

Which button type automatically resets all form controls to their initial values?

reset Signup and view all the answers

What functionality does the button type 'submit' provide?

Submits the form data to the server Signup and view all the answers

How is a file upload box represented in HTML?

<input type='file'> Signup and view all the answers

What is the purpose of the 'name' attribute in form controls?

To send the control's value to the server Signup and view all the answers

What is a key feature of the 'button' type in HTML?

It triggers a client-side script Signup and view all the answers

Signup and view all the answers

Study Notes

Introduction to Web

Course: 3 - HTML - (II)
Instructor: Dr. Heba Mamdouh
University: Minia University
Department: Computer Science

Agenda

HTML Links
HTML Images
HTML Lists
HTML Tables
HTML Forms

HTML Links

HTML links are hyperlinks.
Clicking a link allows jumping to another document.
Mouse arrow changes to a hand when hovering over a link.
Links can be text, images, or other HTML elements.
Syntax: <a href="url">Link text</a>
href attribute is crucial, specifying the link's destination.
Link text is the visible portion for the reader.
Example: <a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

Setting Link Colors

Colors for links (link, alink, vlink) can be set using the <body> tag's attributes.
Example: <body alink="#54A250" link="#040404" vlink="#F40633">

HTML Links - Target Attribute

The target attribute controls where the linked document opens:
- _blank: New window/tab
- _self: Same window/tab (default)
- _parent: Parent frame
- _top: Full body of the window
- framename: Named frame

HTML Links - Image as Link

Use an <img> tag within an <a> tag to make an image a link.
Example: <a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial“ style="width:42px;height:42px;"> </a>

Link to an Email Address

Use mailto: in the href attribute to create a link for email.
Example: <a href="mailto:[email protected]">Send email</a>

Button as a Link

The <button> tag.
onclick attribute redirects the page to a given location.
Example: <button onclick="document.location='default.asp'">HTML Tutorial</button>

Link Titles

The title attribute provides extra information displayed as a tooltip.
Example: <a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section"> Visit our HTML Tutorial </a>

HTML Links - Create a Bookmark

HTML bookmarks enable navigation to specific parts of a page.
Create a bookmark using the id attribute in the relevant element.
Add a link to the bookmark using the href attribute with #idName.
Example: First, create a bookmark: <h2 id="C4">Chapter 4</h2> Then, add a link to the bookmark: <a href="#C4">Jump to Chapter 4</a>

HTML Images

Images are defined using the <img> tag.
The <img> tag is empty (no closing tag).
Attributes:
- src: Image URL.
- alt: Alternative text (essential if the image fails to load).
- width, height: Dimensions (pixels or percentage).
- style: CSS width and height (recommended).

Set Image Location

If images are in a folder, include the folder name in the src attribute.

Set Image Border

Use the border attribute to specify a border's thickness (pixels).

Set Image Alignment

Use the align attribute to set image alignment (left, right, center).

Image Floating

Use CSS float property to position images relative to text. (left, right).

<ul>: Unordered list (bullets)
<ol>: Ordered list (numbers)
<li>: List item
<dl>: Definition list
<dt>: Term
<dd>: Description

HTML Tables

Tables are constructed using <table> tag.
Rows are defined using <tr> tag.
Data cells are defined by <td> tag.
<td> stands for "table data."
Tables can contain text, images, other tables, and more.

Table Heading

Table headings are created using <th> tag.
Typically the header row is marked as a heading.

Cellpadding and Cellspacing Attributes

cellspacing: Space between table cells.
cellpadding: Space between cell borders and content.

Colspan and Rowspan Attributes

colspan: Merges multiple columns into a single cell.
rowspan: Merges multiple rows into a single cell.

Tables Backgrounds

bgcolor: Sets background color for the entire table or a single cell.
background: Sets background image for the entire table or a single cell.
bordercolor: Sets the color of the table border.

Table Height and Width

width, height attributes are used to set table width or height.
Dimensions can be in pixels or as a percentage of available screen area.

Nested Tables

Use a <table> tag inside another <table> tag for nesting.
This allows more complex table structures.

HTML Forms

Used to collect user data, often sent to a server.
Data is usually submitted using a form method and action, to a specific file.
action specifies where to send the data.
method specifies how the data is sent.
- GET method
- POST method

Form Attributes

action: Specifies the URL for the server-side script that processes the form data.
method: Specifies the HTTP method used to send the form data. POST (secure and hides data well) or GET.
target: Specifies where the server's response will be displayed. (blank, self etc)
autocomplete: Determines whether the browser should automatically complete form fields.

HTML Form Controls

Different types of controls for collecting user data within a form;
- Text Inputs (for single line input)
- Password Inputs (masques input)
- Multiline Text Inputs (<textarea>)
- Checkboxes (for multiple selections)
- Radio Buttons (for single selection)
- Select Boxes (dropdown lists of pre-defined items)
- File Inputs (for file uploads)
- Buttons (submit/reset/custom buttons)

Text Input Controls

Single-line text input (for names, search, etc).
Password input (masks characters for security).
Multi-line text input (<textarea>) (for descriptions, paragraphs, etc)

Single-line Text Input - Attributes

type="text": Standard text field.
name: Used to identify the field on the server side.
value: Initial value displayed in the field.
size: Width of the field.
maxlength: Maximum number of characters allowed.

Password Input Controls - Attributes

Similar attributes to single-line text (size, maxlength, etc)

Multiple-Line Text Input Controls – Attributes

rows, cols: Dimensions (number of rows/columns).

Various Form Controls (Checkboxes, Radio Buttons, Select Boxes, and File Upload Boxes)

Detailed explanations and attributes unique to each input type. Examples for each.

Button Controls

There are various types of button controls:
- submit: Submits the form data automatically to the server.
- reset: Resets all form values to their initial state.
- button: Triggers a client-side script when clicked.
- image: Acts like a button but allows use of an image as the button's graphic.

Studying That Suits You

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

Description

This quiz focuses on HTML links and their properties, including syntax, colors, and target attributes. It is designed for students of the HTML section in the Introduction to Web course. Test your knowledge on how to create and manage hyperlinks in HTML effectively.

HTML Links and Basics - Course 3

Choose a study mode