I decided to create a cheat sheet that i will most likely be referring back to many times during this course.
It explains how the web works, how to use and understand structure word documents and how HTML utilizes elements to describe these structures.
Extra markup goes on to explaining the different versions of HTML, how to indentify and group elements. Finally it ends on how to make comments, meta info and my favorite iframes.
Be aware that there are different versions HTML:
Comments are lines of text that are supposed to help you remember what your code is supposed to mean
<!– this is how i make a comment in HTML5 –>
thank you book
<div> allows you to group a set of elements together in one block-level box. This is great for organization.
When <div> is assigned an id or class the CSS style rules can change the look of everything inside that <div>.
<iframe> creates a little window that lets you see another page. As the book says, the most common usage of this is with google maps.
The meta element lives within the head element and contains info about the web page. It is not visible to users but it can tell search engines about your page such as, who created it and when the page expires.
The first few pages talk about the “traditional” HTML5 and the heavy usage of divs with ids, while the new format still does utilize divs but more to describe sections. The new format utilizes the other elements such as header, nav, article, aside and footer. This chapter does a deep dive into each element and how it can be used on a web page.
This chapter focuses on the processes of creating a new site and who it’s audience will be.
Ask yourself: “Who will be looking at and using this site?”, “Who is my target audience?”, “What is the person’s goal of interacting with your website?”
A simple sketch of the key information that needs to be on each page. This is the key to a good flowing website.
Does the design help the user navigate to the information they want to see? Or does it hinder your user?
“A script is a series of instructions”
Like the book metions, I like to think of javascript sort of like a recipe. The computer will follow the steps 1 by 1 in order the way you have set it out.
“To write a script you first need to state your goal, then list the tasks that need to be completed in order to achieve it.
Computers approach tasks in a different way than humans, so your instructions must let the computer solve the tasks programmaticaly.
This is how a computer can understand what things are by using script. Objects can have instances with different properties(characteristics). I like the book’s example with cars:
(instance 1) Object type: Car Properties, Make:BMW, Color:Silver, Fuel:Disel
(instance 2) Object type: Car Properties, Make:Porche, Color:Red, Fuel:Gas
“People interact with obejcts. Interactions can change the values of the properties in these objects”
Events are things that happen, such as a web page loading up or interactions from a user (clicking, enter text into a search bar). Scripting is used to change how your program reacts to that interaction.
A specific event can trigger certain things to happen within your program. I like the book’s example of the search bar.
This is how you program the answer to the Event. Different methods can change the properties of the Object.
Lets say the Object was MyStomach and MyFood
MyStomach properties could be hunger and the values could equal full, not hungry, kinda hungry, starving MyFood properties could be foodStockCount and the values could be Stocked, 3/4, half, empty
A document object contains the HTML beneath this are nodes. Each node is another object which can represent elements. HTML can receive CSS style sheet rules to style that web page.
Each webpage uses an interpreter which takes your javascript instructions and translates them into things the browser can use to achieve the tasks you want it to perform. With interpreted languages each line of code is translated one-by-one.
Javascript is added to HTML with the script element here is the example from the book so i dont forget:
remember to replace the info after src=” “