Forked from
TheAlternative / courses
350 commits behind, 96 commits ahead of the upstream repository.
-
Florian Moser authoredFlorian Moser authored
web.html 11.20 KiB
<!DOCTYPE html>
<html>
<head>
<title>Git & GitLab</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="css/remark.css">
<link rel="stylesheet" media="print" href="css/remark.print.css">
</head>
<body>
<textarea id="source">
class: center, middle
# An Introduction into modern web
<img src="images/thealternative-logo.jpg" width="30%">
---
# Preconditions
Setup webserver
---
# What we will look at
**HTML** for (structured) content.
Add text, images, files and meta data.
**CSS** for the design.
Define spacing, font and colors.
**JavaScript** to add functionality.
Animations! Filters! Sorting!
**PHP** to generate content.
Update the webpage more conveniently.
---
# Structure of the course
**HTML**: Hypertext Markup Language to semantically structure content.
*Target: Know the most important HTML tags.*
**CSS**: Cascading Style Sheets to style HTML.
*Target: Know design basics and using a css framework.*
**JavaScript**: Functionality directly in the browser.
*Target: Apply jQuery & friends.*
**PHP**: Widely supported functionality on the server.
*Target: Generate your webpage based on data on the server.*
---
class: center, middle
# Hypertext Markup Language (HTML)
*Slogan: So easy, its not even programming!*
---
# A HTML document
```html
<!doctype html><html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, world!</title>
<meta name="description" content="A simple HTML document.">
</head>
<body>
<h1>Hello, world!</h1>
<p>This demonstrates a simple HTML document.</p>
</body>
</html>
```
---
# The core constructs
Tags:
```html
<tag>
content of tag
</tag>
```
Attributes:
```html
<tag attribute="content of attribute"></tag>
<tag no-content-attribute></tag>
```
That's all!
---
# Technical
```html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- ... -->
</head>
<!-- ... -->
</html>
```
**Charset** defines how your bits & bytes are mapped to text.
**Viewport** defines the width of the document shown in the browser.
Primarily useful for mobile devices.
---
# Meta data
```html
<html>
<head>
<!-- ... -->
<title>Hello, world!</title>
<meta name="description" content="A simple HTML document.">
</head>
<!-- ... -->
</html>
```
Used by search engines to classify the document and show a preview.
<img src="images/html_meta.png" width="40%">
Used by browsers in the browser tab.
<img src="images/html_meta_browser.png" width="40%">
---
# Body
```html
<html>
<!-- ... -->
<body>
<h1>Hello, world!</h1>
<p>This demonstrates a simple HTML document.</p>
</body>
</html>
```
The actual, structured content.
Elements:
- Headers: `<h1>`, `<h2>`, `<h3>`, `<h4>`, ...
- Text: `<p>`, `<br>`, `<a>`, `<i>`, `<u>`
- Images: `<img>`
- Structure: `<section>`, `<article>`, `<div>`
---
# Headers
H1 for the title (only once)!
H2 for chapter headers.
H3 for subheaders.
#`<h1>`Header H1`</h1>`
##`<h2>`Header H2`</h2>`
###`<h3>`Header H3`</h3>`
####`<h4>`Header H4`</h4>`
---
# Text
```html
<p>Write a paragraph inside p tags.</p>
<p>Use <br/>
if you must start a new line manually</p>
```
```html
<i>italic</i> <br/>
<b>bold</b> <br/>
<u>underline</u>
```
```html
<a href="https://developer.mozilla.org/">mozilla documentation</a>
```
```html
<a ... target="_blank">`open in new tab`</a>
```
<a href="https://developer.mozilla.org/">mozilla documentation</a><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a" target="_blank">open in new tab</a> <br/>
---
# Images
```html
<img src="images/UZH-logo.png" alt="Logo UZH">
```
<img src="images/UZH-logo.png" alt="Logo UZH" width="40%">
describe the image with the `alt` tag.
used by search engines, screen readers, ....
or if the image does not load.
---
# Files
```html
<a href="images/UZH-logo.png" download>download file</a>
```
<a href="images/UZH-logo.png" download>download file</a>
add the download attribute to force downloading
else it opens in browser (which might then display download dialog)
---
# Misc
```html
<audio src="files/audio.mp3">play audio</audio>
```
```html
<video src="files/video.mp4">play video</video>
```
```html
<ul>
<li>Banana</li>
<li>Apple</li>
</ul>
```
```html
<ol>
<li>Learn HTML</li>
<li>Learn CSS</li>
...
</ol>
```
---
# (Semantic) Structure
```html
<section>
<div class="container">
<article>
<h1>About HTML</h1>
<h2>Introduction</h2>
<p>We are going to learn about (...)</p>
<h2>About Semantic HTML</h2>
<p>Use semantic tags to (...)</p>
</article>
</div>
</section>
```
Create own tags (like `<section>`) without special behaviour (such as `<a>`).
Give your document semantic meaning to make editing & styling easier.
Have something important? Use `<strong>` instead of `<b>`.
Writing an article? Wrap it in `<article>` instead of `<div>`.
---
class: center, middle
# Cascading Style Sheets (CSS)
*Slogan: Confused yet?*
---
class: center, middle
```html
<design-crashcourse>
```
Why? Because:
<blockquote>
Users often perceive aesthetically pleasing design as design that’s more usable. -
<a href="https://www.nngroup.com/articles/aesthetic-usability-effect/" target="_blank">https://www.nngroup.com/articles/aesthetic-usability-effect/</a>
</blockquote>
---
# Typography - Typeface
**serif** for books (see header).
Line-like Serifs help the eye read.
*Arial, Times New Roman, ...*
**sans-serif** for displays (see body).
No serifs look cleaner.
*Verdana, Courier, Helvetica, ...*
**monospace** for code (`like this`).
Same width characters help notice patterns faster.
*Consolas, ...*
many more variations...
---
# Typography - Font
Typefaces may consist of fonts of different weights
<img src="images/typography_weight.png" width="50%">
Many free-to-use fonts exist, like [google fonts](https://fonts.google.com/).
You might want to [pair fonts](https://fontpair.co/).
---
# Typography - Size
Adjust font size, line height & line length.
Line height
<img src="images/typography_line_height.png" width="48%">
A line should be around 15 words long.
If its too long, the eye can not easily find the start of the next line.
If its too short, the eye has to move around too much.
There are other factors that affect readability, which we will see on the next slide.
---
# Typography - Balance
Balance font weight, font size, line length and line height.
Improve readability:
- increase line height
- increase font size
- increase font boldness
- decrease line length
<img src="images/typography_light.png" width="48%">
<img src="images/typography_regular.png" width="48%">
---
# Spacing
Separate what does not belong together.
Separate little what does.
<br>
<br>
<br>
Emphasize importance with more space around.
<br>
<br>
<br>
You may want to define a spacing scheme for consistency.
Like 4, 8, 16, 32, 64 (geometric progression).
Like 5, 8, 13, 21, 34 (Fibonacci numbers / golden cut).
---
# Spacing - Example
<img src="images/spacing_original.png" width="80%">
---
# Spacing - Example
<img src="images/spacing_annotated.png" width="80%">
---
# Colors
Give your site a distinctive look with your "brand" colors.
Primary color associated with your brand.
Secondary color which contrasts primary nicely (like complement).
Colors for messages (red for errors, orance for warnings, ...).
Pastel colors for a soft look, bright colors for inspiring effects
<img src="images/color_palette.png" width="40%" alt="https://colorhunt.co/palette/7642">
<img src="images/color_bright.png" width="40%" alt="https://colorhunt.co/palette/220000">
Many premade color schemes, like [colorhunt](https://colorhunt.co) Many color scheme generators out there, like [paletton](https://paletton.com)
---
class: center, middle
```html
</design-crashcourse>
```
---
class: inverted
# CSS basics
```css
body {
color: white;
background: black;
}
```
choose a **selector** (like `body`)
for **properties** (like `color`)
override the default **value** (like `white`)
---
# CSS selector
by element, class or id
```html
<section class="content" id="introduction"></section>
```
```css
section {
background: red
}
.content {
background: blue;
}
#introduction {
background: green;
}
```
choose the most appropriate selector according to your structure (usually it ends up being the `class`).
---
# Typography - Font Family
```css
body {
font-family: 'Times New Roman', Times, serif;
font-weight: bold;
font-style: italic;
}
```
including your own font family with
```css
@font-face {
font-family: 'Vegur';
src: url('Vegur-Bold.ttf') format('ttf');
font-weight: bold;
font-style: normal;}
```
Generate optimized font family files [transfonter.org](https://transfonter.org/).
---
# Typography - Size
```css
body {
font-size: 16px;
line-height: 1.2em;
}
```
`em` is a relative unit to the current font size.
`rem` is a relative unit the `html` font size.
You can try out different combinations on [app.typeanything.io](https://app.typeanything.io/).
---
# Spacing
```css
.rectangle {
background: blue;
width: 60px;
height: 20px;
padding: 50px;
margin: 20px;
border: 10px solid yellow;
}
```
```html
<div class="rectangle"></div>
```
<div class="rectangle"></div>
<img src="images/css_spacing.png" width="35%">
---
class: inverted
# Color
```css
body {
color: #FFFFFF;
background: rgb(0,0,0);
}
```
use predefined [colors](https://developer.mozilla.org/de/docs/Web/CSS/Farben).
or specify own color (using additive light mixing).
use hex (like `#rrggbb`).
or rgb (like `rgb(red, green , blue)`).
or rgba (like `rgba(red, green , blue, opacity)`) representations.
---
# Display
```css
body {
display: block;}
```
defines how element is placed (and elements around).
TODO FACTCHECK
`display: block` is the default and renders a full-width container.
`display: inline-block` renders as wide as the content.
for arranging items along a grid, use `display:` [`grid`](https://css-tricks.com/snippets/css/complete-guide-grid/).
for distributing items use `display:` [`flex`](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
---
# Position
```css
body {
position: absolute;
position: relative;
top: 0;
}
```
---
# Bootstrap
Good design is hard.
---
class: center, middle
# JavaScript
*Slogan: Absolutely no similarities with Java AT ALL.*
---
# jQuery
---
class: center, middle
# PHP: Hypertext Preprocessor (PHP)
*Slogan: It is getting better. Or: [PHP: a fractal of bad design](https://eev.ee/blog/2012/04/09/php-a-fractal-of-bad-design/)*
---
# Summary
---
# Outlook
Advanced topics coming right up!
---
class: center, middle
# Advanced topics
---
# Advanced topics
HTML:
- html semantic checker
CSS:
- other css frameworks
JavaScript:
- [package manager introduction](https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70)
PHP:
- sqlite database
</textarea>
<script src="js/remark.min.js" type="text/javascript"></script>
<script src="js/remark.driver.js" type="text/javascript"></script>
</body>
</html>