Jump to content
ajnl

First Steps Into HTML Part 2

Recommended Posts

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>

post-23508-0-71603800-1522443775_thumb.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>

post-23508-0-99886800-1522443775_thumb.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%" />

post-23508-0-33466300-1522443776_thumb.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.

 

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

 

post-23508-0-59621700-1522443776_thumb.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.

Edited by Fearless Staff

Share this post


Link to post
Share on other sites

Have you also a topic for Gimp?

 

Here are some gimp and other photo editing tutorials. I personally do not have any gimp (or photo editing) tutorials.

 

Please keep questions relative to the tutorial (in this case html/coding).

 

 

Share this post


Link to post
Share on other sites

×