The material here is not visible on the page but informs the browser what it is loading, what type of screen it is intended for, and what dependencies it also needs to load (external CSS, javascript, PHP include files, etc.)<\/p>\n
This tells the browser what type of content it is loading.<\/p>\n
<!DOCTYPE html>\r\n<\/code><\/pre>\nFortunately you don’t need to use this from the past!<\/p>\n
<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict\/dtd">\r\n<\/code><\/pre>\nMETA<\/h4>\n
Tell the browser what character encoding the page is using.
\n <\/p>\n
The rest of your meta tags are optional and we’ll get to that at a later stage.<\/p>\n
LINKS<\/h4>\n
Link your external support files. For now we are just focusing on your external stylesheet(s) but this is also where you would include javascript files as well.<\/p>\n
<link rel="stylesheet" href="style.css">\r\n<link trl="stylesheet" href="normalise.css">\r\n<\/code><\/pre>\nI prefer to add additional ones as import links in the main stylesheet (more on this later).<\/p>\n
\nThis brings us to our top level visible<\/em> components of your page.<\/p>\nHEADER<\/h3>\n
You normally include introductory elements here such as:<\/p>\n
\n- Logo<\/li>\n
- tagline<\/li>\n
- branding elements (images)<\/li>\n
- main navigation<\/li>\n
- search<\/li>\n
- other key elements.<\/li>\n
- NAV – specified element of HEADER that states it’s a Navigation Menu<\/li>\n<\/ul>\n
SECTION<\/h3>\n\n- generally these are used as the container for any larger element of the body of your page that may enclose even more specific elements within. These might be:<\/li>\n
- full-page width<\/li>\n
- multiple columns (left, middle, right \u2013 fluid or fixed)<\/li>\n
- multiple rows<\/li>\n
- can contain even more specific elements such as:<\/li>\n
- ARTICLE – an unique element such as a news article, or just think stylistically modular component of a larger body of text or graphics.<\/li>\n
- ASIDE – another unique element such as block quotes, non-essential side information.<\/li>\n<\/ul>\n
FOOTER<\/h3>\n\n- end page content such as: Copyright Info, maybe text version of nav menu, other top level links that aren’t foreground enough to include in HEADER.<\/li>\n
- might also be broken up in to multiple SECTIONS (e.g. sub-footer, footer)<\/li>\n<\/ul>\n
DIV<\/h3>\n
DIVs can technically be used for any of the above elements and still validate as HTML5, however the practice going forward is to generally be as specific as possible so the semantic structure is clear to not only Browsers, but Screen Readers for Visually Impaired as well as any potential future interfaces we haven’t conceived of yet! You can still use them for non-specific or repetitive components such as:<\/p>\n
\n- page wrappers<\/li>\n
- sub sections within sections<\/li>\n
- widgets<\/em><\/li>\n
- smaller blocks of text or media that have their own unique style and placement<\/li>\n<\/ul>\n
Any of the above components would of course include an array of:
\n * Headings
\n * Captions
\n * Paragraphs
\n * Images
\n * Audio\/Video<\/p>\n
\nCascading Style Sheets (CSS)<\/h2>\n
Going hand in hand with your HTML is obviously your design markup that we will separate out to an external file.<\/p>\n
Where can you include your CSS<\/h3>\n
There are technically 3 places you can locate your CSS but we are ONLY going to use Option 3 as it is best-practice for numerous reasons that should become obvious.<\/p>\n
1. Inline style attributes<\/h4>\n
This means including directly within your HTML code. This is bad practice as it’s horribly difficult to maintain, you can’t easily change a style across your whole site in one move. But it IS handy occasionally (and temporarily) to quickly try something out without going back and putting it in your css files in the correct order (see Cascade Order below).<\/p>\n
Example:<\/p>\n
<p style="color: blue;">This is some blue text\/<\/p>\r\n<\/code><\/pre>\n2. In the HEAD<\/h4>\n
Advantage over inline is it keeps it all in one place (but only on the one page).<\/p>\n
Example:<\/p>\n
<head>\r\n <style>\r\n p { color: blue; }\r\n <\/style>\r\n<\/head>\r\n<\/code><\/pre>\n3. Externally Linked<\/h4>\n
All your styles succinctly contained in one file, referenced by every page on your site. You can even include other CSS files through the IMPORT function.<\/p>\n
Example:<\/p>\n
<head>\r\n <link rel="stylesheet" href="style.css">\r\n<\/head>\r\n<\/code><\/pre>\n3 Major Types of Selectors<\/h3>\nElement Selector<\/h4>\n
This includes styling your specific elements such as: body, h1, p, a, ul, li, etc.
\nMore advanced usage includes using these as ‘childs’ of another element such as:<\/p>\n
p a { text-decoration: underline; }\r\n<\/code><\/pre>\nThis would style anchors with an underline, but ONLY if they are inside of a Paragraph.<\/p>\n
Class Selector<\/h4>\n
Class styles should the most common you use after specific Elements. As a general rule, if you think you may want to apply a style to multiple types of elements (such as a uniform color, size, box treatment, etc.) then use a class.<\/p>\n
In your HTML:<\/p>\n
<p class="blue">blue text.<\/p>\r\n<\/code><\/pre>\nIn your CSS:<\/p>\n
.blue { color: blue; }\r\n<\/code><\/pre>\nID Selector<\/h4>\n
If your styling an ID there better be a really deliberate reason for using one as they are rigid and CANNOT be re-used within a page. If at all possible: use an ELEMENT, CLASS or even a PSUEDO-CLASS first.<\/p>\n
Believe it or not, there’s actually about 27 more possible Selectors or combinations of Selectors! If you’re interested in advanced possibilities, there’s an excellent rundown here<\/a><\/p>\nCSS Box Model<\/h3>\n
Understanding the Box Model will take you a long way towards successful layout and spacing of your page components. Start with the W3C<\/a> and CSS=Tricks<\/a> references on this topic.<\/p>\n
\nSome Emerging Web Design Trends<\/h2>\n\n- Responsive\/Adaptive Design<\/li>\n
- Flexbox<\/li>\n
- ???<\/li>\n<\/ul>\n
\nHTML\/CSS Core Principles Review Exercise<\/h2>\n
For this tutorial’s Exercise plus some additional resources, please refer to Dave Wallace’s tutorial page<\/a>.<\/p>\n