reading-notes

# Introductory HTML and JavaScript

HTML Structure

• HTML pages are text documents
• HTML uses tags
• Tags are often referred to as elements
• Tags usually come in pairs
• Opening tags denote the start of a oiece of content and the closing tag denotes the end
• Opening tags can carry attributes
• Attributes require a name and a value

Extra Markup

• DOCTYPES tell browsers which version of HTML you are using
• You can add comments to your code between <!-- and --> markers
• id and class attributes allow you to identify particular elements
• The <div> and <span> elements allow you to group block-level and inline elements together
• <iframes> cut windows into your web pages through which other pages can be displayed
• The <meta> tag allows you to supply all kinds of information about your web page
• Escape characters are used to include special characters in your pages

HTML5 Layout

• The new HTML5 elements indicate the purpose of different parts of a web page and help describe its structure
• The new elements provide clearer code
• Older browsers that do not understand HTML5 elements need to be told which elements are block-level elememts
• Extra JavaScript is needed to make HTML5 elements work in Internet Explorer 8

Process & Design

• It is important to understand who your target audience is, why they would come to your site, what they are looking to find and when they will return
• Site maps allow you to plan the structure of a site
• Wireframes allow you to organize the page understand what you are trying to tell them
• You can differentiate between pieces of info using size, color and style
• Visual hierachy helps visitors understand what you are trying to tell them
• You can use grouping and similarity to help simplify the info you present

What is a script and how do I create one?

• A script is a series of instructions that the computer can follow in order to achieve a goal
• Each time the script is run, it may only use a subset of the instructions
• Your instructions must let the computer solve the task programmatically
• Break down your goal into a series of tasks then work out each step needed to complete that task

How a Browser Sees a Web Page

1. Receive a page as HTML code
2. Create a model of the page and store it in memory
3. Use a rendering engine to shower the page on screen

How do computers fit in with the world around them?

• Computers create models of the world using data
• Models use objects to represent physical things
• Objects can have properties, methods and events
• Properties tell us about the object
• Methods perform tasks using the properties of the object
• Events are triggered when a user interacts with the computer
• Each element in HTML creates its own node (which is a kind of object)

How HTML, CSS and JavaScript Fit Together

How do I write a script for a web page?

• JavaScript files are text files that have the .js extension
• HTML <script> element tells the browser to load the JavaScript file
• HTML <link> elements can be used to load CSS