Transcript 1. 인터넷 기초
1 PC통신과 인터넷 5. HTML PC통신과 인터넷 HTML 기초 잡기 I Web server – 자신의 컴퓨터로 요청된 하이퍼문서를 HTTP 프로토콜을 사용해 전달하는 역할을 하는 컴퓨터 Web browser – Web server에서 제공된 정보를 사용자가 볼 수 있도록 하는 프로그램 – Netscape, Explorer, Mosaic HTML – Hyper Text Markup Language의 약자로 사용체제에 관계없이 똑같은 Hyper Text를 만들 수 있는 규약(Markup)들의 모임이다. 일반적으로 아스키 형식의 일반 텍스트 문서로 확장자가 “HTML”또는 “HTM”으로 되어 있다. 2 3 PC통신과 인터넷 HTML 기초 잡기 II HTML 보기 – 일반적으로 Netscape이나 Explore등의 Web Browser를 사용하여 볼 수 있다. – 확장자가 html로 끝나는 파일을 Web Browser는 HTML로 인식하여 그 형식으로 파일을 보여 준다. 실습 저장 시 파일형식은 모든 파일로 !! 자신의 학번과 이름이 있는 문서를 만들고 이를 html문서와 txt문서로 저장한 후 실행 시켜 보자. ( 메모장 사용 !! ) Ex) 학번.html, 학번.txt 4 PC통신과 인터넷 HTML 기초 잡기 III 확장자가 HTML로 끝나면 HTML문서? –그렇다. 그러나…… 무엇이 문제인가? –다음과 같은 내용을 Html문서로 저장한 후 실행하자. 안녕하세요 지금은 홈페이지 테스트 중입니다. 다음과 같은 문서를 HTML문서로 만들어 저장해 봅시다. 실습 Ex) 단점.html Html 문서 실습입니다. 어떤 차이가 있을 까요? 이러한 문서를 만든 후 실행하면 알게 됩니다. 5 PC통신과 인터넷 HTML 기초 잡기 IV 태그의 필요성 – HTML 문서와 텍스트 문서의 가장 큰 차이점의 하나는 HTML문서에는 마크 업 태그가 있다는 것이다. 태그 – 문서의 모양과 행동 양식을 지정해 주는 명령어 실습 Ex) 태그1.html <H1>크기1입니다</H1> <H2>크기2입니다</H2> <H3>크기3입니다</H3> PC통신과 인터넷 태그의 기초(I) 1. <태그> 문장 </태그> 여는 태그와 닫는 태그 사이의 문장에 대한 형식이나 모양을 지정한다. Ex) <H1>환영합니다.</H1> 2. <태그 속성=인자> 문장 </태그> 태그의 속성을 지정하여 문장을 표현하기 위한 환경을 설정 한다. Ex) <Font SIZE=4 COLOR=RED>환영합니다.</Font> 3. <태그> 특수 기능을 수행하는 지시자의 역할을 한다. Ex) <BR> 6 7 PC통신과 인터넷 태그의 기초(II) 무구조.html 실습 <H1>환영합니다.</H1> <BR> 구조.html <HTML> <FONT Size=4 COLOR=RED>태그를 사용한 HTML문서</FONT> <HEAD><TITLE> Test입니다. </TITLE></HEAD> <BODY> <H1>환영합니다.</H1> <BR> < FONT Size=4 COLOR=RED >태그를 사용한 HTML문서입니다.</FONT> </BODY> </HTML> 8 PC통신과 인터넷 구조 태그 적용시키기 구조 태그 : 문서에 사용된 HTML의 버전, 문서의 안내 정보 그리고 제목 등과 같은 문서 특징에 관한 정보들을 브라우저에 제공해 주는 역할을 한다. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Final//EN”> <HTML> 구조.html <HEAD> <TITLE> 문서 제목 </TITLE> </HEAD> <BODY> 문서내의 모든 태그, 속성, 정보들이 들어가는 곳 </BODY> </HTML> 9 PC통신과 인터넷 제목 제목 –제목들은 많은 양의 텍스트들을 주제별로 분할을 하며, 정보들을 논리적인 계층 구조에 따라 정렬하는 역할을 한다. –가장 큰 제목인 <H1>에서 <H6>까지 여섯 개의 레벨을 제공한다. 실습 제목.html <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Final//EN”> <HTML> <HEAD> <TITLE> 제목 </TITLE> </HEAD> <BODY> <H1>첫 번째 레벨 제목</H1> <H3>두 번째 레벨 제목</H3> <H6>세 번째 레벨 제목</H6> </BODY> </HTML> 10 PC통신과 인터넷 제목 제목 속성 – ALIGN=LEFT : 제목이 왼쪽으로 정렬된다. – ALIGN=CENTER : 제목이 가운데로 정렬된다. – ALIGN=RIGHT : 제목이 오른쪽으로 정렬된다. 메모장에서 제목.html읽기!! 실습 제목.html 변경하기 <H1 ALIGN=LEFT>첫 번째 레벨 제목</H1> <H3 ALIGN=CENTER >두 번째 레벨 제목</H3> <H6 ALIGN=RIGHT >세 번째 레벨 제목</H6> 11 PC통신과 인터넷 본문 - 단락 단위 서식 설정 단락 단위 서식 설정이란 텍스트의 한 부분 전체에다 서식을 설정하는 것을 말한다. (꼭 한 쌍을 이룰 필요가 없다.) 단락 서식 효과 <P> <ADDRESS> 단락이 시작되는 곳에 사용한다. 주소 및 연락처 정보에 사용된다. 흘림 꼴로 표시되기도 한다. 인용문의 서식 설정에 사용된다. 양쪽 끝이 톱니 모양이고 일반적인 단락보다 행간이 좁다. 프로그램 코드나 그와 유사한 정보들의 서식 설정에 효과적이다. 보통 단어와 줄들 사이의 공간이 넓으며 고정 폭 글꼴로 표시가 된다. <BLOCKQUOTE> <PRE> PC통신과 인터넷 본문 - 단락 단위 서식 설정 실습 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Final//EN”> <HTML> <HEAD> <TITLE> 단락 서식 보기 </TITLE> </HEAD> <BODY> <P>한 단락을 여기에 입력해 준다. 이때 너무 많은 단락들을 사용하면 보는 사람들이 쉽게 지루해 질 수 있다는 점을 기억해 두자.</P> <ADDRESS>서울 특별시 관악구 신림동 </ADDRESS> <PRE>이것은 어떤 역할을 할까요?</PRE> <BLOCKQUOTE>인용문 서식 설정에 사용된다는 것은 이런 것입니다.</BLOCKQUOTE> </BODY> </HTML> 12 PC통신과 인터넷 13 본문 - 줄바꿈 지정하기 새로운 단락이 시작되는 것은 아니지만 어떤 위치에서 줄을 바꿔야 할 경우가 있을 수 있다. 이러한 경우 줄을 바꾸고자 하는 곳에다 <BR> 태그를 입력하면 단락의 줄을 쉽게 바꿀 수 있다. 실습 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Final//EN”> <HTML> <HEAD> <TITLE> 단락 서식 보기 </TITLE> </HEAD> <BODY> <P> 나 보기가 역겨워 가실 때에는 <BR> 말없이 보내 드리겠습니다. <BR> 영변에 약산 진달래 꽃<BR> </BODY> </HTML> PC통신과 인터넷 본문 - 문자 단위 서식 설정하기 각각의 문자나 단어를 강조하는 것을 문자 단위 서식 설정이라고 한다. 문자 단위 서식 설정 태그들은 단락 단위 태그들 안에다 사용한다. 즉 <B>와 같은 문자 단위 태그 내부에는 <P>태그를 사용하면 안 된다. 맞는 예 <P><B>굵은 글꼴을 사용한 단락의 끝</B><P> <P>다음 단락의 시작 부분 틀린 예 굵은 글꼴을 <B>사용한 부분. <P> 내용 </B></P> 14 15 PC통신과 인터넷 본문 - 문자 단위 서식 설정 태그 문자 태그 효과 <B> <BLINK> <CITE> <CODE> <EM> <I> <STRIKE> <STRONG> <SUB> <SUP> <TT> <U> <VAR> 굵게 표시 텍스트가 깜박이게 한다. 인용이나 참조를 가리킨다. 프로그램 코드를 표시한다. 강조 효과, 보통 이탤릭체로 표시된다. 이탤릭체로 표시된다. 텍스트에 줄을 그어 지우는 효과를 낸다. 강조효과를 내는데 보통 굵게 표시 아래 첨자 위 첨자 고정 폭 글꼴을 적용한다. 밑줄을 긋는다. 변수나 인자를 표시한다. PC통신과 인터넷 실습 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Final//EN”> <HTML> <HEAD> <TITLE> 문자 단위 서식 설정 </TITLE> </HEAD> <BODY> <P> <B>굵게 표시 </B><BR> <BLINK>텍스트가 깜박이게 한다.</BLINK><BR> <CITE>인용이나 참조를 가리킨다.</CITE><BR> <CODE>프로그램 코드를 표시한다.</CODE><BR> <EM>강조 효과, 보통 이탤릭체로 표시된다.</EM><BR> <I>이탤릭체로 표시된다.</I><BR> <STRIKE>텍스트에 줄을 그어 지우는 효과를 낸다.</STRIKE><BR> <STRONG>강조효과를 내는데 보통 굵게 표시</STRONG><BR> 이것은<SUB>아래 첨자</SUB>입니다.<BR> 이것은<SUP>위 첨자</SUP>입니다. <BR> <TT>고정 폭 글꼴을 적용한다.</TT><BR> <U>변수나 인자를 표시한다.</U><BR> </BODY> </HTML> 16 PC통신과 인터넷 목록 - 글 머리 표가 붙은 목록I 1. 목록으로 만들고자 하는 텍스트를 입력한다. 사자 호랑이 곰 2. 텍스트 앞뒤에 <UL>태그를 입력한다. <UL> 사자 호랑이 곰 </UL> 3. 각 줄에 <LI>태그를 입력한다. <UL> <LI>사자 <LI> 호랑이 <LI> 곰 </UL> 17 PC통신과 인터넷 목록 - 글 머리 표가 붙은 목록II 글 머리 표 목록 TYPE=DISC TYPE=SQUARE TYPE=CIRCLE 속성 넣기 <UL TYPE=CIRCLE> <LI> 개요 같은 것을 작성할 때에는 문자가 붙은 목록을 사용한다. <LI> 설명서의 경우에도 이러한 형태를 사용하기도 한다. </UL> 18 PC통신과 인터넷 목록 - 숫자가 매겨진 목록 I 1. 목록으로 만들고자 하는 텍스트를 입력한다. 사자 호랑이 곰 2. 텍스트 앞뒤에 <OL>태그를 입력한다. <OL> 사자 호랑이 곰 </OL> 3. 각 줄에 <LI>태그를 입력한다. <OL> <LI>사자 <LI> 호랑이 <LI> 곰 </OL> 19 PC통신과 인터넷 목록 - 숫자가 매겨진 목록 II 숫자형 목록 TYPE=A TYPE=a TYPE=I TYPE=i TYPE=1 속성 넣기 <OL TYPE=A> <LI> 개요 같은 것을 작성할 때에는 문자가 붙은 목록을 사용한다. <LI> 설명서의 경우에도 이러한 형태를 사용하기도 한다. </OL> 20 21 PC통신과 인터넷 목록 - 숫자가 매겨진 목록 III Ex1. <OL START=51> <LI>제 51번 째 항목 <LI>제 52번 째 항목 <LI TYPE=i VALUE=7>이 항목은 로마자로 7번째 항목임을 표시한 것이다. Ex2. <OL START=I> <LI>상위 항목-1 <LI>상위 항목-2 <OL TYPE=A> <LI>두 번째 레벨 항목-1 <LI>두 번째 레벨 항목-2 <OL TYPE=1> <LI>세 번째 레벨 항목-1 <LI>세 번째 레벨 항목-2 </OL> <LI>두번째 레벨 항목 3 </OL> 22 PC통신과 인터넷 정의형 목록 사용하기 - <DL>,<DT>,<DD> 목록 효과 <DL> 다음 정보를 설명형 목록으로 표시하도록 지정해 준다 <DT> 목록 내의 단어를 지정해 준다. <DD> 단어의 설명을 지정해 준다. 실습 정의목록.html <DL> <DT>HTML <DD>Hyper Markup Language : 웹 페이지를 만드는 언어 <DT>Maestro <DD>한 분야의 전문가.!! </DL> 23 PC통신과 인터넷 수평선I - <HR> 수평선은 텍스트의 일부를 잘라서 다른 내용이 시작됨을 표시한다거나 아니면 문서의 전체적인 디자인을 보기 좋게 하기 위한 직선을 말한다. 실습 수평선.html 다음 문장 <P>이 문장은 어떻게 보일까요?</P> <HR> <H3>위의 수평선이 보이나요?</H3> 24 PC통신과 인터넷 픽셀 수평선II • 픽셀이란스크린 상의 작은 점을 말하는데 이것들이 모여서 이미지를 만들어 내게 된 다. 만약 디스플레이가 800*600으로 설정 되어 있다면 가로 800 픽셀 세로 600 픽셀 로 이루어 지게 된 것이다. 수평선의 속성 직선 속성 효과 SIZE = n 직선의 높이를 픽셀 단위로 지정해 준다. WIDTH = n 직선의 길이를 픽셀 단위로 지정해 준다. WIDTH= “n%” 직선의 길이를 문서 너비의 비율로 지정 ALIGN=LEFT 왼쪽 정렬한다. ALIGN=CENTER 가운데 정렬한다. ALIGN=RIGHT 오른쪽 정렬한다. NOSHADE 직선에 음영이 적용되지 않도록 한다. 25 PC통신과 인터넷 수평선III 실습 수평선2.html 수정 필요 !! <HR WIDTH=“80%” SIZE=8> <HR WIDTH=“50%” SIZE=8> <HR WIDTH=640 SIZE=1> <HR WIDTH=400 SIZE=8> <HR WIDTH=500 ALIGN=LEFT> <HR NOSHADE WIDTH=500 ALIGN=CENTER> 브라우저의 크기를 변경 시켜 보자 !! 26 PC통신과 인터넷 색상의 지정 색상을 지정할 때에는 RGB라고 하는 빨간색, 녹색, 파란색의 혼합 비율을 16진수 숫자로 지정해 준다. 이 RGB번호는 빨간색, 녹색, 파란색이 각각 두 자리를 사용하여 모두 6자리 숫자로 구성된다. R G B 00 00 00 33 33 33 66 66 66 99 99 99 CC CC CC FF FF FF 색상표참조!! 27 PC통신과 인터넷 배경색 설정하기 자신의 문서에다 배경색을 지정하려면 다음과 같이 <BODY>태그에다 BGCOLOR=“#……..”속성을 추가해 주어야 한다. 실습 배경색.html <BODY BGCOLOR=“#FFFFFF”> 배경색 테스트 입니다. </BODY> 색상 지정을 이해하자!! 28 PC통신과 인터넷 글자 색의 지정 문서의 본문에 표시되는 본문 글자 TEXT=“#RRGGBB” 아직 방문해 보지 않은 링크들 LINK=“#RRGGBB” 현재 선택되어 있는 활성 링크들 ALINK=“#RRGGBB” 전에 방문한 적이 있는 링크들 실습 VLINK=“#RRGGBB” 색상지정.html <BODY BGCOLOR=“#ffffff” TEXT=“#000000”> 배경색 테스트 입니다. 글자 색 테스트 입니다. </BODY> 29 PC통신과 인터넷 글꼴 및 글꼴 크기 지정하기 태그/속성 설명 <FONT> 글자의 글꼴 특성들을 설정해 준다. SIZE=“….” 상대적 글꼴 크기를 1에서 7의 비율로 지정 기본은 크기 3, 상대적 크기 지정 가능 COLOR=“….” 글꼴 색을 지정해 준다. FACE=“….” 실습 글씨체 를 지정해 준다. 글씨.html <FONT FACE=“Technical, Times New Roman, Times” SIZE=“+2” COLOR=“#FF0000”>Look at this !! </FONT> 30 PC통신과 인터넷 문서 링크하기 링크라는 것은 하이퍼 텍스트의 하이퍼에 해당하는 말로써, 어떤 문서를 보다가 다른 문서로 바로 이동할 수 있도록 해 준다. 간단한 링크 만들기 <A HREF=“URL”>내용</A> 실습 링크.html <A HREF=“http://www.yahoo.co.kr”>클릭~~</A> 31 PC통신과 인터넷 URL의 구조I Http://logisys.snu.ac.kr/~swjung/internet/index.html Protocol Host name 실습 Folder name File name URL1.html <A HREF=“http://logisys.snu.ac.kr/~swjung/internet/f1.html”>F1.html</A> <A HREF=“http://logisys.snu.ac.kr/~swjung/internet/f2.html”>F2.html</A> 32 PC통신과 인터넷 URL의 구조II Where is file name? Http://www.yahoo.co.kr Default File Name : Index.html 33 PC통신과 인터넷 URL의 종류 절대 URL (절대 위치) 상대 URL (상대 위치) (3,3) 절대 위치 : (5,2) 상대 위치 : (+2,-1) PC통신과 인터넷 34 절대 URL 절대 URL은 프로토콜 지시자, 호스트 이름, 폴더 이름 그리고 파일 이름이 들어간다. 절대 URL은 우편 번호, 주소, 번지, 이름 등이 들어 있는 우체국 주소와 유사하다. 다음은 절대 URL의 예이다. http://www.xmission.com/services/index.html http://www.yahoo.co.kr/index.html PC통신과 인터넷 상대 URL 상대 URL에는 보통 폴더 이름과 파일 이름이 들어가며 파일 이름만 들어 있는 경우도 있다. 이러한 URL들은 같은 원본이 들어 있는 폴더나 서버와 같은 폴더나 서버 내에 들어 있는 파일을 가리 킬 때 사용된다. Ex) 한경대학교 경영학과 김길동 김길동(누가 말했느냐!!) 이것은 말한 사람이 누구인가에 따라 지칭하는 사람이 상대적으로 달라질 수 있다. 35 36 PC통신과 인터넷 절대 URL , 상대 URL 현재 위치 : logisys.snu.ac.kr/~swjung 기준 Internet Math.html lecture.html Exam.html Index.html 상대URL : internet/Exam.html 절대URL : http://logisys.snu.ac.kr/~swjung/internet/Exam.html PC통신과 인터넷 실습 1. D 드라이브에 HTML이라는 폴더를 만들자 2. HTML폴더 안에 Index.html이라는 문서를 만들자. 3. HTML폴더 안에 Document라는 폴더를 만들자. 4. Document라는 폴더 안에 Doc.html라는 문서를 만들자. • Index.html에서 절대URL로 Doc.html 링크 시키기 <A HREF=“file:///D:\html\Document\Doc.html> 링크 </A> • Index.html에서 상대URL로 Doc.html 링크 시키기 <A HREF=“Document\Doc.html> 링크 </A> 37 38 PC통신과 인터넷 상위 폴더에 위치한 파일 링크 앞서 예제에서 Document 폴더에 Doc1.html문서를 만들고 그 문서에서 Html 폴더에 위치한 Index.html을 링크 시키는 방법 ? • Doc1.html에서 절대URL로 Index.html 링크 시키기 <A HREF=“file:///D:\html\Index.html> Index.html </A> • Doc1.html에서 상대URL로 Index.html 링크 시키기 <A HREF=“..\Index.html> Index.html </A> 상위 폴더 의미 PC통신과 인터넷 문서내의 특정 위치로 링크 시키기 A Tag에는 HREF속성 뿐 아니라 Name속성이 있다. 네임 링크는 HTML문서 내의 특정한 위치로 연결이 된다. 따라서 이러한 네임 링크를 사용하면 링크들을 보다 세밀하게 조절할 수 있다. Ex) <A HREF=“#Proposal”>제안서로 이동</A> <A NAME=“Proposal”>제안서</A> 실습 Name 속성 사용 예를 보도록 하자. (게시판) 39 PC통신과 인터넷 40 E-mail링크 삽입하기 E-Mail 링크는 mailto:프로토콜을 사용하여 방문객들이 웹 제작자와 연락을 취할 수 있도록 해주는 역할을 한다. 이러한 E-Mail링크를 만들려면 Mailto:프로토콜 지시자 및 e-mail주소를 링크에다 추가해 주기만 하면 된다. Ex) <A HREF=“mailto:[email protected]”>메일보내기</A>