HTML - Basic HTML Part 2
Instructors: Jess, Carmen, and Eda
Basic HTML
Before this session, please:
- Complete Debug a Pet Adoption Page and record any questions or new concepts
- Read Understanding the HTML Boilerplate: What Is the Role of the Link Element in HTML, and How Can It Be Used to Link to External Stylesheets? and take notes
- Read Understanding the HTML Boilerplate: What Is an HTML Boilerplate, and Why Is It Important? and take notes
- Read Understanding the HTML Boilerplate: What Is UTF-8 Character Encoding, and Why Is It Needed? and take notes
During this session, we’ll:
- We’ll talk through Debug a Pet Adoption Page and answer your questions so you’re prepared to complete it solo
- Review notes
- Review notes
- Review notes
After this session, please:
- Work through the steps from Build a Cat Photo App and record any questions or new concepts
- Complete Build a Recipe Page in your own time over the next few days. This is your first creative exercise, so feel free to show off your recipe page in Discord when you’re done!
- Read HTML Fundamentals: What are Div Elements and When Should You Use Them? and take notes
- Read HTML Fundamentals: What Are IDs and Classes, and When Should You Use Them? and take notes
- Read HTML Fundamentals: What Are HTML Entities, and What Are Some Common Examples? and take notes
Instructor notes
Debug a Pet Adoption Page
Remember that the anchor tag needs the “href” attribute to be able to tell the link what URL to go to
Remember that images are void elements and need the “src” attribute to pass in the value of the image URL to display
Understanding the HTML Boilerplate: What Is the Role of the Link Element in HTML, and How Can It Be Used to Link to External Stylesheets?
We’ve already learned about the anchor element, which is an element that allows us to create links to other pages or websites. The link tag sounds like it should be the same thing, but it’s different.
Anchor element: creates a user-visible link to a section of a page in your website, a different page in your website or to a different website that isn’t yours. Anchor elements should be written in the “body” section of your website (we’ll learn about this soon!)
Link element: creates a link that connects your HTML file to a stylesheet or resource that it can use to display your website to users. Link elements should be placed in the header of your HTML file. Users won’t see links made with this element. The link element uses the “rel” attribute to specify what kind of stylesheet or resource is being connected.
We’re going to learn about CSS later in this course, but to preview:
- CSS is a language used to add styling rules you can apply to your HTML
- CSS is written in a separate file with a .css filetype, these are called stylesheets
- Your HTML file won’t know about any CSS files until you create a link element in the header of your HTML that links to your .css file
Fonts: are used to transform how the text on your webpage is displayed. Fonts are files that you need to link to in your HTML. These could be files saved to the same directory (folder) as your HTML and CSS files for your website, but people often link to font files from a few common sources on the web.
Google has many fonts you can link to at fonts.google.com
Icons: a favicon or icon is the small icon that is shown in the tab when you visit that website. For example, if you’re looking at a Wikipedia page, you’ll likely see a white square icon with a black W in it. Wikipedia’s icon. You can use the link element to let your HTML file know where to look for your website’s icon.
Questions:
- What is the header of my page?
- I can use the link element with .css stylesheets, icons and font files, are there any other things I can use the link element to include?
Understanding the HTML Boilerplate: What Is an HTML Boilerplate, and Why Is It Important?
Boilerplate is the code that you’ll need to repeat in all of your HTML files that does a few important things. Because it’s (almost) the same code each time, many people copy and paste it into their HTML files when they start. Some IDEs will also automatically create your HTML boilerplate code for you.
<!DOCTYPE html>: tells the user’s browser that this is an HTML file
<html> </html>: this is the parent element for all of the html code we’ll write. We put all our HTML in between these tags
<head> </head>: this starting section of our HTML contains information about our site that won’t show on the page, but that is needed by browsers accessing your site to add context. This information is called metadata
Metadata: machine readable information that tells browsers (or other systems) things like a page’s title, language, linked stylesheets and more
Meta elements: contain different types of metadata
<body></body>: this section of your webpage will contain the user-visible content
Understanding the HTML Boilerplate: What Is UTF-8 Character Encoding, and Why Is It Needed?
Character encoding: Being able to show the same letters (or other types of characters) to anyone on the web is more difficult than it sounds. Your computer processes information like characters in piecies of binary data. Character encoding is the process of turning characters into bits and bytes of data in a way that computers can understand. This makes it possible for computers to read, process, store and send characters in a way that is the same across all computers.
UTF-8: is a system for encoding characters that is widely used across the web. By specifying and using it on our websites, we make it more likely that browsers can get, present and understand the characters we’ve written to charm our website visitors.
Bits: the smallest unit of data a computer can understand. This information holds one binary state, often represented as a 1 or 0. We don’t need to know too much about binary yet but here’s a BBC Bitesize explainer on binary and data representation I like to include in case you want to learn more.
Byte: a byte is 8 bits of information. Characters in UTF-8 can be between 1-4 bytes.
We use a meta element with the charset attribute to set our character encoding to UTF-8. We would put this in the header of our webpage
<meta charset=“UTF-8” />
Setting the encoding and language of your website are different! The encoding allows browsers to know how they should read the characters on your website to display them to your users, while the lang attribute lets search engines and your users know what language they’ll find when they visit your website.