Why is HTML important?
​
HTML is important because it's at the foundation of the web. Without it, we wouldn't have the rich and diverse ecosystem of websites, apps, and services that we have today.
Learning HTML gives you the power to create and control your own online content, and opens up a world of possibilities.
​
​
​
​
Did you know...
​
Did you know that HTML is not a programming language?
Unlike programming languages like Java or Python, which are used to create complex software applications, HTML is a markup language that is used to structure and format content on web pages.
​
​
​
​
​
How do you get started?
​
HTML is simple! All you need is a text editor and a browser. Today, we are going to do this in Replit.
​
Base template
​
<!DOCTYPE html>
<html>
<head>
<title>My first HTML page</title>
</head>
<body>
<h1>Welcome to my first HTML page!</h1>
<p>I'm learning how to create web pages with HTML.</p>
<!-- Your code here START -->
​
<!-- Your code here END -->
</body>
</html>
Exercise #1: Creating HTML Text
​
-
HTML has opening and ending tags.​
Example:
<h1> (open tag)
</h1> (end tag)
This is how you would say "hello friends!"
using an h1 ("h" stands for Headline) tag.
<h1>Hello friends!</h1> -
Create the following text in your HTML page.
(p tag) "There once was a chicken named Sue,"
(h3 tag) "Who had a most peculiar shoe."
(h2 tag) "It was made of green silk,"
(h1 tag) "And caused quite a milk spill."
* Notice the size difference based on the tag! -
If you want to create a horizontal line, use the hr tag. Add this to your page.
<hr />
* Notice how this element doesn't have an end tag. The "/" is used to self-close the element. -
Add this text to your html page.
* Note: The main thing to accomplish is the size difference. Don't worry about getting the exact tag right.
Why was the math book sad?
--------------------------------------
Because it had too many problems.
Exercise #2: Adding media
​
-
How do we add pictures? We use the img tag!
<img src="LINK_TO_IMAGE" />
Let's take a look at how this works. Imagine we
had a URL link to an image
https://i.imgur.com/75HIquZ.jpeg.
Add this code to your page.
<img src="https://i.imgur.com/75HIquZ.jpeg " /> -
If you want to make a link to another page, use the a tag!
<a href="URL_LINK">TEXT TO CLICK!</a>
Add this Google link to your page:
<a href="https://www.google.com">Link to Google!</a> -
The text inside the a tag can have HTML in it. Make your link text into a headline!
<a href="https://www.google.com"><h1>Link to Google!</h1></a> -
Add this image to your page.
https://i.imgur.com/I0TI1dx.jpeg -
Image link:
-
Add this image to your page. https://i.imgur.com/AoHXOzB.jpeg
-
When you click it, it should go to https://twitter.com/
-
-
The src in the img tag is called an "attribute".
<img src="https://i.imgur.com/75HIquZ.jpeg " />
This is used to customize the HTML element. We can use it to customize font color. Add this to your page.
<p style="color:red;">This is a red paragraph.</p> -
Create this on your page.
The image address is https://i.imgur.com/DywYaTT.jpeg
When you click the question, it should take you to http://reddit.com/
* Note: The main thing to accomplish is the size difference. Don't worry about getting the exact tag or color right.
Why couldn't the bicycle stand up by itself?
Because it was two-tired.
Exercise #3: Lists
​
-
Add this code to create a list on your page.
<ul>
<li>John</li>
<li>Susie</li>
<li>Sarah</li>
</ul> -
Update your code to create a numbered list on your page.
<ol>
<li>John</li>
<li>Susie</li>
<li>Sarah</li>
</ol> -
Create this Christmas wishlist. Notice the colors and links!
1. iPhone (link to apple)
2. New headphones (link to Bose)
3. Animal Crossing for switch (link to Nintendo)
