Notes From Code 201 Class 01

Things to remember

Dark brown pages are most dense and most useful. Skim the chapters quickly then read the summary at the end and go back and reread if there is something not understood. Not intended to be exercises in memorization.

HTML Book

HTML uses elements to describe the structure of pages. Each element has an opening and closing tag.

<html> </html> anything between the opening and closing tags of this element will be in html.
<body> </body> anything between the opening and closing tags of this element will be displayed inside the main browser window.

Attributes provide additional information about the contents of an element. They are made up of a name (in green) and a value (red) separated by the equal sign.
<p lang="en-us"> the attribute name would be lang and value “en-us” </p>
Note: HTML5 allows uppercase and inputs without quotes. This is not recommended.

Since there are multiple versions of html each document will need a DOCTYPE for HTML5 we use <!DOCTYPE html>
To leave comments use <!-- comment goes here --> these will not be displayed on the site. USE THEM
id attribute - Used to uniquely identify that element from other elements on the page. Its value should start with a letter or underscore. No two elements on the same page can have the same value for an id attribute.
class attribute - Can be used to identify several elements on the same page.
block level elements always appear to start on a new line. examples include <h1> <p> <ul> <li>
inline elements appear on the same line as their neighboring element such as <a> <b> <em> and <img>
div elements allow you to group a set of elements together in one block-level box.
span acts like an inline equivalent of the div element and can be used to contain sections of text when there is no other element to differentiate from surrounding text or contain a number of inline elements.
iframe short for inline frame is like a littl window that has been cut into your page which allows you to see another page.
meta elements are listed at the top in the <head> section. These contain information about the page that is not visible to users but can trigger search engines or who created the page. Meta elements do not require closing tags.
escape characters are used when you want to use a character that could show up as code. These are listed on page 193.

HTML Chapter 17: “HTML5 Layout” (pp.428-451)

HTML5 allows you to divide up parts of the page without having to use a bunch of div elements. Including -
<header> <footer> <nav> <article> <aside> <section> <hgroup> <figure> and their captions <figcaption>

You can even turn an entire block of code into a link with the <a> element.

HTML Chapter 18: “Process & Design” (pp. 452-475)

All websites should be designed for the target audience. These can be individuals or companies. Depending on the type of site you will need to know age, income, marital status, budgets, hours worked ect..

You will also want to know why they are visiting your site. Look at their motivations and goals.

What information do they need and how often will they vist.

With this info you can now create a site map to organize the information for the page.

Wireframes are created after you have your site map and all of the information on users. Wireframes are simple sketches of the key information. They will show the layout of your page.

Ensure you prioritize and organize your information in the best way to get your message across. Use a visual hierarchy for size, color and style of your page as well as grouping information in the best layout to comprehend what you are saying.

Navigating your site should concise and clear using selective language and contect.

JS Book

This will have to be completed after class today. I apologize for being a little behind already.

Introduction

JS Chapter 1: “The ABC of Programming” (pp.11-52)

201 Contents

Return HOME