Lesson 3 by

Key Terms

2019-10-15 10:50:56 UTC

automatic validation - The browser checks the data the user inputs
client-side validation - Input data is validated before submission to the server
server-side validation - the server validates information received from an input form
form input - The information the user enters into fields in a web or client application form
ordered list - Orders list entries using numbers
placeholder text - specifies a short hint that describes the expected value of an input field
semantic markup - Gives better meaning or definition to tags so they make more sense
table - A HTML table is used to organise and display information in a grid format, rows and columns
unordered list - Displays list entries in a bulleted list
definition list - Displays items with definitions below them.
validation - The process of verifying that information entered or captured in a form is in the correct format and usable before sensing the data to the server
web form - a web page that provides input fields for a user to enter data, which is sent to a server for processing

Key attributes

2019-10-15 10:52:10 UTC

autofocus - Specifies that a control is to be focused or selected when the page loads
email - requires the user to enter an email address
global - global attributes can be used with any HTML element
pattern - provides a format for the input field; the input element's value is checked against the expression
required - requires an input field to be filled out before submitting the form

Key elements

2019-10-15 10:52:17 UTC

defines an area for contact information for a page or section
Individual content, not necessarily related to the main page content
Defines content that's separate from but related to the main page content
Contains additional details pertinent to text around it; creates an interactive widget a user can display or hide
enables you to present the user with a drop-down list of options to select from
Contains information below the page. Often used for contact details or smallprint
Introductory content or navigation links at the top of the document or a section
Groups headings and subheadings
Presents a list of commands, usually with buttons
Defines a block of navigation links
Represents stand-alone section with less specific elements
Defines a visible heading for a details element, user can click to display or hide information
defines a possible line break, when a word is very long or you think the browser will break the line at the wrong place, you can use this element to break the word or line appropriately

HTML Table

chris320 — 2019-10-15 10:52:41 UTC

A HTML table contains rows and columns, and displays data in a grid.

Understanding Semantic HTML

2019-10-15 10:52:55 UTC

New feature of HTML5 = Semantic Markup

Semantic Markup = gives meaning, or definition to several tags so they make more sense to humans.

class and id are global attributes = can be used in any HTML element.

div element needs a class or id attribute.
Use div to wrap and position multiple section that are not related to each other.
Use div to add a drop shadow or border around an item.

chris320 — 2019-10-15 10:53:17 UTC

HTML5 intro- duces some new elements for both tables and lists, but most of the tags and concepts are the same as previous specifications

HTML Table Structure

chris320 — 2019-10-15 10:53:38 UTC

HTML table begins with the tag. Rows are marked by the tag, column headers use the

tag, and cells are defined by the

tag.

HTML5 Tags for input and validation

alex_newton — 2019-10-15 10:53:52 UTC

Validation and input tags are used for forms in HTML5. They allow developers to create a specific set of rules for form input.
Forms can be used for several reasons on websites such as logging in, capturing email addresses or signing up to newsletters.

Example of HTML Table Code

chris320 — 2019-10-15 10:54:42 UTC

Quarter	Total Sales
Q1	$4,349
Q2	$2,984
Q3	$3,570
Q4	$7,215

Using Tags to Add Structure to HTML Doc

2019-10-15 10:56:24 UTC

New HTML5 organisational tags = header, footer, section, nav, article and aside.

chris320 — 2019-10-15 10:56:28 UTC

you can use the

tag to add a caption above or below the table.

Applying Style To Tables

chris320 — 2019-10-15 10:56:56 UTC

To apply inline styles using HTML rather than CSS, use the

tag to apply styles to an entire column. (You’ll learn about inline formatting shortly.) The tag groups columns within a table so you can apply formatting to the group rather than just a column.

style="background-color:#EEE8AA;">

Organisational Elements

2019-10-15 10:57:30 UTC

Header & Footer Elements

2019-10-15 10:58:24 UTC

Header element = defines a header for a document, section or article.

chris320 — 2019-10-15 10:58:55 UTC

Changes from HTML 4.01 to HTML 5 to Tables

chris320 — 2019-10-15 10:59:42 UTC

he cell- padding, cellspacing, frame, rules, summary, and/or width elements has been deprecated in HTML5

The Section Element

2019-10-15 11:00:19 UTC

Section element = defines a section in a document, like a chapter, part of a thesis, parts of the page that are distinct from each other.

How To Create An Ordered List

chris320 — 2019-10-15 11:01:29 UTC

Ordered list: Orders the list entries using numbers, by default. It uses the

tag.

Article Element

2019-10-15 11:02:05 UTC

Defines a part of HTML document that consists of "self contained composition" that is independent from the rest of the content in the document.

Use article to separate content that is independent from the rest of the content in the webpage or document (e.g. a blog post)

Or plan to syndicate a block of content. Think of it as content that makes sense on its own.

How To Create An Unordered List

chris320 — 2019-10-15 11:02:14 UTC

• Unordered list: Displays list entries in a bulleted list. It uses a

Aside Element

2019-10-15 11:02:40 UTC

Set off content thats related to the current topic but would interrupt the current flow of the document if left inline.

Use to create a side bar for example.

Definition Lists

chris320 — 2019-10-15 12:13:41 UTC

Another type of list is the definition list. It displays items with their definitions below the list item and indented. The

tag marks each term in the item, and the: tag defines each description.

2019-10-15 12:16:07 UTC

Validation and input tags are used

Attributes you can use in an ordered list

2019-10-15 12:18:07 UTC

reversed - Reverses the order of the list in descending order
start number - Specifies the start value of the ordered list
type - Specifies the kind of marker to use at the beginning of each list item (1 is default and uses decimal numbers, A uses capital letters, a uses lowercase letters, I uses uppercase roman numerals, i uses lowercase roman numerals)

How HTML 5 Improved Forms

chris320 — 2019-10-15 12:18:13 UTC

HTML5 introduces several new form and input element attributes, such as url for entering a single Web address, email for a single email address or a list of email addresses

The Nav Element

2019-10-15 12:18:21 UTC

Defines a block of navigation links.

Nav element useful for creating a set of navigation links as your primary navigation, a table of contents or bread crumbs in a footer.

Form Attributes

chris320 — 2019-10-15 12:22:29 UTC

Key table elements

2019-10-15 12:28:10 UTC

Defines table column
Defines a group of columns in a table

Sales for Employee ID 2387 Marks text as a table caption
Opening tag for tables
Group of rows in a table for formatting and scrolling
Group of footer rows in a table
Group of header rows in a table
Table row

Methods for submitting data

2019-10-15 12:33:34 UTC

Get
Appends form data into the URL in name and value pairs
The length of a URL is limited (3000 charcaters)
Visible in the URL, do not use for sensitive data
Useful for form submissions where a user wants to bookmark the result

Post
Appends form data inside the body of the HTTP request (data not shown in URL)
Has no size limitations
Form submissions cannot be bookmarked

Don't use tables for CSS layout!

2019-10-15 12:36:40 UTC

Reduces accessibility for visually impaired users
The code is harder to write, maintain and debug
Not automatically responsive

Table data, defines a cell

Defines a table header cell