Introductory HTML and JavaScript

HTML&CSS

Introduction

How the Web Works

• People access websites using software called web browsers
• When you ask your browser for a web page, the request is sent across the internet to a special computer known as a web server that hosts the site.
• People access the web via various devices (laptops, tablets mobile phones) & it is important to remember that these have varying screen sizes and connection speeds.
• Screen readers are programs that read out the contents of a computer screen to a user.
• When you look at a website your browser is typically receiving HTML & CSS from the web server that hosts the site

Chapter 1: Structure

• HTML Pages are text documents
• HTML uses tags (characters that sit inside angled brackets) to give information the surround special meaning.
• Tags are often referred to as elements
• Tags usually come in pairs. The opening tag denotes the start of a piece of content; the closing tag denotes the end.
• Opening tags can carry attributes, which tell us more about the content of that element.
• Attributes require a name and a value.
• To learn HTML you need to know what tags are available for you to use, what they, and where they can go.

Chapter 8: Extra Markup

• DOCTYPES tell browsers which version of HTML you are using
• You can add comments to your code between the <!-- and --> markers
• The id and class attributes allow you to identify particular elements.
• The <div> and <span> elements allow you too 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 webpage.
• Escape characters are used to include special characters in your pages.

Chpater 17: HTML5 Layout

• The new HTML5 elements indicate the purpose of different parts of a web page and help to describe its structure.
• The new elements provide clearer code (compared with using multiple <div> elements).
• Older browsers that do not understand HTML5 elements need to be told which elements are block-level elements.
• To make HTML5 elements work in Internet Explorer 8 (and older versions of IE), extra JavaScript is needed, which is available free from Google.

Process & Design

• It’s important to understand who your target audience is, why they would come to your site, what information they want to find and when they are likely to return.
• Site maps allow you to plan the structure of a site.
• Wireframes allow you to organize the information that will need to go on each page.
• Design is about communication. Visual hierarchy helps visitors understand what you are trying to tell them.
• You can differentiate between pieces of information using size, color and style.
• You can use grouping and similarity to help simplify the information you present.

Javascript & JQuery

Introduction

Javascript makes web pages more interactive by:

• Allowing us to access content such as:

  • Selecting text within all of the <h1> elements on a page
  • Selecting elements that have a class attribute with a value of note
  • Finding out what was entered into a text input
• Allowing us to modify content such as:
  • Adding or removing elements, attributes and text to a page
  • Changing the value of class attributes to trigger new CSS rules to those elements
  • Change the size or position of an image element
• Allowing us to program rules
  • You can specify a set of steps for the browser to follow which allows it to access or change the content of a page.
• Allowing us to react to events. Meaning you can specify that a script should run when a specific event has occured (such as a button is pressed).

Chapter 1: The ABC of Programming

• A script is a series of instructions that the computer can follow in order to achieve a goal.
• Each time the script runs, it might only use a subset of all the instructions.
• Computer approach tasks in a different way than humans, so your insturctions must let the computer solve the task programmatically.
• To approach writing a script, break down your goal into a series of tasks, and then work out each step needed to complete that task (a flowchart can help).
• Computers create models of the world using data.
• Models use objects to represent physical things. Objects can have: properties that tell us about the object; methods that perform tasks using the properties of that object; events which are triggered when a user interacts with the computer.
• Programmers can write code to say “When this event occurs, run that code.”
• Web browsers use HTML markup to create a model of the web page. Each element creates its own node (which is a kind of object).
• To make web pages interactive, you write code that uses the browser’s model of the web page.
• It is best to keep JavaScript code in its own JavaScript file. JavaScript files are text files (like HTML pages and CSS style sheets), but they have the.js extension.
• The HTML <script> element is used in HTML pages to tell the browser to load the JavaScript file (rather like the <link> element an be used to load a CSS file).

• If you view the source code of the page in the browser, the JavaScript will not have changed the HTML, because the script works with the model of the web page that the browser has created.

• Notes directly from HTML & CSS / JavaScript & JQuery by Jon Ducket

Things I want to know more about

1. The <meta> element and how to apply it in order to generate traffic to a page.
2. HTML5 layout elements, their best uses and a better comprehension of when to apply them versus the use of the <div> element.
3. Understanding how to code for older browsers so that my site can be rendered properly on any system, and maintains accessibility to multiple demographics.
4. A more in depth comprehension of obtaining, interpreting and implementing user data to create an effective design and user experience. (Effective use of visual hierarchy, grouping & navigation)