HTML
Hyper Text Markup Language
Only one history slide
In 1989, Tim Berners-Lee, presented the first HTML without version
@timberners_lee
- HTML consists from tags, ordered into DOM tree
- Based on SGML (special markup language)
- Has no strict rules, about how tags should be written (small, caps, closed, singlequoted, doublequoted, etc.)
Global Attributes
- class - specifies one or more classnames for an element (refers to a class in a style sheet)
- id - specifies a unique id for an element
- style - specifies an inline CSS style for an element
- tabindex - specifies the tabbing order of an element
- title - specifies extra information about an element
- hidden - specifies that an element is not yet, or is no longer, relevant
- data-* - used to store custom data private to the page or application
contextmenu, dir, accesskey, contenteditable, draggable, dropzone, lang, spellcheck
XHTML - Good Rules
- Extensible HTML, Based on XML
- All tags and theirs attributes must be typed in lower case;
- The value of any attribute must be enclosed in quotation marks;
- You must close all tags, even those that do not have a closing tag;
- Must follow the rules of correct tags nesting;
- You can not use a shortened tag attributes (without the quotes);
- Always specify <!DOCTYPE>
HEAD tags
- <title> (this element is required in an HTML document)
- <style> - contains custom css rules
- <base> - changes ase part of uri
- <link> - links css or other source
- <meta> - represents any metadata information
- <script> - contains custom script
Markup tags and attributes
Block and inline element
- Block elements occupy all available width of container, height of these component is determined by its content, and it always starts on a new line.
- Inline elements are directly part of another element. They are mainly used to change the appearance of text or a logical selection.
- You can not insert an block elements into inline elements according to specification (eg `h1` in `a`).
Headings (block)
Heading 1
Lorem ipsum dot solor
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dot solor
Paragraph, Preformatted, Blockquote
Lorem ipsum dot solor
Lorem ipsum dot solor
Lorem ipsum dot solor
Ordered list, List Item
- Item first
- Item second
Unordered List
- Item 1
- Item 2
- Item 2.1
- Item 2.2
Definitions list
- Title 1
- Definition
- Title 2
- Definition
- Definition
Images (inline)
Link aka Anchor (inline)
Images (inline)
Tables, Table tags
- table - main table container
- thead - table header
- tfoot - table footer
- tbody - table body
- tr - table row
- td - table cell
- th - header table cell
- colspan, rowspan - merge cells horizontally or vertically
- caption - table caption
Tables
| Bus number | Price |
|---|---|
| 3А | 3 hrn |
| 25 | |
| 133 | 4 hrn |
Special Characters and Signs
€ € €
© ™ « » & < > – — &
Audio
Video
SVG and Canvas
- Provide native drawing functionality
- Completely integrated into HTML5 documents (part of DOM)
- Can be styled with CSS
- Can be controlled with JavaScript
- Use for animation, charts, images, pixel manipulation, and so on
- Canvas supports 2D and 3D (WebGL)
SVG
HTML5 SVG Circle
HTML5 SVG Rectangle
Canvas
Forms
- HTML forms are used to create (rather primitive) GUIs on Web pages
- Usually the purpose is to ask the user for information
- The information is then sent back to the server
- A form is an area that can contain form elements
- The syntax is: `form ...form elements... form`
- Form elements include: buttons, checkboxes, text fields, radio buttons, drop-down menus, etc
- Other kinds of HTML tags can be mixed in with the form elements
- A form usually contains a Submit button to send the information in the form elements to the server