/I used adobe XD to create a basic layout for the site, many of the pages would be similar or difficult to conceptualise without knowing fully the content I’ll be adding (e.g. Account page), though there is more to add.
I added a concept of what the resizing of the site would look like for a smaller screen, allowing easy addaptability of the site.
/I went about designing a logo for the site, I wanted to use a soapbox as the logo to pay homage to the origional speakers corner, I’m worried it might send the wrong message though, so I’ll have to look into designing other logos.
The logo was designed with photoshop and a graphics tablet so I feel it gives the impresion of a drawing rather than a logo, as logos are more minimalistic and utilitarian.
/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.
/For this project I need to look at learning some Javascript and Jquery. There are some great Lynda tutorials on it however; Ray Vilabolos does a series on Angular js, however this is not a beginners course, Knowlage of Javascript and HTML 5 is required. I have some knowledge of HTML 4 but I have not looked at HTML 5, so I have been working through James Williamson’s HTML5: Structure, Syntax, and Semantics on Lynda.com. Here are some notes I’ll be applying to the project:
HTML 5 Lynda Notes
The Basics
<thisisanelement></thisistheendoftheelement>
<p> this tag is for paragraphs </p>
<blockquote> is like <p> but for quotations
<cite> is for the citation at the end of the quote
It is mportant to use correct elements for good practice, makes the website’s code easier to understand and easier to sort by search engines.
A good idea is to read the HTML 5 specification, there is an index of the elements at the end of the text.
Elements are either block or inline;
Block has each line as its own content (i.e.. a title header with the <hl> task
Inline is inside block elements, usually for text level (ie. <a>
Content Models
Content models are the categories for elements, each content model is not mutually exclusive;
Flow is for most elements and is for elements that would be included in the normal flow of the document e.g.: button, img, ect. if it fits in the body tag its probably flow content
Metadata is for setting up the documents presentation and behaviour, usually in the head of the document (e.g. title, no script), sometimes metadata can fit under the flow content model
Phrasing content is for the text and for formatting text in paragraphs (considered inline elements from html 4). All embedded content is phrasing content as well as some interactive and metadata.
Interactive content is for interactive elements (e.g.. anchor tag, button, embed)
Heading content is for the header of a section (i.e.. h1-h6)
Sectioning content creates sections in the body of the document. e.g.. the <main> element is for the main part of a single page, mostly containing the content of the page, not including things that would span multiple pages like logos or title bars
Organising sections and subsections
Headings are used to organise sections of a document effectively
EG:
<h1>this is the top title</h1>
<h2> this is a subsection below </h2>
<h3> a subsection of h2 </h3>
<h3> and another </h3>
<h2> another subsection </h2>
<h1>another title of unrelated content to the first section <h1>
<h2>subsection</h2>
this was common in html 4, with <div id=“tag”> elements to add more semantic meaning to the documents
in html 5 <article> <aside> <nav> and <section> are used to create sections much like the headers of html 4 did.
Structuring Headers
Sometimes you need something like a tagline below a header, use <h1> for the header, but using <h2> for the tagline is a bad idea as it defines a new section, instead use <heading> over both the header (with <h1> tag) and the tagline.
This isn’t needed for any heading without a tagline
Structuring Footers
<footer> elements typically contains info about its section (contact info, who wrote it, disclaimers, copywriter).
it can be structured like headers, with <h1> ect inside, footers don’t have to be at the bottom, can be used as footers of sections.
Grouping sections
<footer> <header> <article> and <main> are elements that are used to group sections together
id attributes like <div id…> can be applied to these sections, e.g. (<article id=“tag”>)
<article> is for stand-alone content, could be removed from the page and make sense still
<section> is for thematic grouping, if there is a section in an article, this element is commonly used
It is more important to be consistent than use these above elements as described.
<aside> is for related content, but not part of the main text, (e.g.: used for ads)
<header> is for headers
<footer> is for footers (e.g.. contact me)
<main> is for the main body of text, use it to help things like search engines identify which part of a document is the focus. While <article> tells a search engine there is stand alone content, <main> tells it where to look.
Proper nesting structure
after a heading (e.g.:<h3>) generally there is the content defined by things like the <p> tag. It is good practice to highlight everything under the header, and the header and place it in a section element. Then any subsections as well (including sub-headers).
Extensions to check document structure
HTML 5 Outliner for google chrome
gsnedders html 5 outliner, a site to copy code to check the outline (not a perfect outline)
Headings map for firefox
Sectioning Roots
Headings will show up in the headings map if not nested inside a sectioning root element.
<blockquote> <body> <fieldset> <figure> and <td> are all forms of sectioning roots. You can nest headings inside a section root to remove headings from the regular document outline.
This is good practice for navigation and search engines. Keep the correct headings as google still indexes the internal structure.
Defining HTML 5 Documents
Firstly create a doctype declaration, to tell the browser the code is in HTML 5, this has been simplified for html 5 to this:
<!doctype html>
This is all you need as HTML 5 is assumed to be used, the <doctype> tag is only really for backward compatibility, it’ll probably work without it
Optionally, you can add <html lang=“en”> to say the code is in english and in html 5, </html> is needed at the end
<head> is for metadata </head> content that is not displayed
<meta charset=“utf-8”> is an example of what would be included in the <head> section, it says what character set is used.
Example:
<!doctype html>
<html lang=“en”>
<head>
<meta charset=“utf-8”>
<title> the browser tab title goes here</title>
</head>
<body>
//main document code goes here
</body>
</html>
Supporting legacy browsers (Backward compatibility)
to add compatibility for any internet explorer below IE9, you have to add the following in the <head>
<script src=“html5shim.googlecode.com/svn/trunk/html5.js”></script>
This contacts googles servers and pulls a small piece of javascript that allows HTML 5 elements to be read by older internet explorer versions
However, the element makes every browser read the script, when it is only needed by IE, to stop this add:
<!—[if lt IT 9]><script…….></script><![endif]—>
note: the ‘lt’ in the if statement means ‘less than’
Browsers will think off the above as a comment, unless its less than internet explorer version 9
Organising Content (for good practice)
Tutorial recommends dumping all content for a page as a list, then organise between Primary content (main focus) and secondary content.
This helps create a hierarchy, to create a document outline.
To have things
Like this subsection
and this subsection
In the correct places
To have semantic structure
for html 5
blah blah
Using Headings
<h1> is for the main header of the document, people used to say only use 1 <h1> tag, that isn’t needed now but some still do, because <h1> is commonly used as an overall page header
Don’t think of headings as big bold text, instead think of it as the identifier for which sections are main parts, sub sections, and sub sub sections.
Creating Navigation
You can put the navigation elements in the <header> or not, keep it high on the page though.
<nav> is the element used for navigation on the page </nav>
Unordered lists
in the nav element, using <ul> </ul> to identify unordered lists is a good idea, as the navigational links are generally a list of links in no particular order
Inside the unordered list tag <ul> wrap each item in a <li>list item</li> tag to identify a single item in the list.
Figure Element
<figure> elements </figure> is used to define content that illustrates the content that its related to. (eg. annotations and diagrams)
<figcaption> caption </figcaption> is not necessary but good for screen readers, format the caption with the CSS.
Keep in mind, anything considered illustrative can be contained in the <figure> element. The aim is to define the content that illustrates the main content and group all that in a meaningful way.
Using Asides
<aside> always creates a new section of content, used for sections related to content around it but could be considered separate.
Used for ads, writer reviews, tangentially related content.
Using Div tags
HTML 4 used divs much more, but they still have uses.
Div should be used as a last resort. The new html 5 elements are all round better.
Use it to group together content for javascript control or styling purposes.
E.g. at the footer, you may want 2 collums for the content, you can separate into two sections with <div class=“tag”> and using css, change the style for the tags to make each column.
Using definition Lists
<dl> definition list </dl> is for name/value pairs. So any list that organises itself with a name for a collection of values, then the values. (e.g.. a list of walks sorted by area, the name is the area, the values are the walks in that area)
<dt> definition term is for each of the names
<dd> for definitions is for each of the values.
Using tags for text style
<i> is for italics, its used for a different voice or mood than the rest of the text
<em> is for emphasis
<b> is for bold, to attract attention without conveying extra importance
<strong> is for emphasis and importance
using <p class=“tag”> is good for general styling that doesn’t fit these categories.
Good to use for html semantics.
Citing works
<cite> is good for citations
<blockquote> <q>heres an example of how to use elements for citations</q> – <footer> <cite> <span class=“author”>David Turnbull </span> – Html 5 notes <cite> 2/2/17 </footer> </blockquote>
<q> adds quotation marks
<span> is for inline elements, it doesn’t have its own styling.
Using the Address Element
<address> is used for contact information for the producer of particular content in a document (e.g.. contact info for the author of the article on a page)
Not really used for general contact info, just semantically for the author of content that is on a document. It can include more than just the contact info (like if it was part of a longer paragraph) but keep it short.
Not so much thematically important but semantically.
/Welcome to University of Lincoln Blogs. This is your first post. Edit or delete it, then start blogging!