## MEDS2007: Website # **Lecture 2** **Simon Mills (module leader)**: smills@dmu.ac.uk [Lecture 2 slide index](https://github.com/MEDS2007/lecture02#meds2007)

# HTML, CSS, JavaScript  - HTML: **what** - defines *content* - CSS: **how** - specifies *layout/presentation* - JavaScript: **when** - codes *interaction*

# **HTML** + **CSS** These will be your **main focus**. But before we go further, a little **background information** on these two web technologies…

# A brief **history** of HTML - **SGML** is the basis (title, h1-6, p, ol, ul...) - **1965** Ted Nelson, the hyperlink (today's version is not as rich) - **1987** Hypercard uses local hyperlinks (Bill Atkinson, Apple) - **HTML** devised by Tim Berner-Lee (TBL) when at CERN - **1989** TBL creates HTML/www on NeXT (for **collaborative research**) - **1989** global hypertext project - the **W**orld**W**ide**W**eb (www) - **1991** the Internet first carries the www [The birth of the web (CERN)](https://home.cern/topics/birth-web) [A history of HTML](https://www.w3.org/People/Raggett/book4/ch02.html) Dave Raggett 1998, (HTML 4 specification)

original screenshot of Tim Berners-Lee's browser

## Mosaic (1993) The first visual web browser 

## Mosaic (again) The first visual web browser (on a Mac) 

# Latest version: **HTML5** ## **Semantic tags do** what they **say**! `header`, `figure`+`figcaption`, `nav`, `section`, `footer`… For a great infographic see [The History of HTML5, Matt Silverman, 2012](http://mashable.com/2012/07/17/history-html5/)

# A **history** of CSS: 1 - **1994** first draft of **Cascading HTML Style Sheets**, Håkon Wium Lie (CERN) - **1995** discussions on the www-style mailing list influence CSS development - HTML removed from name, style sheets also for **other markup languages** - **1995** W3C HTML Editorial Review Board set up for HTML specifications - **1996** Microsoft Internet Explorer is the first browser to support CSS - **1996** CSS Level 1 W3C Recommendation (CSS1) - **1996** W3C forms Cascading Style Sheets and Formatting Properties Working Group [A Brief History of CSS](http://www.css-class.com/a-brief-history-of-css/)

# A **history** of CSS: 1.1 > Tim Berners-Lee wrote his NeXT browser/ editor in such a way that he could **determine the style with a simple style sheet**. However, **he didn't publish the syntax for the style sheets**, considering it a matter for each browser to decide how to best display pages to its users. more…

# A **history** of CSS: 1.2 > In 1993, NCSA Mosaic, the browser that made the Web popular, came out. …however, it was a backward step because it only allowed users to change certain colors and fonts […] **writers of Web pages complained that they didn't have enough influence over how their pages looked**. One of the first questions from new Web authors was how to change fonts and colors… [A brief history of CSS until 2016](https://www.w3.org/Style/CSS20/history.html)

# A **history** of CSS: 1.3 there were **tensions** between authors and implementors: > …it has been a constant source of delight for me over the past year to… tell hordes (literally) of people who want to… control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: "**Sorry, you're screwed.**" —Marc Andreessen, 1994, programmer NCSA Mosaic browser. Later as co-founder of the Netscape browser, he was more eager to please authors. In 1994, he announced the first beta release of Mozilla (later Netscape Navigator, and the code behind **Firefox**). In [The CSS saga](https://www.w3.org/Style/LieBos2e/history/Overview.html), chapter in: Håkon Wium Lie and Bert Bos, "Cascading Style Sheets, designing for the Web".

# A **history** of CSS: 2 - **1997** CSS Working Group creates **CSS 2** specification - **1998** CSS level 2 published as a **W3C** Recommendation (CSS2) - **1998** the **Opera** browser released which supports CSS - **2000** W3C CSS3 Working Draft - **2011** W3C releases **CSS 2.1** fixed errors, better browser matching - **2014** W3C Candidate Recommendation CSS Syntax Module Level 3 - **2017** CSS 3 and browser support **continues to evolve**… TMI: [W3C CSS Syntax Module Level 3](https://www.w3.org/TR/css-syntax-3/) (Warning! Big, official document!)

# **CSS 1** (1996) Introduces basic **styling** `property: value;` pairs **font** properties, **text** attributes, text **alignment**, **tables**, **images**, text and background **color**, word/letter/line **spacing**, **margins**, **borders**, **padding**, **positioning**. `id`entification and `class`ification of groups of CSS styles…

# **CSS 1** (1996) ## **IMPORTANT SLIDE !!** `#id` (*hash*, use once) or `.class` (*dot*, use many times) In the **CSS file** (.css has `{`curly braces`}`): ```css #my-id { background-color: green; } .my-class { text-align: center; } ``` In **HTML files** (.html has `<`angle brackets`>`) ```html <section id="my-id"> <h1 class="my-class">Hello</h1> <p class="my-class">Some text</p> ```

# **CSS 2** (1998) New capabilities including: **z-index** (layer control), **media** types (e.g. braille, print, speech, projection, tv, etc.), **bidirectional** text, absolute, relative and fixed **positioning**, support for **aural** style sheets.

# **CSS 3** (2000, 2014…) Broken into **modules**. 2011-2012, four modules released as formal recommendations: color, selectors level 3, namespaces and [**media queries**](https://www.w3schools.com/css/css_rwd_mediaqueries.asp). [CanIUse](https://caniuse.com/) shows which CSS features various browsers support (e.g. see [`scroll-snap`](https://caniuse.com/?search=scroll%20snap)). CSS3 now includes (W3Schools links, *not* the W3C): [`transition`](http://www.w3schools.com/css/css3_transitions.asp), [`transform`](http://www.w3schools.com/cssref/css3_pr_transform.asp), [`animation`](http://www.w3schools.com/css/css3_animations.asp). Now CSS level 3 is separated into **modules**, there will be **no single CSS 4 release**—see the [current W3C CSS Snapshot](https://www.w3.org/TR/css3-roadmap/) For **what's coming next**, see the [Fairly Stable Modules](https://www.w3.org/TR/css3-roadmap/#fairly-stable)

# HOW WEBSITES WORK: 0 ## **BACK** END: “SERVER” (you **won't** need to learn this for the module) > A **web server** handles your requests for a website, does background **processing** and **retrieval** (e.g. from databases), finds `.html`,`.css`, `.js` **files**, plus **images**, **fonts**, **audio** etc., then **serves** it all to your **browser**.

# HOW WEBSITES WORK: 1 ## **FRONT** END: “CLIENT” you **will need to learn this** for the module: > A 'client'—usually a **web browser** like **Chrome**—receives **files** from the server and **displays** the pages you requested by rendering the **HTML**, applying **CSS** styles to the HTML **elements**, and reading (*parsing*) **JavaScript** code.

# HOW WEBSITES WORK: 2 An **HTML5** document begins with a **document type**: ```html <!doctype html> ``` then the **main** (parent) element: ```html <html> ``` Then some **information** the browser needs: ```html <head> ``` Then what actually **appears** in the browser: ```html <body> ```

# HOW WEBSITES WORK: 3 **All websites** have the following fundamental **HTML tags** ```html <!doctype html> <html> <head> </head> <body> </body> </html> ```

# HOW WEBSITES WORK: 4 ## **IMPORTANT SLIDE !!** Visible content is between **matching pairs** of HTML tags: ```html <header>The box at the top</header> <p>Some text in a paragraph</p> <footer>The box at the bottom</footer> ```

# HOW WEBSITES WORK: 5 Some tags **don't need 'closing'** e.g. the `img` tag: ```html <img src="my-images/my-lovely-horse.png"> ``` The only other **'self-closing' tags** you might use are: ```html <br> <!-- a line break --> <input> <!-- for forms --> ```

# HOW WEBSITES WORK: 6 A **hyperlink** goes to **another page**, a separate **website**, or can jump to a **specific section** on the same page, marked by an HTML `id` attribute: ```html <a href="another-page.html">Go to another page</a> <a href="http://xkcd.com">Go to another website</a> <a href="#my-section">Jump to an ID on the page</a> <section id="my-section"> <p>The link above will jump to this section</p> </section> ```

# HOW WEBSITES WORK: 7 ## **IMPORTANT SLIDE !!** most HTML tags are **nested inside** other HTML tags: ```html <header> <h1>The main heading</h1> </header> <section> <h2>A section heading</h2> <p>Some text in a paragraph</p> </section> ```

# HOW WEBSITES WORK: 8 You can add **HTML comments** in your code: ```html <!-- The figure tag is for image/captions boxes --> <figure> <!-- The img tag goes here --> <!-- The figcaption tag goes here --> </figure> ``` Text between `<!--` and `-->` won't show on screen.

# TIDY CODE ## **IMPORTANT SLIDE !!** - **indent all your code** as you go, with **2 spaces**! - **HTML** in `.html` files (`<`angle brackets`>`) - **CSS** in `.css` files (`{`curly braces`}`) ## KEEPING **CODE TIDY** WILL HELP YOU **A LOT** :-)

# TIDY FILES ## **IMPORTANT SLIDE !!** - **YES** all file & folder names **lower-case**! - **YES** all **resized images** in an `images` folder! - **NO** *spaces* in filenames (incl. images etc.)! - **NO** *Word* documents or *Photoshop* files! ## KEEPING **FILES TIDY** WILL HELP YOU **A LOT** :-)

# ONLINE RESOURCES: 1 **Codecademy** has the following free courses: - [Learn HTML](https://www.codecademy.com/learn/learn-html) - [Learn CSS](https://www.codecademy.com/learn/learn-css) - [Learn how to build websites](https://www.codecademy.com/learn/paths/learn-how-to-build-websites) - [Introduction to JavaScript](https://www.codecademy.com/learn/introduction-to-javascript)

# ONLINE RESOURCES: 2 **Mozilla Developer Network (MDN)** always has the most **up-to-date** and authoritative information: - [Introduction to HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML) - [Introduction to CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS) - [JavaScript basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics) **MDN** is usually **more detailed** than other sources

# ONLINE RESOURCES: 3 **W3Schools** for quick **reference** (not all up-to-date): - [W3Schools HTML](http://www.w3schools.com/html/) - [W3Schools CSS](http://www.w3schools.com/css/) **BEWARE!** avoid inline `style` attributes in **HTML tags!** *NOOOOOOOOOOOOOOOOO!* **ALL** CSS style code should be in your `{`.css`}` file! **NOT** in your `<`.html`>` files!

# SUMMARY: ## THE **THREE FRONT-END LANGUAGES** - **HTML** learn the few ***important tags*** - **CSS** learn the ***syntax***, just use what you need - **JavaScript** for ***user interaction*** or some ***animations*** Keep them all **in separate files** to **stay organised**!