Robert Kiffe Senior Customer Support Engineer HTML and CSS WEB 101: Robert Kiffe Senior Customer Support Engineer
Who Am I? I’m Tired #dadjokes
Why are you here? You work for a university/business that operates a website That website attracts paying students (customers) You are paid to know how that website works You told your boss you would learn something new, just so that you could come to Southern California You could be in Disneyland right now …
Agenda Background HTML Basics CSS Basics Responsive Design Build a page CSS Basics Style that page Responsive Design CSS Frameworks Build a Bootstrap Page Profit
HTML Background What is the full name of HTML Hypertext Markup Language What year was HTML 1.0 officially born? 1993 What year was XML 1.0 officially born? 1998 What year was XHTML born? 2000 What year was HTML5 ‘officially’ released? 2014 What year did IE 6 die, and the World Wide Web celebrate? 2015
HTML Syntax Core components All together: Element Tag Attribute div id="main“ All together: *Recommended Online Tutorial: https://learn.shayhowe.com/html-css/
HTML Basic Structure <!DOCTYPE html> <html lang="en"> <!-- HTML5 --> <head> <meta charset="utf-8"> <title>Hello World</title> </head> <body> <h1>Hello World</h1> <p>This is a web page.</p> </body> </html>
Block vs Inline Elements Browsers typically display the block-level element with a newline both before and after the element. You can visualize them as a stack of boxes. Examples: div, p, h1 Inline Inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content. Examples: span, a, img
CSS: Cascading Stylesheets Separates design from the content Core Components Selectors p { … } Properties font-size Values 12pt All Together: p { font-size: 12pt; }
Common Selectors Element ID attribute Combined HTML: <p>This is a web page.</p> CSS: p { … } ID attribute HTML: <p id="main">This is a web page.</p> CSS: #main { … } HTML: <p class="lead">This is a web page.</p> CSS: .lead { … } Combined HTML: <p id="main" class="lead">This is a web page.</p> CSS: p#main.lead { … }
Box Model Every HTML item has a base set of properties that define its dimensions and spacing around it Width – Horizontal dimension Height – Vertical dimension Padding – Spacing for content inside the region Border – outline of region Margin – spacing outside of region
Values: Common Size Units % Percentage of the encapsulating region Example: div {width: 25%;} px Screen Pixels Example: p {padding: 25px;} pt Defines a measurement in points. A point is defined as 1/72nd of an inch. Example: body {font-size: 18pt;} em A relative measurement for the height of a font in em spaces. Because an em unit is equivalent to the size of a given font, if you assign a font to 12pt, each "em" unit would be 12pt; thus, 2em would be 24pt. Example: p {letter-spacing: 7em;}
What’s New With HTML5 Semantic Elements Form Input Types Video/Media Article, aside, header, footer, etc. Form Input Types Email, url, tel, number, range, date, etc. Example: <input type="email"> Video/Media Native handling Multiple sizes
Before HTML5
After HTML5
What’s New With HTML5 (cont’d) Boolean Attributes <input type="email" autofocus> <input type="email" autofocus="true"> <input type="email" autofocus="false"> <input type="email" autofocus="autofocus"> (Safest for XML)
Browser Compatibility HTML 5 + W3C Validation CSS Reset Big Browsers Chrome Current King Desktop + Android Safari iPhone + MacOS Internet Explorer 10+ (Yay!) Edge
Responsive Design Usage: Mobile surpassing Desktop Media Queries: Desktop -> Tablet -> Mobile http://commons.wikimedia.org/wiki/File:Responsive_Web_Design_for_Desktop,_Notebook,_Tablet_and_Mobile_Phone.png
Media Queries Define CSS settings based on browser dimensions Typically set to three widths Mobile Tablet Desktop Example: @media (min-width: 1024px) { ... }
CSS Frameworks Most Popular: Built in: Bootstrap: https://getbootstrap.com Foundation: https://foundation.zurb.com/ Built in: CSS Reset for browser compatibility Grid system for easy structure Consistent typography Responsive Design Kitchen Sink of pre-made widgets/components Etc.
Accessibility & W3C Compliance W3C Validation https://validator.w3c.org Accessibility Checks https://achecker.ca Higher education websites generally have to comply with the following: WCAG 2.0 (Level AA) Section 508
Thank you. Robert Kiffe Sr. Customer Support Engineer OmniUpdate 805-484-9400 ext 223 rkiffe@omniupdate.com outc18.com/surveys