UNDERSTAND THE WEB AND DIGITAL

COMMUNICATIONSPATHWAY

4.02 UNDERSTAND HOW WEBPAGES ARE CREATED AND USED

ESSENTIAL QUESTIONS

Part 1WEBPAGES

Definitions:Webpages are documents viewed in a Web browser and available on the Web or on a private network using hypertext transport protocolWebpages (or web pages) are also known as Web documentsThe World Wide Web (WWW) is a vast network of Internet servers that supports HTML

UNDERSTAND WEBPAGES

Some of the popular Web browsers are: Internet Explorer, Mozilla Firefox, Chrome, Safari, Opera

Web browsers operate on various platforms (personal computers, mobile devices)

Some Web browsers use plug-ins or add-ons.Web browsers have various features such as

bookmarks/favorites, security settings

WEB BROWSERS

Definition: A Web browser is special software that can retrieve and display a webpage.

Web browsers use the hypertext transport protocol to make requests to the web server

HTTP is the foundation of data communication on the Web

Web browsers interpret the HTML code and display the content.

Most Web browsers can display the source code

WEB BROWSERS AND HTTP

Text, graphics, audio and video content can be displayed in a webpage.

Typical formats for graphics are jpeg, gif and png Typical formats for audio are mp3, wav and ogg Typical formats for video are mov and mpeg

WEBPAGE ELEMENTS

Supported formats will change as standards are updated

Hyperlinks or hypertext are simply linked resources Databases can be linked to pages creating dynamic

content Scripting languages, such as JavaScript can be used

to create an interactive page Cascading Style Sheets (coding that styles HTML

documents)

MORE WEBPAGE ELEMENTS

Webpages can be static, dynamic or interactive Static pages display exactly as stored Dynamic pages are generated using client or

server-side scripting to display content Interactive pages use scripting to interact with the

user of the page

STATIC, DYNAMIC OR INTERACTIVE?

COMPARING STATIC & DYNAMIC PAGES

URLs are character strings referencing a resource URLs use a domain name

UNIFORM RESOURCE LOCATOR (URL)

http://www.nypl.org/sitemap/index.html

protocol

separator

domain

folderfilename

server

Webpages can be viewed locally in a Web browser

Webpages should be checked in more than one Web browser due to differences in how browsers display code

PREVIEWING WEBPAGES

Part 2WEBSITES

A website (or web site) is a collection of related webpages served from a single web domain.

A domain name is a string of characters used to identify a website.

Domain names are regulated under the Domain Name System (DNS)

Domain names represent an IP resource (Internet Protocol)

WEBSITES

The Domain Name System (DNS) serves as the phone book for the Internet by translating human-friendly computer hostnames into IP addresses

DOMAIN NAME SYSTEM

Websites serve many and varied purposes. For example:• Personal websites• Commercial websites• Government websites• Nonprofit organizations• Media websites• Entertainment websites• News websites

WEBSITE PURPOSE

And many more—these are just some examples

Websites may contain various features, such as the following:•Online chat or instant messaging•Social networking integration•Forums•Web forms•Downloads

WEBSITE FEATURES

Websites use a directory structure.

Folder and filenames should be entered in all lowercase, no spaces, and short yet descriptive names should be used.

Websites typically have a home page. The home page is the entry point to a website.

WEBSITE ORGANIZATION

The location of linked resources matters!

The path to resources must be keyed in exactly correctly

Paths to resources are case sensitive

Avoid using spaces in folder and filenames

LINKED RESOURCES

Websites are designed for a particular target market.

The users that you hope will visit your website are your target market.

Websites are designed to meet the needs of users. User interface design is the design of a website with the focus on the user’s experience and interaction.

WEBSITE DESIGN

Webpages typically contain:Navigation menu or navigation bar or sidebar (typically located across the top or on the left of the page.)Content section or blockPage banner or header (typically across the top)Footer

COMPONENTS OF WEBSITE LAYOUT

Page layout refers to the arrangement of elements on the page.

Webpages are designed as either Fixed-width page layout or a Fluid or Responsive design Fixed-width layout refers to designing the page for

a particular screen size Fluid layouts will expand to fit the screen

TYPES OF LAYOUT

Responsive designs are based on CSS3 (Cascading Style Sheets v3) and use enhanced page stylesheets so documents display properly on more devices (phones, tablets, not just computers)

RESPONSIVE DESIGNS

Part 3HTML

HTML stands for Hypertext Markup Language. It is the main language of documents on the Web.

Hypertext permits the linking of text to other resources on the Web. The user simply clicks the mouse to follow the hyperlink.

HTML

Hypertext Markup Language (HTML) is a markup language—not a programming

language.

UNDERSTAND HTML

Keyed in all lowercaseTags are enclosed within < > (referred to as angle

brackets or carets)Most HTML codes (or tags) are paired (referred to as

opening and closing tags or start and end tags)Closing or end tags contain a / (forward slash) enclosed

within the angle brackets.

HTML CODING CONVENTIONS

<head> </head>

Opening or start tag Closing or end tag

An HTML tag is the code enclosed within the angle brackets. For example <html> is the opening tag in a webpage. The html tag tells the Web browser that this is a webpage.

An HTML element includes the opening tag, the content and the closing tag.

HTML TAGS & ELEMENTS

<html><title>My First Web Page</title>

Example of a tag Example of an element

Attributes provide additional information about an element

Attributes are always specified in the start or opening tag

HTML attributes define a value for an HTML tag. Attributes define a name and a value.

The attribute value is enclosed in quotation marks. The name is separated from the value by the equals sign.

HTML ATTRIBUTES

<img src=“familyphoto.jpg”>

<a href=“http://www.google.com”>Google</a>

HTML STRUCTURE

BASIC HTML PAGE

Part 4BASIC HTML TAGS

The <head> section contains the <title> tag and other tags with information about the page

The <body> section contains the visible content of the webpage

HEAD AND BODY SECTIONS

The <title>My First Web Page</title> displays the webpage title in the title bar of the web browser

The <title> tag displays in search engine results

The <title> tag must be in the <head> section

TITLE TAG

Webpages are typically divided into sections and there are six heading styles

<h1> displays in the largest size because it is the main heading style

<h2> displays smaller relative to <h1><h6> is the smallest of the six heading stylesHeading styles are used for headings and not just to

make text display bigger on the page.

6 HEADING STYLES

The <p> tag displays paragraph textThe number of lines in a paragraph will adjust

to the size of the browser window

PARAGRAPH TAG

The <br> tag does not have a closing tag; it is not paired

It is also known as an empty tagThe <br> tag inserts a single line breakThe <br> tag is needed to move text or an image to a

new line

BREAK TAG & WHY WE NEED IT

The anchor tag defines a hyperlinkThe href attribute indicates the link’s

destinationThe text between the opening and closing tags

displays as a hyperlink (underlined)

ANCHOR TAG

<a href=“http://www.google.com”>Google-My favorite search engine</a>

Images are displayed using the <img> tag The <img> tag requires the src attributeThe src attribute identifies the location of the

imageIf the image is moved or deleted—no image

will display

DISPLAYING IMAGES

<img src=“familyphoto.jpg”>

Img src=http://www.google.com/images/srpr/logo4w.png>

Here is an example of the audio tag

AUDIO TAG

<audio controls>  <source src="horse.ogg" type="audio/ogg">  <source src="horse.mp3" type="audio/mpeg">Your browser does not support the audio element.</audio>

HTML 5 introduced a standard for playing audio in a webpage.

The control attribute adds audio controls, like play, pause, and volume.

The src attribute identifies the audio file.You should also insert text content between the

<audio> and </audio> tags for browsers that do not support the <audio> element.

The <audio> element allows multiple <source> elements. <source> elements can link to different audio files. The browser will use the first recognized format.

AUDIO TAG

Here is an example of the video tag and its attributes:

VIDEO TAG

<video width="320" height="240" controls>  <source src="movie.mp4" type="video/mp4">  <source src="movie.ogg" type="video/ogg">Your browser does not support the video tag.</video>

HTML 5 introduced a standard for displaying video in a webpage

The src attribute provides the path to the video fileThe video tag uses the control attribute to display

video controlsThe width and height attributes are used to reserve

the space for the video in the webpage.

VIDEO TAG

HTML was not designed to format content.CSS was designed for presentation of content. CSS is not HTML.There are 3 types of CSS: Internal, External, and

Inline.

CASCADING STYLE SHEETS

CSS styles html elements

Inline CSS uses the style attribute to format an HTML tag

The style defines a name and valueIn the example below, font-family is a CSS style name

and arial is the value; color is a CSS style name and red is the value; font-size is a CSS style name and 20px is the value

INLINE CSS

<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

In the example below, the <h1> tag is styled with the CSS style name, font-family, and Verdana is the value.

Notice that the style attribute is used with the HTML tag, followed by an equals sign, and the CSS name and value are enclosed within quotes.

ANOTHER INLINE EXAMPLE

<h1 style="font-family:verdana;">A heading</h1>

EXAMPLE WEBPAGE

EXAMPLE WEBPAGE WITH STYLES

http://www.w3schools.com/default.asp

SOURCES