UCLA IoES Web Tools workshop

A presentation at UCLA IoES Web Tools Workshop in November 2018 in Los Angeles, CA, USA by Scott Gruber

Slide 1

Slide 1

Moving science to action for the planet and all who live here. Web Tools Workshop Institute of the Environment and Sustainability www.ioes.ucla.edu

Slide 2

Slide 2

Design systems Speaking Presentations Print Web Institute of the Environment and Sustainability Code Maps and dataviz Infographics Project Management www.ioes.ucla.edu

Slide 3

Slide 3

Agenda HTML & CSS Web Accessibility Development Tools Codepen WordPress Institute of the Environment and Sustainability www.ioes.ucla.edu

Slide 4

Slide 4

What are the building blocks of the web? Institute of the Environment and Sustainability www.ioes.ucla.edu

Slide 5

Slide 5

HTML & CSS Institute of the Environment and Sustainability www.ioes.ucla.edu

Slide 6

Slide 6

HTML tag attributes <a href="https://www.ioes.ucla.edu">UCLA IoES</a> <h1 class="title">UCLA IoES</h1> <img src="/images/file.jpg" alt="Describe Image"/> Institute of the Environment and Sustainability www.ioes.ucla.edu

Slide 7

Slide 7

HTML tags and elements Institute of the Environment and Sustainability www.ioes.ucla.edu

Slide 8

Slide 8

HTML tag, attributes and values Institute of the Environment and Sustainability www.ioes.ucla.edu

Slide 9

Slide 9

Nesting elements Putting elements inside other elements is called nesting. Make sure closing tags don’t overlap:

<div> <h1>Headline</h1> <p>This is <em>emphasized</em> text.</p> </div> Institute of the Environment and Sustainability www.ioes.ucla.edu

Slide 10

Slide 10

Web page

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title here</title> </head> <body> <!-- Page content goes here.--> </body> </html>

Institute of the Environment and Sustainability www.ioes.ucla.edu

Slide 11

Slide 11

CSS Cascading Style Sheets Institute of the Environment and Sustainability www.ioes.ucla.edu

Slide 12

Slide 12

Style Separate from Structure These pages have the exact same HTML source but different style sheets. Institute of the Environment and Sustainability www.ioes.ucla.edu

Slide 13

Slide 13

Style Rule Structure selector { property: value; } h2 { color: red; font-size: 2em; margin-left: 30px; opacity: .5; } Institute of the Environment and Sustainability www.ioes.ucla.edu

Slide 14

Slide 14

Declarations • • Properties are defined in the CSS specifications. Values are dependent on the type of property: • Measurements: px, em, rem, % • Keywords: center, italic • Color values: hex, RGB, HSL, blue • More Institute of the Environment and Sustainability www.ioes.ucla.edu

Slide 15

Slide 15

External style sheets Via link element in HTML: <head> <title>Titles are require</title> <link rel="stylesheet" href="/path/example.css"> </head> Institute of the Environment and Sustainability www.ioes.ucla.edu

Slide 16

Slide 16

Embedded style sheets Embedded style sheets are placed in the head of the document via the style element: <head> <title>Titles are required</title> <style> /* style rules go here */ </style> </head> Institute of the Environment and Sustainability www.ioes.ucla.edu

Slide 17

Slide 17

CSS Units of Measurement CSS provides a variety ways to specify measurements: Absolute units Have predefined meanings or real-world equivalents Relative units Based on the size of something else, such as the default text size or the size of the parent element Percentages Calculated relative to another value, such as the size of the parent element Institute of the Environment and Sustainability www.ioes.ucla.edu

Slide 18

Slide 18

CSS Units of Measurement Relative units are based on the size of something else: CSS provides a variety ways to specify measurements: Absolute units: px a unit equal to the current font size ex x-height, equal to the height of a lowercase x rem root em, equal to the font size of the html element ch zero width, equal to the width of a zero (0) vw viewport width unit (equal to 1/100 of viewport width) Relative units vh Based on the size of something else, such as the default text size or the size of the parent element viewport height unit (1/100 of viewport height) vmin viewport minimum unit (value of vh or vw, whichever is smaller) vmax viewport maximum unit (value of vh or vw, whichever is larger) Percentages Institute of the Environment and Sustainability em www.ioes.ucla.edu

Slide 19

Slide 19

Thank You sgruber@ioes.ucla.edu speaking.scottgruber.me twitter.com/scott_gruber 4356 Life Sciences Institute of the Environment and Sustainability www.ioes.ucla.edu