Technology for Success: Computer Concepts
Carey/Pinard/Shaffer/Shellman/Vodnik, New Perspectives Collection, Microsoft® Office 365® & Office 2019, 1st Edition. © 2020 Cengage. All Rights
Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Module 9
Web Development
Carey/Pinard/Shaffer/Shellman/Vodnik, New Perspectives Collection, Microsoft® Office 365® & Office 2019, 1st Edition. © 2020 Cengage. All Rights
Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Lesson Objectives
• Explain the uses of HTML5, CSS3, and JavaScript when developing
websites
• Explain strategies for creating and developing websites
• Manage websites using analytics and data tools
• Code and publish a website
Carey/Pinard/Shaffer/Shellman/Vodnik, New Perspectives Collection, Microsoft® Office 365® & Office 2019, 1st Edition. © 2020 Cengage. All Rights
Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Explain the Uses of HTML5, CSS3, and Javascript
• Explain how to use HTML
• Explain how to use CSS
• Explain how to use JavaScript and scripting tools
Carey/Pinard/Shaffer/Shellman/Vodnik, New Perspectives Collection, Microsoft® Office 365® & Office 2019, 1st Edition. © 2020 Cengage. All Rights
Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Explain How to Use HTML
• A webpage contains tags written in HTML to describe the content of
information
o Webpages can contain headings, paragraphs, hyperlinks, lists, images, videos,
forms, buttons, and other elements
o HTML 5 is the current version
• HTML code can be written by hand or by using tools
Carey/Pinard/Shaffer/Shellman/Vodnik, New Perspectives Collection, Microsoft® Office 365® & Office 2019, 1st Edition. © 2020 Cengage. All Rights
Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Explain How to Use CSS
• CSS describes how content on a webpage will be displayed in a browser
• Web developers use CSS to specify colors, position, alignment, fonts,
background images, and other features
Carey/Pinard/Shaffer/Shellman/Vodnik, New Perspectives Collection, Microsoft® Office 365® & Office 2019, 1st Edition. © 2020 Cengage. All Rights
Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Explain How to Use JavaScript and Scripting Tools
• JavaScript is a popular language for writing client-side scripts
o Code written in JavaScript can check to make sure that you do not miss any of
the required values
Carey/Pinard/Shaffer/Shellman/Vodnik, New Perspectives Collection, Microsoft® Office 365® & Office 2019, 1st Edition. © 2020 Cengage. All Rights
Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Explain Strategies for Creating and Publishing
Websites
• Describe when to use static and dynamic websites
• Describe the importance of responsive design
• Describe tools for creating websites
• Use tools to aid hosting and publishing websites
Carey/Pinard/Shaffer/Shellman/Vodnik, New Perspectives Collection, Microsoft® Office 365® & Office 2019, 1st Edition. © 2020 Cengage. All Rights
Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Statics and Dynamic Websites
• Static websites provide basic information that is unlikely to change frequently
and are usually coded in HTML
• Dynamic websites are more complex and often are created using server-
side scripting language
Carey/Pinard/Shaffer/Shellman/Vodnik, New Perspectives Collection, Microsoft® Office 365® & Office 2019, 1st Edition. © 2020 Cengage. All Rights
Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
The Importance of Responsive Design
• Pages with responsive design automatically adjust the size of their content
to display appropriately relative to the size of the screen of the device on
which it is displayed
Carey/Pinard/Shaffer/Shellman/Vodnik, New Perspectives Collection, Microsoft® Office 365® & Office 2019, 1st Edition. © 2020 Cengage. All Rights
Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Tools for Creating Websites (1 of 3)
• Website builder
o Used to create professional looking websites, by dragging and dropping predefined
elements to their desired locations on a page, without coding
o Many include search engine optimization (SEO) capabilities
• Content management system (C MS)
o Allows one to create a more complex website with several contributors
o Often open source applications
Carey/Pinard/Shaffer/Shellman/Vodnik, New Perspectives Collection, Microsoft® Office 365® & Office 2019, 1st Edition. © 2020 Cengage. All Rights
Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Tools for Creating Websites (2 of 3)
Table 9-1: HTML Comparing Website Builders and CMSs
Website builder Content management system
Examples Google Sites, Wix, Weebly WordPress, Drupal
Popular uses Small businesses, personal Blogs, websites for large businesses or
websites, online stores organizations, online stores
Collaboration Few contributors Few or many contributors
Setup required Little to none; can get a website up If self-hosted, need to manage and configure a
and running quickly web server and install software before designing
the website, or use a fully hosted version for easier
setup
Templates and themes Available from provider Available from provider or third-party designers
free or for purchase
Ease of use Enter content in a visual editor Enter content in a visual or HTML editor
Customer support Paid subscriptions provide tech Self-hosted CMS users rely on a community of
support through chat or online enthusiasts and online resources
forums
Carey/Pinard/Shaffer/Shellman/Vodnik, New Perspectives Collection, Microsoft® Office 365® & Office 2019, 1st Edition. © 2020 Cengage. All Rights
Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Tools for Creating Websites (3 of 3)
• Text Editor
o Can be used to type code for a website
• Integrated Development Environment (IDE)
o Combines advanced code editing and debugging, file management, and
publishing tools to simplify the process of developing websites and applications
o Most contain a code editor
o Stores files and folders in your website in a project
Carey/Pinard/Shaffer/Shellman/Vodnik, New Perspectives Collection, Microsoft® Office 365® & Office 2019, 1st Edition. © 2020 Cengage. All Rights
Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Tools for Hosting and Publishing Websites
• Select a domain name, perhaps for purchase from a domain registrar
• When selecting a domain host:
o Determine the amount of disk space needed
o Determine the amount of bandwidth needed
o Be sure that the operating system is compatible with software you want to host
on the server
o Check the host’s reliability (uptime)
Carey/Pinard/Shaffer/Shellman/Vodnik, New Perspectives Collection, Microsoft® Office 365® & Office 2019, 1st Edition. © 2020 Cengage. All Rights
Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Manage Websites Using Analytics and Data Tools
• Use analytics tools and track website usage
• Leverage XML to update and structure data
Carey/Pinard/Shaffer/Shellman/Vodnik, New Perspectives Collection, Microsoft® Office 365® & Office 2019, 1st Edition. © 2020 Cengage. All Rights
Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Use Analytics Tools and Track Website Usage
• Website analytics help one to understand how people use a website
o Who visitors are
o Where they are coming from
o How they interact with the site
• Google Analytics
Carey/Pinard/Shaffer/Shellman/Vodnik, New Perspectives Collection, Microsoft® Office 365® & Office 2019, 1st Edition. © 2020 Cengage. All Rights
Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Leverage XML to Update and Structure Data
Table 9-2: HTML Compared to XML
HTML XML
Describes content and how to Describes data without specifying
present it in a browser how it will be presented
Stores layout information in a text Stores data in a text format to share
format for a browser to interpret between applications
Predefined tags describe placement Customized tags describe data in
of content on a webpage as a context (LastName, FirstName,
paragraphs, links, headings, images, AnimalName, AnimalBreed,
and other elements AnimalType)
Carey/Pinard/Shaffer/Shellman/Vodnik, New Perspectives Collection, Microsoft® Office 365® & Office 2019, 1st Edition. © 2020 Cengage. All Rights
Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Code and Publish a Website
• Describe steps involved when coding and publishing a website
• Code a website
Carey/Pinard/Shaffer/Shellman/Vodnik, New Perspectives Collection, Microsoft® Office 365® & Office 2019, 1st Edition. © 2020 Cengage. All Rights
Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Steps Involved When Coding and Publishing a
Website
Steps to code and publish a website:
1. Arrange and configure web hosting
2. Design the website
3. Create or obtain graphics and multimedia
4. Code each page
5. Preview the website in several browsers and devices with screens of various
sizes to make sure the appearance and behavior is correct
6. Publish updated the website files to a server with FTP
7. View the published version of your website in one or more browsers to verify
that all the files were updated correctly
8. Repeat steps 4–7 as you add more content to your website
Carey/Pinard/Shaffer/Shellman/Vodnik, New Perspectives Collection, Microsoft® Office 365® & Office 2019, 1st Edition. © 2020 Cengage. All Rights
Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Code a Website (1 of 2)
• HTML tags and attributes: written in lowercase characters, enclosed with
angle brackets
• Structure of an HTML page
• Webpage files names
Carey/Pinard/Shaffer/Shellman/Vodnik, New Perspectives Collection, Microsoft® Office 365® & Office 2019, 1st Edition. © 2020 Cengage. All Rights
Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Code a Website (2 of 2)
• Add titles, headings, paragraphs, and
line breaks
• Add images
• Add links
• Add unordered and ordered lists
• Add multimedia content
• Check the validity of the HTML code
• Publish the website online
• Modify the website’s appearance using
CSS
• Control the webpage using JavaScript
Carey/Pinard/Shaffer/Shellman/Vodnik, New Perspectives Collection, Microsoft® Office 365® & Office 2019, 1st Edition. © 2020 Cengage. All Rights
Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.