# HTML ## Terminology **Web design**: The process of planning, structuring and creating a website. **Web development**: The process of programming dynamic web applications. **Front end**: The outwardly visible elements of a website or application. **Back end**: The inner workings and functionality of a website or application. ## Anatomy of an HTML Element **Element**: Building blocks of web pages, an individual component of HTML. **Tag**: Opening tag marks the beginning of an element & closing tag marks the end. Tags contain characters that indicate the tag's purpose content. ` content ` **Container Element**: An element that can contain other elements or content. **Stand Alone Element**: An element that cannot contain anything else. **Attribute**: Provides additional information about the HTML element. Placed inside an opening tag, before the right angle bracket. **Value**: Value is the value assigned to a given attribute. Values must be contained inside quotation marks (“”). ## The Doctype The first thing on an HTML page is the doctype, which tells the browser which version of the markup language the page is using. ### XHTML 1.0 Strict ```html ``` ### HTML4 Transitional ```html ``` ### HTML5 `` ## The HTML Element After ``, the page content must be contained between tags. ```html ``` ### The HEAD Element The head contains the title of the page & meta information about the page. Meta information is not visible to the user, but has many purposes, like providing information to search engines. UTF-8 is a character encoding capable of encoding all possible characters, or code points, defined by Unicode. The encoding is variable-length and uses 8-bit code units. XHTML and HTML4: `` HTML5: `` ### HTML Shiv (Polyfill) Used to make old browsers understand newer HTML5 and newer components. ```html ``` ## The BODY Element The body contains the actual content of the page. Everything that is contained in the body is visible to the user. ```html ``` ## JavaScript XHTML and older: `` HTML5: `` (HTML5 spec states that `type` attribute is redundant and should be omitted) The `` **Local**: `` **Inline**: `` ## Forms Forms allow to collect data from the user: * signing up and logging in to websites * entering personal information * filtering content (using dropdowns, checkboxes) * performing a search * uploading files Forms contain elements called controls (text inputs, checkboxes, radio buttons, submit buttons). When users complete a form the data is usually submitted to a web server for processing. ### [Form Validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation) Validation is a mechanism to ensure the correctness of user input. Uses of Validation: * Make sure that all required information has been entered * Limit the information to certain types (e.g. only numbers) * Make sure that the information follows a standard (e.g. email, credit card number) * Limit the information to a certain length * Other validation required by the application or the back-end services #### Front-End Validation The application should validate all information to make sure that it is complete, free of errors and conforms to the specifications required by the back-end. It should contain mechanisms to warn users if input is not complete or correct. It should avoid to send "bad" data to the back-end. ### Back-End Validation It should never trust that the front-end has done validation since some clever users can bypass the front-end mechanisms easily. Back-end services can receive data from other services, not necessarily front-end, that don't perform validation. #### Built-In Validation Not all browsers validate in the same way and some follow the specs partially. Some browsers don't have validation at all (older desktop browsers, some mobile browsers). Apart from declaring validation intention with HTML5 developers don't have much control over what the browser actually does. Before using build-in validation make sure that it's supported by the target browsers. #### Validation with JavaScript * Gives the developer more control. * The developer can make sure it works on all target browsers. * Requires a lot of custom coding, or using a library (common practice). --- ## General structure of HTML page ```html ``` Attributes describe additional characteristics of an HTML element. ` content ` ### Meta Tag Structure `` ### Paragraph Paragraphs allow to format the content in a readable fashion. ```html

paragraph-content

``` ### Headings Heading numbers indicates hierarchy, not size. ```html

Heading 1

Heading 2

``` ### Formatted Text With semantic value: * Emphasized text (default cursive): `` * Important text (default bold): `` Without semantic value, used as last resort: * Italic text: `` * Bold text: `` ## Elements `
`: Line break (carriage return). It's not good practice to put line breaks inside paragraphs. `

`: horizontal rule (line). Used to define a thematic change in the content. ### Links/Anchor Surround content to turn into links. ```html text/image Scheme-relative URL Origin-relative URL Directory-relative URL Back to Top address@domain +39 111 2223334 Download ``` `target`: * `_blank`: opens linked document in a new window or *tab* * `_self`: opens linked document in the same frame as it was clicked (DEFAULT) * `_parent`: opens the linked document in the parent frame * `_top`: opens linked document in the full body of the window * `frame-name`: opens the linked document in the specified frame ### Images ```html brief-description

``` ```html

``` ### Unordered list (bullet list) ```html

``` ### Ordered list (numbered list) ```html

``` ### Description list (list of terms and descriptions) ```html

term: definition
term: definition

``` ### Tables ```html

``` ### Character Codes Code | Character ---------|----------------- `©` | Copyright `<` | less than (`<`) `>` | greater than (`>`) `&` | ampersand (`&`) ### Block Element Used to group elements together into sections, eventually to style them differently. ```html

``` ### Inline Element Used to apply a specific style inline. ```html

non-styled content styled content non-styled content

``` ### HTML5 new tags ```html

``` ## HTML Forms & Inputs ```html ``` Target: * `_blank`: submitted result will open in a new browser tab * `_self`: submitted result will open in the same page (*default*) Method: * `get`: data sent via get method is visible in the browser's address bar * `post`: data sent via post in not visible to the user PROs & CONs of `GET` method: * Data sent by the GET method is displayed in the URL * It is possible to bookmark the page with specific query string values * Not suitable for passing sensitive information such as the username and password * The length of the URL is limited PROs & CONs of `POST` method: * More secure than GET; information is never visible in the URL query string or in the server logs * Has a much larger limit on the amount of data that can be sent * Can send text data as well as binary data (uploading a file) * Not possible to bookmark the page with the query ### Basic Form Elements ```html ``` > **Note**: The `` tag is used to define the labels for `` elements. Input Attributes: * `name`: assigns a name to the form control (used by JavaScript and queries) * `value`: value to be sent to the server when the option is selected * `id`: identifier for CSS and linking tags * `checked`: initially selected or not (radiobutton, checkboxes, ...) * `selected`: default selection of a dropdown ### Text Field One line areas that allow the user to input text. ```html ``` > **Note**: Text inputs can display a placeholder text that will disappear as soon as some text is entered ### Password Field ```html ``` ### Radio Buttons ```html ``` ### Checkboxes ```html ``` ### Dropdown Menus ```html ``` Use `` becomes more similar to checkboxes. ### File Select Upload a local file as an attachment. The `accept` attribute value is a string that defines the file types the file input should accept. This string is a comma-separated list of [unique file type specifiers][file_type_specifiers_docs]. ```html ``` [file_type_specifiers_docs]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers ### Text Area Multi line text input. ```html ``` ### Submit & Reset ```html ``` ### Fieldset Group controls into categories. Particularly important for screen readers. ```html

Color Red Green Red

``` ### Email Field Used to receive a valid e-mail address from the user. Most browsers can validate this without needing javascript. Older browsers don't support this input type. ```html ``` ### Progress Bar ```html 70% ``` ### Slider ```html ``` ### Meter The `` HTML element represents either a scalar value within a known range or a fractional value. ```html current value ``` ### Datalist (Autocomplete) The `datalist` HTML element can provide suggestions to an input that targets it's `id` with the `list` attribute. ```html ``` ### More Input Types ```html ``` ### [Using Built-In Form Validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation) One of the most significant features of HTML5 form controls is the ability to validate most user data without relying on JavaScript. This is done by using validation attributes on form elements. * `required`: Specifies whether a form field needs to be filled in before the form can be submitted. * `minlength`, `maxlength`: Specifies the minimum and maximum length of textual data (strings) * `min`, `max`: Specifies the minimum and maximum values of numerical input types * `type`: Specifies whether the data needs to be a number, an email address, or some other specific preset type. * `pattern`: Specifies a regular expression that defines a pattern the entered data needs to follow. If the data entered in an form field follows all of the rules specified by the above attributes, it is considered valid. If not, it is considered invalid. When an element is valid, the following things are true: * The element matches the `:valid` CSS *pseudo-class*, which lets you apply a specific style to valid elements. * If the user tries to send the data, the browser will submit the form, provided there is nothing else stopping it from doing so (e.g. JavaScript). When an element is invalid, the following things are true: * The element matches the `:invalid` CSS *pseudo-class*, and sometimes other UI *pseudo-classes* (e.g. `:out-of-range`) depending on the error, which lets you apply a specific style to invalid elements. * If the user tries to send the data, the browser will block the form and display an error message.