1 / 33

6. Making your cyber-home

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 의 정의 및 의미

colin
Download Presentation

6. Making your cyber-home

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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/ • 최문규 , 멀티미디어 홈페이지의 모든것(영진출판사)

  2. 6.0 목차 • 1 주차 범위 • World Wide Web의 정의 및 의미 • WWW 관련용어 • WWW의 접속과 동작 • HTML 문서만들기 (기초편) • 2 주차 범위 • WWW Client & WWW Server • HTML Document Design • HTML 문서만들기 (고급편) • 1 주차 범위의 응용편

  3. 6.1 World Wide Web의 배경 및 동작원리 • 인터넷을 이용한 정보교환 • 초기에는 ftp를 이용한 화일의 교환 및 e-mail이 주를 이루었다. • 인터넷의 확산에 따라 정보의 체계적인 탐색 방법이 필요하게 되었다. • archie 화일의 저장위치를 파악하는 방법 • gopher 계층적 접근방식에 의해 주로 문서정보를 찾아가는 방법 • 최근에는 사용에 편리한 통합 서비스 환경 즉, WWW이 탄생하게 되었다. • WWW은 1993년 Mosaic의 보급과 함께 급격히 확산되어, 이전의 서비스들을 대체하거나 통합하고 있다.

  4. 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는 수신한 자료를 화면에 나누어 출력한다.

  5. 6.2 HTML 문서 작성 • HTML 문서의 구조 • 기본구조 = 머리글(head) + 몸체(body) • 머리글 : 문서의 title에 해당된다. • 몸체 : 문서의 내용이 들어간다. • 기본 구조 • <html> • <head> • </head> • <body> • </body> • </html> • 주의 • 일반적으로 tag들은 쌍(pair)을 이루고 있다.

  6. 6.3 HTML 문서 작성 • 문서 형식 및 실습 1. 제목 및 본문 2. 헤딩 : <h1>, <h2>, <h3>, <h4>, <h5>, <h6> 3. 기초 양식 : 줄바꿈 <br>, 문단바꿈 <p>, 그 외 <pre> 4. 문자 출력 양식 : 출력 형태 및 문자 크기 5. 수평선 및 중앙정렬 : <hr> <center> 6. link

  7. 6.3.1 제목 및 본문 • HTML 문서 작성 연습 1 (본문 내용 넣기) <html> <head> <title> 신동만의 홈페이지 </title> </head> <body> 어서오세요... 안녕하세요? 여러분의 방문을 진심으로 환영합니다. 여기는 신동만의 홈페이지입니다. 편안한 음악과 따뜻한 차를 즐겨 주세요. </body> </html>

  8. 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>

  9. 6.3.3 Line Break • HTML 문서 작성 연습 3 <html> <head> <title> 신동만 홈페이지 </title> </head> <body> <h3> 어서오세요... </h3> 안녕하세요? <br> 여러분의 방문을 진심으로 환영합니다.<br> 여기는 신동만 홈페이지 입니다. <br> 편안한 음악과 따뜻한 차를 즐겨 주세요. <br> </body> </html>

  10. 6.3.4 Preformatted Text (1/2) • HTML 문서 작성 연습 4 • <pre> </pre> • 에디터로 입력한 space, EOL, tab 등의 효과를 보고자 할 때 (앞의 예제 2에서) <body> <h3> 어서오세요... </h3> <pre> 안녕하세요? 여러분의 방문을 진심으로 환영합니다. 여기는 신동만 홈페이지 입니다. 편안한 음악과 따뜻한 차를 즐겨 주세요. </pre> </body>

  11. 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 문서는 어떤 차이가 있을까 ?

  12. 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>

  13. 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>

  14. 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

  15. 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>

  16. 6.3.6 List • List • 자료를 체계적으로 정리하여 보여줄 때 사용한다. • List에는 3가지 종류가 있다. • Unorderd List <UL> </UL> • Definition List <DL> </DL> • Orderded List <OL> </OL>

  17. 6.3.6 List - Unordered List <UL> • HTML 목록만들기 • 무순서 리스트 (<UL>, <LI>) <body> <h3> 카페 메뉴 </h3> <ul> <li> 커피 (자판기에 가서 뽑아 드세요.) <li> 피자 (피자는 오늘 안 팝니다.) <li> 맥주 (카프리, 밀러, 오비 라거 등등) </ul> </body>

  18. 6.3.6 List - Definition List • HTML 목록만들기 • Definition List (<dl> <dt>) + 참고 <dd> • 체계적인 목록 정리에 사용한다. <body> <h3> 카페 메뉴 </h3> <dl> <dt> 커피 <dd> 담배와 블랙커피 <dt> 피자 <dd> 참나무 숯불에 구은 얇은 팬 피자 <dt> 맥주 <dd> 친구들과 잡담을 나누는 장소에 한 병쯤 좋지요? </dl> </body>

  19. 6.3.6 List - Ordered List • HTML 목록만들기 • 순서 List (<ol> <li>) • 순번을 붙여가면서 정리하는데 사용한다. <body> <h3> 카페에 입장하시면 ? </h3> <ol> <li> 출석을 부를때쯤 나타난다. <li> 숙제를 걷기 전에, 빨리 베낀다. <li> 간신히 베낀 후에는 쉬는 시간을 기다린다. <li> 살그머니 가방을 싸서 뒤로 튄다. <li> 친구들로부터 퀴즈를 보았다는 이야기를 전해듣는다. </ol> </body>

  20. 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>

  21. 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>

  22. 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>

  23. 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>

  24. 6.3.9 Image (2/2) • <img> tag의 field 설명 • align에서 top, middle, bottom은 이미지 주위에 단어가 올때 그것의 위치를 결정해 주고, left, right은 그림을 좌측에 혹은 우측에 위치하도록 합니다. • width와 height은 그림의 크기를 가변적으로 조정할 수 있도록 하며, 실제 크기보다 크게 할때는 해상도가 떨어집니다. • border는 그림주위에 경계선을 얼마나 두껍게 그을 것인가를 결정하며 • vspace와 hspace는 그림 상하, 좌우로 공간을 얼마나 띄울 • 것인가 결정합니다. • src는 그림화일의 위치를 지정하며 • alt는 그림을 읽을 수 없는 웹브라우져내에서 그림대신 나타나는 글자를 지정합니다.

  25. 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 : 흰색

  26. 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 • 문자는 검은색, 링크는 금색, 방문한 링크는 초록색

  27. 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]

  28. 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>

  29. 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>

  30. 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

  31. 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>

  32. 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>

  33. 6.3.12 Comment & Special Character • 주석문 삽입 및 특수 문자 • 주석문 표현 : <!-- 주석 내용 --> • Browser를 통해 화일을 볼 때에는 출력되지 않음. • 주로 HTML 문서 작성에 대한 설명을 넣음. • 예) <!-- 이글은 Browser를 통해 보이지 않습니다.--> • 특수문자 : • < &lt; • > &gt; • & &amp; • “ &quot;

More Related