M aternal S urvival and H ealth A P athway to D evelopment in U ganda
U NDERSTAND THE W EB AND D IGITAL C OMMUNICATIONS P ATHWAY 4.02 U NDERSTAND HOW W EBPAGES ARE...
-
Upload
dylan-quinn -
Category
Documents
-
view
223 -
download
0
Transcript of U NDERSTAND THE W EB AND D IGITAL C OMMUNICATIONS P ATHWAY 4.02 U NDERSTAND HOW W EBPAGES ARE...
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