First, click here to set up the title of the web page and learn more about the head section of an HTML document.
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<head>
<link rel="stylesheet" type="text/css" href="styles.css">
Once you've changed the title, you're ready to add some content to your page!
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<body>
<dd>And I'm a description list description!</dd>
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.
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<body>
<img src="" alt="" width="200" >
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.
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>
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>
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
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.
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>
font-family: 'Times New Roman', Times, serif;
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!
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!