HTML Basics Quiz

HTML Headings

• Six heading tags in HTML: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
• Headings are displayed in descending order of size, from largest (<h1>) to smallest (<h6>).
• Blank lines are added before and after headings for better readability and formatting.

HTML Lists

• Three types of lists: unordered, ordered, and definition lists.
• Unordered lists use <ul> and <li> tags to create list items with bullet points.
• Ordered lists use <ol> and <li> tags to create numbered list items.
• Definition lists use <dl>, <dt>, and <dd> tags to display terms and their definitions.

The <img> Tag

• The <img> tag is used to display images in HTML.
• It's an empty tag, meaning it only contains attributes and doesn't have a closing tag.
• The src attribute specifies the URL of the image to be displayed.

Image Attributes

• The alt attribute provides alternative text for the image, which is displayed if the image cannot be loaded.
• The width and height attributes define the size of the image in pixels.
• The title attribute adds a tooltip to the image that appears when the mouse hovers over it.
• The vspace and hspace attributes control the vertical and horizontal spacing between the image and surrounding content.

The Marquee Tag

• The <marquee> tag creates a scrolling text effect with a fixed background color set by the bgcolor attribute.
• The direction attribute determines the scrolling direction, with options: left, right, up, down (default is left).
• The behavior attribute controls the scrolling behavior:
  • scroll (default): continuous scrolling.
  • slide: content slides to the edge and stops.
  • alternate: content bounces back and forth.
• The loop attribute sets the number of times the marquee scrolls, with infinite being the default.
• The scrollamount attribute controls the distance of each scroll movement in pixels.
• The scrolldelay attribute defines the delay between each scroll movement in milliseconds.

HTML Tables

• Tables organize data into rows and columns, with cells (represented by <TD>) holding the data.
• Table structure is defined by the <TABLE>, <TR>, and <TD> tags.

Table Attributes

• The WIDTH attribute sets the width of the table or a cell in pixels or as a percentage of the container.
• The HEIGHT attribute sets the height of the table or a cell in pixels or as a percentage.
• The BGCOLOR attribute defines the background color for the table or cell.
• The BACKGROUND attribute sets a tiled background image for the table or cell.

Cell Attributes

• COLSPAN: makes a cell span across multiple columns.
• ROWSPAN: makes a cell span across multiple rows.
• ALIGN: aligns the text within the cell: LEFT, RIGHT, or CENTER.
• VALIGN: aligns the text vertically within the cell: TOP, BOTTOM, or MIDDLE.

HTML Table - Colspan and Rowspan

• COLSPAN stretches a cell horizontally to cover a specified number of columns.
• ROWSPAN stretches a cell vertically to cover a specified number of rows.

Using Tables for Page Layout

• Tables were traditionally used for page layout, creating newspaper-like column designs or sectioning content.
• Techniques included nesting tables, setting background colors, adding cell padding, and using row-spanning cells.

HTML Frames

• Frames divide the browser window into separate regions, each displaying content from a different page.
• Frame structure is defined by the <FRAMESET> and <FRAME> tags.

<FRAMESET> Attributes

• COLS: defines the column arrangement of the frames, using pixel values or percentages.
• ROWS: defines the row arrangement of the frames, using pixel values.

The <FRAME> Tag

• The <FRAME> tag specifies the page to be displayed in a particular frame using the SRC attribute.

Hidden Fields

• Hidden fields are not displayed in the form but still send information to the server.
• They are defined using <INPUT TYPE=HIDDEN NAME=text VALUE=value>.

Radio Buttons

• Radio buttons allow users to select one option from a group.
• They are defined using <INPUT TYPE=RADIO NAME=field VALUE=value CHECKED>.
• The NAME attribute identifies the field that the button belongs to, and VALUE specifies the value sent to the server upon selection.
• CHECKED makes the radio button the default choice.

Check Boxes

• Check boxes let users select one or more options from a list.
• They are defined using <INPUT TYPE=CHECKBOX NAME=field VALUE=value CHECKED>.
• The NAME attribute identifies the field, VALUE sets the value sent to the server, and CHECKED makes the box checked by default.

Text Areas

• Text areas provide a multi-line input field for user comments or text.
• They are defined using <TEXTAREA NAME=field COLS=value ROWS=value WRAP=option>.
• The NAME attribute identifies the field.
• The COLS attribute sets the width of the text area in characters.
• The ROWS attribute specifies the number of rows in the text area.
• The WRAP attribute controls text wrapping: OFF disables it, SOFT enables it.

Selection Lists

• Selection lists (or dropdown menus) allow users to choose an option from a list.
• They are defined using <SELECT NAME=field SIZE=value MULTIPLE>.
• The NAME attribute identifies the field.
• The SIZE attribute determines the number of visible options in the list.
• The MULTIPLE attribute allows users to select multiple options using Ctrl or Shift keys.
• Individual options within selection lists are specified using <OPTION> tags.

Form Buttons

• Form buttons trigger actions when clicked by the user.
• They are defined using <INPUT TYPE=text VALUE="text">.
• The VALUE attribute defines the button's label.
• The TYPE attribute determines the action:
  • SUBMIT: submits the form data to the server.
  • RESET: clears all form fields.
  • BUTTON: executes a specific action usually implemented by JavaScript.

Test your knowledge of HTML headings, lists, and image tags with this quiz. Learn about the different types of headings, list formats, and how to properly use the <img> tag and attributes. Perfect for beginners looking to solidify their understanding of HTML.