1 / 103

홈페이지

홈페이지. 홈페이지 관련 프로그램들 텍스트 편집기 HTML 태그 이용 웹저작도구 나모에디터 , 드림위버 그래픽 프로그램 이미지제작 ( 포토샵 , 페인트샵 프로 ) 애니메이션 그림 파일 작성 GIF Construction Set, WWW GIF Animator, 플래시 기타 워드프로세서 웹문서 변환 기능. 웹 프로그래밍 (1/3). 웹 프로그래밍 SGML (Standard Generalized Markup Language) 문서의 마크업 언어나 태그 셋을 어떻게 정의할 것인가에 대한 표준

anne
Download Presentation

홈페이지

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. 홈페이지 • 홈페이지 관련 프로그램들 • 텍스트 편집기 • HTML 태그 이용 • 웹저작도구 • 나모에디터, 드림위버 • 그래픽 프로그램 • 이미지제작 (포토샵, 페인트샵 프로) • 애니메이션 그림 파일 작성 • GIF Construction Set, WWW GIF Animator, 플래시 • 기타 • 워드프로세서 • 웹문서 변환 기능

  2. 웹 프로그래밍 (1/3) • 웹 프로그래밍 • SGML (Standard Generalized Markup Language) • 문서의 마크업 언어나 태그 셋을 어떻게 정의할 것인가에 대한 표준 • HTML (HyperText Markup Language) • 자바 스크립트와 자바 애플랫 • 자바 스클립트(Java Script) • 클라이언트에서 독립적으로 실행되는 되는 스크립트 언어 • 자바 애플릿(Java Applet) • 자바언어로 제작한 홈페이지 응용 프로그램 • DHTML (Dynamic HTML): 동적 웹페이지 제작 • XML (eXtensible Markup Language) • HTML과 SGML의 장점만을 모아놓은 표준안 • XHTML : HTML이 XML로 가기 위한 가교 역할

  3. 웹 프로그래밍 (2/3) • Server Side Script • HTML(단방향식의 정보제공) 의 문제점을 보충하기 위해 • CGI (Common Gateway Interface) • 외부프로그램과 웹서버(Web Server) 간의 연결 역할 • 주로 C/C++ 나 PERL혹은 UNIX Shell, Tcl/Tk 등을 사용하여 구현 • ASP (Active Server Page) • MS사에서 제작한 IIS(Internet Information Server)의 세번째 버전 • 익히기가 가장 쉽지만 MS 윈도우에서만 구동 • JSP (Java Server Page) • 자바를 기반으로한 동적인 웹사이트 개발언어 • 프로그래밍언어인 자바를 기본 언어로 채택하여 견고하고, 안정적 • PHP (Professional Hypertext Preprocessor) • 주로 Linux 계열에서 사용하는 동적 HTML 페이지 제작기술 • 안정성이 보장되어 있지 않다는 문제점이 있지만 급속도로 발전

  4. 웹 프로그래밍 (3/3) • Web3D • 웹 페이지 상에서 물체를 돌려보거나, 현실과 같이 공간을 이동할 수 있게 해주는 기술 • VRML (Virtual Reality Modeling Language) • 인터넷에 3차원 공간을 표현하는 그래픽스 데이터의 기술 언어 • X3D (Extensible 3D) • 차세대 VRML 버전 (XML + VRML97) • 다른 컨텐츠와의 호환성이 높으며, 코드의 모듈화를 통하여 확장 가능하도록 정의 • www.web3d.org

  5. 인터넷의 이해와 활용 웹 정책 기획 설계 구현 계획수립 시험 및 검증 운영 및 유지보수 환경 및 시스템 분석 스토리보드 작성 사용 편의성 검사 페이지 구성 시스템 속도 검사 화면 구성 멀티미디어데이터 생성 보안 정책 코드 백업 정책 설치 장애 관리

  6. 웹서버의 동작원리

  7. HTML 문서의 특징 • 공백, 줄바꿈 인식 못함 • 텍스트 문서의 형태- 확장명 : .html, .htm • 인터넷 문서로 사용하기에 적합 • 컴퓨터 기종에 무관 • 파일크기 작음 • 대소문자를 구분하지 않음

  8. HTML • HTML (HyperText MarkUp Language) • 하이퍼텍스트(Hypertext) 문서 • 1989) CERN에 있던 팀 버너스리에 의해 개발 • HTML의 구조 • 헤더(Header)와 본문(Body)으로 구분 • 태그(tag)를 사용 • 태그: 특별한 표시를 할 수 있는 표시자 • <HTML> // HTML문서 시작 • <HEAD> // 헤더의 시작 • … 문성의 일반적인 정보나 제목기술 … • </HEAD> // 헤더의 끝 • <BODY> // 본문의 시작 • … 본문의 내용 … • </BODY> // 본문의 끝 • </HTML> // HTML 문서의 끝

  9. 머리부 몸체부 HTML 기본 구조

  10. 태그의 구성 요소 • 복합 태그 <태그명> 내용 </태그명> • 속성을 가지는 태그 <태그명 속성명=값> 내용 </태그명> • 단독 태그 <태그명> • 사용 예 여러분을 <font size=5 color=blue>진심으로</font> 환영합니다!

  11. 태그의 사용규칙 • <태그명></태그명>과 같이 여는 태그와 닫는 태그가 쌍으로 사용된다. • 닫을 때는 태그명으로만 닫는다. • 태그명과 속성명, 속성명과 속성명 사이는 한 칸씩 띄운다. 그 외 공백을 두어서는 안 된다. • 속성명과 값은 = 부호를 사용하여 표시한다. • 값이 두 단어 이상일 경우는 “”로 묶어서 표시한다. • 속성이 있는 태그가 있고 없는 태그가 있다. • 속성을 반드시 하나 이상 사용해야 하는 태그도 있고 생략해도 되는 태그가 있다. • 여는 태그만 독립적으로 존재하는 태그도 있다. • 태그를 중첩해서 사용할 경우 먼저 열어준 태그를 나중에 닫아준다.

  12. 태그의 사용규칙 ■ HTML 태그의 구조 사용 주의 사항 중첩 사용 시 마감 태그의 대응 위치 <tag1> <tag2> . . . <tag1> <tag2> (x) <tag1> <tag2> . . . <tag2> <tag1> (o)

  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진수로 표현 R(red) 2자리, G(green) 2자리, B(blue) 2자리 총 6자리로 구성된다 11111111 00000000 00000000

  21. 칼라 영문명 16진수 칼라 영문명 16진수 Black #000000 Green #008000 Silver #C0C0C0 Lime #00FF00 Gray #808080 Olive #808000 White #FFFFFF Yellow #FFFF00 Maroon #800000 Navy #000080 Red #FF0000 Blue #0000FF Purple #800080 Teal #008080 Fuchsia #FF00FF Aqua #00FFFF • 인터넷 이해와 활용 ■ 색상 표현 단어

  22. 인터넷 이해와 활용 ■ <FONT> 태그 사용 예

  23. 인터넷 이해와 활용 ■ <Hn> 태그 문서 내의 단계별 제목 문서에 논리적 의미 부여 <Hn> : n = 1 ~ 6 (n=1이 가장 큰 제목 ) 자동 줄바꿈 속성 ALIGN=“{left|center|right }” <H1> … </H1> <H3 ALIGN=“center”> … </H3>

  24. 인터넷 이해와 활용 ■ <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>

  25. 인터넷 이해와 활용 ■ <CENTER> 태그 태그 사이의 내용을 가운데 정렬

  26. 인터넷 이해와 활용 ■ <HR> 태그 가로선 긋기 속성 ALIGN=“{left|center|right }” SIZE=“n” : 선의 두께(pixel), 기본 값은 2 WIDTH=“n” : 선의 폭(pixel,%) NOSHADE : 음영효과 사용 안 함 COLOR=“color” : 선의 색상 <hr align=“ ” size=“n” width=“n” color=“color“ [noshade]>

  27. 인터넷 이해와 활용 ■ <HR> 태그 사용 예

  28. 인터넷 이해와 활용 ■ <ADDRESS> 태그와 주석문 <ADDRESS> 문서 수정일, 주소, 저자 정보 주석문 <!-- .... -->

  29. 인터넷 이해와 활용 ■ <DIV> 태그 특정부분과 구역으로 구분 논리적 블록요소 주로 스타일 시트와 함께 사용 앞뒤 줄바꿈 속성 ALIGN=“{ left|center|right }”

  30. 인터넷 이해와 활용 ■ <MARQUEE> 태그 텍스트에 움직임 효과를 부여 속성 BEHAVIOR=”{alternate|scroll|slide}” 텍스트의 움직임 형태 DIRECTION=”{down|up|left|right}” 텍스트의 움직임 방향 LOOP=”{n|infinite}” 반복횟수 SCROLLAMOUNT=”n” 스크롤되는 픽셀 수 SCROLLDELAY=”n” 메시지출력 시간간격(msec) BGCOLOR=“color” : 스크롤되는 공간의 배경색 WIDTH, HEIGHT : 스크롤되는 공간의 크기 HSPACE, VSPACE : 스크롤되는 공간의 좌우, 상하여백

  31. 예제) marquee 태그 <HTML> <head> <title>테스트 문서</title> </head> <body> <Marquee BEHAVIOR=alternate> 인터넷 입문 </Marquee> <Marquee BEHAVIOR=scroll> 인터넷 입문 </Marquee> <Marquee BEHAVIOR=slide> 인터넷 입문 </Marquee> <Marquee Direction=down BGCOLOR="red"> 인터넷 입문 </Marquee> <Marquee Direction=up BGCOLOR="green"> 인터넷 입문 </Marquee> <Marquee Direction=left BGCOLOR="blue"> 인터넷 입문 </Marquee> <Marquee Direction=right BGCOLOR="yellow"> 인터넷 입문 </Marquee> <Marquee ScrollAmount=1> 인터넷 입문 </Marquee> <Marquee ScrollAmount=10> 인터넷 입문 </Marquee> <Marquee ScrollAmount=100> 인터넷 입문 </Marquee> <Marquee ScrollDelay=10> 인터넷 입문 </Marquee> <Marquee ScrollDelay=100> 인터넷 입문 </Marquee> <Marquee ScrollDelay=1000> 인터넷 입문 </Marquee> </body> </HTML>

  32. 인터넷 이해와 활용 ■ <PRE> 태그 입력한 형태 그대로 출력 공백, 줄바꿈 인식 내부의 태그 인식

  33. 인터넷 이해와 활용 ■ <XMP> 태그 입력한 형태 그대로 출력 공백, 줄바꿈 인식 내부의 태그 무시

  34. 인터넷 이해와 활용 ■ Character Entity HTML 내에서의 특수 문자 표시 방법

  35. 인터넷 이해와 활용 ■ Character Entity 사용 예

  36. 인터넷 이해와 활용 ■ 순서 리스트 순서 글머리 번호에 순서 번호가 있는 리스트 <OL> : 리스트의 시작과 종료(Ordered List) 속성 TYPE=“{ A|a|I|i|1 }” : 글머리 번호의 종류 START=“n” : 글머리 번호의 시작 번호 <LI> : 리스트 항목을 기술 속성 TYPE=“{ A|a|I|i|1 }” : 해당 항목의 글머리 번호의 종류 VALUE=“n” <OL> <LI> … </LI> <LI> … </LI> </OL>

  37. 인터넷 이해와 활용 ■ 순서 리스트 사용 예 <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>

  38. 인터넷 이해와 활용 ■ 무순서 리스트 순서 글머리 번호에 순서 번호가 없는 리스트 <UL> : 리스트의 시작과 종료(Unordered List) 속성 TYPE=“{ disc|circle|square}” : 글머리의 모양 <LI> : 리스트 항목을 기술 속성 TYPE=“{ disc|circle|square}” : 글머리의 모양 <UL> <LI> … </LI> <LI> … </LI> </UL>

  39. 인터넷 이해와 활용 ■ 무순서 리스트 사용 예 <ul type=square> <li>서울 <li>경기 <li>제주 </ul> <ul> <li>서울 <li>경기 <li>제주 </ul>

  40. 인터넷 이해와 활용 ■ 정의 리스트 <DL> : 정의 리스트의 시작과 종료 <DT> : 정의 제목 <DD> : 설명, 항목, DT에 대해 들여쓰기 효과 <DL compact>

  41. 인터넷 이해와 활용 ■ 정의 리스트 사용 예 <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>

  42. 인터넷 이해와 활용 ■ 중첩 리스트 시작 태그, 마감 태그 사용 주의(대칭) <ol> <li>서울 <ul type=disc> <li>종로 <li>동대문 </ul> <li>경기 <li>제주 </ol>

  43. 인터넷 이해와 활용 ■ <A> 태그 Anchor 정의 속성 HREF=“url” : 연결 문서 지정 TARGET : 연결 문서를 출력할 대상 _blank : 새로운 창을 열어서 문서 연결 _top : 현재 창의 최상위에 문서 연결 _parent : 현재 문서 창을 연 문서 창에서 연결 _self : 자기 자신의 창에서 연결 Frame_name : 지정한 프레임에서 연결 TITLE : 링크에 대한 설명을 기술 <A HREF=“연결할 문서” TARGET=“대상”> 내용 </A>

  44. <A> 태그로 하이퍼링크 설정하기 –하이퍼링크 설정 • 웹 브라우저 안에서 보이는 파일들 • htm, html, gif, jpg, txt • 플러그인 프로그램이 자동 연결되는 파일들 • wav, mid, mp3, asf, avi, swf, wmv • 플러그인 프로그램이 자동 연결되지 않아 해당 프로그램을 설치해야만 실행 가능한 파일들 • ra, rm, ram, mov • 실행되지 않고 저장되는 파일들 • exe, zip, hwp, doc, xls, ppt, psd [하이퍼링크 가능한 파일의 종류]

  45. 속성 설명 기본 값 text 일반 문자색 black link 한 번도 방문하지 않은 링크 문자색 blue vlink 한 번이라도 방문한 링크 문자색 purple alink 누르는 순간에 변하는 링크 문자색 red <A> 태그로 하이퍼링크 설정하기 –하이퍼링크 설정 [<body> 태그의 문자색 관련 속성]

  46. <A> 태그로 하이퍼링크 설정하기 –절대경로와 상대경로 • 절대경로 <a href=”http://www.hanbitbook.co.kr/book_search.htm”>한빛 미디어 도서검색</a> • 상대경로 • 작업 폴더 <a href=”samp.htm”>예제</a> • 상위 폴더 <a href=”../../samp.htm”>예제</a> • 하위 폴더 <a href=”sample/chap1/samp.htm”>예제</a>

  47. 인터넷 이해와 활용 ■ <A> 태그 사용 예 하이퍼링크 연습 문서입니다. <a href="2.htm"> HTML </a>이란 무엇인가? 기존 창 하이퍼링크연습문서입니다. <a href="2.htm“ target=“_blank”> HTML </a>이란 무엇인가? 새 창

  48. 인터넷 이해와 활용 ■ <A> 태그 TITLE 속성 <a href="http://www.hs.ac.kr" title=“hs 홈페이지로"> hs가기 </a>

  49. 인터넷 이해와 활용 ■ 책갈피 사용하기 NAME 속성을 이용하여 문서 내의 특정 부분으로의 연결 설정 대상 문서에 책갈피 위치 설정 후 하이퍼링크 지정 시 책갈피이름을 지정 책갈피 위치 설정 : <A NAME=“name”>..</A> 책갈피 위치로 링크 생성 :<A HREF=“문서#name”> .. </A> 동일 문서 내에서는 문서 이름 생략 가능

  50. <a href=“NAME”> 해당문자열 </a> 클릭하면 문서 내의 WWW로 이동 <a name=“NAME”> 해당문자열 </a> • 인터넷 이해와 활용 ■ NAME 속성

More Related