HTML
Tables
► An HTML table is defined with the <table> tag.
► Each table row is defined with the <tr> tag. A table header is defined with
the <th> tag. By default, table headings are bold and centered. A table
data/cell is defined with the <td> tag.
► To make a cell span more than one column, use the colspan attribute.
► To make a cell span more than one row, use the rowspan attribute.
► To add a caption to a table, use the caption tag.
Continued…
HTML Block and Inline Elements
► Every HTML element has a default display value depending on what type of
element it is. The default display value for most elements is block or inline.
► Block-level Elements: A block-level element always starts on a new line and
takes up the full width available (stretches out to the left and right as far as
it can).
Continued…
► Inline Elements: An inline element does not start on a new line and only takes
up as much width as necessary.
HTML Head
► The <head> element is a container for metadata (data about data) and is
placed between the <html> tag and the <body> tag.
► HTML metadata is data about the HTML document. Metadata is not displayed.
► Metadata typically define the document title, character set, styles, links,
scripts, and other meta information.
► The following tags describe metadata: <title>, <style>, <link>, <meta>,
<script> and <base>
Continued…
► The <title> element defines the title of the document, and is required in all
HTML/XHTML documents.
► The <title> element:
► defines a title in the browser tab
► provides a title for the page when it is added to favorites
► displays a title for the page in search engine results
► The <style> element is used to define style information for a single HTML
page.
Continued…
► The <link> element is used to link to external style sheets.
► The <meta> element is used to specify which character set is used, page
description, keywords, author, and other metadata.
► Metadata is used by browsers (how to display content), by search engines
(keywords), and other web services.
► Define the character set used:
► <meta charset="UTF-8">
► Define a description of your web page:
► <meta name="description" content="Free Web tutorials">
► Define keywords for search engines:
► <meta name="keywords" content="HTML, CSS, XML, JavaScript">
Continued…
► Define the author of a page:
► <meta name="author" content="John Doe">
► Refresh document every 30 seconds:
► <meta http-equiv="refresh" content="30">
Setting The Viewport
► HTML5 introduced a method to let web designers take control over the viewport,
through the <meta> tag.
► The viewport is the user's visible area of a web page. It varies with the device, and
will be smaller on a mobile phone than on a computer screen.
► You should include the following <meta> viewport element in all your web pages:
► <meta name="viewport" content="width=device-width, initial-scale=1.0">
► A <meta> viewport element gives the browser instructions on how to control the
page's dimensions and scaling.
► The width=device-width part sets the width of the page to follow the screen-width
of the device (which will vary depending on the device).
► The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by
the browser.
Continued…
► The <script> element is used to define client-side JavaScripts.
► The <base> element specifies the base URL and base target for all relative
URLs in a page:
► <base href="[Link] target="_blank">
HTML Layout Elements
► Websites often display content in multiple columns (like a magazine or
newspaper).
► HTML5 offers new semantic elements that define the different parts of a web
page:
HTML Forms
► The HTML <form> element defines a form that is used to collect user input.
► An HTML form contains form elements.
► Form elements are different types of input elements, like text fields,
checkboxes, radio buttons, submit buttons, and more.
The <input> Element
► The <input> element is the most important form element.
► The <input> element can be displayed in several ways, depending on
the type attribute.
Text Input
► <input type=“text”> defines a one-line input field for text input.
Radio Button Input
► <input type=“radio”> defines a radio button.
The Submit Button
► <input type=“submit”> defines a button for submitting the form data to
a form-handler.
► The form-handler is typically a server page with a script for processing input
data.
The Action Attribute
► The action attribute defines the action to be performed when the form is
submitted.
► Normally, the form data is sent to a web page on the server when the user
clicks on the submit button.
► If the action attribute is omitted, the action is set to the current page.
► The Method Attribute: The method attribute specifies the HTTP method
(GET or POST) to be used when submitting the form data.
Notes on GET:
► Appends form-data into the URL in name/value pairs
► The length of a URL is limited (about 3000 characters)
► Never use GET to send sensitive data! (will be visible in the URL)
► Useful for form submissions where a user wants to bookmark the result
► GET is better for non-secure data, like query strings in Google
►
When to Use POST?
► Always use POST if the form data contains sensitive or personal information.
The POST method does not display the submitted form data in the page
address field.
► Notes on POST:
► POST has no size limitations, and can be used to send large amounts of data.
► Form submissions with POST cannot be bookmarked
The Name Attribute
► Each input field must have a name attribute to be submitted.
► If the name attribute is omitted, the data of that input field will not be sent
at all.
Grouping Form Data with <fieldset>
► The <fieldset> element is used to group related data in a form.
► The <legend> element defines a caption for the <fieldset> element.
?