html workshop 1
DESCRIPTION
html workshop 1TRANSCRIPT
HTML AND NAVIGATION WORKSHOP
Workshop Brief
Find at:
http://graphics2013.artbathspa.com/htmlworkshop/brief.pdf
HTML AND NAVIGATION WORKSHOP
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 YouTubeTizag http://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 Bath Spa 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 thematically 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; (or normal or oblique)color:rgba(0,0,0,255);}
h1 {font-family: “Times New Roman”, “Arial”;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 a specific div described 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
CSS Class
HTML<p class=“small_font”> Text </p>
CSS.small_font {font-family: “Verdana”, “Arial”;font-size:10px;font-weight:400;color:rgba(255,255,0,1);}
Note: the dot indicates a class
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
CLONING EXERCISE
Try to create a website that looks like the image found at:
http://graphics2013.artbathspa.com/htmlworkshop/examples/mermaid.png
A copy of these slides can be found at:
http://www.slideshare.net/graphics2013/html-workshop-1-26845485
You will have to use most if not all of the techniques you have learnt so far
GOOD LUCK!