U NDERSTAND THE W EB AND D IGITAL C OMMUNICATIONS P ATHWAY 4.02 U NDERSTAND HOW W EBPAGES ARE CREATED AND USED

Understand webpages How are webpages created? How are webpages used? How do webpages work? ESSENTIAL QUESTIONS

Part 1 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 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 Text Graphics Audio Video 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) protocol separator domain folder filename 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 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) 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 block  Page 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 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. HTML

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

 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. HTML CODING CONVENTIONS Opening or start tag Closing or end tag

 An HTML tag is the code enclosed within the angle brackets. For example 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 My First Web Page 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 Google

HTML STRUCTURE

BASIC HTML PAGE

Part 4 BASIC HTML TAGS

 The section contains the tag and other tags with information about the page  The section contains the visible content of the webpage HEAD AND BODY SECTIONS

 The My First Web Page displays the webpage title in the title bar of the web browser  The tag displays in search engine results  The tag must be in the section TITLE TAG

 Webpages are typically divided into sections and there are six heading styles  displays in the largest size because it is the main heading style  displays smaller relative to  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. 6 HEADING STYLES

 The tag displays paragraph text  The number of lines in a paragraph will adjust to the size of the browser window PARAGRAPH TAG

 The tag does not have a closing tag; it is not paired  It is also known as an empty tag  The tag inserts a single line break  The tag is needed to move text or an image to a new line BREAK TAG & WHY WE NEED IT

 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) ANCHOR TAG Google-My favorite search engine

 Images are displayed using the tag  The 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 DISPLAYING IMAGES Img src=

 Here is an example of the audio tag AUDIO TAG Your browser does not support the audio element.

 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 and tags for browsers that do not support the element.  The element allows multiple elements. 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 Your browser does not support the 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. 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 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 INLINE CSS A paragraph.

 In the example below, the 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 A heading

EXAMPLE WEBPAGE

EXAMPLE WEBPAGE WITH STYLES

 SOURCES