Presentation is loading. Please wait.

Presentation is loading. Please wait.

학습목표 학습목차 다른 홈페이지의 HTML 파일 코드를 보는 방법에 대해 알아봅니다.

Similar presentations


Presentation on theme: "학습목표 학습목차 다른 홈페이지의 HTML 파일 코드를 보는 방법에 대해 알아봅니다."— Presentation transcript:

1 학습목표 학습목차 다른 홈페이지의 HTML 파일 코드를 보는 방법에 대해 알아봅니다.
다른 홈페이지의 텍스트 내용을 가져오는 방법에 대해 알아봅니다. 웹 편집기나 워드프로세서를 이용하는 방법에 대해 알아봅니다. 학습목차 다른 홈페이지의 HTML 파일 코드 보기 다른 홈페이지의 텍스트 내용만 가져오기 웹 편집기로 만들기 워드프로세서로 만들기

2 다른 홈페이지의 HTML 파일 코드 보기 HTML 코드 보기
브라우저에 현재 나타나 있는 웹 문서의 빈공간에 다음과 같이 마우스 오른쪽 버튼을 클릭 → [페이지 소스보기]를 선택 기본적으로 메모장(notepad.exe)이 실행되어 표시 프레임의 전체 구성을 나타내는 HTML 코드는 보기 위해서는 풀다운 메뉴 이용

3 다른 홈페이지의 텍스트 내용만 가져오기 마우스로 텍스트를 드래그하여 Ctrl+C나 마우스 오른쪽 버튼을 이용하여, 클립보드에 복사하여 현재 편집하고 있는 자신의 홈페이지에 Ctrl+V나 붙여넣기를 이용하여 삽입

4 웹 편집기로 만들기 위지윅(WYSIWYG : What You See Is What You Get)을 지원하는 웹 편집기를 이용하여 홈페이지 제작 웹 편집기의 최종 결과물은 웹 브라우저에 출력되는 것을 목표 태그로 작업해야 할 부분은 아스키 편집기를 통해 제작하고, 태그 작업이 필요없는 경우(표, 글씨크기, 색상, 문단조절 등)는 웹 편집기를 통해 제작할 것을 권장 홈페이지 제작은 전체적인 윤곽이나, 표와 같이 태그 작업이 복잡한 부분은 우선적으로 웹 편집기를 이용하여 작성하고, 정교한 부분을 작업하기 위해서는 태그를 통해 수행하는 것이 바람직 웹 편집기 종류 : 나모, HotDog, HomeSite, WebEditor, FrontPage, Composer(네스케이프 자체 내장) 등 편집기들은 태그 작업과 WYSIWYG 방식을 동시에 지원하고 있고, 편집 결과를 직접 브라우저를 통해 확인하게 할 수 있는 기능들을 포함

5 워드프로세서로 만들기 아래한글 워드프로세서
아래한글로 만들고자 하는 홈페이지를 완성한 후, [파일] 메뉴의 ‘새 이름으로’를 선택하면 나타나는 다음 윈도우에서 ‘HTML 완성형(*.htm)’을 선택하여 저장 HTML 문서를 불러올 때는 불러오기 대화상자에서 파일형식을 클릭하여 ‘HTML 파일(*.htm;*.html)'을 선택

6 워드프로세서로 만들기 MS-WORD [파일] ⇨ [다른 이름으로 저장]을 선택하여 나타나는 다음 윈도우에서 ‘HTML 문서(*.htm;*.html;*.htx)’을 선택하여 저장 HTML 문서를 불러올 때는 [파일] ⇨ [열기]를 통해 아래 화면에서 파일형식을 클릭하여 ‘HTML 문서(*.htm;*.html)'을 선택


Download ppt "학습목표 학습목차 다른 홈페이지의 HTML 파일 코드를 보는 방법에 대해 알아봅니다."

Similar presentations


Ads by Google