HTML Links and Basics - Course 3

• 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).

HTML List Tags

• <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.