HTML - Basic HTML Part 6
Instructors: Jess, Carmen, and Eda
Basic HTML
Before this session, please:
- Read Working with Images and SVGs: What Are Common Ways to Optimize Media Assets? and take notes
- Read Working with Images and SVGs: What Are the Different Types of Image Licenses, and How Do They Work? and take notes
- Read Working with Images and SVGs: What Are SVGs, and When Should You Use Them? and take notes
- Preview Build a Heart Icon and try to work through the steps alone, recording questions and any new concepts
During this session, we’ll:
- Review notes
- Review notes
- Review notes
- We’ll work through key steps from Build a Heart Icon to better understand SVGs
After this session, please:
- Attend the optional SVG Guest Session tomorrow, if you can
- Read Working with the iframe Element: What Are Replaced Elements, and What Are Some Examples? and take notes
- Read Working with the iframe Element: How Do You Embed Videos onto Your Page Using the iframe Element? and take notes
- Work through the steps from Build a Video Display Using iframe and record any questions or new concepts
- Complete Build a Video Compilation Page on your own over the next few days.
Instructor notes
Working with Images and SVGs: What Are Common Ways to Optimize Media Assets?
What are media assets: these are the images, videos, sounds or other kinds of media (though Jess can’t think of any other types right now) that you may want to include in your webpages
Optimization: the practice of making something more efficient
Media asset optimization: making the media on your webpages as efficient as possible through
- Selecting appropriate file types
- Compressing media files using compression tools
- Using smaller media files when we can
Compression: the technical process of making files smaller, which can sometime impact file quality. This is usually done with a compression tool.
Why do we want to optimize media?
Smaller and more efficient media files:
- …take up less storage space on our devices and servers.
- …allow our websites to load faster.
- …don’t use up as much of our users’ bandwidth, which is especially important for users on mobile or expensive connections or who have older devices.
- …is more ecologically friendly!
Image types: Images on the web can be different filetypes. You may have already seen some like .jpg or .gif. Some modern image types like .webp or .avif
Working with Images and SVGs: What Are the Different Types of Image Licenses, and How Do They Work?
Rules like copyright still apply on the web, which means you can’t just use any images (or text, or other kinds of media) that you find on the web.
Licenses: are the rules attached to using a specific piece of software or media
What images can you use on the web: you can use images (or other media) with licenses that allow for reuse, as long as you’re careful to use them in accordance with license requirements
Creative Commons: is an organization that maintains open licenses and is a great resource for learning more about licenses. Let’s look at some of their licenses and the requirements associated with each
Working with Images and SVGs: What Are SVGs, and When Should You Use Them?
SVG (Scaled vector graphics): is an image filetype that allows your image to scale (be resized) without any loss of image quality. They’re most often used for simpler images, like logos.
We can “draw” SVGs by specifying plot lines, paths, curves and how the shapes these draw are filled in.
SVG element: an HTML element that allows us to “draw”
Build a Heart Icon
We’re building all of the lines, points, curves and attributes needed to make our SVG heart inside a SVG element.
The Path element inside our SVG is specifying all of the points, lines and curves that need to be traced to create our heart. Let’s look at the MDN documentation for the Path element to try and see what this does in more detail.
The parser: is the small piece of software build into our browser that can read the instructions we’re giving in our SVG and Path elements, to be able to trace them to make our image