I finished the HTML 5 course and have briefly refreshed myself on CSS, here are my notes:
HTML NOTES
<small> is for small print, not for making small text
<mark> is for emphasis on content that originally wasn’t there (e.g. highlight a part of a quote that wasn’t originally in the quote)
Working with Date & Time
<time> is for any date or time, but it must be in a machine readable format
Valid strings can be found in the specification and can be added in the datetime attribute if it isn’t in a readable format;
<time datetime”year-month-date”>Written date for content</time>
<time date time”2017-2-4T23:59:59-00:00”> The T is to tell the browser the format has switched from date to time, the 0:00 at the end is the UTC offset for time differences (UK’s is 00:00).
Linking and the rel attribute
can be used by <a> <area> <anchor> and <link> elements to bring in external resources.
It is used in links to tell a browser/search engine what the purpose of a link is.
<ling href=“_css/main.css” media=“screen” rel=“stylesheet”> tells the browser this link is for a stylesheet. More can be found on the specification.
“nofollow” is good for stopping search engines associating the linked page with your own.
add more values with a space between them, inside the quotation marks.
More can be found in the spec
Comments
<!—— comment here, gets disregarded ——>
Meta Tags
Content attributes
charset=“utf-8” is a metatag that should always be in
http-equiv the old way to encode documents(replaced by charset)
name for adding name-value pairs
content tag used below
<meta name=“description” content=“description goes here”>
<meta name=“something from below” content=“value of the metatag”>
author to credit the page’s author
description Good idea to add, some search engines use the description to display in results
keywords Useless now as it was abused in the early days.
(can be found in spec)
You can add any metatags you want, people use viewport as a name value.
Social media uses metatags to display links
Metatag should be at the top of the page for the charset tag.
Using Classes
Zurb’s Foundation 5 is a tool to add classes to HTML 5, opens up a large framework of classes.
Classes are good for styling, but as ID’s can only be used once per page, the id=“tag” is good to add semantic value by describing each unique piece of content
<header id=“mainheader”>
While ID’s can only be used once, the class tag can be used multiple times (e.g. <span class=“author”>author</span>
ARIA landmark roles
Good for screenreader and other assistive software.
<role> can be assigned to any html element to assign it a role, these can be found in the spec.
Landmark roles are the important part for assistive tech, theres only a few.
Using WAI-ARIA in HTML is a good part of the spec, check the recommendations table.
<header id=“main header” role=“banner”> ‘banner’ is for any content to title the page, spanning it, like a header. So we attribute the banner role to the header.
role=“main” should be added to the <main> element because some software still look for the main role rather than the main element.
Micro data, micro format and RDFa
Good for adding additional semantics to HTML to identify more content. (e.g. identifying particular products)
There are 3 options, you only need 1 I think.
Schema.org
Microformats
RDFa
All are supported, schema is the most recent, microformats is the oldest and most widely used.
——————————————————————————————————————————————
CSS Lynda Notes
Css Resets: a template CSS file that resets all browser styles to default (so users can’t change the default).
CSS browser style sheets can be found at Jens Meiert’s blog ‘user agent browser sheets’.
Using Declarations
Selector {declaration}
The Selector is to target HTML Elements
The Declaration is split into property and value, split with a ; (i.e.(property:value)
div + p {font:12;colour:blue;}
This code targets any P element followed by a div element and changes font size to 12 and colour to blue (use american spelling).
A semi-colon is used to add extra declarations. End the declarations with a semi-colon as well.
Using Inline Rules
Used to group styles or style definitions together
@font-face,@media,@import and @page are some examples.
@media screen and (min-width:720px) {
h1 {font-size: 2em; color: blue:}
p {font-size: 1em; colour: black;}
}
Comments
/* comment goes here */
Good idea to look at spec:
Writing Selectors
The <style> tag allows you to write CSS in HTML.
p {color:red} changes all P element text to red.
div p { is called a descendant selector, it will only select the paragraph inside the div tag.
div p, h1 { targets the paragraph and heading inside the div tag
Appendix F. Full Property Table
On W3.org
Good to look through for what properties to use and when.
Using Values in Properties
Values can be split into Absolute values:
in = Inches
cm = Centimeters
mm = millimeters
pt = points
pc = picas
Good for printing, but online when resolutions and browsers can be different using relative units is best:
em = ems * (1em = default size, 1.5 is 50% bigger)
ex = exes * (the height of the font)
px = pixels * (varies with screen size)
gd = grids
rem = root ems * (support isn’t complete, but relative only to the root unit(<body>, <html>) not the immediate parent)
vw = viewport width
vh = viewport height
vm = viewport minimum
ch = Character
Some of these units are new and aren’t supported yet. (* for non new CSS).
The value of an em is dependant on when its used
So if an ‘em’ value is used outside a font size, it checks the calculated font size and uses that.
eg:
h1 {font-size:2em; margin-bottom: 1em}
}
This code sets the font size to twice the default(i.e. 16px default becomes 32 px), then uses the new font size to measure the margin at the bottom (it becomes 32 px).
This is applied to the h1 element only.
Using inline styles
To add a style to the <body> element write.
<body style=“font-family: Ariel; color:red”>
Same semantics just in a different place. People don’t use inline styles because it makes things more cluttered.
Make sure to add quotation marks.
Using Embedded styles
Good for small amount of styling on a few pages.
<style>Embedded style goes here, same semantics </style>
With old html, you’d have to add something like <style type…> to show its CSS, in HTML 5 that is unnecessary.
Using External Style Sheets
The best way to style a large number of pages.
<link href=“styles.css” type=“text/css” rel=“stylesheet”>
href means ‘where is this file i need to find’
type=“text/css” tells the browser what type of file it is, though it isn’t needed in HTML 5, just as legacy
rel=“stylesheet” describes the relationship to the html, in this case its a stylesheet.
or:
<style> @import url(“styles.css”)
@import must be at the top if there are any other rules.