지난 강좌에서 하이퍼링크 태그를 공부했습니다만, 이번에도 계속 이어서 웹 문서에 이미지 삽입하는 방법과 이미지로 하이퍼링크 연결하는 방법에 대해서 배워 보도록 하지요.
1. 이미지 삽입하기
| <IMG>태그 - 기능 : 그림 삽입 - 속성 : SRC="", ALIGN=정렬방식, ALT="설명문", WIDTH="", HEIGHT="", BORDER=n, HSPACE=n, VSPACE=n, ISMAP, USEMAP |
| <IMG SRC="그림파일명"> | 경로가 다르면 상대경로를 넣어준다 |
| <IMG ALT="설명문"> | 이미지는 글자로다 로딩되는 속도가 느리고 브라우저에 따라 이미지를 보이지 않게 하는 기능이 있기 때문에 그림이 나올 부분에 설명을 붙여 주면 이용자 입장에서 도움이 된다 |
| <IMG BORDER=n> | 이미지 테두리선 굵기지정. 0은 테두리 안보이게, 1은 테두리 보이게 |
| <IMG WIDTH=n> | 이미지 가로폭 지정. 단위는 픽셀 |
| <IMG HEIGHT=n> | 이미지 세로폭 지정 |
| <IMG ALIGN="정렬방식"> | left, center, right를 줌으로써 왼쪽,가운데,오른쪽으로 정렬할 수 있다. |
그러면 나뭇잎 모양의 이미지를 한번 삽입해 볼까요?
이미지 파일명만 넣어 주면 됩니다. 실습해 보도록 하지요.
| <HTML> <HEAD> <TITLE> 이미지 삽입하기 </TITLE> </HEAD> <BODY > <IMG SRC="leaf.gif"> </BODY> </HTML> |
결과확인을 클릭해 보세요.
다른 사이트의 이미지도 삽입할 수 있겠죠? URL만 입력하시면 되지요.
2. 이미지 링크하기
그림파일 링크도 문서연결하는 방법과 같은데 파일명만 그림파일로 바꾸면 됩니다. 그림파일은 JPG나 GIF로 만들어진 파일만 가능합니다. 메모장에 다음내용을 입력해 보세요.
| <HTML> <HEAD> <TITLE> 이미지 링크하기 </TITLE> </HEAD> <BODY > <A HREF="leaf.gif">이미지 링크하기...</A> </BODY> </HTML> |
결과확인을 클릭해 보세요. "이미지 링크하기..."에 밑줄이 그어저 있죠? 거기를 클릭하면 지정된 이미지 그림이 나타나지요.
삽입한 이미지에 하이퍼링크를 설정해 볼까요? 연결할 URL이나 문서파일명을 넣어 주면 됩니다.
| <HTML> <HEAD> <TITLE> 이미지 링크하기 </TITLE> </HEAD> <BODY > <A HREF="html.htm><IMG SRC="leaf.gif"></A> </BODY> </HTML> |
결과확인을 클릭해 보세요. 이미지위에 마우스 포인터를 올려 보세요. 손모양표시가 나타나지요. 링크가 되어 있다는 뜻이죠.클릭하면 연결된 웹문서가 나타납니다. 여기서도 물론 다른 사이트로 링크할려면 그 사이트의 URL을 넣어 주면 된다고 그랬죠?
이번 강좌까지 HTML 문서작성시 꼭 알아야 할 필수적인 태그사용법과 문법에 대해서 알아보았습니다. 자! 이제 차근차근 따라하시니까 처음에 높아 보였던 고지가 얼마 남지 않은 것 같네요. 다음 강좌에서는 젠 좀더 난이도가 있는 표만드는 방법과 프레임만들기에 대해서 공부할 것 입니다. 기초를 다시 한번 다지시고..복습하는 것 잊지 마세요~~
댓글 없음:
댓글 쓰기