Développer en HTML
HTML
The HTML <head> Element
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>, <meta>, <link>, <script>, and <base>.
The HTML <title> Element
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 HTML <style> Element
The <style> element is used to define style information for a single HTML page:The HTML <link> Element
The <link> element is used to link to external style sheets:The HTML <meta> Element
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">
Define the author of a page:
<meta name="author" content="Hege Refsnes">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
===== HTML Links - The target Attribute =====
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
* _blank - Opens the linked document in a new window or tab
* _self - Opens the linked document in the same window/tab as it was clicked (this is default)
* _parent - Opens the linked document in the parent frame
* _top - Opens the linked document in the full body of the window
* framename - Opens the linked document in a named frame
===== 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).
<code>
<div>
<h1> - <h6>
<p>
<form>
</code>
Inline Elements
An inline element does not start on a new line and only takes up as much width as necessary.<code>
<span>
<a>
<img>
</code>
Using The class Attribute
The HTML class attribute makes it possible to define equal styles for elements with the same class name.===== HTML Iframes =====
An iframe is used to display a web page within a web page.
<iframe src="URL"></iframe>
An iframe can be used as the target frame for a link.
The target attribute of the link must refer to the name attribute of the iframe:
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
===== 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:
HTML5 Semantic Elements
* <header> - Defines a header for a document or a section
* <nav> - Defines a container for navigation links
* <section> - Defines a section in a document
* <article> - Defines an independent self-contained article
* <aside> - Defines content aside from the content (like a sidebar)
* <footer> - Defines a footer for a document or a section
* <details> - Defines additional details
* <summary> - Defines a heading for the <details> element
HTML Layout Techniques
There are four different ways to create multicolumn layouts. Each way has its pros and cons:* HTML tables
* CSS float property
* CSS framework
* CSS flexbox
=== CSS Flexbox ===
Flexbox is a new layout mode in CSS3.
Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices. Disadvantages: Does not work in IE10 and earlier.
===== HTML Forms =====
* Attribute Description
* accept-charset Specifies the charset used in the submitted form (default: the page charset).
* action Specifies an address (url) where to submit the form (default: the submitting page).
* autocomplete Specifies if the browser should autocomplete the form (default: on).
* enctype Specifies the encoding of the submitted data (default: is url-encoded).
* method Specifies the HTTP method used when submitting the form (default: GET).
* name Specifies a name used to identify the form (for DOM usage: document.forms.name).
* novalidate Specifies that the browser should not validate the form.
* target Specifies the target of the address in the action attribute (default: _self).
* <form> Defines an HTML form for user input
* <input> Defines an input control
* <textarea> Defines a multiline input control (text area)
* <label> Defines a label for an <input> element
* <fieldset> Groups related elements in a form
* <legend> Defines a caption for a <fieldset> element
* <select> Defines a drop-down list
* <optgroup> Defines a group of related options in a drop-down list
* <option> Defines an option in a drop-down list
* <button> Defines a clickable button
* <datalist> Specifies a list of pre-defined options for input controls
* <keygen> Defines a key-pair generator field (for forms)
* <output> Defines the result of a calculation
The Method Attribute
The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data:=== When to Use GET? ===
The default method when submitting form data is GET.
However, when GET is used, the submitted form data will be visible in the page address field.
GET must NOT be used when sending sensitive information! GET is best suited for short, non-sensitive, amounts of data, because it has size limitations too
=== 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.
POST has no size limitations, and can be used to send large amounts of data.
====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.
<code>
<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</code>
==== HTML5 Input Types ====
HTML5 added several new input types:color
date
datetime
datetime-local
month
number
range
search
tel
time
url
week
Commentaires
Enregistrer un commentaire