Creating Websites - hour 1
<p> </p>
<b> </b>
+ 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
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
<tag> Some witty and funny content. </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>
HOWEVER
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>
<tag attribute="value">Content of our tag</tag>
<img src="http://goo.gl/aUK461" alt="Good News, Everyone!" />
Link tag
Image tag
<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>
<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>
<!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>
it's not a hard concept" ~ Gareth Bishop
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>
<!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.
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>
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>
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>