HTML lesson 2 - images and links
If you missed the first part, please go read it first! I told you I still had a lot more for you, so here I am! ^^ Something I forgot to mention in my last post was W3schools. It's a free website where you can learn almost all basics about web development, but it's especially helpful for learning HTML and CSS. If you're looking for anything or don't understand something, you should search there. Last time we did a bit about text formatting, so this time I'll focus on how to get pictures/gifs and links into your profile. For pictures, we have the <img> tag. It's one of the special tags I told you about last time, so it only needs an opening tag, but no closing tag. Inside it, you need a src property. That's where the picture will be defined. <img src=""> Now you need a picture. If you have it on your computer, you need to upload it somewhere to use it. You can upload pictures in your friendproject album, but if you don't want to have them there, you can also use Imgur. If you want to use a picture from the internet, you won't have to do this, because it already is uploaded somewhere. Now right click on the uploaded picture and select "Copy Image Location" (in Firefox, it's maybe a bit different in other browsers). Now you should have copied a link that ends with .png, .jpg, .jpeg, .gif or another graphic format. If you use a picture from another website and that's not the case, you should try to download it and upload it yourself like described above. This link will go into the src property now: <img src="https://www.friendproject.net/photos/27/62/m_72068326792224406.jpg"> And that's all you need to display a picture! The <img> tag has other options too, for example changing the size of the picture or displaying an alternative text in case the picture doesn't work for some reason (it's recommended to do that, but I'm too lazy most of the time tbh xD). Read W3schools <img> tag to learn about them. There are a lot of websites where you can get cool gifs, blingees, pictures, banners etc for your profile. I have a lot of them on my own profile too. Here's a list of websites you can use: www.glitter-graphics.com blingee.com (you can even create them yourself here!) www.pimp-my-profile.com/graphics https://www.zwani.com/ www.pimpmaspace.com Pls comment what I missed, I'll add them to the list! Most of these sites already give you the code with the <img> tag so you just have to copy and paste it into your profile wherever you want it to be. Some of them, like glitter-graphics, may also have a link to the site after every image, and that's quite annoying if you use more than one. You can get rid of them tho! Here's some code for a gif from glitter-graphics: <a href="https://www.glitter-graphics.com"> <img src="https://dl10.glitter-graphics.net/pub/1585/1585530iaoxjjxvje.gif" width=200 height=200 border=0> </a> <br><a href="https://www.glitter-graphics.com" target=_blank>glitter-graphics.com<a> You won't understand all of this right now, and that's totally fine, don't worry about it! We'll take care of it soon. Now on your profile it will look like this: What you do to remove the link after the gif is to simply delete everything after the <br> tag. <a href="https://www.glitter-graphics.com"> <img src="https://dl10.glitter-graphics.net/pub/1585/1585530iaoxjjxvje.gif" width=200 height=200 border=0> </a> The link should be gone now. If someone clicks on the gif, they will still get directed to www.glitter-graphics.com. If you don't want to have this behavior, you need to delete the whole <a> tag around the <img> tag. <img src="https://dl10.glitter-graphics.net/pub/1585/1585530iaoxjjxvje.gif" width=200 height=200 border=0> Now you've already seen how a link looks in HTML. Links are made by using the <a> tag. You can also use it for a few different things, but let's focus on links first. The <a> tag has an href="" property, where you paste the link inside. <a href="https://www.friendproject.net/view_profile.php?member_id=229762"></a> Inside the <a> tag itself, you can write an alternative display text, which is often better than displaying the whole link. <a href="https://www.friendproject.net/view_profile.php?member_id=229762"> ZombieChinyoka on friendproject </a> Again, you can read more about the <a> tag on W3schools. I think that's enough for now again. I hope you find it somehow helpful! ^^ I'll also post these tutorials on my blog, so don't worry when the bulletins get deleted. I'll do more soon, I want to show you how to customize your contact table, how to make songs play on your profile, customize background and borders and doing more with CSS in general. Have fun building your profile page!
0 Comments
|