happy cat image

Start Web Coding

Your First step toward web coding,
Start Web Coding

UI 변경

Popping-up images

Let's add the image to the web page. ^^

Create an image tag which makes an image shown in the web page as below.

<img src="이미지 주소" alt="이미지 설명" />

Since it is a single tag, add / before closing
You can also apply width and height directly to the image tag.

The width is width = "number (in pixels)"
The height is height = "number (in pixels)".

alt = "Image description" is the text that will appear when you hover over the image. That's the explanation for this image.
For example, if we write down “robot “, the text “robot” will appear.
If alt = "" is not specified, web standard inspection will cause warnings or errors.
This is needed when you want to give an accurate description of the image.
There is another reason for this. There is a tool that allows people with visual impairments to read what the image is like when they use the Web.
This is called web accessibility. Use the following tag, including the alt attribute:

<img src="asimo.jpg" alt="아시모사진, photo of asimo" />

When the width is applied

<img src="asimo.jpg" width="500" alt="아시모사진, photo of asimo" />

Write it like above. In the above example, the height is not fixed. In this case, height is determined by the ratio, and vice versa.
Typing only height in the tag, width will be calculated by ratio,
If you apply width or height, without ratio, the image might look awkward.

So let's test it with my Ashimo’s picture on my blog.

이미지 주소 :

http://www.startwebcoding.com/material/images/HTML/asimo.png

Image Size: Width 740 Length 555

Tip: If you would like to get URL of an image, click the right button on your mouse, then go to property!
If you would like to test with an image you have, put the image in the same folder with html file being tested.

<img src="이미지명" alt="" />

하시면 됩니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>이미지 띄우기</title>
</head>
<body>
<h1>Popping up an image </h1>
<img src="http://www.startwebcoding.com/material/images/HTML/asimo.png" alt="아시모 사진" />

<h1>Typing only width</h1>
<img src="http://www.startwebcoding.com/material/images/HTML/asimo.png" width="500" alt="아시모 사진" />

<h1>Typing only Height</h1>
<img src="http://www.startwebcoding.com/material/images/HTML/asimo.png" height="300" alt="아시모 사진" />

<h1> If you increase width over the original length</h1>
<img src="http://www.startwebcoding.com/material/images/HTML/asimo.png" height="700" alt="아시모 사진" />

<h1>Typing both width and height without ratid</h1>

<img src="http://www.startwebcoding.com/material/images/HTML/asimo.png" width="500" height="500" alt="아시모 사진" />
</body>
</html>

The result of the image is too long so I will display it. You have learned the image tag with the above source, we could easily test it on your own. J

Let's learn how to navigate to the URL you want to move when you click on the image, using Hyperlink tag we learned previous lesson.

Very simple. You can add a hyperlink tag to an image tag. Let's make it to move to my blog. First, create a hyperlink tag and the URL you are going to paste is “http://mp17_2.blog.me.”

<a href="http://mp17_2.blog.me"></a>

Then insert the image tag inside the hyperlink tag. And the below URL is the image we are going to use.

http://www.startwebcoding.com/asimo.png

Image tag is as below.

<img src="http://www.startwebcoding.com/material/images/HTML/asimo.png" alt="machine" />

Then if you put the above image tag into the hyperlink, the tags are as below.

<a href="http://mp17_2.blog.me" target="_blank">
    <img src="http://www.startwebcoding.com/material/images/HTML/asimo.png"  alt="machine"/>
</a>

가 됩니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>에버디벨 만든이 블로그가기</title>
</head>
<body>
<a href='http://mp17_2.blog.me' target='_blank'>
    <img src='http://www.startwebcoding.com/material/images/HTML/asimo.png' alt='machine' />
</a>
</body>
</html>

Let’s see the result of this Tags!


hyperlink_img_tag

Then I will finish this lesson here. In the next lesson, I will cover “a table”.


강좌로 돌아가기