KODE WITH KLOSSY

Welcome to Intro to HTML!

 
KEY POINT

Let's write down the learning goals and technical vocabulary for today's lesson!

🎯 LEARNING GOALS

Understand what HTML stands for and its purpose

Recognize and use some common HTML elements

📗 TECHNICAL VOCABULARY

Attribute

HTML

HTML Element

HTML Tag

Identify and use attributes on HTML elements

💪 WARM-UP

In your notebook, jot down your answers to the following questions.​

1. What are your favorite websites/mobile apps?

2. What is it about them that you like? The look? The functionality/purpose?

KAY_Short_002_shot_020_480p_T.gif
 

P.S. Don't forget that you can add closed captioning and adjust speed in the videos if you'd like!

Syntax

HTML is made up of two things: text and tags that mark up that text. (HTML stands for hypertext markup language!)

Let’s say that we had some text, and we wanted to communicate that this text was a paragraph.
 

This text is a paragraph.
 

In our HTML code, we’d wrap the text in paragraph tags. The code would look like this:
 

<p>This text is a paragraph.</p>
 

You’ll notice that there are tags on both ends of the text. The entire code block above, the tags and text inside, make up an HTML Element.
 

HTML is made up of two things: text and tags that mark up that text. (HTML stands for hypertext markup language!)

html-tags-detail-how-to.jpg

👆

👩‍💻 Try-It: Building a Basic Page

1. Visit this repl.it Project.

2. Click "Fork" in the top right corner to make a copy of your own.

Please make sure you are signed into repl.it to fork the code. 

3. Select index.html in the file tree.

4. Use what you know about headings and paragraph tags to create at least three headings of any size (h1 - h6) and three paragraph elements, starting on line 9. The topic is your choice!

Need some filler text? Check out this Lorem Ipsum Generator.

P.S. If you step away from the computer or close your browser for whatever reason, you can head back to repl.it, log in to your account, click on My repls, and find your repls there! 

Commenting 👉

We use comments to write information that the browser won't show. Comments are helpful to leave notes for ourselves or other developers, as well as for troubleshooting code. In HTML, the syntax for commenting is:

<!--This is a comment-->

You can also use shortcuts for commenting by highlight the text we want to highlight, followed by:

command+/ for Mac

ctrl + / for PCs

🖼️ Images and Attributes

We use HTML tags to “mark up” text to show its semantic meaning. The browser uses these tags to build up the document. Most tags have an opening and closing tag, but a few do not. For example, the image tag (defined using the <img> tag) does not have a closing tag.

Consider the following:

<img src="https://cfmedicine.nlm.nih.gov/static/img/portraits/53.jpg" alt="Alexa Irene Canady - Changing the Face of Medicine">

Two new things are happening here:

First, we have an <img> tag that is somewhat unique in that it doesn’t have a closing tag like all of the others we’ve seen so far.

 

Second, our <img> tag has extra information inside it!

  • Our browser can present an image, but it has to know which image we want to it present. That’s where the src attribute comes in. It tells the browser what the source of our image is - we give it a link (an address!) to the image we want to render.

  • We also add the alt attribute contains text that identifies the image to a screen reader. The alt text is displayed if the picture can’t be displayed for some reason. It helps all users, not just those using screen readers!

 
 

Try-It: Adding Images 🖼️ 👉

First, copy and paste the following image tag code into your repl.it project. Does an image of an Australian shepherd pop into your repl.it?
 

<img src = "https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/04113830/Australian-Shepherd.10440112.jpg">

Now, follow the directions below 2-3 times to add in images of your own to a website where you talk about your favorite animal!

  1. Go to UnsplashPexels, or Google and find an image you'd like to use;
     

  2. Right-click it, then select "Copy Image Address";
     

  3. In your HTML, write an image tag, then use cmd + v (for Mac) and ctrl + v (for PC) to paste the image address into the quotes for your src attribute!

* Are some images showing up way larger than you'd like? We will learn how to control that with CSS soon. For now, you can add this line of code to the style.css file in your repl.it project: img { height: 300px; } 

Links 🔗

To add a link, we use the <a> tag. It has an opening and closing tag, and it utilizes attributes!
 

The <a> tag, like the <img> tag, also has an attribute. Instead of src, we use href or hyper reference. The value of this attribute should be the web address, including http://, where you want the link to go.

For example:

<a href="https://www.livescience.com/amazing-black-scientists.html/">Amazing Black Scientists</a>

 

Try-It: Adding Links 🔗

In the same repl.it project you worked in before, add a few links to your HTML.

As an extension activity, you can make an HTML list and add your links as list items. You may need to Google search to learn how to create an HTML list.

Commonly Used Elements & Google-ing 🌐

There are close to 100 elements available to us when we write HTML! You don’t need to know all of them, but there are a few that you’ll find extremely helpful. We’ll learn some today and more in the next lesson.

Try set 2 and 3 of the following elements on your own:
 

Set 1: button, code

Set 2: em, strong

Set 3: input, textarea

 

💪 Practice: Intro to HTML

Create a new repl.it project for this challenge or fork this repl.it.

Using any text and image you'd like, write a short bio like the one below. Try to use all the HTML elements you've learned about today.

Just for a frame of reference, a total of 10 elements were used to create the bio above, and 6 unique elements were used!

Untitled.png