Jump to content

First Steps Into HTML Part 2


ajnl

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
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.