• 일시 : 2011. 11. 28( 월 ) 3교시• 장소 : 컴퓨터 7 실 (2 층 )• 대상 : 1 학년 1 반 32 명• 지도교사 : 김재창

II. 웹프로그래밍 2. 웹프로그래밍의 실제

04. 하이퍼링크 설정하기

하이퍼링크 설정하기하이퍼링크 설정하기

• HREF 태그의 개념과 동작 원리를 설명할 수 있다 .

• HREF 태그의 개념과 동작 원리를 설명할 수 있다 .

학습목표 학습목표

• 웹에서 사이트 , 문서 , 다양한 개체를연결할 수 있는 소양을 기를 수 있다 .

• 웹에서 사이트 , 문서 , 다양한 개체를연결할 수 있는 소양을 기를 수 있다 .

가 . 링크의 중요성 알기 1) 웹 문서에서 링크의 개념 알기 2) 정리된 생각으로 링크하기 3) 링크의 속성 적용하기

나 . 링크 주제 에 알맞은 이미지 올리기 1) 이미지를 이용한 링크시 주제에 알맞은 이미지 찾아 올리기 2) 이미지 속성을 이해하기

다 . 링크 완성하여 발표하기 1) 완성된 링크를 이용하여 편리함 발표해 보기 2) 다양한 링크를 실제 문제에 삽입하여 적용해 보기

학습후 알아야 할 내용들

HREF 태그의 다양한 이용 실제 HREF 태그의 다양한 이용 실제

• 부산정보과학고등학교로 가기

• 포털검색 사이트 네이버로 가기

•

• 부산정보과학고등학교로 가기

• 포털검색 사이트 네이버로 가기

•

웹사이트 연결웹사이트 연결

-부산정보과학고등학교 홈페이지

-부산광역시 교육청 홈페이지

- 네이버 , 다음 , 야후 연결하기

- 메일 주소 연결하기

-부산정보과학고등학교 홈페이지

-부산광역시 교육청 홈페이지

- 네이버 , 다음 , 야후 연결하기

- 메일 주소 연결하기

HREF 태그를 이용한 링크 실습 1HREF 태그를 이용한 링크 실습 1

문서 연결문서 연결-“ 이미지 .htm” 파일

-“ 태그 .hwp” 파일

-“ 컴퓨터일반 .ppt” 파일

-“ 이미지 .htm” 파일

-“ 태그 .hwp” 파일

-“ 컴퓨터일반 .ppt” 파일

이미지 링크이미지 링크

- 웹에서 이미지 찾기

- 이미지 복사 및 저장

- 이미지 웹에서 불러오기

- 이미지 링크하기

- 웹에서 이미지 찾기

- 이미지 복사 및 저장

- 이미지 웹에서 불러오기

- 이미지 링크하기

HREF 태그를 이용한 링크 실습 2HREF 태그를 이용한 링크 실습 2

관심사이트 링크관심사이트 링크- 개인 관심 사이트 찾아서 링크 해보기

- 자기집 약도 검색하여 링크해 보기

- 가을 여행지 찾아 링크해 보기

- 개인 관심 사이트 찾아서 링크 해보기

- 자기집 약도 검색하여 링크해 보기

- 가을 여행지 찾아 링크해 보기

정리 정리

- <A HREF> 링크할 개체 </A>

- <img src= 그림파일 > 와 링크 연결

- <A href=“mailto: 이메일주소” >

단어 , 문장 , 이미지 </A>

- target 속성

- <A HREF> 링크할 개체 </A>

- <img src= 그림파일 > 와 링크 연결

- <A href=“mailto: 이메일주소” >

단어 , 문장 , 이미지 </A>

- target 속성

형성 평가 형성 평가<h4><font color="red">

<a name="LIST"> 사계절의 특징 </A></FONT>

<P> 목차 <A HREF="# 봄 "> 봄 </A>

<A HREF="# 여름 "> 여름 </A>

<A HREF="# 가을 "> 가을 </A>

<A HREF="# 겨울 "> 겨울 </A>

<H1><A NAME=" 봄 "> 봄 </A></H1>

<P> 기온이 점점 올라가고 따뜻해집니다 .<BR>

꽃샘추위 , 날씨 변화가 심하다 .<BR>

<A HREF="#LIST"> 목차 </A><BR>

<HR>

<H1><A NAME=" 여름 "> 여름 </A></H1>

<P> 기온이 점점 올라가고 무더워집니다 .<BR>

장마 , 태풍피해 대비 .<BR>

<A HREF="#LIST"> 목차 </A><BR>

<HR>

<H1><A NAME=" 가을 "> 가을 </A></H1>

<P> 고기압의 영향으로 맑고 쾌적한 날씨가 많습니다 .<BR>

기온차가 심하므로 건강에 유의 .<BR>

<A HREF="#LIST"> 목차 </A><BR>

<HR>

<H1><A NAME=" 겨울 "> 겨울 </A></H1>

<P> 눈이 많이 오고 ( 특히 영동 , 울릉도 ) 춥고 건조합니다 .<BR>

시베리아 기단의 영향으로 건조한 북서풍이 차갑게 붑니다 .<BR>

<A HREF="#LIST"> 목차 </A><BR>

<HR>

목차를 클릭하면 문서 상단으로

이동한다 .

해당 단어를 클릭하면 그

단어와 연결된 위치가 문서

상단으로 표시된다

☞ 태그를 통한 표작성 해보기 - 태그를 이용한 다양한 표작성☞ 태그를 통한 표작성 해보기 - 태그를 이용한 다양한 표작성

차시예고 차시예고

교과서 , 학습자료

교 과 명 컴퓨터일반 학년 ·학기 1 학년 2 학기

단 원 명 4. 하이퍼링크 설정하기

학습주제 HTML 에서 하이퍼링크의 의미와 동작 과정을 설명할 수 있다 .

학습목표  HREF 태그를 이용하여 다양한 개체를 연결 할 수 있다 .

차시안내 태그를 이용한 다양한 표작성

교수 - 학습 계획 교수 - 학습 계획

차 시 5/7

p.204쪽수

교수 - 학습활동

학습환경 컴퓨터 , 인터넷 등

[ 도입 ]

- 전시 학습 내용 확인 : 이미지 파일 웹파일에 연결하기

- 동기 유발 : 하이퍼 링크를 통한 동영상 보기

- 학습 목표 제시 : 학습 목표를 따라 읽는다 .

[ 전개 ]

1. 하이퍼 링크의 개념 알기

2. 하이퍼 링크 태그를 이용하여 사이트 , 문서 연결하기

3. 다양한 개체에 하이퍼 링크하기

[ 정리 ]

수업 내용 요약 , 정리 ; 하이퍼 링크의 유용성

[ 차시 예고 ]

태그를 이용한 표작성

활동유형

정보 안내

동영상보기

정보분석

정보탐색

정보만들기

토론 및 정보만들기

학습조직

전체

개별학습전체학습

개별전체

학습자료 PPT 자료

준비물