How Web pages work

A web page is a document which can display text, graphics, audio, video and other elements through a web browser.
1. Web pages are documents stored on web servers.
2. Web pages contain instructions on how to display content. The most common instructions are in hypertext markup language (HTML).
HTML code is interpreted by a web browser. (a software application designed to retrieve and present content on the Web)
1. The web browser displays the page by reading the instructions in the web document.
2. The web browser fetches a Web page from a server by a request. A standard http request includes a page address. For example: http://www.w3.org/standards/about.html
Website – a collection of related webpages with a starting point or home page
1. Web pages are organized in a directory structure on a web server. The web server runs special software to serve up the content by responding to requests.
2. The content on the Web is available because the Web is a network of computers all over the world.

The interconnected devices on the Web use a communication standard known as http (hypertext transfer protocol).

An address or Uniform Resource Locator (URL) is the method for locating a document on the Web. The URL typically points to the home page or default page (often index.html) that is located in the root folder of the website.
The Domain Naming System (DNS) translates domain names in the URL to IP addresses. Every device on the Internet has an Internet Protocol (IP) address. IP addresses are how devices find each other on a network.
The documents within a website are typically hyperlinked and a navigation system (or menu) permits the user to move between pages.

Webpage Development Standards
1. The World Wide Web Consortium (W3C) is an international community that develops open standards.
2. An open standard is a standard that is publicly available and has various rights to use associated with it, and may also have various properties of how it was designed (e.g. open process).

The W3C developed the standards for HTML and CSS.

The W3C mission is to lead the World Wide Web to its full potential by developing protocols and guidelines that ensure the long-term growth of the Web.
The HTML standards are constantly evolving to meet the needs of Web users. (The current standard is HTML5.)
The W3C also creates standards for website accessibility, mobile web, etc.

The W3C has a Web Accessibility Initiative (WAI) which develops strategies, guidelines, and resources to help make the Web accessible to people with disabilities.

File Management is essential in Web pages
1. Filenames should be short, descriptive and without spaces. Some Web servers do not permit the use of blank spaces in folder and filenames.
2. Web pages should always be saved into a folder. (Teacher note: Help your students by having them create a folder at the point they save their documents. All files related to the Web page need to be organized into this folder)

A simple website could be organized in just one folder, but large websites need to be organized in some manner.

Large websites typically create folders and subfolders contained within the root
Relative links are located relative to the current document because the server knows the location of the current document.
A relative link will look like this: (also known as a directory path)
<a href="/photos/photogallery.html">Home</a>

An absolute link defines the location of the document in total including the protocol required to get the document, the server to get it from, the directory it is located in and then the name of the document itself.
An absolute link will look like this:
- <a href="http://www.navegabem.com/index.html">Home</a>
HTML Overview
1. HyperText Markup Language is the primary language for building/creating web pages.
2. HTML uses markup tags which describe or define content in a Web document. (It is not a scripting or a programming language)
3. HTML documents contain HTML tags and plain text which are often simply called web pages.
4. HTML code is often referred to as source code.
5. HTML can be coded using a plain text editor.
6. When using a text editor, save the HTML document using the file extension .html or .htm
7. Rules for HTML tags (syntax)
  1. HTML tags are enclosed inside angle brackets: < >.
  2. The tag name is keyed between the two angle brackets. Example: <body>.

With a few exceptions, tags occur in pairs with an opening and a closing Example <body> </body>

The opening <body> indicates the start of the body section and the closing </body> marks the end of the body section.
The forward slash (/) always precedes the tag name in a closing tag. The closing tag is written like the start tag but with the forward slash before the tag name. </body>
The text between the HTML tags is keyed in plain text

The following tags do not have pairs and are often called “empty tags”: <br>, <hr>, <img>, <meta> (These tags do not have information that you would put between an opening and closing tag)
While HTML tags are not case sensitive, they are generally keyed in all lowercase

An HTML element consists of everything between the start tag and the end tag including the tags. For example: <h1>This is heading style 1</h1>
An HTML attribute gives elements additional meaning and context. For example: <img src=”team.jpg” alt=”team photo”>
The image tag requires the src (source) attribute and the alt (alternative) attribute. The required alt attribute specifies an alternate text for an image, if the image cannot be displayed. The user defines the text in the alt tag.
Attributes - provide additional information about tags and control how the tag will be interpreted by the browser.
1. Tags can have multiple attributes.
2. Attributes have syntax rules:
  - Attributes are entered inside the opening tag but not in the closing tag.
  - Attributes are keyed in name/value Syntax: name=”value”
  - The attribute should have an equal symbol followed by the value or setting for the attribute.
  - Attribute values are enclosed within quotation marks.
3. In HTML5 there is a single doctype declaration <!DOCTYPE html>. The doctype is not technically an HTML tag. It is simply a declaration that tells the web browser the version of html in the document.
4. An HTML document consists of two sections the <head> and the <body>.
  1. The <body> is the visible content of the web document.
  2. The <head> section contains information about the page.
    - For example the <title> displays in the web browser title bar—not in the actual web document. The title must be in the <head> section.
    - The <meta> tag provides additional information about the document.
    - Internal and External CSS files are referenced in the <head> section.
  3. HTML tag structure and nesting of tags is illustrated in the graphic shown below. Most html elements can be nested which means they can contain other html tags.

HTML 5 and Audio
1. HTML 5 introduced a standard way to embed an audio file on a web page using the <audio> tag.
2. The <audio> element allows multiple <source> elements. <source> elements can link to different audio files. The browser will use the first recognized format.

Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg

HTML 5 and Video
1. HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element.
2. The <video> element allows multiple <source> elements. <source> elements can link to different video files. The browser will use the first recognized format.

Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg

The purpose of the <object> element is to support HTML helpers (plug-ins). Plug-ins are often used by browsers to play audio and video. Examples of well-known plug-ins are Adobe Flash Player and QuickTime. Plug-ins can be added to Web pages through the <object> tag or the <embed> tag.

There are a total of 30 tags introduced and they are in two sections:

First Set of 18 HTML Tags
HTML Tag	Description
<html>	Defines the root of an HTML document
<head>	Defines information about the document
<title>	Defines a title for the document. The title appears in the browser; not in the web page. The title must be in the head section.
<body>	Defines the document's body; the visible content.
<p>	Defines a paragraph
<img src=>	Image Tag; Defines an image; src is a required attribute.
<a href=>	Anchor tag; Defines a hyperlink; href is a required attribute
<hr>	Horizontal rule; Defines a thematic change in the content
<br>	Break tag; Defines a single line break
6 Heading styles
<h1>	Defines HTML headings; heading style 1 is the largest relative to the others
<h2>	Defines HTML headings
<h3>	Defines HTML headings
<h4>	Defines HTML headings
<h5>	Defines HTML headings
<h6>	Defines HTML headings; heading style 6 is the smallest relative to others
List Elements-Numbered and Bulleted
<ol>	Defines an ordered list
<ul>	Defines an unordered list
<li>	Defines a list item

Next 12 Tags to Introduce

HTML Tag	Description
Multimedia Elements
<audio>	Defines sound content
<video>	Defines a video or movie
<embed>	Defines a container for an external (non-HTML) application
<object>	Defines an embedded object
Head Elements
<style>	Defines style information for a document
<link>	Defines the relationship between a document and an external resource
<meta>	Defines metadata about an HTML document
HTML Layouts
<div>	Defines a section in a document (block-level)
<span>	Defines a section in a document (inline)
Structural Elements
<header>	Defines a header for a document or section
<footer>	Defines a footer for a document or section
Html comment
<!--put comment text here-->