Inserting Images and Hyperlinks
Images
> It is essential to put images in your website to make it better. Images can also be used as a background for your website. Most use JPG or JPEG formatted pictures but you can also use PNG ang GIF images. We'll talk about using your image as a background in the future guides.
How to insert pictures:
The tag to insert an image is
-> src means source.
-> You can insert pictures from the interweb or from your desktop, but for now we will use pictures saved in your desktop.
Adjusting the width and the height of your picture:
> Of course, you can adjust the width and the height of the picture. The measurement used is either by percentage or by pixel. I usually use the percentage measurement cause it is pretty easy to use.
To adjust your picture, we will add an attribute
Step by step guide:
1. Explore a picture you want to put in your website. Once you found your picture, move it or save it into your desktop.
2. Make a new notepad and type basic tags.
3. In between the two BODY tags, insert the Image Tag
5. Replace YOUR PICTURE as the name of the chosen picture (For example: mypicture.jpg) and the X's as the number of measurement (50px, 50%, 30px, 100%)
6. Save it as an HTML document (NAME.html <- Replace name of your choice) then save it to your desktop.
7. Open it up and the picture should be in your website.
NOTES:
> The supported pictures are JPG, JPEG, PNG, GIF and other formats.
> Image tag is an unpaired tag.
> Usually, when the width is using the percentage measurement, the height should also use the percentage measurement but try to experiment to see if it is possible to use two different types of measurement.
> Sometimes, if you only put a number after the width and the Height...
-> Examples is: <img src="mypicutre.jpg" width=50 height=50> It is automatically using the percentage measurement
> It is not necessary to put quotation marks when it comes to digits.
> WIDTH and HEIGHT are both examples of Attributes.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Hyperlinks
> This where you insert links into your website.
Putting links in your website:
The tag used in Hyper link is
Step by step guide:
1. Make a new document in the notepad and type in the basic tags.
2. In between the BODY tags, insert the Hyperlink tag
3. Replace LINK to any website links you want and TEXT as any text you want
4. Save it as an HTML document and save it to your desktop. Once you open it in your browser, you will see the it. It is obvious considering the fact that the text is Blue. As soon as you click the text, it will automatically direct you to the link you inserted (In my case Google).
NOTE:
> Hyperlink tag is a paired tag.
> In between the <a href=""> </a>. You can insert any text you want but most usually insert where the user usually going to be directed. In the example before, the link inserted is Google, therefore the text in between the two tags should be Google.
Images
> It is essential to put images in your website to make it better. Images can also be used as a background for your website. Most use JPG or JPEG formatted pictures but you can also use PNG ang GIF images. We'll talk about using your image as a background in the future guides.
How to insert pictures:
The tag to insert an image is
HTML:
<img src="url">-> You can insert pictures from the interweb or from your desktop, but for now we will use pictures saved in your desktop.
Adjusting the width and the height of your picture:
> Of course, you can adjust the width and the height of the picture. The measurement used is either by percentage or by pixel. I usually use the percentage measurement cause it is pretty easy to use.
To adjust your picture, we will add an attribute
HTML:
<img src="url" width=x height=x>
Let x be the number of your measurement.
Example:
<img src="picture.jpg" width=50% height=50%>
-> The code above is using the percentage measurement.
<img src="picture.jpg" width=50px height=50px>
- > The code above is using the pixels measurement. Px means measurement.Step by step guide:
1. Explore a picture you want to put in your website. Once you found your picture, move it or save it into your desktop.
2. Make a new notepad and type basic tags.
HTML:
<html>
<head>
<title> Insert Title Here </title>
</head>
<body>
</body>
</html>
NOTE: Putting the Head and the title are optional
HTML:
NOTE: It should look like this...
<html>
<head>
<title> Insert Title Here </title>
</head>
<body>
<img src="your picture" width=x height=x>
</body>
</html>
HTML:
It should be similar to this:
<html>
<head>
<title> Insert Title Here </title>
</head>
<body>
<img src="mypicture.jpg" width=20% height=50%>
</body>
</html>7. Open it up and the picture should be in your website.
NOTES:
> The supported pictures are JPG, JPEG, PNG, GIF and other formats.
> Image tag is an unpaired tag.
> Usually, when the width is using the percentage measurement, the height should also use the percentage measurement but try to experiment to see if it is possible to use two different types of measurement.
> Sometimes, if you only put a number after the width and the Height...
-> Examples is: <img src="mypicutre.jpg" width=50 height=50> It is automatically using the percentage measurement
> It is not necessary to put quotation marks when it comes to digits.
> WIDTH and HEIGHT are both examples of Attributes.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Hyperlinks
> This where you insert links into your website.
Putting links in your website:
The tag used in Hyper link is
HTML:
<a href="link"> </a>
LINK is where you put the link of a specific website.Step by step guide:
1. Make a new document in the notepad and type in the basic tags.
2. In between the BODY tags, insert the Hyperlink tag
HTML:
<html>
<head>
<title> Insert Title Here </title>
</head>
<body>
<a href="LINK"> TEXT </a>
</body>
</html>
HTML:
Example:
<html>
<head>
<title> Insert Title Here </title>
</head>
<body>
<a href="www.google.com"> Google </a>
</body>
</html>NOTE:
> Hyperlink tag is a paired tag.
> In between the <a href=""> </a>. You can insert any text you want but most usually insert where the user usually going to be directed. In the example before, the link inserted is Google, therefore the text in between the two tags should be Google.
Pure HTML lang po yan