first commit

2024-01-15 20:14:10 +00:00
commit 8c81ee28b7
3106 changed files with 474415 additions and 0 deletions
--- a/Development.md
+++ b/Development.md
@@ -0,0 +1,123 @@
+## 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. `&lt;`, `&gt;`
+- Or by using ASCII / Unicode Values
+	- ex. `&#60;`, `&#62;`
+
+### Traditional HTML Layout vs. HTML5
+
+![](Pasted%20image%2020231019151742.png)
+
+#### 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.
+-