reading-notes

View project on GitHub

Read03

Return to home page.

Structure:

How Pages Uses Structure:

Think about the stories you read in a newspaper: for each story, there will be a headline, some text, and possibly some images. If the article is a long piece, there may be subheadings that split the story into separate sections or quotes from those involved. Structure helps readers understand the stories in the newspaper. The structure is very similar then a news story is viewed online (although it may also feature audio or video).

HTML Describes the Structure of Pages:

To describe the structure of a web page, we add code to the words we want to appear on the page. The HTML code 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. (The closing tag has an extra forward slash in it.) Each HTML element tells the browser something about the information that sits between its opening and closing tags. Attributes provide additional information about the contents of an element. They appear on the opening tag of the element and are made up of two parts: a name and a value, separated by an equals sign.

  • HTML structure:

1- <body>:

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

2- <head> Before the <body> element you will often see a <head> element. This contains information about the page (rather than information that is shown within the main part of the browser window. You will usually find a element inside the <head> element.

3- 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 (if your browser uses tabs to allow you to view multiple pages at the same time).

Extra Markup:

The several tags in HTML:

1- DOCCTYPEs: 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

2- 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. .

3- ID Attribute: Every HTML element can carry the id attribute. It is used to uniquely identify that element from other elements on the page. Its value should start with a letter or an underscore.

4- Block Elements: Some elements will always appear to start on a new line in the browser window. These are known as block-level elements. Examples of block elements are <h1>, <p>, <ul>, and <li>.

5- Inline Elements: Some elements will always appear to continue on the same line as their neighboring elements. These are known as inline elements. Examples of inline elements are <>, <**>.

HTML5 Layout:

1- Headers & Footers: The <header> and <footer> elements can be used for:

  • The main header or footer appears at the top or bottom of every page on the site.
  • A header or footer for an individual <article> or <section> within the page.

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

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

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

Process & Design:

Who is the Site For?

Every website should be designed for the target audience—not just for yourself or the site owner. It is therefore very important to understand who your target audience is, It can be helpful to ask some questions about the people you would expect to be interested in the subject of your site.

Why People Visit Your Website?

Now that you know who your visitors are, you need to consider why they are coming. While some people will simply chance across your website, most will visit for a specific reason, Your content and design should be influenced by the goals of your users.

What Your Visitors are Trying to Achieve?

It is unlikely that you will be able to list every reason why someone visits your site but you are looking for key tasks and motivations. This information can help guide your site designs.

What Information Your Visitors Need?

You know who is coming to your site and why they are coming,so now you need to work out what information they need in order to achieve their goals quickly and effectively, You may want to offer additional supporting information that you think they might find helpful.

How Often People Will Visit Your Site?

Some sites benefit from being updated more frequently than others. Some information (such as news) may be constantly changing, while other content remains relatively static.

Site Maps:

Now that you know what needs to appear on your site, you can start to organize the information into sections or page , The aim is to create a diagram of the pages that will be used to structure the site. This is known as a site map and it will show how those pages can be grouped.

WireFrames:

A wireframe is a simple sketch of the key information that needs to go on each page of a site. It shows the hierarchy of the information and how much space it might require, A lot of designers will take the elements that need to appear on each page and start by creating wireframes. This involves sketching or shading areas where each element of the page will go (such as the logo, primary navigation, headings and main bodies of text, user logins, etc).

Designing Navigation:

Site navigation not only helps people find where they want to go, but also helps them understand what your site is about and how it is organized. Good navigation tends to follow these principles:

  • Concise.
  • Clear.
  • Selective.
  • Context.
  • Interactive.
  • Consistent.