1.03k likes | 1.34k Views
홈페이지. 홈페이지 관련 프로그램들 텍스트 편집기 HTML 태그 이용 웹저작도구 나모에디터 , 드림위버 그래픽 프로그램 이미지제작 ( 포토샵 , 페인트샵 프로 ) 애니메이션 그림 파일 작성 GIF Construction Set, WWW GIF Animator, 플래시 기타 워드프로세서 웹문서 변환 기능. 웹 프로그래밍 (1/3). 웹 프로그래밍 SGML (Standard Generalized Markup Language) 문서의 마크업 언어나 태그 셋을 어떻게 정의할 것인가에 대한 표준
E N D
홈페이지 • 홈페이지 관련 프로그램들 • 텍스트 편집기 • HTML 태그 이용 • 웹저작도구 • 나모에디터, 드림위버 • 그래픽 프로그램 • 이미지제작 (포토샵, 페인트샵 프로) • 애니메이션 그림 파일 작성 • GIF Construction Set, WWW GIF Animator, 플래시 • 기타 • 워드프로세서 • 웹문서 변환 기능
웹 프로그래밍 (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로 가기 위한 가교 역할
웹 프로그래밍 (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 페이지 제작기술 • 안정성이 보장되어 있지 않다는 문제점이 있지만 급속도로 발전
웹 프로그래밍 (3/3) • Web3D • 웹 페이지 상에서 물체를 돌려보거나, 현실과 같이 공간을 이동할 수 있게 해주는 기술 • VRML (Virtual Reality Modeling Language) • 인터넷에 3차원 공간을 표현하는 그래픽스 데이터의 기술 언어 • X3D (Extensible 3D) • 차세대 VRML 버전 (XML + VRML97) • 다른 컨텐츠와의 호환성이 높으며, 코드의 모듈화를 통하여 확장 가능하도록 정의 • www.web3d.org
인터넷의 이해와 활용 웹 정책 기획 설계 구현 계획수립 시험 및 검증 운영 및 유지보수 환경 및 시스템 분석 스토리보드 작성 사용 편의성 검사 페이지 구성 시스템 속도 검사 화면 구성 멀티미디어데이터 생성 보안 정책 코드 백업 정책 설치 장애 관리
HTML 문서의 특징 • 공백, 줄바꿈 인식 못함 • 텍스트 문서의 형태- 확장명 : .html, .htm • 인터넷 문서로 사용하기에 적합 • 컴퓨터 기종에 무관 • 파일크기 작음 • 대소문자를 구분하지 않음
HTML • HTML (HyperText MarkUp Language) • 하이퍼텍스트(Hypertext) 문서 • 1989) CERN에 있던 팀 버너스리에 의해 개발 • HTML의 구조 • 헤더(Header)와 본문(Body)으로 구분 • 태그(tag)를 사용 • 태그: 특별한 표시를 할 수 있는 표시자 • <HTML> // HTML문서 시작 • <HEAD> // 헤더의 시작 • … 문성의 일반적인 정보나 제목기술 … • </HEAD> // 헤더의 끝 • <BODY> // 본문의 시작 • … 본문의 내용 … • </BODY> // 본문의 끝 • </HTML> // HTML 문서의 끝
머리부 몸체부 HTML 기본 구조
태그의 구성 요소 • 복합 태그 <태그명> 내용 </태그명> • 속성을 가지는 태그 <태그명 속성명=값> 내용 </태그명> • 단독 태그 <태그명> • 사용 예 여러분을 <font size=5 color=blue>진심으로</font> 환영합니다!
태그의 사용규칙 • <태그명></태그명>과 같이 여는 태그와 닫는 태그가 쌍으로 사용된다. • 닫을 때는 태그명으로만 닫는다. • 태그명과 속성명, 속성명과 속성명 사이는 한 칸씩 띄운다. 그 외 공백을 두어서는 안 된다. • 속성명과 값은 = 부호를 사용하여 표시한다. • 값이 두 단어 이상일 경우는 “”로 묶어서 표시한다. • 속성이 있는 태그가 있고 없는 태그가 있다. • 속성을 반드시 하나 이상 사용해야 하는 태그도 있고 생략해도 되는 태그가 있다. • 여는 태그만 독립적으로 존재하는 태그도 있다. • 태그를 중첩해서 사용할 경우 먼저 열어준 태그를 나중에 닫아준다.
태그의 사용규칙 ■ HTML 태그의 구조 사용 주의 사항 중첩 사용 시 마감 태그의 대응 위치 <tag1> <tag2> . . . <tag1> <tag2> (x) <tag1> <tag2> . . . <tag2> <tag1> (o)
인터넷 이해와 활용 ■ HTML 문서의 예 <HTML> <head> <title>테스트 문서</title> </head> <body> 기본 구조 연습 문서 </body> </HTML>
인터넷 이해와 활용 ■ 문자 관련 태그 글자 모양: 논리적 형태 <cite> : 인용문 <code> : 소스코드 <dfn> : 정의 <em> : 강조 <strong> : 강한 강조 <samp> : 예제 <var> : 변수
인터넷 이해와 활용 ■ 문자 관련 태그 글자 모양: 물리적 형태 <b> ... </b> <I> ... </I> <u> ... </u> <tt> ... </tt> <sub> ... </sub> <sup> ... </sup> <big> ... </big> <small> ... </small> <strike> … </strike> <blink> ... </blink>
인터넷 이해와 활용 ■ <INS>, <DEL> 태그 삽입, 삭제 텍스트 표시 <INS> : 삽입 텍스트 표시, 밑줄이 함께 표시 <DEL> : 삭제 텍스트표시, 취소선이 함께 표시
인터넷 이해와 활용 ■ <P> 태그 문단 구분 줄을 바꿈과 동시에 한 줄 띄게 되는 효과 속성 align=“{ left|center|right }”
인터넷 이해와 활용 ■ <BR> 태그 • 줄바꿈 태그 • 단락구분은 하지 않음 • 종료태그 없음
인터넷 이해와 활용 ■ <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>
인터넷 이해와 활용 ■ 색상 코드표 RGB : 각각을 8비트를 이용하여 16진수로 표현 R(red) 2자리, G(green) 2자리, B(blue) 2자리 총 6자리로 구성된다 11111111 00000000 00000000
칼라 영문명 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 • 인터넷 이해와 활용 ■ 색상 표현 단어
인터넷 이해와 활용 ■ <FONT> 태그 사용 예
인터넷 이해와 활용 ■ <Hn> 태그 문서 내의 단계별 제목 문서에 논리적 의미 부여 <Hn> : n = 1 ~ 6 (n=1이 가장 큰 제목 ) 자동 줄바꿈 속성 ALIGN=“{left|center|right }” <H1> … </H1> <H3 ALIGN=“center”> … </H3>
인터넷 이해와 활용 ■ <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>
인터넷 이해와 활용 ■ <CENTER> 태그 태그 사이의 내용을 가운데 정렬
인터넷 이해와 활용 ■ <HR> 태그 가로선 긋기 속성 ALIGN=“{left|center|right }” SIZE=“n” : 선의 두께(pixel), 기본 값은 2 WIDTH=“n” : 선의 폭(pixel,%) NOSHADE : 음영효과 사용 안 함 COLOR=“color” : 선의 색상 <hr align=“ ” size=“n” width=“n” color=“color“ [noshade]>
인터넷 이해와 활용 ■ <HR> 태그 사용 예
인터넷 이해와 활용 ■ <ADDRESS> 태그와 주석문 <ADDRESS> 문서 수정일, 주소, 저자 정보 주석문 <!-- .... -->
인터넷 이해와 활용 ■ <DIV> 태그 특정부분과 구역으로 구분 논리적 블록요소 주로 스타일 시트와 함께 사용 앞뒤 줄바꿈 속성 ALIGN=“{ left|center|right }”
인터넷 이해와 활용 ■ <MARQUEE> 태그 텍스트에 움직임 효과를 부여 속성 BEHAVIOR=”{alternate|scroll|slide}” 텍스트의 움직임 형태 DIRECTION=”{down|up|left|right}” 텍스트의 움직임 방향 LOOP=”{n|infinite}” 반복횟수 SCROLLAMOUNT=”n” 스크롤되는 픽셀 수 SCROLLDELAY=”n” 메시지출력 시간간격(msec) BGCOLOR=“color” : 스크롤되는 공간의 배경색 WIDTH, HEIGHT : 스크롤되는 공간의 크기 HSPACE, VSPACE : 스크롤되는 공간의 좌우, 상하여백
예제) 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>
인터넷 이해와 활용 ■ <PRE> 태그 입력한 형태 그대로 출력 공백, 줄바꿈 인식 내부의 태그 인식
인터넷 이해와 활용 ■ <XMP> 태그 입력한 형태 그대로 출력 공백, 줄바꿈 인식 내부의 태그 무시
인터넷 이해와 활용 ■ Character Entity HTML 내에서의 특수 문자 표시 방법
인터넷 이해와 활용 ■ Character Entity 사용 예
인터넷 이해와 활용 ■ 순서 리스트 순서 글머리 번호에 순서 번호가 있는 리스트 <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>
인터넷 이해와 활용 ■ 순서 리스트 사용 예 <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>
인터넷 이해와 활용 ■ 무순서 리스트 순서 글머리 번호에 순서 번호가 없는 리스트 <UL> : 리스트의 시작과 종료(Unordered List) 속성 TYPE=“{ disc|circle|square}” : 글머리의 모양 <LI> : 리스트 항목을 기술 속성 TYPE=“{ disc|circle|square}” : 글머리의 모양 <UL> <LI> … </LI> <LI> … </LI> </UL>
인터넷 이해와 활용 ■ 무순서 리스트 사용 예 <ul type=square> <li>서울 <li>경기 <li>제주 </ul> <ul> <li>서울 <li>경기 <li>제주 </ul>
인터넷 이해와 활용 ■ 정의 리스트 <DL> : 정의 리스트의 시작과 종료 <DT> : 정의 제목 <DD> : 설명, 항목, DT에 대해 들여쓰기 효과 <DL compact>
인터넷 이해와 활용 ■ 정의 리스트 사용 예 <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>
인터넷 이해와 활용 ■ 중첩 리스트 시작 태그, 마감 태그 사용 주의(대칭) <ol> <li>서울 <ul type=disc> <li>종로 <li>동대문 </ul> <li>경기 <li>제주 </ol>
인터넷 이해와 활용 ■ <A> 태그 Anchor 정의 속성 HREF=“url” : 연결 문서 지정 TARGET : 연결 문서를 출력할 대상 _blank : 새로운 창을 열어서 문서 연결 _top : 현재 창의 최상위에 문서 연결 _parent : 현재 문서 창을 연 문서 창에서 연결 _self : 자기 자신의 창에서 연결 Frame_name : 지정한 프레임에서 연결 TITLE : 링크에 대한 설명을 기술 <A HREF=“연결할 문서” TARGET=“대상”> 내용 </A>
<A> 태그로 하이퍼링크 설정하기 –하이퍼링크 설정 • 웹 브라우저 안에서 보이는 파일들 • htm, html, gif, jpg, txt • 플러그인 프로그램이 자동 연결되는 파일들 • wav, mid, mp3, asf, avi, swf, wmv • 플러그인 프로그램이 자동 연결되지 않아 해당 프로그램을 설치해야만 실행 가능한 파일들 • ra, rm, ram, mov • 실행되지 않고 저장되는 파일들 • exe, zip, hwp, doc, xls, ppt, psd [하이퍼링크 가능한 파일의 종류]
속성 설명 기본 값 text 일반 문자색 black link 한 번도 방문하지 않은 링크 문자색 blue vlink 한 번이라도 방문한 링크 문자색 purple alink 누르는 순간에 변하는 링크 문자색 red <A> 태그로 하이퍼링크 설정하기 –하이퍼링크 설정 [<body> 태그의 문자색 관련 속성]
<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>
인터넷 이해와 활용 ■ <A> 태그 사용 예 하이퍼링크 연습 문서입니다. <a href="2.htm"> HTML </a>이란 무엇인가? 기존 창 하이퍼링크연습문서입니다. <a href="2.htm“ target=“_blank”> HTML </a>이란 무엇인가? 새 창
인터넷 이해와 활용 ■ <A> 태그 TITLE 속성 <a href="http://www.hs.ac.kr" title=“hs 홈페이지로"> hs가기 </a>
인터넷 이해와 활용 ■ 책갈피 사용하기 NAME 속성을 이용하여 문서 내의 특정 부분으로의 연결 설정 대상 문서에 책갈피 위치 설정 후 하이퍼링크 지정 시 책갈피이름을 지정 책갈피 위치 설정 : <A NAME=“name”>..</A> 책갈피 위치로 링크 생성 :<A HREF=“문서#name”> .. </A> 동일 문서 내에서는 문서 이름 생략 가능
<a href=“NAME”> 해당문자열 </a> 클릭하면 문서 내의 WWW로 이동 <a name=“NAME”> 해당문자열 </a> • 인터넷 이해와 활용 ■ NAME 속성