reading-notes

View project on GitHub

Home

Building Sites from scratch

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

HTML Describes the Structure of Pages

  • HTML pages are text documents.
  • HTML uses tags (characters that sit inside angled brackets) to give the information they 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 do, and where they can go.

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.

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 to 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 web page.
  • Escape characters are used to include special characters in your pages such as <, >, and ©.