Web Explorations

Web For Business - Bundle 2 - HTMLPart of the Web For Business Course - Students learn programming skills while developing their own resumé website. This bundle includes learning/assessment activities teaching the essential HTML code common to all web pages.This bundle includes:Five interactive tutorialsQuiz banks (95 questions)PowerPoint demonstration for your classroomSpecifications for Project: HTMLClass support documents (syllabus, assignment map, course requirements. The b

Tutorial: CSS Flexbox Menu is an interactive lab that shows the student how to use CSS Flexbox building a simple menu system. This tutorial is excellent for an in-class lab. It can also be used as an online, self-paced, learning activity. PREVIEW THE INTERACTIVE DEMO Lesson Objectives:Use CSS Flexbox, unordered lists, and hyperlinks to create a menu system.Utilize CSS Flexbox to control the flow of elements inside a block.Use flex-wrap to control how items wrap with various screen widths.Use

This tutorial will have your students creating web pages in just a few minutes. Updated November 2021 View the live demoStudents will discover the secret character that every browser looks for. They will create an HTML file using special tags using a text editor and a browser to view the page. By the end of this Learning Activity, the student will have a template that he or she can use to quickly create new web pages in the future. Knowing how to build a web page students will be interested in l

Tutorial: Introduction to CSS allows the student to experiment with the essential concepts that make up Cascading Style Sheet code. This tutorial is excellent for an in-class lab. It can also be used as an online, self-paced, learning activity. PREVIEW THE INTERACTIVE DEMO OBJECTIVES: This tutorial covers the following objectives: - Use CSS to format standard HTML elements. - Establish a color scheme for a web site. - Control the background color of specific elements. - Control th

Tutorial: External CSS is an coding lab that allows the student to discover the relationship between the three layers of CSS coding. This tutorial is excellent for an in-class lab. It can also be used as an online, self-paced, learning activity. PREVIEW THE INTERACTIVE DEMO OBJECTIVES: This tutorial covers the following objectives: -- Include CSS using an external style sheet, embedded code, and inline code. -- Demonstrate use of external, embedded, and inline CSS styles. -- Describe th

Tutorial: CSS Responsive Design is an interactive lab showing students how to make pages automatically adjust to any device. This tutorial is excellent for an in-class lab. It can also be used as an online, self-paced, learning activity. PREVIEW THE INTERACTIVE DEMO Lesson Objectives:Design responsive web pages that will automatically adapt to different screen sizes including mobile devices.Include the viewport meta tag on all pages.Design responsive web

Tutorial: CSS Grid Layout is an interactive lab that teaches the student the basic elements of CSS Grid for page layout. This tutorial is excellent for an in-class lab. It can also be used as an online, self-paced, learning activity. PREVIEW THE INTERACTIVE DEMO OBJECTIVES:This tutorial covers the following objectives: Describe how CSS Grid can be used to control the layout of a web page.Create a grid to hold page elements.Assign rows and columns to each object.Span rows and columns.

Tutorial: Meta Tags shows the students the key meta tags used to communicate information to the browser. PREVIEW THE INTERACTIVE DEMO Here are the learning objectives covered with this tutorial: 1) Describe the purpose of meta tags. 2) Include a meta tag on a web page telling the browser what character set to use. 3) Include a meta tag on a web page telling the browser how to display the page using its viewport. 4) Include a meta tag on a web page that search engines can use to describe the

This tutorial demonstrates several of the new semantic elements introduced with HTML 5 and explains why they are so valuable. PREVIEW THE DEMO Learning Objectives covered with this tutorial: 1) List six semantic HTML 5 elements. 2) Write a short paragraph describing the benefits of using semantic elements. 3) Write code showing the proper use of the i, em, and strong elements. 4) Use the header and footer elements correctly on a web page. 5) Describe the difference between the head and the

This lab allows students to experiment zipping and unzipping files.PREVIEW THE DEMOLearning Objectives covered with this tutorial:1) Describe the benefits of compressing/zipping files. 2) Zip and unzip files in either Windows or on a Mac (or both). 3) Describe what an algorithm is. 4) Describe one of the techniques used to compress the data in a file. 4) Describe what happens to the original files after a zip file has been created. (Nothing. The original files are not changed, only a copy is ma

This 9-minute video will show you how to use the free Screencast-O-matic web app to create your own screen capture video. Use Screencast-O-matic to present your own PowerPoint presentations or to demonstrate code you have written. It is also useful when demonstrating something on your computer for others to see. This can be very helpful when you have a problem and want to show someone exactly what is happening.

This tutorial can be used to show your students how to create a useful web page template containing all the essential elements used on almost every web page. Once they have this file built they can use file/save as to create new web pages without the drudgery of having to type in all the repetitive HTML elements. Key Concepts 1) The essential HTML elements of a web page. 2) The four most popular and important meta tags. 3) Adding an external CSS file. 4) Adding an external JavaScript file.