Lab 9:

Introduction to HTML

Welcome to the ninth lab of Team Edge!

In this lab, we cover an introduction to HTML and the basic structure of a web page.

Challenge 1 :

Go to this link and remix the project on Stackblitz.

New Skills :

Creating a new HTML page
Linking two HTML pages together
Adding HTML elements to a page
Writing comments in HTML
Adding attributes to HTML elements

Reference

Hypertext Markup Language (HTML)

HTML is the standard markup language for web pages. It defines the structure of the page and is comprised of elements. Elements are represented by tags. Browsers are able to read the structure and render the corresponding content.

HTML files use the extension .html (index.html)

HTML Tags Structure:

HTML tags start with an opening tag and end with a closing tag.
Content to be displayed should be placed between the tags.

Boilerplate

Boilerplates are like templates to create the foundation of the webpage. It contains the necessary tags to set up the structure of the page.

<!DOCTYPE html>

A doctype declaration tells the browser about the markup language that is used to structure the page. At the top of our HTML file, we write:

<!DOCTYPE html>

to define the version of HTML that us being used.

HTML Comments

Comments in HTML use different syntax to indicate that the line(s) of text should be commented out. The comment should be enclose with  symbols.

Linking pages

To link two pages together, the anchor tag is used.

<a href="anotherpage.html"> My Other Page </a>

The destination link is set as the value of the href attribute. The content between the tags will be displayed as the hyperlink text.

Test Your Knowledge!

Below is a quick mock up of a intro to Team Edge page. It consists of several HTML elements.

Predict which elements each part is comprised of and hover over the colored area to reveal the answer.

Project: Visitor's Guide

Additional Resources

Resources for Free Images:

Resources for Icons:

HTML References:

Report abuse