html workshop 1

HTML AND NAVIGATION WORKSHOP

Tutor: Lee Scott

Week 1Building blocks of the web: servers, clients, browsersHTML: setting up a webpage, creating headers, text, and divsCSS: styling text and positioning elements

Week 2Navigation: using hyperlinksHTML: working with Image, video, and audio elementsTroubleshooting: using browsers based web inspectors

Week 3Interactivity: HTML5 methods and an introduction to JavaScriptAdvanced text: adding font files, opacity, motion

Week 4 Present ideas to group. FeedbackBegin creating your website

Week 5 Continue working on your website

INDEPENDENT LEARNING

Web based resources

w3 schoolshttp://www.w2schools.comHtml5rocks http://www.html5rocks.comDive into HTMLhttp://diveintohtml5.info

Forums

Coding Forumshttp://www.codingforums.com Github https://github.com

HTML tutorials online

YouTube search HTML tutorials in YouTubeTizaghttp://www.tizag.com/htmlT

ASSIGNMENT

Build a small website

The website must take the form of an interactive story

Jack and the BeanstalkThree Little PigsMr FoxThe Cat and Mouse

Use as much or as little of the text as you like

Demonstrate an interactive approach to the text using hyperlinks, and user input events (mouse, keyboard etc)

Include a 300 word description of your approach to navigation and the structure of your site.

Include a list of hyperlinks to a selection of web resources (examples of work or theory) that have informed your approach. Annotate.

WEB SERVERS, CLIENTS AND BROWSERS

Web serverClient

Browser renders HTML

WEBSITE ANATOMY

HTMLHyperText Markup LanguageDefines webpage structureContains content (text, images, sounds) HTML building blocks are called elements

CSSCascading StyleSheetUsed to style HTML elements (e.g. text colour, font, size)HTML file links to a CSS file

JavaScriptFacilitates user interactivityAlter content after it has been displayedLibraries: jQuery

Other LanguagesPHP (server side)MYSQL

BEGINNING TO WORK WITH HTML

HTML editorCoda, Dreamweaver, TextEdit, BlueFish, CoffeeCup, Aracnophilia

We are using TextWrangler

Web serverWe need access to some web spaceOur websites will be ‘hosted’ on a bathspa server

FTP File Transfer ProtocolA way to transfer files from one ‘host’ (computer) to anotherAllows us to ‘upload’ content to our web server

BEGINNING TO WORK WITH HTML

FTP login details

Server: ftp.artbathspa.com

Username: graphics2013

Password: weareyear2

HTML ELEMENTS AND TAGS

ELEMENTSIndividual component of a webpage

e.g. image, video, text paragraphs, sound, headers, tables

TAGSHTML markup that represents or describes an elements

<img>, <video>, <p>, <audio>, <h1>, <table>

Tags must be opened and closed

<p> Hello World </p>

<img + attributes…. > </img>

WEBPAGE ESSENTIALS

A series of tags to set up a web page

Save as a template!

<!DOCTYPE html><html>These two tags tell the browser that the file is a HTML document

<head>Contains a collection of metadata for the document. Metadata is data about data. This includes page titles, and links to CSS and JavaScript documents

<meta charset=“UTF-8”>Character set that should be used to render the web page

<title>Gives the webpage a title. Title shown in browser toolbar and in web searches

<body>Content of the webpage itself

BODY TAGS

<header>Headings

<nav>Navigational sections. Links to pages on the website

<section>Thematically grouped content

<article>An article e.g. blog post or comment section

<aside>Content placed aside. Should be related to surrounding content (section/article)

<footer>Usually placed at the end of a document e.g. contact information

<div>A general container for content

<p>Paragraph. Almost always used for text

A VERY stereotypical webpage

CSS (Cascading StyleSheets)

Link to HTML file

Styling Text

<link rel="stylesheet" type="text/css" href=”style.css">

p {font-family: “Times New Roman”, “Arial”font-size:20px;font-weight: lighter or normal or bold or bolder font-style:italic;color:rgba(0,0,0,255);}

h1 {font-family: “Times New Roman”;font-size:40px;font-weight: bold; font-style:normal;color:rgba(0,0,0,255);}

CSS (Cascading StyleSheets)

Styling Structural Elements Div, section, article, aside, nav

body { background-color:rgba(255,0,0,0) ; }

Contain CSS instructions in bracesEnd each instruction with a semicolon‘color’ american spellingrgba: red (0-255), green (0-255), blue (0-255), alpha (0-1)

#my_div {border-style:solid;border-width:5px;}

‘#’ refer to specific div in HTML documentBorder styles: dotted, solid, double, dashed

POSITIONING

Size

body {height:1200px;Width:800px;} Position

#my_div {position:absolute;top:200px;left: 200px;}

options: absolute, fixed, relative, staticJust use ‘absolute’ for now.Text-align

#my_div {text-align: left;}

options: left, right, center

POSITIONING

Marginsmargin-top:50px;margin-bottom:40px;margin-right:30px;margin-left:20px

margin:50px 40px 30px 20px

Paddingpadding-top:10px;padding-bottom:10px;padding-right:50px;padding-left:50px

padding:10px 10px 50px 50px

POSITIONING

Centre <body>

body {width: 1200px;height: 600px;position: fixed;top: 50%;left: 50%;margin-top: -300px;margin-left: -600px;

border-style:solid;border-width:1px;}

Top and Left are set at 50%. The top left point of <body> will be placed at the midpoint of the browser

html workshop 1

Technology