Hey, welcome back to my Webdevelopment for Begginers guide. Today we'll learn how to add images, lists and YouTube videos to our page!
Lists
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>, <ol> and <li>
<ul>: Unordered lists
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>: Ordered lists
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>: List items
li stands for list item and is required to build lists. This element must always be used in <ol> or <ul> lists. Otherwise you won't be able to create semantic items in your list.
Now how does our website look like?
Awesome!
Nesting lists
You can nest lists inside each other. To do this, you need to create a new <ul> or <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.
Images
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 src and alt attributes for our img tag.
src
src stands for source and requires a link to a valid image.
alt
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?
YouTube Video Embed
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 <img> tag.
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!
Conclusion
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!
Top comments (0)