수업자 : 박선홍

1. HTML/css (6차시) 수업자: 박선홍

2. 목차 텍스트 하이퍼링크 이미지 하이퍼링크 파일 다운로드

3. 1텍스트 하이퍼링크

4. <A href = "이동할 웹 페이지 위치" title = "설명" target ="창 또는 프레임"> herf - 이동할 웹 페이지를 지정한다. title - 하이퍼링크에 대한 풍선도움말을 지정한다. target - 페이지가 보여질 창이나 프레임이름을 지정한다. _blank : 새 창 _self : 현재 창 onfocus = "this.blur()" - 링크된 텍스트나 이미지를 클릭 할 때 점선 안보임 텍스트를 이용하여 다른 웹 페이지로 링크 걸기

5. <A href = "이동할 웹 페이지 위치" title = "설명" target ="창 또는 프레임"> herf - 이동할 웹 페이지를 지정한다. title - 하이퍼링크에 대한 풍선도움말을 지정한다. target - 페이지가 보여질 창이나 프레임이름을 지정한다. _blank : 새 창 _self : 현재 창 onfocus = "this.blur()" - 링크된 텍스트나 이미지를 클릭 할 때 점선 안보임 텍스트를 이용하여 다른 웹 페이지로 링크 걸기

6. <A href = "이동할 웹 페이지 위치" title = "설명" target ="창 또는 프레임"> herf - 이동할 웹 페이지를 지정한다. title - 하이퍼링크에 대한 풍선도움말을 지정한다. target - 페이지가 보여질 창이나 프레임이름을 지정한다. _blank : 새 창 _self : 현재 창 onfocus = "this.blur()" - 링크된 텍스트나 이미지를 클릭 할 때 점선 안보임 텍스트를 이용하여 다른 웹 페이지로 링크 걸기

7. 텍스트를 이용하여 다른 웹 페이지로 링크 걸기 <A href = "http://www.naver.com" title = "네이버로 넘어갑니다." target ="_blank">네이버로 갑니다</A>

8. 텍스트를 이용하여 다른 웹 페이지로 링크 걸기 <A href = "http://www.naver.com" title = "네이버로 넘어갑니다." target ="_blank">네이버로 갑니다</A>

9. 텍스트를 이용하여 다른 웹 페이지로 링크 걸기 <A href = "http://www.naver.com" title = "네이버로 넘어갑니다." target ="_blank">네이버로 갑니다</A>

10. 텍스트를 이용하여 다른 웹 페이지로 링크 걸기 <A href = "http://www.naver.com" title = "네이버로 넘어갑니다." target ="_self">네이버로 갑니다</A>

11. 텍스트를 이용하여 다른 웹 페이지로 링크 걸기 <A href = "http://www.naver.com" title = "네이버로 넘어갑니다." target ="_blank" onfocus="this.blur()">네이버로 갑니다</A>

12. 텍스트를 이용하여 다른 웹 페이지로 링크 걸기 파일이름 : 6차시 네이버로 갑니다. 다음으로 갑니다. 네이트로 갑니다. 각각 마우스를 올렸을 때 "네이버", "다음", "네이트"가 나오게. body태그를 사용하여 링크 색갈 바꾸기

13. 2이미지 하이퍼링크

14. 이미지를 이용하여 다른 웹 페이지로 링크 걸기 <A href = "http://www.naver.com" title = "네이버로 넘어갑니다." target ="_blank" onfocus="this.blur()"> </A>

15. 이미지를 이용하여 다른 웹 페이지로 링크 걸기 • <A href = "http://www.naver.com" title = "네이버로 넘어갑니다." • target ="_blank" onfocus="this.blur()"> • <imgsrc="6_1.bmp"> • </A>

16. 이미지를 이용하여 다른 웹 페이지로 링크 걸기 • <A href = "http://www.naver.com" title = "네이버로 넘어갑니다." • target ="_blank" onfocus="this.blur()"> • <imgsrc="6_1.bmp"> • </A>

17. 이미지를 이용하여 다른 웹 페이지로 링크 걸기 • <A href = "http://www.naver.com" title = "네이버로 넘어갑니다." • target ="_blank" onfocus="this.blur()"> • <imgsrc="6_1.bmp" border="0"> • </A>

18. 이미지를 이용하여 다른 웹 페이지로 링크 걸기 파일 이름 : 6차시_1.html 6_1 : 같은 창에서 네이버 홈으로 6_2 : 마우스 위에 올리면 "검색어 입력"이라고 말풍선. 6_3 : 마우스 위에 올리면 "검색"이라고 말풍선. 같은 창에서 아무것도 치지 않았을 때 검색 페이지로

19. 이미지를 이용하여 다른 웹 페이지로 링크 걸기

20. 이미지를 이용하여 다른 웹 페이지로 링크 걸기

21. 이미지를 이용하여 다른 웹 페이지로 링크 걸기

22. 이미지를 이용하여 다른 웹 페이지로 링크 걸기 파일 이름 : 6차시_2.html 6_1 : 같은 창에서 다음 홈으로 6_2 : 마우스 위에 올리면 "검색어 입력"이라고 말풍선. 6_3 : 마우스 위에 올리면 "검색"이라고 말풍선. 같은 창에서 아무것도 치지 않았을 때 검색 페이지로

23. 이미지를 이용하여 다른 웹 페이지로 링크 걸기

24. 이미지를 이용하여 다른 웹 페이지로 링크 걸기 파일 이름 : 6차시_1.html 6_4 : 6차시_2.html로 연결 마우스 위에 올리면 "다음"이라고 말풍선.

25. 이미지를 이용하여 다른 웹 페이지로 링크 걸기

26. 3파일 다운로드

27. <A href = "웹에서 인식 할 수 없는 파일"> 웹 브라우저에서 보이지 않고 다운로드로 연결된다. 파일 다운로드

28. 파일 이름 : 6차시_3.html <A href = "친구야.mp3">친구야</A> 파일 다운로드

29. 4책갈피, 메일

30. <A name = "책갈피이름"> 책갈피 이름을 지정한다. <A href = "#이동할 책갈피이름"> 링크가 걸리는 부분 책갈피

31. 파일 이름 : 6차시_4.html 책갈피

32. <A href = "mailto:메일주소"> 지정한 메일 주소로 메일을 보낼 때 사용한다. 전자메일

33. 파일이름 : 6차시_5.html 자신의 이메일 포함. 6차시_1을 메인으로 사용하여 모든 문서를 연결하시오! 전자메일

34. Q&A

35. Thank you