Html workshop 1
-
Upload
lee-scott -
Category
Technology
-
view
140 -
download
2
description
Transcript of Html workshop 1
![Page 1: Html workshop 1](https://reader035.fdocuments.net/reader035/viewer/2022062616/549a5560ac79591d2e8b5b49/html5/thumbnails/1.jpg)
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
![Page 2: Html workshop 1](https://reader035.fdocuments.net/reader035/viewer/2022062616/549a5560ac79591d2e8b5b49/html5/thumbnails/2.jpg)
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
![Page 3: Html workshop 1](https://reader035.fdocuments.net/reader035/viewer/2022062616/549a5560ac79591d2e8b5b49/html5/thumbnails/3.jpg)
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.
![Page 4: Html workshop 1](https://reader035.fdocuments.net/reader035/viewer/2022062616/549a5560ac79591d2e8b5b49/html5/thumbnails/4.jpg)
WEB SERVERS, CLIENTS AND BROWSERS
Web serverClient
Browser renders HTML
![Page 5: Html workshop 1](https://reader035.fdocuments.net/reader035/viewer/2022062616/549a5560ac79591d2e8b5b49/html5/thumbnails/5.jpg)
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
![Page 6: Html workshop 1](https://reader035.fdocuments.net/reader035/viewer/2022062616/549a5560ac79591d2e8b5b49/html5/thumbnails/6.jpg)
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
![Page 7: Html workshop 1](https://reader035.fdocuments.net/reader035/viewer/2022062616/549a5560ac79591d2e8b5b49/html5/thumbnails/7.jpg)
BEGINNING TO WORK WITH HTML
FTP login details
Server: ftp.artbathspa.com
Username: graphics2013
Password: weareyear2
![Page 8: Html workshop 1](https://reader035.fdocuments.net/reader035/viewer/2022062616/549a5560ac79591d2e8b5b49/html5/thumbnails/8.jpg)
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>
![Page 9: Html workshop 1](https://reader035.fdocuments.net/reader035/viewer/2022062616/549a5560ac79591d2e8b5b49/html5/thumbnails/9.jpg)
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
![Page 10: Html workshop 1](https://reader035.fdocuments.net/reader035/viewer/2022062616/549a5560ac79591d2e8b5b49/html5/thumbnails/10.jpg)
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
![Page 11: Html workshop 1](https://reader035.fdocuments.net/reader035/viewer/2022062616/549a5560ac79591d2e8b5b49/html5/thumbnails/11.jpg)
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);}
![Page 12: Html workshop 1](https://reader035.fdocuments.net/reader035/viewer/2022062616/549a5560ac79591d2e8b5b49/html5/thumbnails/12.jpg)
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
![Page 13: Html workshop 1](https://reader035.fdocuments.net/reader035/viewer/2022062616/549a5560ac79591d2e8b5b49/html5/thumbnails/13.jpg)
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
![Page 14: Html workshop 1](https://reader035.fdocuments.net/reader035/viewer/2022062616/549a5560ac79591d2e8b5b49/html5/thumbnails/14.jpg)
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
![Page 15: Html workshop 1](https://reader035.fdocuments.net/reader035/viewer/2022062616/549a5560ac79591d2e8b5b49/html5/thumbnails/15.jpg)
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