A useful tool when creating mockups are the many image placeholder services on the web. They give random photos at the sizes you specify. Some will let you choose categories, etc I use placekitten.com a lot. Another is lorempixel.com. With both, to get a random image in your page, you put in code for an image but for the […]
For this exercise, please download these files. In this exercise, we’re going to add the SIZES attribute. Make a new HTML page and add the following code to it. Make sure the path to the images is correct. If the folder name in the download is different, make adjustments. We’ll discuss these values in class.
Responsible Responsive Design: SRCSet In this exercise, please use the Firefox or Firefox Developer Edition browser: Chrome very aggressively caches images, which will make the demonstration appear to not work as described. To begin, please download these files. A basic strategy that evolved to deal with different screen widths is the now-classic img {max-width:100%} responsive image style. However, […]
Note 2023: webp is now a well-established format. However, the use of the picture element, as discussed here, can be used to serve a newer format like AVIF, while providing a fallback to browsers that do not support that format. The technique is identical to the one discussed here. The largest contributor to file size […]
In this exercise, we’ll go over how to add a custom controller to an HTML5 video element, while making sure we don’t disadvantage users without JavaScript. First, please download these files. Unzip the package and open the folder up in your code editor. You will see that I’ve given you an index file, and css, […]
Two common ways to put video into a webpage are using a hosted service like YouTube or using the HTML5 video element. There are advantages to each method, which we’ll discuss in each section. Using YouTube or Vimeo Using YouTube, Vimeo or other services is easy, as they will supply the code to embed in […]
In this lab exercise, make a three-page website about you. Each page must have at least two headings and three paragraphs. One page must have a YOUTUBE video. One page must have a Google Map. At the top of each page must be a MENU. SFTP the site to the following URL: https://mylinux.langara.bc.ca/~YOUR_ID/aboutme This is […]
List 10 HTML tags List four HTML attributes In HTML, why must we go through heading levels in order? Make a site that has the following files and folders. You can download the required image from the bottom of this page: an index.html page on the top level a folder named guitars on the top level […]
Magazine Examples Shakti Front Page Story Contact Sources 404 Fernanda Front Page Story Contact Sources 404 Andre Front Page Story Contact Sources 404 Amanda Front Page Story Contact Sources 404 Denise Front Page Story Contact Sources 404 William Front Page Story Contact Sources 404 Ian Front Page Story
Please review this checklist before the Magazine assignment due date. Validation & Semantics did you validate your html? did you validate your css? do your images have correct alt information? are you setting up a hierarchy of meaning with appropriate heading levels? are your sectioning tags (div, article, nav, footer, header) correctly used? Graphics have […]