Jump to content

  • Log in with Facebook Log in with Twitter Log In with Steam Log In with Google Sign In
  • Create Account

Tutorial info Visit support topic

  • Added on: Jul 05 2012 03:59 PM
  • Date Updated: Aug 20 2012 07:55 PM
  • Views: 446
 


First Steps Into HTML Part 2

More HTML tags including how to make links and inserting pictures

Posted by ajnl on Jul 05 2012 03:59 PM
In continuous of the "First Steps Into HTML..." tutorials:

Last tutorial First Steps into HTML 1.5, I talked about what html is, different coding programs, basic set up of a website (in html), header tags, and how to make a basic table.

This tutorial, I will show some other html tags you can use, how to make hyperlinks, and display images.

===================================

HTML tags

Starting with the basic layout:

<!DOCTYPE html> 
<html>

<head>
<title>Hello World!</title>
</head>

<body>
<p>This is the <b>first</b> paragraph!</p>
<hr />
<p>Here is the <b>second</b> paragraph, <br /> with a break in the middle</p>
</body>

</html>

pic1.jpg

The <b> tag is used to make things bold, don't forget to use the close tag as well: </b>.

The <hr /> tag is used to make the horizontal line, you can see this in the screenshot above. This tag does not need a closing tag, because it "closes" itself.

The <br /> tag is used as a break. Like when you press enter in a word document. This is another example of a self closing tag.

===================================

Adding hyperlinks and images

<!DOCTYPE html> 
<html>

<head>
<title>Hello World!</title>
</head>

<body>
<p>This is the <b>first</b> paragraph!</p>
<hr />
<p>Here is the <b>second</b> paragraph, <br /> with a break in the middle</p>
<p>This is the third paragraph, which has a <a href="fearless-assassins.com">link</a> in it!</p>
<img scr="f16.jpg" />
</body>

</html>

pic2.jpg

Using the <a href="#"> tag, it is possible to make links. The name of the hyperlink goes in between the opening (<a>) and closing (</a>) tags.
It is also possible to put an image in between the <a></a> tags, this way when someone clicks on the image, they are set to that website or page.

<a href="#"><img src="#" /></a>

The <img src="#" /> tag is also a self close tag, so there is no </img> needed. The url of the image depends on the situation. In this case since the .html file and the .jpg file are in the same folder, all that is needed is the name of the image. If the image was inside a folder called pictures, then it would look like this:

<img src="pictures/f16.jpg" />


If the html file is inside a folder and the image is located in another folder, this follow would have to be used:

<img src="../picture/f16.jpg" />

The formats supported when using the image tag include: jpg, gif, and png.
BMP will usually work, but it is best to stick with the three mentioned above.

It is also possible to re-size the image using html:

<img src="f16.jpg" width="500px" />
<img src="f16.jpg" width="25%" />

pic3.jpg

px stands for pixels. So a width of 500px, will make the picture the width of 500 pixels.
When using the width to change the size, automatically the height also changes. Keeping the ratio between height and width the same. It is possible to change the height as well.

[code=auto:0]<img src="f16.jpg" width="500px" height="500px" />

pic4.jpg

As you can see from the screenshot above, manually changing the height as well can make the picture look weird.


===================================

Recap
  • <br />, <hr />, and <b></b> tags
  • "self closing" tags
  • Making hyperlinks, using the <a href="#"></a> tags
  • Inserting images into your website and sizing them

Reminder
  • As always, REMEMBER to close tags
  • Some tags close themselves: <img src="#" />, <br />, and <hr />

===================================

For those of you who know a bit of BBCode, it is very similar to HTML.