elements

Imaging a new start

And I normally hate puns. Anger is a fantastic motivator though, so I’m hate-learning all this HTML as fast as possible while still trying to remember everything. Without caffeine to boot! College Kyle would be terrified.

The <img> tag is used to add images to a website. It’s empty, which once again means that it has no closing tag. There are some important attributes for this:

src is the source of the file
alt is the alternate text displayed if for some reason the picture listed in the source can’t be displayed, like if you messed up the location url, or if the picture is no longer there, or if you’re using a site reader.
width and height specify the width and height of the image, obviously. By default, the values for these are in pixels. It’s good practice to specify both a width and a height, as this will reserve a space on the page for it when the page is still loading. If you set neither, it will display the images actual size, the browser won’t know the size of the image until it loads it, so the page layout will change while it’s loading.

title is different than the alt field. It displays text as a tool tip when you hover over the image. The most common use I’ve actually seen for this is for webcomics, like my personal favorite Girls With Slingshots, so the creator can put an extra comment or joke in there.

Example time:

<img src=”http://3.bp.blogspot.com/-yRVOMTYkQQA/T-PxEL5icHI/AAAAAAAAKrw/Iz795NdbjS0/s1600/IMG_9430.jpg&#8221; title=”look at dem houses” alt=”nerja” width=”250″ height=”250″>

img example1

They recommend being careful with how may images you use. Each time you load the page, the browser has to pull the image from the web server where it’s hosted and place it into the web page, which can slow down how quickly the page loads.

If you use the float property for the style attribute in the img tag, and then put that <img> element inside of a <p> element you can set the image to sit to the left or to the right of the text. Code and example shown below. It’s worth noting, I put a semicolon at the end of the property:value pair for the style attribute, but they didn’t in the example I looked at. I’m curious as to whether or not that’s required now.

<p><img src=”http://rack.2.mshcdn.com/media/ZgkyMDE0LzAzLzMxL2UxL2VpZmZlbHRvd2VyLjYwMmIyLmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/fe683380/ba4/eiffeltower.jpg&#8221; alt=”eiffel tower” title=”big ol tower” width=”70″ height=”50″>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>

img float example

 

It’s easy to make a link out of an image, simply put a <a> element around your <img> one:

<a href=”http://google.com”><img src=”myimage.gif”></a>

Now, there was an tutorial on making a client-side image map, where a picture of the sun and some planets responded to where you clicked and took you to different links. This is awesome, but a bit too advanced for me right now. I’ll add it to my list of advanced things to come back to.

Getting some head (elements)

The <head> element is a special one that contains all the “head” elements on the page. It’s located in the HTML after the <html> tag, before the <body> element, and gives lots of valuable information about the page. Usually the format looks like this

<!DOCTYPE html>
<head>
Various header elements.
</head>
<body>
Content of site.
</body>
</html>

<title> defines the title of the document, and is what appears in the tab at the top of the screen. Additionally, it provides a title when you save the page as a bookmark, and is what is displayed in search engine results.

<title>Back to Basics</title> gives us:

titletab

The  <base> tag specifies the base url for all other urls on the page. A good example for this is if you had all your images hosted in one section. You could then do something like in the example shown here.

<base href=”http://www.mywebsite.com/images/&#8221; target=”_blank”>

Then, is we write <img src=”imageofstickman.gif” alt=”stickman”>, it would pull the image from http://www.mywebsite.com/images/imageofstickman.gif, which makes things a lot easier if you have a ton of images you need for a page, so you don’t have to write the full url every time.

Additionally, the target=”blank” there ensures that any link on the page will automatically open in a new tab or window, even if it isn’t related to the value we put for the href attribute in the base element.

A pro tip is to write the <base> element first in the header, in case you need something else to link using it (keep in mind that the HTML is read top to bottom).

The <link> element is used to define a link between the HTML document and an external resource. “rel” is an important attribute here, as it defines relationship between the current document and the one it’s linked to. This is usually used to link the page to its style sheet, like this:

<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

The <style> element is used to define how certain elements will look and be styled in the browser. I’m pretty sure this is widely unused, and linking to CSS is used instead.

<style type=”text/css”>
body {background-color:green;}
p {color:red;}
</style>

The <meta> element is used to give metadata about the page, such as the author of the page, keywords and when the page was last updated. This isn’t displayed on the page, but is readable by the browser. It’s used for a variety of things, like how to display the page for certain browsers, and search engine results. Its name attribute specifies what the content attribute of the meta data is talking about. There give 5 options for this, but I think there may be more varieties from various page sources I’ve looked at:

application name – specifies the name of the web application this page represents
author – the person who wrote the web page
description – a description of the page, which search engines can then pick up and show with the results of searches. So this with the <title> tag would make up the search results you’d see in Google.
generator – specifies which software was used to create the page, like Frontpage. If you hand wrote the page, this isn’t needed.
keywords – a list of keywords, separated by commas and spaces, which is used by search engines to categorize the page.

Here’s are some examples:
<meta name=”author” content=”Kyle Damken”>

<meta name=”keywords” content=”html, css, tutorial”>

Now, I’ve heard “index the page” used a few times so far, and didn’t know what that means. So, I looked it up and found this solid explanation. To take the TL:DR from Tomasz Nurkiewicz‘s already short explanation, indexing basically means analyzing large amount of data and then building some sort of index to access the data in a more efficient way later, often based off of some sort of search criteria.

Finally, the <script> tag is used to define a client-side script, like Javascript. W3C tells me we’ll learn more about this later, which I’m looking forward to.