Download presentation
Presentation is loading. Please wait.
1
Robert Kiffe Senior Customer Support Engineer
HTML and CSS WEB 101: Robert Kiffe Senior Customer Support Engineer
2
Who Am I? I’m Tired #dadjokes
3
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 …
4
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
5
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
6
HTML Syntax Core components All together: Element Tag Attribute div
id="main“ All together: *Recommended Online Tutorial:
7
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>
8
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
9
CSS: Cascading Stylesheets
Separates design from the content Core Components Selectors p { … } Properties font-size Values 12pt All Together: p { font-size: 12pt; }
10
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 { … }
11
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
12
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;}
13
What’s New With HTML5 Semantic Elements Form Input Types Video/Media
Article, aside, header, footer, etc. Form Input Types , url, tel, number, range, date, etc. Example: <input type=" "> Video/Media Native handling Multiple sizes
14
Before HTML5
15
After HTML5
16
What’s New With HTML5 (cont’d)
Boolean Attributes <input type=" " autofocus> <input type=" " autofocus="true"> <input type=" " autofocus="false"> <input type=" " autofocus="autofocus"> (Safest for XML)
17
Browser Compatibility
HTML 5 + W3C Validation CSS Reset Big Browsers Chrome Current King Desktop + Android Safari iPhone + MacOS Internet Explorer 10+ (Yay!) Edge
18
Responsive Design Usage: Mobile surpassing Desktop
Media Queries: Desktop -> Tablet -> Mobile
19
Media Queries Define CSS settings based on browser dimensions
Typically set to three widths Mobile Tablet Desktop Example: @media (min-width: 1024px) { ... }
20
CSS Frameworks Most Popular: Built in:
Bootstrap: Foundation: Built in: CSS Reset for browser compatibility Grid system for easy structure Consistent typography Responsive Design Kitchen Sink of pre-made widgets/components Etc.
21
Accessibility & W3C Compliance
W3C Validation Accessibility Checks Higher education websites generally have to comply with the following: WCAG 2.0 (Level AA) Section 508
22
Thank you. Robert Kiffe Sr. Customer Support Engineer OmniUpdate
ext 223 outc18.com/surveys
Similar presentations
