An online markdown blog and knowledge repository.
Introduction HTML Chapter 1: Structure HTML Chapter 17: Layout HTML Chapter 18: Process and Design JS Book Introduction JS The Art of Programming
The internet is a global network connecting computers together. Computers have unique IP addresses (like a home street address) allowing other computers to find them. A naming system called DNS is like a directory that provides a lookup of human-readable names like www.microsoft.com into ip addresses like 192.168.123.10. Web servers on the internet are like special file servers, hosting special files that web browsers can process and display on a users screen.
Web browsers interpret HTML to display text on the page, arranging text elements into different parts of the page or with different styles.
Cascading Style Sheets (CSS) are used to describe the layout and design details of the web page to a greater degree than HTML can do. CSS can change website colors, text properties like fonts and colors, and more.
HTML5 is the latest revision of the HTML specifications.
<head></p><h1>Header H1</h1>Attributes are key-value pairs that help describe content stored within HTML elements. An example attribute:
lang='en-us'[Duckett, pg.25].
Body: Defines the area the browser will render. Think of this as the parent container for the entire web page.
Head: This element should be within the Body element, and defines any additional metadata about the web page.
Title: The Title tag should live within the Head.
HTML 4 was released in 1997, XHTML (based on XML) was released in 2000, and HTML5 was initially released in 2008 and is now considered a living standard (see Wikipedia). The most widely used browsers keep up with (or ahead of) HTML standards, and website developers must know how to tell the browser which version they are coding in.
<!DOCTYPE html> as the first line in an HTML page.These is global and can be applied to any html element, so each must be unique on each web page. Usage:<p id="id_name">text</p>. ID Attributes are used to allow styling elements differently than others on the page, by using CSS. JavaScript can leverage ID attributes to work with HTML elements.
Class attributes allow identifying many attributes within a page by applying CSS to the class-named elements. Usage:<p class="blue_font bold_font">text</p>. This will make the P element content font take on the CSS featured programmed for that class name (presumably bold and blue).
Block elements cause content to always appear on a new line, whereas Inline elements continue on the same line as neighboring elements (and their content).
<h1> ..., <p>, <ul>, <li>, and <div><a>, <b>, <em>, <img> and <span>Iframe is short for Inline Frame. It forms a window within a larger document to place images, video, or other information.
SRC= is used to point to the source content.height, width, and seamless properties are used to control the size of the iframe, and whether or not there is a scroll bar within it.These live in the HEAD element and are not rendered in the browser, but they should contain descriptive information for the browser and Search Engines to use, like `author, description, published'... etc.
<meta http-equiv="pragma" content="no-cache"/> or <meta http-equiv="robots" content="nofollow"/>There are Search Engine properties, cache-controlling properties, and a viewport property.
Escape Characters allow display of reserved HTML characters like the less-than sign aka left-angled-bracket: <.
Use < or < to display the < character otherwise the browser might not be able to render the page at all.
There are many other characters and special symbols like currency, the copyright symbol, and soome punctuation.
Advice: If the wrong character (or nothing) appears in the spot where a reserved HTML character is expected try changing the Font to fix the problem.
This chapter discusses layout elements, how to get old browsers to understand html5 elements, and how to stylize elements with css.
<div> Groups together related elements on the page.
class or id These attributes indicate the role of <div> elements.
These elements are named after sectional areas of common web sites and have specific purposes that should be closely followed:
HEADER
Named after the commonly known header portion of a page.
NAV
Contains major navigational blocks such as priimary site navigation links.
ASIDE
Nested within <article> elements: Should contain information that is related to the article but not essential to its overall meaning for example: a pullqoute or a glossary [Duckett, pg.436].
Used outside of Article elements: Should contain information that releates to the entire page for example: Links to other sections or list of recent posts [Duckett, pg.436].
ARTICLE
Use as a container for any section of a page that could stand alone and potentially be syndicated [Duckett, pg.437].
Can be nested.
SECTION
Groups related content together and each section element would have its own heading.
Can contain several distinct <article> elements.
Can be used to break up a long article into smaller sections.
NOTICE! Do not use as a wrapper for an entire page unless entire page is a distinct piece of content.
Alternatively, use <div> to wrap content that could be within one or more section elements.
HGROUP
Groups <h1> etc headings together. Use it as a stylizing tool for multiple header elements.
FIGURE and FIGCAPTION
Contain content that is referenced in the main flow of the article or page.
Could be images, videos, graphs, diagrams, code samples... etc.
Should be supportive of the main article and not a critical component or integral to the meaning of the main article.
Should contain a text discription of the figure element contents:
<figure> <img src="" /> <figcaption>caption_this_text</figcaption> </figure>
DIV
Previous to HTML5 Layout Elements this was heavily used to define headers, nav, and so on.
Now, use DIV only if layout elements do not fit their stated purpose.
If there is no suitable html5 layout element, use <div> and assign a CLASS or ID attribute to style and control it.
LINKING Around Block-level Elements
Html5 allows surrounding block-level elements with an anchor element. The entire block between the tags becomes an active link. Attempting this in previous html versions could result in rendering or the link not functioning.
Html5 can be used in older browsers but will be treated as inline elements. Include a line of CSS that tells the browser the html5 elements should be rendered as block elements instead:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svc/trunk/html5.js"></script>
<![endif]>-->
The chapter covers a process for creating a new website, and includes suggestions for the design process. It is important to get to know your website visitors (current and potential), why they would visit the website and what they are looking for, and how the website will get them what they need. Information can be organized and stylized in ways that helps visitors meet their goals, as well as produce a professional and functional website.
Determine who wants to use the site, but understand it cannot serve everyone. Acquire information from target audience, including demographics, to help design the site organization and design.
Develop a matrix of the above information so questions about what the website should look like, the information it will contain, and how the website will operate can be better answered during the design process.
Visitors sometimes find wesites by chance, other time there are motivators and goals that drive users to a website. These should influence the design and content of the webiste.
Motivators can be:
Goals can be:
ID the key motivators and goals to help design the website appropriately for intended audience.
Create a list of reasons for various imaginary users to come to the website and use this as a guide in the design.
HOW OFTEN WILL PEOPLE VISIT?
Sites offering time-sensitive information or regularly changing information might see more users that other types of sites.
The cost and effort to update a site regularly should be considered in site design to make it easy to update especially for higher-traffic sites.
Consider settings scheduled site updates (quarterly, daily...whatever fits the goals of the users and purpose of the site).
Regularly or often updated pages could see benefits over pages that are not updated as often.
For goods & services sites: [Duckett, pg.460]
How often do same people return to purchase from you?
How often is your stock updated or your service changed?
For Infomration sites: [Duckett, pg.460]
How often is the subject updated?
What percentage of visitors return for regular updates, compared with those that need the info just once?
Wireframe tools list from [Duckett, pg.463]:
Content should have been sorted out already, sonow the design needs to organize and prioritize the content to guide users and lead users to what they are looking for. Use styles to make portions of the page distinct from other content, calling it out to the user. Can also draw a user's attention away from content items.
Visual Hierarchy
Helps users focus on the key messages that will draw ... attention, and then guide them to subsequent messages. [Duckett, pg.465]
The book has a visual hierarchy example [Duckett, pgs. 467-468] that I have arranged into key statements, below:
Related content should be put into "blocks" or "chunks" to keep it simple to follow and understand.
Use similar visual styles for similar content so users quickly associate the style with the purpose or information.
"Grouping related pieces of information together can make a design easier to comprehend." [Duckett, pg.469]
Various ways to group information:
Navigation design can help users find their way and understand what the site is about.
Good navigation design principles:
The following list of items are quoted directly from [Duckett, pg.475]
Goals of this book [Duckett, pg.2]:
- Understanding some basic programming concepts and terms...
- Learning the language itself ... vocabulary and how to structure your sentances.
- Becoming familiar with how it is applied ... today.
JavaScript enables interactivity on a website. JS Can:
The book will also address work-around for compatibility with older browsers and introduce JQuery.
WHAT IS A SCRIPT AND HOW DO I CREATE ONE?
Think of a script as a recipe or manual, that tells the computer what to do.
When preparing to write a script, follow these steps: [Duckett, pgs.17]
Define the goal. What do you plan to achieve?
Design the script. Document smaller tasks and decision trees necessary to attain the stated goal.
Code each step. In this case, use JavaScript
Use flowcharts and lists to logically design the script:
Vocabulary: The keywords used in the script that a computer knows how to act upon.
Syntax: A kind of sentance structure of vocabulary the computer can execute.
Programmatic: Follow steps, one after another.
HOW DO COMPUTERS FIT IN WITH THE WORLD AROUND THEM?
Data Models: Represent what a thing is and what it can do.
Objects contain Properties, Events, and Methods.
Properties: Define what an object is, and contain data within the object like its color or state of being.
Events: Represent actions such as flipping a light switch in a room.
Methods: Can take action on data, especially in response to events, such as a lamp illuminating when a light switch is flipped.
PROPERTIES, ATTRIBUTES, and EVENTS
An interesting note regarding properties and attributes [Duckett, pg.28]
The idea of name/value pairs is used in both HTML and CSS. In HTML an attribute is like a property:
In CSS you can:
Name-value pairs enable storing and acquiring property values. Example:
A house can be painted a color. The property name could be 'paint' and the value could be 'yellow':
Object: House
Property name "color": value "yellow"
Consider Events to be the interaction between objects or things. Some examples of events that could be acted upon:
A method defines what an object can do. It is a capability of a thing.
For example, when the user clicked the Submit button on the web page and that event was fired, the event can call a method that will show a popup message informing the user that the information was submitted successfully (or failed).
When developing scripts and web pages with JavaScript:
Back to the light switch example:
Primary objects are:
All major web browsers support a common set of objects:
Browsers perform these steps every time the URL is pointed to a valid document:
JavaScript is interpreted by a subsystem of the browser:
Key takeaway [Duckett, pg.43]
To make web pages interactive, you write code that uses the browser's model of the web page.
Keep code files separate as much as possible
This will make sure that partial page loads will still give the user some of the expected experience and information, rather than none.
JavaScript is plaintext, so create a new file, name it with a .js extension and add JavaScript commands to it.
Create a simple web page and add the following element:
<script src="file-name.js"></script>
When the browser reads this line it will stop to look for file-name.js in the current directory and try to execute it using the JavaScript interpreter before continuing on, rendering the next line of code.
Note: There is a very simple example of HTML + JavaScript usage, copied from Duckett, pgs.46-47, in the folder called chapter1_files here. Example webpage
document is an object that represents an entire page, as implemented in the web browser.
The 'document' model has several methods and properties, aka members.
The write() member is a method and accepts a string of text as the data parameters.