Html workshop 1


Published on

html workshop 1

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Can use sound but be aware that the module is about interactive text, so its important to demonstrate an interactive approach to text.
  • Javascript: So we could write some javascript that changes the colour of some text when it is clicked on Libraries: Prewritten javascript that simplifies the scripting process. Instead of writing long passages of javascript to say, spin some text, you can find a library that reduces this down to about one line. A very good one is jQuery. We will be using that when we look at interactivity using javascript. Jquery: javascript library that simplifies the scripting process. A good introduction to javascript. We will be using this.Other: we won’t be using them but its useful to know there are lots of other toolsPHP server side scripting language – communicating with servers (looking up data in a database)MYSQL – database management
  • Html workshop 1

    1. 1. HTML AND NAVIGATION WORKSHOP Lee Scott Workshop Brief Find at:
    2. 2. HTML AND NAVIGATION WORKSHOP Week 1 Building blocks of the web: servers, clients, browsers HTML: setting up a webpage, creating headers, text, and divs CSS: styling text and positioning elements Week 2 Navigation: using hyperlinks HTML: working with Image, video, and audio elements Troubleshooting: using browsers based web inspectors Week 3 Interactivity: HTML5 methods and an introduction to JavaScript Advanced text: adding font files, opacity, motion Week 4 Present ideas to group. Feedback Begin creating your website Week 5 Continue working on your website
    3. 3. INDEPENDENT LEARNING Web based resources w3 schools Html5rocks Dive into HTML Forums Coding Forums Github HTML tutorials online YouTube search HTML tutorials in YouTube Tizag
    4. 4. ASSIGNMENT Build a small website The website must take the form of an interactive story Jack and the Beanstalk Three Little Pigs Mr Fox The 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.
    5. 5. WEB SERVERS, CLIENTS AND BROWSERS Web serverClient Browser renders HTML
    6. 6. WEBSITE ANATOMY HTML HyperTextMarkup Language Defines webpage structure Contains content (text, images, sounds) HTML building blocks are called elements CSS Cascading StyleSheet Used to style HTML elements (e.g. text colour, font, size) HTML file links to a CSS file JavaScript Facilitates user interactivity Alter content after it has been displayed Libraries: jQuery Other Languages PHP (server side) MYSQL
    7. 7. BEGINNING TO WORK WITH HTML HTML editor Coda, Dreamweaver, TextEdit, BlueFish, CoffeeCup, Aracnophilia We are using TextWrangler Web server We need access to some web space Our websites will be ‘hosted’ on a Bath Spa server FTP File Transfer Protocol A way to transfer files from one ‘host’ (computer) to another Allows us to ‘upload’ content to our web server
    8. 8. BEGINNING TO WORK WITH HTML FTP login details Server: Username: graphics2013 Password: weareyear2
    9. 9. HTML ELEMENTS AND TAGS ELEMENTS Individual component of a webpage e.g. image, video, text paragraphs, sound, headers, tables TAGS HTML 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>
    10. 10. 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
    11. 11. 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
    12. 12. 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); }
    13. 13. CSS (Cascading StyleSheets) Styling Structural Elements Div, section, article, aside, nav body { background-color:rgba(255,0,0,0); } Contain CSS instructions in braces End each instruction with a semicolon ‘color’ american spelling rgba: 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 document Border styles: dotted, solid, double, dashed
    14. 14. POSITIONING Size body { height:1200px; Width:800px; } Position #my_div { position:absolute; top:200px; left: 200px; } options: absolute, fixed, relative, static Just use ‘absolute’ for now.Text-align #my_div { text-align: left; } options: left, right, center
    15. 15. POSITIONING Margins margin-top:50px; margin-bottom:40px; margin-right:30px; margin-left:20px margin:50px 40px 30px 20px Padding padding-top:10px; padding-bottom:10px; padding-right:50px; padding-left:50px padding:10px 10px 50px 50px
    16. 16. 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
    17. 17. 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
    18. 18. CLONING EXERCISE Try to create a website that looks like the image found at: A copy of these slides can be found at: You will have to use most if not all of the techniques you have learnt so far GOOD LUCK!