Ok, now we have a few elements on our HTML page. But it’s called the world wide web right? The thing that really makes the web work are links. Links to pages you like. Links to Ryan Gosling pictures. Links to pictures of babes like me. Links to all the things!
You do this with the almighty A tag. By itself the A tag creates a hyperlink and you tell the link where to go with the H REF attribute. Add HREF then equals, and the link you want in quotes. You can make this an absolute link like HTTP codebabes.com or a relative link to something within your website. Let’s say we had another html file in our directory, we could link to this with a relative link. So the href attribute would look like HREF equals page 2 dot html. The browser already knows the html file you’re viewing is in the website directory, so it looks for page 2 dot html relative to that location, hence the name relative link.
Pages full of text and links are great, but let’s face it, a little boring. Time to spice things up! Let’s add some images! You wouldn’t be able to look at babes online all day if it weren’t for images!
To add an image to a website you need to use the IMG tag. Let’s look at an example. Image tags are an example of a tag that doesn't have to be closed.
The SRC or source attribute lets the browser know where to find the image within your web directory, or you can specify some other image on the internet if you have it’s full url, which would be called an absolute link. Let’s open our site folder and add an image directory. I’ll put a babelicious picture of myself in there to reference. Sometimes if people need to resize an image you can use the optional height and width attributes, if they are not included the browser will just display the image at it’s full size. The alt attribute is for accessibility and let’s people who are using screen readers or other tools know what the image is about.
Alright, nice work, now we'll move onto html layout, hope you can still concentrate.
Questions or Comments?