123 lines
3.7 KiB
Markdown
123 lines
3.7 KiB
Markdown
## Lecture 1 (13:00) - HTML5 and Layout
|
|
|
|
- XHTML (2000) succeeded HTML4, allowing XML integration such as SVG, MathML and CML.
|
|
|
|
### HTML5
|
|
|
|
- Flexible parsing and compatibility
|
|
- Moved towards platform combining HTML5, CSS and JS
|
|
- Improved semantic elements
|
|
- New input attributes ex. date, time, email, url
|
|
- Global attributes ex. id, tabindex, style
|
|
|
|
### Doctypes
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
```
|
|
|
|
```html
|
|
<?xml version="1.0" ?>
|
|
```
|
|
|
|
### Comments
|
|
|
|
```html
|
|
<!-- This is a comment -->
|
|
```
|
|
|
|
### ID Attribute
|
|
|
|
- Global attribute.
|
|
- Must be unique between elements.
|
|
- Must start with a letter or underscore.
|
|
- Can be used by CSS or JS to identify elements.
|
|
|
|
### Class Attribute
|
|
|
|
- Any HTML element can also carry a class attribute.
|
|
- Identifies collections of elements to manipulate as a group.
|
|
- Element can have multiple classes, separated with spaces.
|
|
- Class name should describe the class it belongs to.
|
|
|
|
### Block Elements
|
|
|
|
- Some elements will always appear to start in new lines.
|
|
- Examples include `<h1>`, `<p>`, `<ul>`, `<li>`.
|
|
|
|
### Inline Elements
|
|
|
|
- Some elements will always appear to continue on the same line.
|
|
- Examples include `<a>`, `<b>`, `<em>`, `<img>`.
|
|
|
|
### Grouping Elements
|
|
|
|
#### Block
|
|
|
|
- `<div>` Element allows for a group of elements to be grouped together within a single block element.
|
|
- Without styling each div, they will start on new lines.
|
|
- HTML5 introduced alternatives for semantic reasons.
|
|
- `<article>` `<section>` `<header>` `<aside>` `<nav>`
|
|
- Good practice to break a page into smaller sections.
|
|
|
|
#### Span
|
|
|
|
- `<span>` element is the inline equivalent of `<div>`
|
|
- Most commonly used in order to be able to controlthe appearance with CSS.
|
|
|
|
## Lecture 2 (15:00)
|
|
|
|
### Page Information
|
|
|
|
- `<meta>` contained in `<head>`, contains information about the page.
|
|
- Not visible to user, but used in search engine rankings and info.
|
|
- Common attributes are defined in pairs.
|
|
|
|
#### Name, Value `<meta>`
|
|
|
|
##### Description
|
|
|
|
- Description of page
|
|
- Used & Displayed by search engines
|
|
- max. 155 characters.
|
|
|
|
##### Keywords
|
|
|
|
- Comma separated list of search terms
|
|
- Not used by search engines anymore
|
|
|
|
##### Robots
|
|
|
|
- Indicated whether search engines should include page
|
|
- `noindex` - Don't include this page.
|
|
- `nofollow` - Include this page but not linked pages.
|
|
|
|
### Special Characters
|
|
|
|
- Some characters reserved by HTML
|
|
- To display them, they must be escaped.
|
|
- ex. `<`, `>`
|
|
- Or by using ASCII / Unicode Values
|
|
- ex. `<`, `>`
|
|
|
|
### Traditional HTML Layout vs. HTML5
|
|
|
|
|
|
|
|
#### HTML5 Elements
|
|
|
|
- `<header>`, `<footer>`. Used as either header or footer at the top or bottom of a page, respectively. Can also be used for an individual `<section>` or `<article>` within the page.
|
|
- `<nav>`. Contains major navigational blocks ex. Primary site navigation.
|
|
- `<article>`. Container for syndicated or singular sections ex. news or blog article.
|
|
- `<aside>`. Contained within `<article>` and contains relevant but not necessary information.
|
|
- `<section>`. Groups related items together ex. Grouping `<article>` elements, or splitting them up.
|
|
- `<hgroup>`. Groups heading elements ( `h1`, `h2`, etc.. ) into one header.
|
|
- `<figure>`. Contains information referenced by the main flow of the document. Can be used for Images, Videos,Graphs, Diagrams, Code Samples, Text etc. Can use a `<figcaption>` element to define a caption.
|
|
|
|
#### Sectioning Elements
|
|
|
|
- HTML5 elements must strictly be used as designed.
|
|
- Where no element is valid, `<div>` is still used.
|
|
- Any content outside of `<header>`, `<footer>` and `<aside>` is considered content, hence there is no "`<content>`" tag.
|
|
- `<main>` element is used to specify content however, but can only be used once and cannot be nested inside `<section>` or any similar element.
|