Golin code academy
Creating Websites - hour 1
What we'll be creating
HTML : WHEN
A "brief" history
- late 1960's - First connection between two computers
- Couldn't transmit three characters
- 1970 - 1990 - Merging networks
- Due to differing standards, networks needed to be patched together
- 1989 - Radically innovated by Tim Berners Lee at CERN
- First example of a webpage as we currently understand them
- 1989 - 2010 - Global standardisation and connection
- 1996 - Google
- 2004 - Facebook & Fuse (Now Architect)
- 2005 - YouTube
- 2006 - Twitter
- 2015 - Cat Gifs.
The first website
HTML 5 ...what?
- HTML 5 is, predictably, the fifth version of HTML
- Released in 2014 after a 17 year wait
- HTML released in 1989
- Improved and added functionality with every release
- No need for Java or Flash anymore in most cases
The standardisation process
- Each change is reviewed by a standards committee called the W3C (World Wide Web Consortium
- Benefits from wide review
- Can take many years to finalise
- Has many stages
- Working Draft
- Candidate Recommendation
- Proposed Recommendation
- W3C Recommendation
- Gives a good indication what web professionals want to happen
HTML :WHAT
What is HTML ?
- Stands for HyperText Markup Language
- A standardised method of building web pages
- Consists of tags such as these :
- Each tag wraps around content to produce the desired effect
- Each tag has meaning and a reason to use it
<p> </p>
<b> </b>.html ? Bless you!
- .html is the most common file extension for html files
- Browsers automatically recognise .html files
- Main site pages are usually named 'index'
- This is a convention that is automatically recognised by the server
- Can be changed on the server
HTML : HOW?
Text Editor
+ Can be any text editor
+ Gives you more control over the web page
+ Usually very extensible and customisable
- Won't be visible until the file is accessed in the browser
- Everything must be hand coded
- Knowledge of HTML, CSS and Javascript required
WYSIWYG Editor
What You See Is What You Get
+ Manages all of the files and styling for you
+ Website is visible in the program itself
+ Doesn't need knowledge of HTML
- Reliance on editor creating good markup
- Not very customisable
- Is a specific kind of software
WRITING HTML
Tags 101 : The Phantom Tag
- Not this :
- Tags are usually written with an opening, a close, and content inbetween.
- Can be nested
- Describes the structure of a web page
- HTML tags come in all kinds of flavours
- Text : Bold, Heading, Link, Emphasised, Superscript etc.
- Formatting : Paragraph, Lists
- Semantics : Body, Header, Footer
<tag> Some witty and funny content. </tag>Tags 101 : The Phantom Tag
Creating a paragraph
<p> Decorating for Christmas at Golin was fun, with the whole office getting involved. </p>Creating a heading
<h1> Golin Weekly - The latest news from the PR world at Golin London </h1>Creating a smaller heading
<h3> Decorating for Christmas at Golin! </h3>Grouping the text together in a block
<div>
<h3> Decorating for Christmas at Golin! </h3>
<p>
Decorating for Christmas at Golin was fun, with the <em> whole office </em>
getting involved.
</p>
</div>Emphasising Text
<em> whole office </em>Nesting tags
<p>
Decorating for Christmas at Golin was fun, with the <em> whole office </em> getting involved.
</p>Tags 201 : Attack of the Tags
- A web page can be very simple, as already shown
HOWEVER
- A webpage also needs semantic context
- This is accomplished by using tags
- <!DOCTYPE html>
- <html></html>
- <head></head>
- <body></body>
- Once the main document is laid out, we use tags to group content.
- <div></div>
- <span></span>
Tags 201 : Attack of the Tags
First, we set out an HTML document :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
<footer>
</footer>
</html>Then we can insert some content in to the page.
<!DOCTYPE html>
<html>
<head>
<title>Golin PR Week - a demo website for the Golin Code Academy</title>
</head>
<body>
<div>
<h3> Decorating for Christmas at Golin! </h3>
<p>
Decorating for Christmas at Golin was fun, with the <em> whole office </em>
getting involved.
</p>
</div>
</body>
<footer>
</footer>
</html>Tags 301 :
Revenge of the Tags
- Tags can also have properties called 'attributes'
- These additional attributes add functionality
- Enables developers to;
- Link to other parts of the web
- Insert images in to the document
- Insert metadata for the document
- Add styling to specific elements
- Reference elements specifically when writing styles
- Adding an attribute is achieved as follows;
<tag attribute="value">Content of our tag</tag>Tags 401 :
A New Tag
- Tags don't always have to have a closing tag, and are known as self-closing.
- doctype
- img
- link
- meta
- script
- Usually used in conjunction with attributes, such as an image.
<img src="http://goo.gl/aUK461" alt="Good News, Everyone!" />Tags 401 :
A New Tag
- With this new knowledge we can make use of more tags
Link tag
Image tag
- And run in to old friends to expand their usefulness
<a href="http://www.golin.com/uk/> Golin's website </a><img src="http://goo.gl/aUK461" alt="Good News, Everyone!" /><div class="styling-reference"> </div>Tags 501 :
The Tags Strike Back
- We can now add an image to our article
- We can also add links to our article
- We can nest elements, as long as the tags aren't self-closing
<div>
<h3> Decorating for Christmas at Golin! </h3>
<a href="http://www.wikipedia.org/en/Christmas"
<img
src="http://upload.wikimedia.org/wikipedia/commons
/f/f2/Christmas_Wreath_-_geograph.org.uk_-_639554.jpg"
alt="A Christmas Wreath"
/>
</a>
<p>
Decorating for Christmas at Golin was fun, with the <em> whole office </em>
getting involved. <a href="/gallery"> Click here </a> for a look at the photos.
</p>
</div>Tags 501 :
The Tags Strike Back
- Add meta information to our article
- Makes page better visible for both browsers and search engines
<!DOCTYPE html>
<html>
<head>
<title>Golin PR Week - a demo website for the Golin Code Academy</title>
<meta charset="utf-8">
<meta name="keywords" content="PR, Design, Go All In, Golin">
<meta name="author" content="David Hasselhoff">
</head>
<body>
<!-- Article Content Here -->
</body>
<footer>
</footer>
</html>Tags 501 :
The Tags Strike Back
- HTML tags come in two main types
- Block tags
- Inline tags
-
Block tags take up the full width available, with a new line before and after
- <div></div>, <p></p> & <h></h>
-
Inline tags take up only as much width as they need, and do not force new lines
- <span></span>, <a></a>, <img/>, <em></em>
- Both block and inline tags' behaviour can be changed using external styling
Tags 601 :
Return of the Tags
- One last HTML concept needed and we can finish building our site
- A number of connected items or names written or printed consecutively, typically one below the other
- "What is there to describe, they're a fucking list
it's not a hard concept" ~ Gareth Bishop
- Two types of list
- Ordered
- Unordered
- Just like in a word processing program
Tags 601 :
Return of the Tags
Creating an Ordered List
<ol>
<li> <a href="www.golin.com/uk/">Golin.co.uk</a> </li>
<li> <h1> <a href="/"> home </a> </h1> </li>
<li> <h1> <a href="/"> gallery </a> </h1> </li>
</ol>
Creating an Unordered List
<ul>
<li> <a href="www.golin.com/uk/">Golin.co.uk</a> </li>
<li> <h1> <a href="/"> home </a> </h1> </li>
<li> <h1> <a href="/"> gallery </a> </h1> </li>
</ul>
Tags 601 :
Return of the Tags
<!DOCTYPE html>
<html>
<head>
<title>Golin PR Week - a demo website for the Golin Code Academy</title>
<meta charset="utf-8">
<meta name="keywords" content="PR, Design, Go All In, Golin">
<meta name="author" content="David Hasselhoff">
</head>
<body>
<div> <!-- General containing element for page -->
<div> <!-- Container for menu -->
<a href="/"><img src="images/logo.png" alt="Golin"> Weekly</a>
<div class="toolbar">
<a href="#">Register</a>
<a href="#">Sign in</a>
</div>
<div>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/news">News</a></li>
<li><a href="/views">Views</a></li>
<li><a href="/showcase">Showcase</a></li>
</ul>
</div>
</div>
<!-- article content -->
</div>
</body>
<footer>
</footer>
</html>With this knowledge of lists, we can add a navigation to the page.
Tags 701 : The Tags Awaken
- HTML5 has introduced a new set of tags which gives extra semantic value
- <nav></nav>
- Site or in-page navigation
- <article></article>
- News article, Blog or Forum post, sidebar widget
- <figure></figure>
- One or more images, graphics, code samples
- With optional <figcaption></figcaption>
- <aside></aside>
- Sidebar, comments section, glossary, advertising, footnote
- <section></section>
- A section of page or chapter of an <article></article>
Tags 701 : The Tags Awaken
We change our navigation bar to wrap with <nav></nav> tags
<nav class="global-navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/news">News</a></li>
<li><a href="/views">Views</a></li>
<li><a href="/showcase">Showcase</a></li>
</ul>
</nav>We change our article to be wrapped by <article></article> and <section></section> tags
<section>
<article>
<h3> Decorating for Christmas at Golin! </h3>
<a href="http://www.wikipedia.org/en/Christmas"
<img
src="http://upload.wikimedia.org/wikipedia/commons
/f/f2/Christmas_Wreath_-_geograph.org.uk_-_639554.jpg"
alt="A Christmas Wreath"
/>
</a>
<p>
Decorating for Christmas at Golin was fun, with the <em> whole office </em>
getting involved. <a href="/gallery"> Click here </a> for a look at the photos.
</p>
</article>
</section>Tags 701 : The Tags Awaken
Finally, we add some blurbs for other articles
<div>
<aside>
<h2>Latest gossip</h2>
<h3>Something something something</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quo, velit eos porro aperiam possimus exercitationem.</p>
<h3>Something something something</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quo, velit eos porro aperiam possimus exercitationem.</p>
<h3>Something something something</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quo, velit eos porro aperiam possimus exercitationem.</p>
<a href="#">More gossip!</a>
</aside>
</div>Tags 701 : The Tags Awaken
The finished product
<!DOCTYPE html>
<html>
<head>
<title>Golin PR Week - a demo website for the Golin Code Academy</title>
<meta charset="utf-8">
<meta name="keywords" content="PR, Design, Go All In, Golin">
<meta name="author" content="David Hasselhoff">
</head>
<body>
<div> <!-- General containing element for page -->
<nav class="global-navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/news">News</a></li>
<li><a href="/views">Views</a></li>
<li><a href="/showcase">Showcase</a></li>
</ul>
</nav>
<section>
<article>
<h3> Decorating for Christmas at Golin! </h3>
<a href="http://www.wikipedia.org/en/Christmas"
<img
src="http://upload.wikimedia.org/wikipedia/commons
/f/f2/Christmas_Wreath_-_geograph.org.uk_-_639554.jpg"
alt="A Christmas Wreath"
/>
</a>
<p>
Decorating for Christmas at Golin was fun, with the <em> whole office </em>
getting involved. <a href="/gallery"> Click here </a> for a look at the photos.
</p>
</article>
</section>
<div>
<aside>
<h2>Latest gossip</h2>
<h3>Something something something</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quo, velit eos porro aperiam possimus exercitationem.</p>
<h3>Something something something</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quo, velit eos porro aperiam possimus exercitationem.</p>
<h3>Something something something</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quo, velit eos porro aperiam possimus exercitationem.</p>
<a href="#">More gossip!</a>
</aside>
</div>
</div>
</body>
<footer>
</footer>
</html>
CONCLUSIONS
What we've learnt today
- HTML and its' history
- How to write HTML
- HTML Structure
- HTML Tags
- HTML Attributes
- Block and Inline Elements
- Self-Closing HTML Tags
- Semantic Markup
Golin Code Academy : The First [HTML]
By Alex Roche
