Transcript 4.02 Understand How Web Pages Are Created and - fitslm

U NDERSTAND THE W EB
AND D IGITAL
C OMMUNICATIONS
PATHWAY
4.02 U NDERSTAND
HOW
ARE CREATED AND USED
W EBPAGES
ESSENTIAL QUESTIONS
How are
webpages
created?
How do
webpages
work?
Understand
webpages
How are
webpages
used?
WEBPAGES
Part 1
UNDERSTAND WEBPAGES
Definitions:
 Webpages are documents viewed in a Web browser
and available on the Web or on a private network
using hypertext transport protocol
 Webpages (or web pages) are also known as Web
documents
 The World Wide Web (WWW) is a vast network of
Internet servers that supports HTML
WEB BROWSERS
Definition: A Web browser is special software
that can retrieve and display a webpage.
 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 AND HTTP
 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
WEBPAGE ELEMENTS
 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
Supported formats will change as standards are updated
MORE WEBPAGE ELEMENTS
 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)
STATIC, DYNAMIC OR INTERACTIVE?
 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
COMPARING STATIC & DYNAMIC
PAGES
UNIFORM RESOURCE LOCATOR (URL)
 URLs are character strings referencing a resource
 URLs use a domain name
http://www.nypl.org/sitemap/index.html
server
protocol
separator
domain
folder
filename
PREVIEWING WEBPAGES
 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
WEBSITES
Part 2
WEBSITES
 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)
DOMAIN NAME SYSTEM
The Domain Name
System (DNS)
serves as the
phone book for
the Internet by
translating
human-friendly
computer
hostnames into IP
addresses
WEBSITE PURPOSE
Websites serve many and varied purposes.
For example:
• Personal websites
• Commercial websites
• Government websites
• Nonprofit organizations
• Media websites
• Entertainment websites
• News websites
And many more—these are just some examples
WEBSITE FEATURES
Websites may contain various features, such as the
following:
• Online chat or instant messaging
• Social networking integration
• Forums
• Web forms
• Downloads
WEBSITE ORGANIZATION
 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.
LINKED RESOURCES
 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
WEBSITE DESIGN
 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.
COMPONENTS OF WEBSITE LAYOUT
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 block
 Page banner or header (typically across the top)
 Footer
TYPES OF 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
RESPONSIVE DESIGNS
 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)
HTML
Part 3
HTML
 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.
UNDERSTAND HTML
Hypertext Markup Language (HTML) is a
markup language—not a programming
language.
HTML CODING CONVENTIONS
 Keyed in all lowercase
 Tags 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.
<head> </head>
Opening or start tag
Closing or end tag
HTML TAGS & ELEMENTS
 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>
Example of a tag
<title>My First Web Page</title>
Example of an element
HTML ATTRIBUTES
 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.
<img src=“familyphoto.jpg”>
<a href=“http://www.google.com”>Google</a>
HTML STRUCTURE
BASIC HTML PAGE
BASIC HTML TAGS
Part 4
HEAD AND BODY SECTIONS
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
TITLE TAG
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
6 HEADING STYLES
 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 styles
 Heading styles are used for headings and not
just to make text display bigger on the page.
PARAGRAPH TAG
The <p> tag displays paragraph text
The number of lines in a paragraph will
adjust to the size of the browser window
BREAK TAG & WHY WE NEED IT
 The <br> tag does not have a closing tag; it is
not paired
 It is also known as an empty tag
 The <br> tag inserts a single line break
 The <br> tag is needed to move text or an image
to a new line
ANCHOR TAG
The anchor tag defines a hyperlink
The href attribute indicates the link’s
destination
The text between the opening and closing
tags displays as a hyperlink (underlined)
<a href=“http://www.google.com”>Google-My favorite search engine</a>
DISPLAYING IMAGES
Images are displayed using the <img> tag
The <img> tag requires the src attribute
The src attribute identifies the location of
the image
If the image is moved or deleted—no
image will display
<img src=“familyphoto.jpg”>
Img src=http://www.google.com/images/srpr/logo4w.png>
AUDIO TAG
Here is an example of the 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>
AUDIO TAG
 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.
VIDEO TAG
 Here is an example of the video tag and its
attributes:
<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>
VIDEO TAG
 HTML 5 introduced a standard for displaying
video in a webpage
 The src attribute provides the path to the video
file
 The video tag uses the control attribute to
display video controls
 The width and height attributes are used to
reserve the space for the video in the webpage.
CASCADING STYLE SHEETS
 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.
CSS styles html elements
INLINE CSS
 Inline CSS uses the style attribute to format an
HTML tag
 The style defines a name and value
 In 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
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
ANOTHER INLINE EXAMPLE
 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.
<h1 style="font-family:verdana;">A heading</h1>
EXAMPLE WEBPAGE
EXAMPLE WEBPAGE WITH STYLES
SOURCES
 http://www.w3schools.com/default.asp