Today, we're going to learn the basics of making a webpage using HTML. HTML stands for HyperText Markup Language, and when combined with CSS and JavaScript, it can be used to make beautiful web sites! HTML's main purpose is to put content on the page (rather than making the web page look nice or dealing with any math or logic on it), so today, we're going to start adding some content to our page.

First, click here to set up the title of the web page and learn more about the head section of an HTML document.

Head

Before we begin to add content, we will set up the head element. The head stores a bunch of information about the website (such as the author's name, keywords for search engines, and other information), along with links to the CSS and JavaScript files that your HTML file is accessing.

In the head, you can also set the title of your website. Go ahead and change the title in the input box below. If you look up at the tab at the top of the browser, you can see the name change, too!

Example 1 - Code

Once you've changed the title, you're ready to add some content to your page!

Content - Basic Tags

In HTML, you add content to a page by adding elements. An element typically looks like:
<tag>content</tag>
where you have some content encased by two tags. The tags will determine what the content looks like or how it's spaced.

Try to add some content to the page by putting some text in the input box below. You can also choose what type of element you would like to add.

Example 2 - Code

<body>

</body>

Above is what the code that you've added looks like in HTML. Below is what the code looks like once it's been rendered on the page. How cool is that?

Example 2 - Rendering

You've just made text in different sizes! Before we move on, we also want to say that there are two other very common types of elements, which are called divs and spans. They're both used to separate/group elements to make the code easier to read, but you can't really see that they're there just by looking at the page.

Now that we can add content to our page, click here to make some lists!

Lists

In HTML, there are three different ways to display lists of items. You can have an unordered list, where the items are displayed using bullet points, you can have an ordered list, where items are numbered, and you can have description lists, where items are given terms and descriptions. Let's check them out!

Example 3 - Code

<li>I'm a list item in an unordered list!<li>

</ul>
<ol>

<li>I'm a list item in an ordered list!</li>

</ol>
<dl>

<dt>I'm a description list term!</dt>
<dd>And I'm a description list description!</dd>

</dl>
</body>

Example 3 - Rendering

I'm a list item in an unordered list!

I'm a list item in an ordered list!

I'm a description list term!: And I'm a description list description!

Notice the differences between the three different kinds of lists. Next, we're going to learn how to add images to our HTML.

Images

Yes, the content that you add to your page can be more than just text! To add an image, you need two things:

A link to an image (either a URL for an image online, or a path to it from the folder your HTML document is in)
A description of the image that can be displayed in case the image doesn't load

In the code snippet below, try changing the source for an image. To do this:

Go to Unsplash.com, a free website that has thousands of high quality photos, and find a picture that you want to add.
Right click on the picture, and click Copy Image Location (if you're on Firefox) or Copy image address (if you're on Chrome) from the dropdown that appears (this is different from just "Copy Image").
On this page, in the code snippet below, remove everything in the input box next to src=, and paste in the link you just found by right clicking in the box and selecting Paste
Remove the text in the input box next to alt= that currently says "Foggy Sunset", and type in a description of the picture you chose.
Click the Change Image button and voila, your image should appear below!

Example 4 - Code

Example 4 - Rendering

The width attribute in the img element above havs been set to 200, so the image will always be 200 pixels wide, and the height will be scaled proportionately. If that wasn't there, then the picture would show up as the size that it was when you copied its link.

When you change the image, you shouldn't see the alternate description that you entered - which is good! That will only be displayed if the picture can't be for some reason.

Now that we have images, let's learn how to create links to new pages.

Linking to New Pages

Sometimes, you'll want to link to another website from your website. Or, if you want to create more than one HTML page, it's nice to be able to link them all together so you can get from one to the other. We can do this using anchor tags.

Some things to note about anchor tags:

They're written as <a></a>
href stands for Hypertext REFerence, and is set equal to the URL of the website you want to link to
target="_blank" means that the new webpage will open up in another window (and will not change the page that you're on when you click the link).
In between the two anchor tags, you can put text which will appear on the page. Right now, the text says The search engine 'Google', but when you click on it, it redirects you to https://www.google.com. You can set the text in between the anchor tags to say whatever you want, but the link for href must be exact.

Right now, the code below will link a user to https://www.google.com. Try changing the link to another website!

Example 5 - Code

Example 5 - Rendering

The search engine "Google"

Now you know how to link to any other page on the internet! As metioned above, you can also link to other HTML pages that YOU have made! We'll look into that more when you begin to build your own website. Next, let's learn about user inputs!

User Inputs

Even though you'll be the one adding content to your website, there's a good chance that you'll want other users to be able to interact with it, too!

You can collect user input through a number of ways, the most common being input elements.

Every input element has something called a type, which determines what type of information it will accept. This could be text, a color, a date, or something else. Pick a type value from the code below to see what an input box for that type would look like!

Example 6 - Code

<body>
<input type="" id="userInput">
<button onClick="printUserInput()" >Print the user's input</button>
</body>

We haven't learned about buttons or IDs yet, but for now just know that clicking the button will print the value of the input you entered

Example 6 - Rendering

Feel free to choose different values for the type and enter different values in the resultant input fields to see what will be printed.

Notice how when you try to type in an input box when value="password", the letters are replaced by dots in the box!

If you're giving the user certain choices to pick from, you'll have to make options for each choice with values assigned to them. Try putting different foods in the input boxes below and seeing how that changes the code in Example 7 - Rendering.

Example 7 - Code

<body>
<input type="radio" name="food" id="food1" value="">
<label for="food1">Secret Food Option 1</label>
<input type="radio" name="food" id="food2" value="">
<label for="food2">Secret Food Option 2</label>
<button onclick="printRadioButtonValue()">Print Value</button>
</body>

Below, you can see how the code above would look once rendered on a webpage. Notice how only the label is displayed next to the button, but we can still access the value of the button. Also, notice how the label and the value do not have to be the same.

Try clicking one of the buttons and seeing what gets printed.

Example 7 - Rendering

Secret Food Option 1 Secret Food Option 2

Wow! Now you can add content to your website, link other websites to it, and collect input from other users! While there's still a lot more out there, we're going to focus on one more type of element in HTML: buttons.

Buttons

Buttons are often used to "submit" data when collecting user input, so it's important to know how to create both types of elements. Luckily, buttons are quite easy to create. Let's look at an example!

Example 8 - Code

<body>
<button onclick="myFunction()">Click</button>
</body>

Example 8 - Rendering

Click the button above and see what happens!

Now that you've seen what the button did, it's important to note that all of the functionality of the button (a.k.a. the color changing) was done using JavaScript in a method called "myFunction()". If you're page doesn't include any JavaScript, then buttons won't be able to do very much.

Websites are normally built using a combination of HTML, CSS, and JavaScript! Later today, we're going to look at more ways to style your website using CSS! Before you move on to this, there's one more topic that we need to go over: classes and IDs

Classes and IDs

You can write an HTML page without using classes or IDs (as you've seen in the previous examples); however, if you want to add any colors, styles, or interactive functions to your page, classes and IDs will be quite useful. Plus, they're super simple to add!

Class - A class is an HTML attribute that is shared by multiple elements that should be treated similarly. For instance, if you had certain elements that you wanted to be colored red, you can set class="red" for each of them, and then write CSS that would turn their color red. An element can also be in multiple classes, too! To add more classes, you just put a space between them, so class="red big" would put the element in the "red" class and the "big" class.
ID - An ID is a unique identifier for an element. While multiple elements could/should be in the same class, IDs should be specific for each element. Also, each element should only have one ID (if it has one at all!)

Example 9 - Code

<body>
<h1 class="timesNew" id="mainTitle">You're almost at the end of the lesson!</h1>
<h3 class="timesNew" id="subTitle">Congratulations!</h3>
</body>

<style>
.timesNew {
font-family: 'Times New Roman', Times, serif;
}
#mainTitle {
color: white;
}
</style>

The code above may look a bit confusing, but don't worry - everything in between the two style tags is just CSS, which you'll be learning later today. For now, just know that the CSS is saying "anything in the "timesNew" class will be written in Times New Roman font, and any item with the ID "mainTitle" will be colored white."

Example 9 - Rendering

You're almost at the end of the lesson!

Congratulations!

The above code shows how a class and ID would look in HTML. Any type of element can have an ID or classes.

Congratulations! You finished our lesson on HTML! While we learned a ton here, there's still a lot more to learn in HTML that we didn't get the chance to go over. Back at https://www.udel.codes/LTC/HTMLResources, we've made a list of resources on HTML that we encourage you to explore! It has more examples of what we did today, plus some links to examples of things that we haven't covered yet!

Even though we only covered a bit of HTML today, you still have enough to get started on an awesome web page of your own!

Introduction to HTML

By UD's Summer of Cyber Team