class01.md

readclass01

HTML Introduction :

Anyone who has a website that may be built using a content management system, blogging software, or an e-commerce platform and wants more control over the appearance of their pages.

1. Introduction pages come at the beginning of each chapter. They introduce the key topics you will learn about.
2. Reference pages introduce key pieces of HTML & CSS code.
3. Background pages appear on white; they explain the context of the topics covered that are discussed in each chapter.
4. Diagram and infographics pages are shown on a dark background. They provide a simple, visual reference to topics discussed.
5. Example pages put together the topics you have learned and demonstrate how they can be applied in each.
6. Summary pages come at the end of each chapter. They remind you of the key topics that were covered in each chapter.

How People Access the Web :

1. Browsers
2. Web Servers
3. Screen readers
4. Devices

How Websites Are Created:

All websites use HTML and CSS, but content management systems,blogging software, and e-commerce platforms often add a few more technologies into the mix.When you are looking at a website, it is most likely that your browser will be receiving HTML and CSS from the web server that hosts the site. The web browser interprets the HTML and CSS code to create the page that you see.Some sites also send JavaScript or Flash to your browser,Small websites are often written just using HTML and CSS.

How the Web Works:

When you visit a website, the web server hosting that site could be anywhere in the world. In order for you to find the location of the web server, your browser will first connect to a Domain Name System (DNS) server.

Structure:

1. Elements : Each element has an opening tag and a closing tag.
2. A Closer Look at Tags
3. Attributes :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.
4. Body, Head & Title

Extra Markup:

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

1. HTML 4
2. XHTML 1.0
3. HTML5

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 although browsers usually display the page even if it is not included.

Comments in HTML:

If you want to add a comment to your code that will not be visible in the user's browser.

ID Attribute:

Every HTML element can carry the id attribute. It is used to uniquely identify that element from other elements on the page.The id attribute is known as a global attribute because it can be used on any element.

Class Attribute:

Every HTML element can also carry a class attribute.Sometimes, rather than uniquely identifying one element within a document, you will want a way to identify several elements as being different from the other elements on the page.The class attribute on any element can share the same value.

Block Elements:

Some elements will always appear to start on a new line in the browser window. These are known as block level elements.

Inline Elements:

Some elements will always appear to continue on the same line as their neighbouring elements. These are known as inline elements.

Grouping Text & Elements In a Block:

1. : The

   element allows you to group a set of elements together in one block-level box.

Grouping Text &Elements Inline:

:The element acts like an inline equivalent of the

element. It is used to either:

1. Contain a section of text where there is no other suitable element to differentiate it from its surrounding text.
2. Contain a number of inline elements.

IFrames:

An iframe is like a little window that has been cut into your page and in that window you can see another page. The term iframe is an abbreviation of inline frame.There are a few attributes that you will need to know to use it:

1. src :The src attribute specifies the URL of the page to show in the frame.
2. height:The height attribute specifies the height of the iframe in pixels.
3. width:The width attribute specifies the width of the iframe in pixels.

Escape Characters:

There are some characters that are used in and reserved by HTML code. For example, the left and right angled brackets.When using escape characters, it is important to check the page in your browser to ensure that the correct symbol shows up.

• < Less-than sign

• Greater-than sign

• & Ampersand
• " Quotation mark
• ¢ Cent sign
• £ Pound sign
• ‘ Left single quote
• ' Right single quote
• “ Left double quotes
• ” Right double quotes

HTML5 Layout:

HTML5 is introducing a new set of elements that help define the structure of a page.HTML5 introduces a new set of elements that allow you to divide up the parts of a page. The names of these elements indicate the kind of content you will find in them.

Headers & Footers:

The

and elements can be used for:

1. The main header or footer that appears at the top or bottom of every page on the site.
2. A header or footer for an individual or
   within the page.

Navigation :

The

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

Articles :

The

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

ASIDES :

The

element has two purposes, depending on whether it is inside an element or not.

1. When the element is used inside an element, it should contain information that is related to the article but not essential to its overall meaning.
2. When the element is used outside of an element, it acts as a container for content that is related to the entire page.

Sections

:

The

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

element should not be used as a wrapper for the entire page unless the page only contains one distinct piece of content.

Heading Groups :

The purpose of the

element is to group together a set of one or more

through

elements so that they are treated as one single heading.

Figures :

can be used to contain any content that is referenced from the main flow of an article not just images.The

element should also contain a element which provides a text decription for the content of the element.

Linking Around Block-Level Elements:

HTML5 allows web page authors to place an element around a block level element that contains child elements. This allows you to turn an entire block into a link.

Process & Design:

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.

1. Why People Visit YOUR Website? 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.
2. 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.
3. 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.
4. How Of ten 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.
5. Site Maps: Now that you know what needs to appear on your site, you can start to organize the information into sections or pages.
6. WireFrames : 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.
7. Getting your message across using design:The primary aim of any kind of visual design is to communicate. Organizing and prioritizing information on a page helps users understand its importance and what order to read it in.
8. Visual hierarchy:Most web users do not read entire pages. Rather, they skim to find information. You can use contrast to create a visual hierarchy that gets across your key message and helps users find what they are looking for.
9. grouping and Similarity:When making sense of a design, we tend to organize visual elements into groups. Grouping related pieces of information together can make a design easier to comprehend. Here are some ways this can be achieved.
10. 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.