Webdevelopment for Beginners (3 Part Series)
Hey, welcome back to my Webdevelopment for Begginers guide. Today we'll learn how to add images, lists and YouTube videos to our page!
So lets start with the simplest of the new things to learn: Lists. Lists can be used everywhere where content is listed. That could be a simple recipe list, a list of users or a navigation.
Yes a navigation is also a list of links, so using a list for your navigation items would be the best, semantic solution.
Creating lists is very easy. This is how two lists would look like in code:
<html> <head> <title>Hello world</title> </head> <body> <h1>Tutorial demo website</h1> <p> This is a tutorial demo page for my dev.to beginner tutorial about HTML.<br /> You can find my profile <a href="https://dev.to/bdbch/" target="_blank">here</a> </p> <ul> <li>Twitter</li> <li>Github</li> <li>Dev.to</li> <li>Spectrum.chat</li> </ul> <ol> <li>First step</li> <li>Do something else in the second step</li> <li>Another step which is the third</li> </ol> </body> </html>
As you can see we have three new tags.
ul stands for unordered list. This means our list will not be numbered or ordered in any way. It's not self-closing and requires content.
ol stands for ordered list. This means our list will be ordered in a logical way. This could be a numbered list, or a alphabetic list.
li stands for list item and is required to build lists. This element must always be used in
<ul> lists. Otherwise you won't be able to create semantic items in your list.
Now how does our website look like?
You can nest lists inside each other. To do this, you need to create a new
<ol> inside a
<li> list element. A nested list would look like this in code:
<ul> <li> Twitter <ul> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> </ul> </li> <li>Github</li> <li>Dev.to</li> <li>Spectrum.chat</li> </ul>
This will result in something like this:
As you can see, it works as expected.
So now it gets interesting. Lets insert an image into our website. But how do we do this? Luckily we have the tag
img at our disposal. The img tag requires a few attributes to run correctly but it really isn't that complicated.
Lets see how to use an image. We're using unsplash.it for our pictures:
<img src="https://unsplash.it/500/500" alt="Image description for screen readers" />
You can see that we used the
alt attributes for our img tag.
src stands for source and requires a link to a valid image.
alt stands for alternative and means the image description if the image can't be loaded or a person can't see the image and requires a screenreader.
Now lets see the page output, right?
Wasn't that hard, right?
Now lets get some action into the page! Let's embed a video from YouTube! For that you'll need the embed code. You can find it on a YouTube video when you want to share it. Lets add the embed code to our website.
<iframe width="560" height="315" src="https://www.youtube.com/embed/9SBNCYkSceU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
You can see that YouTube uses a tag called
<iframe>. A iframe is a frame which can embed external websites in your document. It even uses the same
src attribute as the
The width and height are defined via the width and height attributes. All other attributes are specific attributes for iframe permissions and if the iframe can go fullscreen.
Now if we open our website with this embed, it will look like this:
So now we have an embedded version of YouTube in our HTML document which will start on click. Easy!
Now that we played around with tags and attributes, I think it's time to build a website with multiple pages and create a navigation. Check out the next post if you want to learn more about it!
Thanks for reading!
Learning to code products doesn't take as long as you think - more precisely, 300 hours to learn, build, and launch. Learn about the history and misconceptions of development preventing you from even starting and then hop on that tech bus.