PowerPoint 프레젠테이션
Download
Report
Transcript PowerPoint 프레젠테이션
인터넷 이해와 활용
웹 서핑에서 홈페이지 제작까지
-1-
학습목표
• HTML 문서의 특징과 기본 형식을 알아본다.
• HTML 문서 제작 방법을 알아본다.
• 문자 관련 태그와 속성을 알아본다.
• 서식 관련 태그와 문서 레이아웃 관련 태그를 알아
본다.
• 목록을 만드는 태그와 링크 관련 태그를 알아본다.
-2-
인터넷 이해와 활용
■ HTML이란?
Hyper Text Markup Language
웹 문서 제작에 사용되는 표준언어
문서 타입 : 텍스트 파일 형식
-3-
인터넷 이해와 활용
웹 정책
기획
설계
구현
계획수립
시험 및 검증
운영 및 유지보수
환경 및 시스템 분석
스토리보드 작성
사용 편의성 검사
페이지 구성
시스템 속도 검사
화면 구성
멀티미디어데이터 생성
보안 정책
코드
백업 정책
설치
장애 관리
-4-
인터넷 이해와 활용
■ 웹 페이지 설계 시 고려사항
Main 페이지
• 사이트 전체 내용 전달
• 전송 속도를 고려한 구성
• 과도한 그림 파일의 사용 지양
• 가능한 한 화면에 보이도록 구성
Sub 페이지
• 전체적으로 같은 수준의 깊이를 갖도록 구성
• 가로 스크롤 방지, 세로로 4 페이지가 넘지 않도록 구성
• 최상위 페이지로의 연결(link) 제공
• 동일한 종류의 문서인 경우 배경화면 통일
• 복잡한 배경화면 지양
• 그래픽과 텍스트의 균형
-5-
인터넷 이해와 활용
■ 웹 서버의 동작 원리
-6-
인터넷 이해와 활용
■ HTML 문서의 특징
•
•
•
•
공백, 줄바꿈 인식 못함
텍스트 문서의 형태- 확장명 : .html, .htm
인터넷 문서로 사용하기에 적합
- 컴퓨터 기종에 무관
- 파일크기 작음
대소문자를 구분하지 않음
-7-
인터넷 이해와 활용
■ HTML 태그의 구조(1)
•
•
•
•
•
Markup Tag 사용 형태
영문 대소문자 구별 없음
<TITLE>, <title>, <Title>
<tag> ... </tag>
예) <title>내 용</title>
<tag attribute=argument> ... </tag>
예) <font size=3> 내 용 </font>
<tag>
예) <br>
-8-
인터넷 이해와 활용
■ HTML 태그의 구조(2)
사용 주의 사항
중첩 사용 시 마감 태그의 대응 위치
<tag1>
<tag2>
.
.
.
<tag1>
<tag2>
<tag1>
<tag2>
.
.
.
<tag2>
<tag1>
(x)
(o)
-9-
인터넷 이해와 활용
■ HTML 문서의 기본 구조(1)
<html>
<head>
<title>
</title>
<head>
<body>
…………………………
</body>
</html>
- 10 -
인터넷 이해와 활용
■ HTML 문서의 기본 구조(2)
<html> … </html>
HTML 문서의 시작과 종료의 범위를 지정
<head> ... </head>
문서의 meta-information을 포함 문서에 대한 정보
자료영역에 보이지 않음
저자정보, 스크립트, 스타일시트, 주석
<body> ... </body>
문서의 실제 내용이 들어감 각종 태그를 사용하여 문서 표현
- 11 -
인터넷 이해와 활용
■ <HEAD> 태그 1
<TITLE> ... </TITLE>
문서의 제목(제목 표시줄에 표시)
<META>
문서의 정보에 관련된 여러 가지 정보를 기술하는 태그
-
NAME 속성을 이용하여 문서 정보
NAME : 정보의 형태를 정의
CONTENT : 정보를 기술
<META NAME = “author” CONTENT=”작성자” >
<META NAME = “description” CONTENT=”문서의 설명” >
<META NAME = “keywords” CONTENT=”keyword1, keyword2,….” >
- 12 -
인터넷 이해와 활용
■ <HEAD> 태그 2
• http-equiv 속성을 이용한 문서 정보
• 캐시 정보 만료 날짜 지정
<META http-equiv=”expires” CONTENT=”Thu, 22 May 2002
10:22:07 GMT” >
• 캐시 저장 방지
<META http-equiv=”pragma” CONTENT=”no-cache” > <META
http-equiv=”cache-control” CONTENT=”no-cache” >
• 문서 제작에 사용된 언어 지정
<META http-equiv=”content-type” CONTENT=”text/html;
charset=euc-kr” >
• 문서의 이동
<META http-equiv=”refresh” CONTENT=”시간(sec); URL=불러올 문
서 url” >
- 13 -
인터넷 이해와 활용
■ HTML 문서의 예
<HTML>
<head>
<title>테스트 문서</title>
</head>
<body>
기본 구조 연습 문서
</body>
</HTML>
- 14 -
인터넷 이해와 활용
■ 문자 관련 태그
글자 모양: 논리적 형태
<cite> : 인용문
<code> : 소스코드
<dfn> : 정의
<em> : 강조
<strong> : 강한 강조
<samp> : 예제
<var> : 변수
- 15 -
인터넷 이해와 활용
■ 문자 관련 태그
글자 모양: 물리적 형태
<b> ... </b>
<I> ... </I>
<u> ... </u>
<tt> ... </tt>
<sub> ... </sub>
<sup> ... </sup>
<big> ... </big>
<small> ... </small>
<strike> … </strike>
<blink> ... </blink>
- 16 -
인터넷 이해와 활용
■ <INS>, <DEL> 태그
삽입, 삭제 텍스트 표시
<INS> : 삽입 텍스트 표시, 밑줄이 함께 표시
<DEL> : 삭제 텍스트표시, 취소선이 함께 표시
- 17 -
인터넷 이해와 활용
■ <P> 태그
문단 구분 줄을 바꿈과 동시에 한 줄 띄게 되는 효과 속성
align=“{ left|center|right }”
- 18 -
인터넷 이해와 활용
■ <BR> 태그
• 줄바꿈 태그
• 단락구분은 하지 않음
• 종료태그 없음
- 19 -
인터넷 이해와 활용
■ <FONT> 태그
글자의 크기, 색상, 서체를 지정
속성
SIZE=“n“ : n=1~7, 기본 값은 n=3
COLOR=“{#색상코드|색상이름 }“
FACE="글꼴체"
<FONT SIZE=“4”> … </FONT>
<FONT COLOR=“red”> … </FONT>
<FONT FACE=“바탕체”> … </FONT>
<FONT SIZE=“4” COLOR=“#ff0000”>...</FONT>
- 20 -
인터넷 이해와 활용
■ 색상 코드표
RGB : 각각을 8비트를 이용하여 16진수로 표현
11111111
00000000
00000000
- 21 -
인터넷 이해와 활용
■ 색상 표현 단어
- 22 -
인터넷 이해와 활용
■ <FONT> 태그 사용 예
- 23 -
인터넷 이해와 활용
■ <BASEFONT> 태그
<HEAD> 태그 내에서 지정하면 문서 전체에 적용
<BASEFONT size=“2” color=“black”>
<BODY> 태그 내에서는 종료태그와 함께 사용
- 24 -
인터넷 이해와 활용
■ <Hn> 태그
문서 내의 단계별 제목 문서에 논리적 의미 부여
<Hn> : n = 1 ~ 6
(n=1이 가장 큰 제목 )
자동 줄바꿈
속성
ALIGN=“{left|center|right }”
<H1> … </H1>
<H3 ALIGN=“center”> … </H3>
- 25 -
인터넷 이해와 활용
■ <Hn> 태그 사용 예
<h1>h1 tag</h1>
<h2>h2 tag</h2>
<h3>h3 tag</h3>
<h4>h4 tag</h4>
<h5>h5 tag</h5>
<h6>h6 tag</h6>
<h1 align="center"> h1 tag </h1>
- 26 -
인터넷 이해와 활용
■ <CENTER> 태그
태그 사이의 내용을 가운데 정렬
- 27 -
인터넷 이해와 활용
■ <HR> 태그
가로선 긋기
속성
ALIGN=“{left|center|right }”
SIZE=“n” : 선의 두께(pixel), 기본 값은 2
WIDTH=“n” : 선의 폭(pixel,%)
NOSHADE : 음영효과 사용 안 함
COLOR=“color” : 선의 색상
<hr align=“ ” size=“n” width=“n”
color=“color“ [noshade]>
- 28 -
인터넷 이해와 활용
■ <HR> 태그 사용 예
- 29 -
인터넷 이해와 활용
■ <BLOCKQUOTE> 태그
인용된 구문 표현
왼쪽 여백 생김
내부의 태그 인식
- 30 -
인터넷 이해와 활용
■ <ADDRESS> 태그와 주석문
<ADDRESS>
문서 수정일, 주소, 저자 정보
주석문
<!-- .... -->
- 31 -
인터넷 이해와 활용
■ <DIV> 태그
특정부분과 구역으로 구분
논리적 블록요소 주로
스타일 시트와 함께 사용
앞뒤 줄바꿈
속성
ALIGN=“{ left|center|right }”
- 32 -
인터넷 이해와 활용
■ <SPAN> 태그와 <FIELDSET> 태그
<SPAN> 태그
강제 줄바꿈 없이 텍스트를 구분
주로 스타일시트와 함께 사용
<FIELDSET> 태그
<FIELDSET> : 사각형 테두리 만들기
<LEGEND> : 테두리에 제목넣기
속성
ALIGN=“{ left|center|right }”
- 33 -
인터넷 이해와 활용
■ <MARQUEE> 태그
텍스트에 움직임 효과를 부여
속성
BEHAVIOR=”{alternate|scroll|slide}” 텍스트의 움직임 형태
DIRECTION=”{down|up|left|right}” 텍스트의 움직임 방향
LOOP=”{n|infinite}” 반복횟수
SCROLLAMOUNT=”n” 스크롤되는 픽셀 수
SCROLLDELAY=”n” 메시지출력 시간간격(msec)
BGCOLOR=“color” : 스크롤되는 공간의 배경색
WIDTH, HEIGHT : 스크롤되는 공간의 크기
HSPACE, VSPACE : 스크롤되는 공간의 좌우, 상하여백
- 34 -
인터넷 이해와 활용
■ <PRE> 태그
입력한 형태 그대로 출력
공백, 줄바꿈 인식
내부의 태그 인식
- 35 -
인터넷 이해와 활용
■ <XMP> 태그
입력한 형태 그대로 출력
공백, 줄바꿈 인식
내부의 태그 무시
- 36 -
인터넷 이해와 활용
■ Character Entity
HTML 내에서의 특수 문자 표시 방법
- 37 -
인터넷 이해와 활용
■ Character Entity 사용 예
- 38 -
인터넷 이해와 활용
■ 순서 리스트
순서 글머리 번호에 순서 번호가 있는 리스트
<OL> : 리스트의 시작과 종료(Ordered List)
속성
TYPE=“{ A|a|I|i|1 }” : 글머리 번호의 종류
START=“n” : 글머리 번호의 시작 번호
<OL>
<LI> … </LI>
<LI> … </LI>
<LI> : 리스트 항목을 기술
</OL>
속성
TYPE=“{ A|a|I|i|1 }” : 해당 항목의 글머리 번호의 종류
VALUE=“n”
- 39 -
인터넷 이해와 활용
■ 순서 리스트 사용 예
<ol>
<li>서울</li>
<li>경기</li>
<li>제주</li>
</ol>
<ol type=I>
<li>서울
<li>경기
<li value=5>제주
</ol>
<ol type=a start=3>
<li>서울
<li>경기
<li>제주
</ol>
- 40 -
인터넷 이해와 활용
■ 무순서 리스트
순서 글머리 번호에 순서 번호가 없는 리스트
<UL> : 리스트의 시작과 종료(Unordered List)
속성
TYPE=“{ disc|circle|square }” : 글머리의 모양
<LI> : 리스트 항목을 기술
속성
TYPE=“{ disc|circle|square }” : 글머리의 모양
- 41 -
<UL>
<LI> … </LI>
<LI> … </LI>
</UL>
인터넷 이해와 활용
■ 무순서 리스트 사용 예
<ul type=square>
<li>서울
<li>경기
<li>제주
</ul>
<ul>
<li>서울
<li>경기
<li>제주
</ul>
- 42 -
인터넷 이해와 활용
■ 정의 리스트
<DL> : 정의 리스트의 시작과 종료
<DT> : 정의 제목
<DD> : 설명, 항목, DT에 대해 들여쓰기 효과
<DL compact>
- 43 -
인터넷 이해와 활용
■ 정의 리스트 사용 예
<dl>
<dt>HTML
<dd>Hyper Text Markup Language
<dt>DHTML
<dd>Dynamic HTML
</dl>
<dl compact>
<dt>[1]
<dd>Hyper Text Markup Language
<dt>[2]
<dd>Dynamic HTML
</dl>
- 44 -
인터넷 이해와 활용
■ 중첩 리스트
시작 태그, 마감 태그 사용 주의(대칭)
<ol>
<li>서울
<ul type=disc>
<li>종로
<li>동대문
</ul>
<li>경기
<li>제주
</ol>
- 45 -
인터넷 이해와 활용
■ <A> 태그
Anchor 정의
속성
HREF=“url” : 연결 문서 지정
TARGET : 연결 문서를 출력할 대상
_blank : 새로운 창을 열어서 문서 연결
_top : 현재 창의 최상위에 문서 연결
_parent : 현재 문서 창을 연 문서 창에서 연결
_self : 자기 자신의 창에서 연결
Frame_name : 지정한 프레임에서 연결
TITLE : 링크에 대한 설명을 기술
<A HREF=“연결할 문서” TARGET=“대상”> 내용 </A>
- 46 -
인터넷 이해와 활용
■ <A> 태그 사용 예
하이퍼링크 연습 문서입니다.
<a href="2.htm"> HTML
</a>이란 무엇인가?
기존 창
하이퍼링크연습문서입니다.
<a href="2.htm“ target=“_blank”>
HTML
</a>이란 무엇인가?
새창
- 47 -
인터넷 이해와 활용
■ <A> 태그 TITLE 속성
<a href="http://www.ocu.ac.kr" title="OCU 홈페이지로"> ocu가기 </a>
- 48 -
인터넷 이해와 활용
■ 책갈피 사용하기
NAME 속성을 이용하여 문서 내의 특정 부분으로의 연결 설정
대상 문서에 책갈피 위치 설정 후 하이퍼링크 지정 시 책갈피
이름을 지정
책갈피 위치 설정 : <A NAME=“name”>..</A>
책갈피 위치로 링크 생성 :<A HREF=“문서#name”> .. </A>
동일 문서 내에서는 문서 이름 생략 가능
- 49 -
인터넷 이해와 활용
■ NAME 속성
<a href=“NAME”> 해당문자열 </a>
클릭하면 문서 내의 WWW로 이동
<a name=“NAME”> 해당문자열 </a>
- 50 -
인터넷 이해와 활용
■ 동일 문서 내에서 책갈피 사용
<html>
<head>
<title> 링크연습</title>
</head>
<body>
<a href=“#서론” name=“위”>1.서론 </a>
<a href=“#본론”>2.본론 </a>
<a href=“#결론”>3.결론 </a>
<a name=“본론”> 2.본론 </a>
이 부분은 본론입니다…..
<a name=“결론”> 3.결론 </a>
이 부분은 결론입니다.………….. ………...
<a name=“서론”> 1.서론 </a>
이 부분은 서론이….
<a href=“#위”>위로가기</a>
- 51 -
인터넷 이해와 활용
■ 다른 사이트로 연결
웹 문서로 연결 : http://www.ocu.ac.kr
FTP 서버로 연결 : ftp://ftp.shareware.co.kr
- 52 -
인터넷 이해와 활용
■ 이메일 연결하기
‘편지쓰기’ 클릭하면
이메일 보내는 창 뜸
- 53 -
인터넷 이해와 활용
■ 요약
1. HTML 문서는 웹에서 사용되는 표준 문서 제작에 사용된다.
2. HTML은 태그들로 기술된 언어다.
3. HTML 문서는 텍스트 형식의 파일이다.
4. HTML 문서는 컴퓨터 시스템이나 운영체제에 독립적이므로
어떠한 시스템에서도 동일하게 표현된다.
5. HTML 문서는 공백이나 줄바꿈을 인식하지 않고 대소문자를
구분하지도 않는다.
6. HTML 문서의 기본 구조는 HEAD와 BODY로 나누어진다.
- 54 -
인터넷 이해와 활용
7. <HEAD> 태그는 문서에 관련된 여러 가지 정보를 기술하는
곳이다.
8. 실제 문서에 표시될 문자는 <BODY> 태그 내에 기술한다.
9. 문서의 시작과 끝을 구분하기 위해 <HTML> … </HTML>
태그를 기술한다.
10. 문서의 제목을 표현하기 위해 <HEAD> 태그 내에서
<TITLE> 태그를 이용하여 기술한다.
11. 복합 태그를 사용할 때 태그 사이의 중첩은 허용되지 않는다.
12. 문자의 색상은 색상명을 사용할 수도 있으나 RGB 색상
코드를 사용하는 것이 더 정확한 색상 표현 방법이다.
13. <FONT> 태그에서 사용할 수 있는 속성으로 SIZE, FACE,
COLOR가 있다.
14. HTML 문서의 기본 글자 크기는 SIZE=3이다.
- 55 -
인터넷 이해와 활용
15. 주석문 태그는 브라우저에서는 무시하기 때문에 보이지
않으며, 소스를 관리하기 좋게 해주며, 다른 사람이 봐도 쉽
게 이해되게 해주는 역할을 한다.
16. 하이퍼링크란 윈도우의 도움말 같은 형태로 문서 안에 특
정 문자열이나 이미지를 마우스로 클릭했을 때 관련된 다른
문서를 연결해주는 것이다.
17. 하이퍼링크에서 문서 내의 특정 위치로 연결하고자 하는
경우 NAME 속성을 이용하여 이름을 미리 정한 후 해당 이
름 위치로 바로 이동하는 것이 가능하다.
18. 하이퍼링크 설정 시 연결 문서를 보여줄 대상을 설정하는
속성은 TARGET이다.
- 56 -