1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
  <title>이미지 맵 만들기 예제</title>
</head>
<body>
<br>
<p>
  <img src="deadpool.png" width="150" height="150" border="0" alt="데드풀" usemap="#ImageMap">
  <map name="ImageMap">
    <area shape="rect" coords="0,150,75,0" href="http://www.daeguoracle.com/" alt="예담">
    <area shape="rect" coords="75,150,150,0" href="http://www.naver.com/" alt="네이버">
  </map>
</p>
</body>
</html>
cs



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
  <title>이미지 맵 만들기 예제</title>
</head>
<body>
<br>
<p>
  <img src="BlackPantherFace.jpg" width="300" height="300" border="0" alt="블랙 팬서" usemap="#ImageMap">
  <map name="ImageMap">
    <area shape="rect" coords="0,300,150,0" href="http://www.daeguoracle.com/" alt="예담">
    <area shape="rect" coords="300,300,150,0" href="http://www.naver.com/" alt="네이버">
  </map>
</p>
<p>
  <img src="deadpool.png" width="300" height="300" border="0" alt="데드풀" usemap="#ImageMap2">
  <map name="ImageMap2">
    <area shape="circle" coords="80,155,15" href="http://www.daeguoracle.com/" alt="예담">
    <area shape="circle" coords="220,155,15" href="http://www.naver.com/" alt="네이버">
  </map>
</p>
</body>
</html>
cs


'스마트웹&콘텐츠 개발자 과정 > HTML, CSS, JavaScript' 카테고리의 다른 글

화면 구현 2번째 시간  (0) 2018.06.05
웹 화면 구현 수업 첫 시간  (0) 2018.06.04

&nbsp;는 영문, 숫자, 공백보다 크기가 작다.

'스마트웹&콘텐츠 개발자 과정 > HTML, CSS, JavaScript' 카테고리의 다른 글

화면 구현  (0) 2018.06.08
웹 화면 구현 수업 첫 시간  (0) 2018.06.04

HTML을 시작합니다.


* 메모장 저장 시 파일명을 " (큰 따옴표)으로 감싸면, txt 확장자가 붙지 않는다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
  <title>HTML5 메타 정보</title>
  <meta charset="UTF-8">
  <meta name="author" content="Hong Ji Sang">
  <meta name="keywords" content="HTML5, CSS3, JavaScript, JQuery">
  <meta name="description" content="Web Programming">
  <meta http-equiv="refresh" content="10, http://cafe.naver.com/go2web">
  <base href="http://www.w3.org/" target="_blank">
</head>
<body>
  <p>헤드 태그 내 메타 정보에는 웹 문서를 만든 이, 검색 시 키워드, 문서에 대한 설명,
문서 내 기본 디렉터리 등이 포함됩니다.</p>
  <p>이 문서는 10초 후 저자 카페로 이동합니다.</p>
  <a href="">여기를 클릭하면 기본 디렉토리로 설정된 www.w3.org 사이트로 이동합니다.</a>
</body>
</html>
cs


※ 메모장에서 작성 시 <meta charset="UTF-8"> 부분 때문에 글자가 깨진다.


'스마트웹&콘텐츠 개발자 과정 > HTML, CSS, JavaScript' 카테고리의 다른 글

화면 구현  (0) 2018.06.08
화면 구현 2번째 시간  (0) 2018.06.05

+ Recent posts

티스토리툴바