reading-notes

HOME

Introduction to HTML and Javascript Reading Notes

Duckett: HTML&CSS CH1

Structure

How a well a webpage is structured will determine the success in catching and keeping the attention of the audience. When creating a structure, it is important to do so with the goal of clearly stating and portraying the message to be delivered, and making the different pages easily accessible and relevent to the overal goal.

The structure of a webpage first, consists of organizing bodies of texts, photos and other information into headings, subheading, paragraphs and a footing.

HTML code within angled brackets <> which makes them elements. Elements are made up by tags showing as opening and closing. For example <> </>. When a bunch of HTML elements are put together, the structure of a webpage and the contents within each section will begin to show form by priority

This is the start of creating a webpage’s wireframe.

Duckett: HTML&CSS CH8

DOCTYPES

Relays to browser which version of HTML is being used to creat a page.

<!–COMMENT–!>

Adds comments to code.

id and class

Allows the creator to identify particular elements, this helps with edit through CSS.

<div>

Lets creators group ‘block-level’ and ‘inline’ elements together.

Awesome, this element makes a window on a page where another page can be shown.

Using this, creators can include information about the webbpage

Different Versions of HTML

HTML 4 - 1997

No longer recommended to be used by modern day creators. it’s pretty out of date.

XHTML 1.0 - 2000

XHTML was created to follow the rules of XML from 1998 which made stricter rules for writing markup. Some other versions of XHTML 1.0 are,

HTML5 - In progress

In this version, creators will not need to close all tags. New elements and attributes are in the mix as well. Although it is not yet complete, creators can use some of the features as long as we are mindful of how users with older browsers, may or may not be able to view webpages.

Duckett: HTML&CSS CH17

HTML5

HTML5 is introducing new elements that result in clearer code and the ability to better show and describe a the overall structure of a webbpage.

Older browsers won’t recognize these newer element and must be told which elements are “block-level”.

Extra JS needs to be installed in Internet Explorers 8 and older in order for the new HTML5 elements to work.

Duckett:HTML&CSS CH18

Designing My Website

Who is my target audience?

Creating a wireframe for my website
Where to start?
When making the rough draft/basic layout
Consider the visual design to help get the message across
Be sure to prioritize content of website
Visual hierarchy
How should it all be organized?
Grouping and consistent visual style

JAVASCRIPT Reading Notes

Duckett: JS&JQUERY Intro + CH1: The ABC’s of Programming

Pages 1-24

How does Javascript make your webpage more interactive?

Writing Javascript

  1. Start by writing out your goal like tell a robot how to put on a hoodie

  2. Break down that goal by a series of tasks like pick up hoodie, lift over head…

  3. Create a code for each step in Javascript

Taking it from steps to code

LEARN TO THINK LIKE A COMPUTER!!

REMEMBER

Pages 25-42: How Computers Fit in the World Around Them

Programmers create models using data to instruct a computer in carrying out tasks.

So, events trigger methods, methods call/update the properties of an object.

objects are combined and build programs which can create web browsers

document object access and change the visible page and the possibilites of interactions with users on that page.

Pages 43-52: Writing Script for a Web Page

JavaScript is just one of the multiple layers which build a webpage, the other layers in most cases is HTML and CSS and together they are progressive enhancement in page building.

Creating Javascript

Javascript is written in plain text like HTML and CSS.

-JS files can live in folders js., scripts or javascript

Objects and Methods

document = represents the entire webpage write(‘message here’) = the content can be written on the page where script element is

JS code is embedded directly into the HTML code.

HOME