- <img src="그림파일이있는위치">:기본적인 형태입니다.
- IMG : 그림(image)을 가르키는 단어입니다.
- SRC : 물론, 주소를 말하고요...
- ALIGN="CENTER" : 정렬시킬 위치('LEFT', 'RIGHT','CENTER')
- ALT="설명" : 그림위에 마우스가 올라갔을때 풍선설명박스가 보이도록합니다.
- BORDER='0' : 그림의 테두리 두께를 지정합니다.
- VSPACE="(세로)값" : 그림과 글자간의 세로간격.
- HSPACE="(가로)값" : 그림과 글자간의 가로간격.
- WIDTH="가로수치" : 그림의 가로크기를 지정(원본이미지보다 크게하거나 적게보이게 할때 사용).
- HEIGHT="세로수치" : 그림의 세로크기를 지정합니다(원본이미지보다 크게하거나 적게보이게 할때 사용).
그리고 그림파일을 많이 올릴 때 그림의 크기를 미리 지정해 주면 그림이 뜨는 시간을 줄일 수 있다합니다.
<img src=img.gif" width="200" height="200">와 같이.... - .gif, .jpg, .bmp, .jpeg.... 그림 파일의 확장명.(이 외에도 그림 파일의 확장명은 많습니다. 저도 다 모를 정도로요... 그렇지만 보통 인터넷에서는 gif, .jpg, .jpeg, .bmp 정도를 많이 쓰고 다른것은 거의(?) 쓰지 않습니다.)
- 인터넷 웹 서핑을 하다보면 마음에 드는 그림을 보는 경우가 많습니다. 그럴 경우 그 그림을 자신의 홈이나 다른 사이트에 올리고 싶으나 그 방법을 모른다면 무척이나 답답하지요. 그럴 경우에 그림을 올리기 위해서는 그림 파일의 주소(그림 파일이 있는 위치)를 알아야 합니다.
이해하기 쉽게 하기 위해서 제 홈에 있는 태극기 그림으로 설명을 드립니다. 바로 이 옆에 있는 그림입니다!.
1. - 옆의 그림에다가 마우스를 맞춥니다.
2. - 그 다음에는 마우스에 있는 두개의 단추중에 오른쪽에 있는 단추를 누릅니다.
3. - 그러면 그림.1(왼쪽그림)과 같은 창이 나올 것입니다.
3. - 그 다음에는 나타난 창의 맨아래의 속성(url) 이라는 칸에서 마우스 왼쪽 단추를 클릭합니다!
4. - 그러면 그림.2(오른쪽그림) 와 같은 창이 나옵니다. 거기에 보면 파랗게 변한부분이 바로 그림의 주소입니다. 그 "주소"라고 써진 부분을 마우스로 복사한 다음 "확인"을 클릭하면 됩니다.
5. - 그런후에 원하는 웹문서에 <img src= 라고 쓴 후에 마우스 커서를 글자에 맞추고 마우스 오른쪽 단추를 눌러 "붙여넣기"를 클릭하면 복사해온 주소가 나타날 것입니다.
바로, <img src="http://gif00.com.ne.kr/image/plag.jpg" ☜ 저런 식으로 말입니다. 그 다음에는 자판의 꺽쇠 ☞ > 로 닫아주면 됩니다.
<img src="http://gif00.com.ne.kr/image/plag.jpg">
- 그림TAG의 여러가지 속성들....
기본형 -- <img src="이미지 주소">
이미지 설명태그 -- <img src="이미지주소" alt="이미지 설명쓰는 곳">
alt="이미지 설명쓰는 곳"에서 이와같이 사용한다면 [이미지 설명쓰는 곳]라는 문장이 온전히 보이게 되나,
alt=이미지 설명쓰는 곳처럼 문장에 따옴표로 묶어주지 않을경우에는
[이미지]라는 단어만 보이게 됩니다.
필히 설명은 따옴표로 묶어서 사용하는 버릇을 기르길 바랍니다.
긴문장일 경우 설명의 줄바꿈은 
을 넣으면 <BR>태그의 효과를 얻을 수 있습니다.
그림에 마우스를 올려보세요 ^^*
그림의 위치정열 태그 <img src="이미지주소" align="수평위치">
위치는, "left" 또는 "right"로 합니다.아래에 첫번째 그림은 왼쪽이고, 그 다음은 오른쪽으로 정열시켜보겠습니다.그림크기조절 -- <img src="이미지주소" width="가로넓이(픽셀수치)" height="세로높이(픽셀수치)">
위와 같은 태그를 사용하면 그림을 왼쪽으로 정열시킬 경우는 글자가 그림의 오른쪽으로 차근 차근 내려쌓입니다. 그러나 위와 같은 태그를 사용하지 않는다면 그림과 글씨가 어울리기 힘이듭니다 .
예를 든다면
아래의 첫번째는 축소, 다음은 원래크기, 그리고 다음은 확대입니다.이 이미지의 원래의 크기는 가로,68 픽셀 ,세로 높이는 100픽셀인 이미지입니다.축소는 반의 크기로, 확대는 두배의 크기로 설정합니다.
그림의 테두리 -- <img src="이미지주소" border="테두리 굵기수치">
이태그는 액자효과를 낼 수도 있으며, 이미지에 링크를 시킬경우에 생기는 테두리를 없에는 효과도 줄 수 있습니다. 링크된이미지에 테두리가 생기면 어느모로 보더라도 보기에는 안좋습니다.이곳에 들어가는 숫자는 숫자의 크기가 클수록 테두리는 두꺼워집니다.첫번째 그림은 테두리 수치를 "0"으로, 다음은 "1"로, 그 다음은 "10"으로 설정해 봅니다. 링크된 이미지는 테두리가 안보이나 마우스가 올라가면 테두리가 생깁니다.그것을 방지하기 위해 링크이미지는 테두리를 "0"으로 설정하는 것이 좋습니다.
예를 들어서 그림에 문서를 링크를 시킬경우에는
<a href="문서의주소"> <img src="이미지주소"> </a> 와 같은 식으로 한다면,
와 같이 보통은 파란색으로 두터운 테두리가 생겨서 보기에도 안좋아 보이지만,
<a href="문서의주소"> <img src="이미지주소" border="0"> </a>와 같은 식으로 한다면,