HTML - Basic HTML Part 1
Instructors: Jess, Carmen, and Eda
Basic HTML
Before this session, please:
- Try working through Build a Curriculum Outline and write down any new concepts or questions
- Complete Debug Camperbot’s Profile Page and record any questions or new concepts
- Read Understanding HTML Attributes: What Role Does HTML Play on the Web? and take notes
- Read Understanding HTML Attributes: What Are Attributes, and How Do They Work? and take notes
During this session, we’ll:
- We’ll work through Build a Curriculum Outline together to get used to workshops
- We’ll talk through Debug Camperbot’s Profile Page together to understand how you’ll approach your first lab exercise
- Review notes
- Review notes
After 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
Instructor notes
Build a Curriculum Outline
HTML (Hyper Text Markup Language): is the language we’ll use to build the structure and content of our webpages that make up our website!
HTML element: these are the units of HTML that we can use to build our website. Think of them as lego blocks that we can click together to make the website of our dreams.
HTML tags: These <bracketed> tags make up the HTML elements we’ll use. These often have two tags per element, one opening tag to start your element and a closing tag with a / to end your element <h1>like this</h1>
Heading: we learned the h1, h2 and h3 tags, which are all headings of different priority levels. We’ll learn more about them as we learn more HTML!
Debug Camperbot’s Profile Page
Debugging: looking at code to try and get rid of errors (which are often called bugs!)
User stories: are short narratives that describe what your website, code or feature should do and why!
Tests: tests are checks that the code you’re writing or debugging meets specific requirements. Learning to work with tests and the error messages they give you will be an important part of your life as a developer
Error messages: Tests and other tools/libraries you’ll use will give you error messages when something is wrong. Staying calm, reading these carefully and searching for the error message online can be a programming superpower.
Syntax: how a programming language is written. Think of it as the vocabulary and grammar of a programming language
Understanding HTML Attributes: What Role Does HTML Play on the Web?
HTML is a markup language that is written in HTML files that are accessed by users’ browsers. The HTML elements written in these files makes up the structure and content found on the web.
You can technically make a website with just HTML, it just won’t be very pretty. We’ll learn about CSS to style websites and preview JavaScript to add interactivity to websites later in this course!
HTML elements are wrapped in angle brackets (Jess often calls these pointy friends, yell at her to use the proper language when she does!) and often have a starting tag and closing tag with a backslash to form the element.
Void elements: HTML elements that don’t need a closing tag. The image tag is an example of a void element. You can often choose to include or leave off a closing slash at the end of a void element.
Code formatter: A tool that automatically cleans up the format of your code to make it meet specific standards
Attributes: Some elements, like img, require multiple pieces of information to make the element work. These values, called attributes, can be set in your HTML element. For example, the img element needs an image source. This is set with the src element like this
<img src=”https://badwebsite.club/decorations/ghost.png”/ alt=”a small blue illustration of a ghost bat”\>
Understanding HTML Attributes: What Are Attributes, and How Do They Work?
Attributes: Values that are placed in the opening tag of some HTML elements to add additional information to make those elements work. Attributes can be required for some HTML elements but there are also optional attributes for some elements.
Links: are the building block of the web and were the core concept that Sir Tim Berners Lee designed his invention (the web!!) around. We can think of the web are a series of documents
Link elements: the anchor element and its required href attribute allows us to link to another page on our website or to another site on the web. The href tag has required attributes to tell the browser what URL (web address) to go to and what anchor text to use. We can also optionally use the target attribute if we want to tell the browser we would like it to open the link.
Some attributes have unique syntax, like the checked attribute that we’ll learn about when we work on forms. These can be harder to memorize because they’re less commonly used but it’s always ok to look these up!
We can use the interactive editor to explore how these attributes work.