Note: Links have been omitted from this page.
In this first unit, you get an overview of how this course works. Then you'll read some resources that define the Internet and the World Wide Web generally and get an overview of what a web browser does. You'll understand what happens when you click on a link and view a website. You'll read about some of the key figures in the rise of the Internet and the World Wide Web.
Use the Course Overview to see how this course is set up.
Use the Readings and Brief Quiz to get some background on the Internet and the web and take a simple brief quiz.
In this unit, you pick out an web page editor and create your first web page based on models provided and send it by e-mail attachment to your instructor. If you wander into serious web design worlds, you will see IDE. That means integrated development environment, and it refers to a web page editor with lots of additional useful features. Visual Studio Code and Sublime Text are two well-established examples. But the list is growing!
Here's what to do for this unit:
You've now seen how you can create and edit files in W3schools Spaces. But you really need a full-function integrated development environment like Sublime Text or Visual Studio Code. Sublime Text is a better choice because Visual Studio Code is overwhelming at first.
To create simple web pages, you need only a handful of HTML tags. In this unit, you practice using that handful of tags and see how they work.
Use the Basic HTML Tags study guide to get some practice with common HTML tags.
One of the great advantages of web pages is their ability to link to other web pages. This creates the world-wide "web" that is expressed in the name World Wide Web. This unit guides you through the creation of a variety of links to other people's pages as well as your own.
Use the HTML Linking study guide to see how to create hypertext links between web pages.
Before going much further, we need to get into CSS, which enables the X in XHTML and moves all the formatting out of the .html file.
Use the CSS Introduction to learn some of the basics of using CSS in your web pages.
In this unit, you see how to control or change the fonts and color in your web pages as well as add images.
Use the Fonts, Colors, Images study guide to see how specify fonts and colors in your web pages as well as add images to them.
In this unit, you'll see how to create a variety of vertical lists: bulleted lists, numbered lists, lists that restart at 1 or a different number, lists that have indented paragraphs within them, lists that use different indentation and margins, and lists that use interesting graphics for the bullet symbol.
Use the Lists study guide to see how to make many different types of lists.
In this unit, learn how to create a variety of tables in your web pages: tables with or without captions (titles); tables with columns centered or right-aligned; tables with subcolumns or subrows; indented or centered tables; tables with grid lines hidden. Also in this unit you will learn how to add images to your web pages and how to format them in various ways.
Use the HTML Tables to learn the basics of creating tables in HTML and CSS.
Watch this link about why tables can be bad in web pages.
Use the HTML Tables, Boxes, Borders to learn the standard method to avoid using tables solely for formatting purposes.
Now and then, you may encounter a situation in which you have a link (created by input(as shown below)—which is messy, tacky looking. You can use the button tag to make the link look like a buttton.
Use the HTML/CSS Buttons to learn the basics of creating linked buttons on your web pages
No longer can you have an attractive, interesting web site without audio (such as podcasts) and video (typically MP4s). In this unit, you link to audio and video in one or more web pages.
Use the Audio & Video to see how to use HTML5 functions to add audio and video to an HTML page or site.
Although popups have been scorned because of their commercial overuse, they can play a useful role in your web sites. Similarly, tooltips provide useful information when a visitor hovers over something in a web page tagged as a tooltip. Take a look at an example of what you'll accomplish in this unit.
Use the Tooltips & Popups study guide to see how to create these useful additions to an HTML page.
Forms are those dreadful things we have to fill out all the time at doctors' offices. HTML5 provides a number of useful enhancements. Still, you need some real programming to get and use data from these forms—which this unit provides.
Use the HTML Forms to practice the basics of HTML5 forms.
A "tri-pane" web page is possibly the most common web-page design right now and has been for some time. It consists of a "banner" that spans the entire width of the page, a narrow vertical pane (about one-third of the page width) that typically provides menu links, and a broader vertical pane (the rest of the page width) for the main page content.
A "responsive" web page is one that resizes properly according to the device on which it is used. The three standard sizes are large-size screens (standard desktop), medium-size screens (think tablets), and mobile-phone size screens.
Use the HTML Responsive Tri-Pane study guide to see how to create a responsive tri-pane page.
Use the Responsive Images study guide to create web pages with images and fonts that reformat nicely to the size of the device they arr being viewed in.
Use the Responsive Fonts study guide to create web pages with images and fonts that reformat nicely to the size of the device they arr being viewed in.
In this advanced unit, you explore dynamic menus as enabled by Bootstrap 3 (or 4). Bootstrap menus provide a much more compact way of tying together the pages of your web site. Note: There is no video for this unit. If you need it, let me know!
Use the Bootstrap Menus study guide to learn how to create Boostrap menus with drop-down submenus.
An "accordion" displays drop-down text, images or both when you press a link. A common use for accordion functions in web pages is the FAQ. You might have a rather lengthy list of questions, and to save on screen area, the answer to a question displays in a drop-down when you click a question link.
Use the Web Page Accordion study guide to create a web page in which sections expand to reveal more information and images when hovered over or clicked.
A "carousel" is a revolving, repeating display of images.or even text. You may remember the carousels used for slide shows back in the day. The carousel can run either manually (you press an on-screen button to go to the next image or text) or run automatically.
Use the Carousel study guide to see how to set up a web page carousel.
In a webpage featuring a "hero" image (also known as a "banner" image), the top quarter, third, or even half of the page is covered by a large image and introductory text. CSS enables autonumbering of headings and figure captions.
Use the Web Page Hero Image study guide to see how to set up a simple web page that features a hero image.
Use the Autonumbering Headings study guide to see how to automate the numbering of headings.
Use the Autonumbering Figure and Table Captions study guide to see how to automate the numbering of figure and table captions.
Use the Autonumbering Decimal Lists study guide to see how to automate the numbering of decimal lists.
You see a lot of these "landing" pages where you scroll, scroll, scroll. This unit shows you a simple way to achieve that.
Use the Long-Scrolling Web Page study guide to see how to make users scroll for seeing ever!
CSS Flexbox and CSS Grid are two powerful ways to control arrangement, sizing, alignments of objects on a web page and to achieve responsiveness.
Use parts 1 and 2 of this introduction to Flexbox:
Use the Grid Introduction, part 1 study guide to see how to set up web pages with simple grid functions.
Sometimes, an image or a strip of text you want to display is too big for your web page and so you have to display a smaller one which is too small to be readable. The solution for this problem is to enable the user to hover over the smaller image or a "hover here" and to display the larger image or text.
Use the Large Images study guide to see how to pop up a larger version of an image on a web page.
Use the Lengthy Text study guide to see how to pop up a large chunk of text on a web page.
In this final unit of this XHTML/CSS course, you create a website (multiple linked web pages) in which you demonstrate most of what you have learned to this point. It's time show off what all you've learned and know!
Choose on of the following based on the units you've studied in this course:
Use the Final Project A study to see the recommendations for creating an HTML site that will represent most of what you know and have learned in this course.
Use the Final Project B study to see the recommendations for creating an HTML site that will represent most of what you know and have learned in this course.
Information and programs provided by admin@mcmassociates.io.
