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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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