reading-notes

The Duckett HTML book:

In order to learn about creating web pages, this book is divided into three sections:

  1. HTML

    • First chapter looking at how HTML is used to create web pages.

  2. CSS

    • This section starts with a chapter that explains how CSS uses rules to enable you to control the styling and layout of web pages.

  3. Practical

    • End up with some helpful information that will assist you in building better websites.

HTML CSS

Structure

HTML Describes the Structure of Pages

This example explains how we see the web page and how the HTML code was written to display this.

Note that the HTML code is in blue, and the text you see on screen is in black.

HTML Text
HTML CSS HTML CSS

The HTML code (in blue) is made up of characters that live inside angled brackets — these are called HTML elements.

Elements are usually made up of two tags: an opening tag and a closing tag. __________________ __________________ __________________

A Closer Look at Tags

| Opening Tag | Closing Tag | | - | - | | HTML CSS | HTML CSS | __________________ __________________

Body, Head & Title

<body>

Everything inside this element is shown inside the main browser window.

<head>

Before the <body> element you will often see a <head> element. This contains information about the page

<title>

The contents of the <title> element are either shown in the top of the browser, above where you usually type in the URL of the page you want to visit, or on the tab for that page.

HTML RESULTS
HTML CSS HTML CSS

Extra Markup

The Evolution of HTML

Since the web was first created, there have been several different versions of HTML.

  1. HTML 4

    Released 1997

  2. XHTML 1.0

    Released 2000

  3. HTML5

    Re leased 2000

DOCTYPES

Because there have been several versions of HTML, each web page should begin with a DOCTYPE declaration to tell a browser which version of HTML the page is using.

Doctype

Comments in HTML

<!-- -->

If you want to add a comment to your code that will not be visible in the user’s browser, you can add the text between these characters:

<!-- comment goes here -->

ID Attribute

Every HTML element can carry the id attribute. It is used to uniquely identify that element from other elements on the page.

<p id="pullquote"> This is a quote </p>

Class Attribute

Every HTML element can also carry a class attribute. The id and class attributes allow you to identify particular elements.

<p class="important">Your Important paraghraph </p>

Grouping Text & Elements Inline

The <div> and <span> elements allow you to group block-level and inline elements together.

IFrames

<iframes> cut windows into your web pages through which other pages can be displayed.

Information About Your Pages

The <meta> tag allows you to supply all kinds of information about your web page.

Escape Characters

Escape characters are used to include special characters in your pages such as <, >, and ©.

HTML5 Layout

Headers & Footers <header> <footer>

The <header> and <footer> elements can be used for:

The <nav> element is used to contain the major navigational blocks on the site such as the primary site navigation.

Articles <article>

The <article> element acts as a container for any section of a page that could stand alone and potentially be syndicated.

Asides <aside>

The <aside> element has two purposes, depending on whether it is inside an <article> element or not.

## Sections <section>

The <section> element groups related content together, and typically each section would have its own heading.

## Heading Groups <hgroup>

The purpose of the <hgroup> element is to group together a set of one or more <h1> through <h6> elements so that they are treated as one single heading.

## Sectioning El ements <div>

the <div> element will remain an important way to group together related elements, because you should not be using these new elements that you have just met for purposes other than those explicitly stated.

# Process & Design

HTML & CSS Process an Design

Process that you can use when you are creating a new website.

Things to consider when deciding to build a website:

  1. Who is the Site For? Target Audience:
    • Individuals or companies?
  1. Why People Visit YOUR Website:
    • General or Specific goal? personl of proffessional?
  1. What Your Visitors are Trying to Achieve?
  1. What Information Your Visitors Need:
  1. How Of ten People Will Visit Your Site?
  1. Site Map: the foundation of high quality SEO

Site Map

  1. WireFrames: simple sketch of the key information

Wireframe

  1. Getting your message across using design:
    • Content
    • Prioritizing
    • Organizing
    • Visual Hierarchy
    • grouping
    • Similarity

Programming with JavaScript

How Javascript Makes Web Pages More Interactive?

  1.  Access Content
  2.  Modify Content
  3.  Program Rules
  4.  React To Events

Exaples:

The ABC of Programming

To write a script you need to first state your goal and then list the tasks that need to be completed in order to achieve it.

A Script is a series of instuctions that a computer can follow to achieve a goal.

  1.  Define the goal
  2.  Design the script
  3.  Code each step