330 likes | 457 Views
6. Making your cyber-home. Reference http://ee.tamu.edu/~skjo/ibook/Index.html http://www.sandia.gov/sci_compute/html_ref.html World Wide Web 이렇게 시작하세요 . ( 이 창수 교수 ) http://www.peacenet.co.kr/~kangcw/COMMON/ 최문규 , 멀티미디어 홈페이지의 모든것 ( 영진출판사 ). 6.0 목차. 1 주차 범위 World Wide Web 의 정의 및 의미
E N D
6. Making your cyber-home • Reference • http://ee.tamu.edu/~skjo/ibook/Index.html • http://www.sandia.gov/sci_compute/html_ref.html • World Wide Web 이렇게 시작하세요. (이 창수 교수) • http://www.peacenet.co.kr/~kangcw/COMMON/ • 최문규 , 멀티미디어 홈페이지의 모든것(영진출판사)
6.0 목차 • 1 주차 범위 • World Wide Web의 정의 및 의미 • WWW 관련용어 • WWW의 접속과 동작 • HTML 문서만들기 (기초편) • 2 주차 범위 • WWW Client & WWW Server • HTML Document Design • HTML 문서만들기 (고급편) • 1 주차 범위의 응용편
6.1 World Wide Web의 배경 및 동작원리 • 인터넷을 이용한 정보교환 • 초기에는 ftp를 이용한 화일의 교환 및 e-mail이 주를 이루었다. • 인터넷의 확산에 따라 정보의 체계적인 탐색 방법이 필요하게 되었다. • archie 화일의 저장위치를 파악하는 방법 • gopher 계층적 접근방식에 의해 주로 문서정보를 찾아가는 방법 • 최근에는 사용에 편리한 통합 서비스 환경 즉, WWW이 탄생하게 되었다. • WWW은 1993년 Mosaic의 보급과 함께 급격히 확산되어, 이전의 서비스들을 대체하거나 통합하고 있다.
6.1 World Wide Web의 배경 및 동작원리 • WWW의 동작원리 1. URL에서 접속할 호스트의 Domain Name 주소를 읽는다. 2. DNS (Domain Name Service)를 통해 IP 주소를 찾아낸다. 3. 접속 방법(프로토콜: URL)에 따라 상대편 서버에 연결을 맺는다. 4. 클라이언트는 서버에게 URL에 지정되어 자료(문서)를 요청. 5. 서버는 해당 문서를 보내고 클라이언트는 수신한다. 6. 클라이언트는 수신한 자료를 화면에 보여준다. • NCSA의 Mosaic은 모든 자료를 전부 수신한 후에 화면에 출력한다. • Netscape는 수신한 자료를 화면에 나누어 출력한다.
6.2 HTML 문서 작성 • HTML 문서의 구조 • 기본구조 = 머리글(head) + 몸체(body) • 머리글 : 문서의 title에 해당된다. • 몸체 : 문서의 내용이 들어간다. • 기본 구조 • <html> • <head> • </head> • <body> • </body> • </html> • 주의 • 일반적으로 tag들은 쌍(pair)을 이루고 있다.
6.3 HTML 문서 작성 • 문서 형식 및 실습 1. 제목 및 본문 2. 헤딩 : <h1>, <h2>, <h3>, <h4>, <h5>, <h6> 3. 기초 양식 : 줄바꿈 <br>, 문단바꿈 <p>, 그 외 <pre> 4. 문자 출력 양식 : 출력 형태 및 문자 크기 5. 수평선 및 중앙정렬 : <hr> <center> 6. link
6.3.1 제목 및 본문 • HTML 문서 작성 연습 1 (본문 내용 넣기) <html> <head> <title> 신동만의 홈페이지 </title> </head> <body> 어서오세요... 안녕하세요? 여러분의 방문을 진심으로 환영합니다. 여기는 신동만의 홈페이지입니다. 편안한 음악과 따뜻한 차를 즐겨 주세요. </body> </html>
6.3.2 Heading • HTML 문서 작성 연습 2 <html> <head> <title> 신동만 홈페이지 방문을 환영합니다. </title> </head> <body> <h1> 안녕하세요? 큰 제목입니다. </h1> <h2> h는 헤딩의 약자입니다. </h2> <h3> 문자의 크기가 다르게 보이지요? </h3> <h4> 적절한 크기의 헤딩을 사용해야겠지요? </h4> <h5> 강조할 부분이나 단락의 단위에 </h5> <h6> 유의 하세요! </h6> </body> </html>
6.3.3 Line Break • HTML 문서 작성 연습 3 <html> <head> <title> 신동만 홈페이지 </title> </head> <body> <h3> 어서오세요... </h3> 안녕하세요? <br> 여러분의 방문을 진심으로 환영합니다.<br> 여기는 신동만 홈페이지 입니다. <br> 편안한 음악과 따뜻한 차를 즐겨 주세요. <br> </body> </html>
6.3.4 Preformatted Text (1/2) • HTML 문서 작성 연습 4 • <pre> </pre> • 에디터로 입력한 space, EOL, tab 등의 효과를 보고자 할 때 (앞의 예제 2에서) <body> <h3> 어서오세요... </h3> <pre> 안녕하세요? 여러분의 방문을 진심으로 환영합니다. 여기는 신동만 홈페이지 입니다. 편안한 음악과 따뜻한 차를 즐겨 주세요. </pre> </body>
6.3.4 Preformatted Text (2/2) • Preformatted Text를 조금 더 공부해보면, <PRE> 차수 국어 영어 수학 --------------------------- 1차 A A B 2차 B A A 3차 A A A --------------------------- </PRE> 차수 국어 영어 수학<BR> --------------------------- <BR> 1차 A A B <BR> 2차 B A A <BR> 3차 A A A <BR> --------------------------- <BR> • 위의 두가지 방법에 의해 작성된 HTML 문서는 어떤 차이가 있을까 ?
6.3.5 LINK (1/4) • HTML Link 만들기 • <A HREF=filename>단어</A> • filename부분에는 URL, 그림, HTML 문서등을 지정할 수 있다. • (단어)는 밑줄과 함께 화면에 나타난다. • User가 Click하면 해당 file을 읽어들이거나, 이동하게 된다. • <A HREF="http://san.hufs.ac.kr/dmshin2/> 신동만 홈페이지 </A> • HTML 문서내부에서의 위치 지정 • <A NAME="Target1">타겟 1</A> • <A HREF="#Target1">여기를 선택하면 타겟 1로 갑니다</A>
6.3.5 LINK (2/4) • LINK의 설정 (상대경로와 절대경로) • 상대경로 • 현재의 화일이 있는 위치를 기준으로 Link의 위치를 기술한다. • 예1) <A HREF="gif/black_hole.gif"> Black Hole 사진 </A> • 예2) <A HREF=“hotlink.html”> Hot Link </A> • 상대경로를 사용할 때 얻는 장점 • 1.문서 전체를 다른 위치로 옮기려 할 때에 훨씬 더 편리합니다. (상대 경로이름은 계속해서 유효할 것입니다) • 2.서버에 접속할 때에 훨씬 더 효과적입니다. • 3.타이핑이 줄어듭니다. • 절대경로 • Link의 위치와 프로토콜을 정확하게 기술한다. • 예) <A HREF=“http:// san.hufs.ac.kr/dmshin2 /gif/ black_hole.gif”> Black Hole 사진 </A>
6.3.5 LINK (3/4) • URL 표기방법 • 양식 : service://host.domain-name/path/filename • service : http, gopher, ftp, news 등 • HTML 문서의 link 지정에 활용하거나, browser의 open에 사용한다. • 표기 예 : • http://bora.dacom.co.kr/bora/expl/index.html • ftp://ftp.dacom.co.kr/pub/ • gopher://gopher.dacom.co.kr/ • news://news.dacom.co.kr/han.* • E-mail Client를 부르는 양식 • mailto:wait4u@ultra.snu.ac.kr
6.3.5 LINK (4/4) • URL을 Link에 포함한 양식의 예제 • <A HREF=http://bora.dacom.co.kr/bora/news/index.html>새소식</A> • <A HREF=ftp://ftp.dacom.co.kr/pub/>데이콤 ftp 서비스</A> • <A HREF=gopher://gopher.dacom.co.kr/>데이콤 gopher 서비스</A> • <A HREF=news://news.dacom.co.kr/han.*>데이콤 han news group</A> • <A HREF=./blues.gif>백그라운드 그림</A> • <A HREF=mailto:help@bora.dacom.co.kr>help@bora.dacom.co.kr</A>
6.3.6 List • List • 자료를 체계적으로 정리하여 보여줄 때 사용한다. • List에는 3가지 종류가 있다. • Unorderd List <UL> </UL> • Definition List <DL> </DL> • Orderded List <OL> </OL>
6.3.6 List - Unordered List <UL> • HTML 목록만들기 • 무순서 리스트 (<UL>, <LI>) <body> <h3> 카페 메뉴 </h3> <ul> <li> 커피 (자판기에 가서 뽑아 드세요.) <li> 피자 (피자는 오늘 안 팝니다.) <li> 맥주 (카프리, 밀러, 오비 라거 등등) </ul> </body>
6.3.6 List - Definition List • HTML 목록만들기 • Definition List (<dl> <dt>) + 참고 <dd> • 체계적인 목록 정리에 사용한다. <body> <h3> 카페 메뉴 </h3> <dl> <dt> 커피 <dd> 담배와 블랙커피 <dt> 피자 <dd> 참나무 숯불에 구은 얇은 팬 피자 <dt> 맥주 <dd> 친구들과 잡담을 나누는 장소에 한 병쯤 좋지요? </dl> </body>
6.3.6 List - Ordered List • HTML 목록만들기 • 순서 List (<ol> <li>) • 순번을 붙여가면서 정리하는데 사용한다. <body> <h3> 카페에 입장하시면 ? </h3> <ol> <li> 출석을 부를때쯤 나타난다. <li> 숙제를 걷기 전에, 빨리 베낀다. <li> 간신히 베낀 후에는 쉬는 시간을 기다린다. <li> 살그머니 가방을 싸서 뒤로 튄다. <li> 친구들로부터 퀴즈를 보았다는 이야기를 전해듣는다. </ol> </body>
6.3.7 Font (1/2) • HTML 문서내의 글자 속성 (Physical & Logical) • Physical Style • 굵은체 <b>문자열</b> • 이탤릭 <i>문자열</i> • 밑줄 <u>문자열</u> • 타자체 폰트 <tt>문자열</tt> • Logical Stype • 강조 <em>문자열</em> • 강한 강조 <strong>문자열</strong> • 컴퓨터 코드 <code>문자열</code> • 샘플 출력 <samp>문자열</samp> • 키보드 키 <kbd>문자열</kbd> • 인용 <cite>문자열</cite> • 변수정의 <var>문자열</var> • 변수표시 <dfn>문자열</dfn>
6.3.7 Font (2/2) • 문자 크기를 강제로 조절하려면, • <FONT SIZE=1> 제일 작은 폰트 </FONT> • <FONT SIZE=2> 작은 것이 아름답다. </FONT> • <FONT SIZE=3> 기본 폰트 크기는 3입니다. </FONT> • <FONT SIZE=4> 적당히 큰 것이 좋은 법이여 </FONT> • <FONT SIZE=5> 이 정도 크기면 강조효과가 충분하지요. </FONT> • <FONT SIZE=6> 큰 사람이 좋다. </FONT> • <FONT SIZE=7> 가장 큰 폰트 </FONT>
6.3.8 수평선(HR) • 수평선 (HR) : <HR align=좌우중앙 width=백분율 size=정수> • 중앙(center), 좌(left), 우(right) 중의 하나를 선택한다 (영문). • width : 화면의 넓이를 기준(100%)으로 크기를 정한다 (1%-100%). • size : 수평선의 세로너비를 정한다. • 기본값 : <hr align=center width=100% size=2> • 연습 (HR) • width : <HR width=30%>, <HR width=70%>, <HR width=100%> • 정렬 : <HR align=left width=30%>, <HR align=right width=30%> • 굵기 : <HR width=30%>, <HR width=30% size=1> <HR width=70% size=5>, <HR width=100% size=20>
6.3.9 Image (1/2) • Image File 삽입 <img align=[top|middle|bottom|left|right] width=[pixels|percentage] height=[pixels|percentage] border=pixels vspace=pixels hspace=pixels src=URL alt=text>
6.3.9 Image (2/2) • <img> tag의 field 설명 • align에서 top, middle, bottom은 이미지 주위에 단어가 올때 그것의 위치를 결정해 주고, left, right은 그림을 좌측에 혹은 우측에 위치하도록 합니다. • width와 height은 그림의 크기를 가변적으로 조정할 수 있도록 하며, 실제 크기보다 크게 할때는 해상도가 떨어집니다. • border는 그림주위에 경계선을 얼마나 두껍게 그을 것인가를 결정하며 • vspace와 hspace는 그림 상하, 좌우로 공간을 얼마나 띄울 • 것인가 결정합니다. • src는 그림화일의 위치를 지정하며 • alt는 그림을 읽을 수 없는 웹브라우져내에서 그림대신 나타나는 글자를 지정합니다.
6.3.10 Background (1/2) • 문서의 배경 <BODY background=imagefile bgcolor=color text=color link=color vlink=color> • background 지정한 그림화일을 이용하여 배경을 만듭니다. • bgcolor 배경색을 결정합니다. • text 글자색을 결정합니다. • link LINK가 있는 글자 혹은 그림주위(border)의 색상을 결정. • vlink 이미 방문한 link의 색상을 결정합니다. • 색상표현(RGB) • ff0000 : 붉은 색 • 00ff00 : 녹색 • 0000ff : 파란 색 • 00000 : 검은 색 • ffffff : 흰색
6.3.10 Background (2/2) • 배경 설정 연습 • 배경색 • bgcolor=ff0000 : 빨간색으로 지정 • bgcolor=00ff00 : 초록색으로 지정 • bgcolor=0000ff : 파란색으로 지정 • 글자와 링크 색상 • text=0000ff link=ff0000 vlink=00ff00 • 문자는 파란색, 링크는 빨간색, 방문한 링크는 초록색 • link=ff0000 vlink=00ff00 • 문자는 검은색, 링크는 빨간색, 방문한 링크는 초록색 • link=ff0000 • 문자는 검은색, 링크는 빨간색, 방문한 링크는 짙은 청색 • link=ffc000 vlink=00ff00 • 문자는 검은색, 링크는 금색, 방문한 링크는 초록색
6.3.11 Table (1/6) • 표(Table) 만들기 • 기본 양식 • <table border=pixels> • [<tr>[<td>내용</td>]+</tr>]+ • </table> • tr (표의 행을 나타낸다.) • rowspan =rows • td (표의 열을 나타낸다.) • colspan =columns • align =[left|center|right] • valign =[top|middle|bottom]
6.3.11 Table (2/6) • 표 만들기 연습 (1/4) <table border=1> <tr><td> A(1,1)</td><td> B(1,2)</td></tr> <tr><td> C(2,1)</td><td> D(2,2)</td></tr> </table> • 표 만들기 연습(2/4) • colspan은 가로방향(행)의 칸을 합치는 기능을 합니다. <table border=2> <tr><td colspan=2> A(1,1) B(1,2) </tr> <tr><td> C(2,1)</td><td> D(2,2)</td></tr> </table>
6.3.11 Table (3/6) • 표 만들기 연습 (3/4) • rowspan은 세로방향(열)으로 칸을 합치는 기능을 합니다. <table border=2> <tr><td rowspan=2> A(1,1) C(2,1)</td> <td> B(1,2)</td></tr> <tr><td> D(2,2)</td></tr> </table>
6.3.11 Table (4/6) • 문제 1 • 문제 2 • 문제 3 (숙제) • File name : schedule.htm • 내용 : • 1. 주간 계획 • 2. 하루 계획 • 3. 월간 계획 • 4. 년간 계획 • 중 하나를 선택하여 작성. A A B C B C D D E
6.3.11 Table (5/6) • 문제 1 (답) <table border=1> <tr><td colspan=2> A </td></tr> <tr><td> B </td><td rowspan=2> C </td></tr> <tr><td> D </td></tr> </table> • 문제 2 (답) <table border=1> <tr><td colspan=3> A </td></tr> <tr><td colspan=2> B </td><td rowspan=2> C </td></tr> <tr><td> D </td><td> E </td></tr> </table>
6.3.11 Table (6/6) • Table에 들어가는 내용을 강조하고 싶을 때 (<th>) <table border=1> <tr><th colspan=2> A </th></tr> <tr><td> B </td><td rowspan=2> C </td></tr> <tr><td> D </td></tr> </table> • Table에 들어가는 내용을 강조하고 싶을 때 <th> <table border=1> <tr><th colspan=3> A </th></tr> <tr><th colspan=2> B </th><td rowspan=2> C </td></tr> <tr><td> D </td><td> E </td></tr> </table>
6.3.12 Comment & Special Character • 주석문 삽입 및 특수 문자 • 주석문 표현 : <!-- 주석 내용 --> • Browser를 통해 화일을 볼 때에는 출력되지 않음. • 주로 HTML 문서 작성에 대한 설명을 넣음. • 예) <!-- 이글은 Browser를 통해 보이지 않습니다.--> • 특수문자 : • < < • > > • & & • “ "