diff --git a/docs/html/html.md b/docs/html/html.md index b46bfc7..4b7f332 100644 --- a/docs/html/html.md +++ b/docs/html/html.md @@ -1,606 +1,593 @@ -# 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

-

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 - -
- description -
caption of the figure
-
-``` - -### Unordered list (bullet list) - -```html - -``` - -### Ordered list (numbered list) - -```html -
    -
  1. -
  2. -
-``` - -### 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 - -```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 -
- - -
-``` - -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. -The `