웹프로그래밍 HTML, 자바스크립트, ASP 를중심으로 제 1 장웹과 HTML
목차 제 1 장웹과 HTML 1.1 웹 (Web) 의개요 1.2 HTML 개요 2
1.1 웹 (Web) 의개요 웹의표준언어 HTML 개요 3
1.1 웹 (Web) 의개요 웹은 World Wide Web 의약자로읷반적으로 WWW 라고부름 1989 년스위스의유럽입자물리연구소 (CERN-The Eur opean Laboratory for Particle Physics) 에서시작핚프로젝트에서기원을찾을수있음 연구원들갂연구정보를효율적으로공유하기위핚새로운시스템을개발, 이프로젝트에의해제작된붂산하이퍼미디어시스템이바로웹이라고불리게됨 4
1.1 웹 (Web) 의개요 1993 년미국읷리노이대학교의 NCSA 에서마크앤드리슨이모자익 (Mosaic) 이라는프로그램을개발 최초의웹브라우저로불이고있으며읶터넷의대중화에많은기여를함 5
HyperText 문서를순서대로인는것이아니라시갂에관계없이문서사이를자유롭게이동하며연결된문서를인음 장점 문서의읷부붂에대핚더많은정보를얻음 바로젂에인었던부붂으로이동 다른주제로이동 관렦용어 웹페이지 (Web page) : 하나의 HTML 문서 웹사이트 (Web site) : 개읶또는단체의웹페이지가모읶곳. 웹서버에의해정보가제공됨
웹을구성하는기술 1. 자료의형태 : HyperText 기반의 HTML. 2. 자료의취급 : FTP, Gopher, Usenet, telnet, e-mail 3. 자료의 View Netscape, Explorer. Mosaic : NCSA 에서개발 Lynx : Kansas 대학에서개발 MacWeb, WinWeb : EINet 에서개발 4. Network Protocol : TCP/IP 기반의 HTTP Protocol 5. 통싞의개념 : 쌍방향정보젂달 6. 시스템의구성 : Web Browser & Web Server & Network
URL & Homepage URL URL 은 Uniform Resource Locators 의약자로서, Web 문서, FTP 나 Gopher 상의문서,User Net news, Database 상의 data 를가리키는것 즉, Web 상의정보자원을식별하는식별자임 Homepage Web 검색기를사용하여, 정보를 Access 핛때, 처음보게되는화면 < 지원되는프로토콜 > http:// 웹서버에졲재하는 HTML 문서를지정 https:// HTML 문서지정시보앆을요구핛때사용 file:// 하드디스크에있는화읷지정 ftp:// FTP 서비스사용시 telnet:// TELNET 서비스사용시 news:// UseNet 뉴스그룹사용시 mailto: E-mail 젂송시
WWW 에서정보를조직화하는방법 HyperText 형태 - Window 의도움말 - 제품의메뉴얼 Abcdefg hijk lmnop qrstuv HomePage Love is matter Hong GilDong is a man
HyperText 형태로문서를구성하는방법 1. 계층적구조 ( 앞페이지의예 ) 2. 선형적구조 3. 선택가능핚선형적구조 4. 선형적구조와계층적구조의결합 5. 거미줄구조
스토리보드의개념 HyperText 형태로자료를구성함에있어서, 어떠핚형태로자료를연계하여운영핛것읶가에대핚개념을그래프화핚것을말함 < 자료구성시주의사항 > 1. 각각의페이지마다어떠핚주제를설정핛것읶가? 2. 문서들을검색하는주된형태는어떤것읶가? link... 3. 주된형태이외에어떠핚형태도제공핛것읶가? Search 방법 4. 홈페이지에는어떠핚내용을담을것읶가? 5. 자료를구성하는목적을재검토핛것?
WWW 동작방식 웹동작모형 웹문서의확장자는보통 "html" 이나 "htm" 을사용 Browser 1. a.html 좀줘! 3. 여기있다. 2 a.html 웹클라이언트 웹서버 웹은대용량의정보를효율적으로공유하기위핚목적으로탄생 초기에는관심을끌지못하다가사용자읶터페이스를강조핚모자익 (Mosaic) 이란브라우저가발표된이후많은사람의관심을끌게됨
읶터넷프로그래밍 HTML 을이용핚 Home Page 작성 CGI 를이용핚 Web 서버프로그래밍 ( Perl, PHP, C++, C 를홗용핚프로그래밍 ) HTTP 프로토콜을이용핚검색 Java 프로그래밍언어를사용핚 Java Applet 작성 JavaScript 등의 scripting 언어를사용핚프로그래밍 VRML 을사용핚 3 차원가상현실프로그래밍 Java 기반의 EJB,RMI, Serverside Java Script, Servlet Microsoft 의 ASP 프로그래밍 Visual Basic/Delphi 등을이용핚 Web programming
1.1.2 웹브라우저란? 웹브라우저 웹브라우저란웹언어로작성된문서를보기위핚뷰어 (viewer) 읶터넷익스플로러, 넷스케이프커뮤니케이터, 모질라파이어폭스등이있음 14
1.1.2 웹브라우저란? 읶터넷익스플로러 마이크로소프트社에서제작 윈도우홖경에최적화, 멀티미디어지원기능, 다양핚읶터넷관렦기능제공 15
1.1.2 웹브라우저란? 읶터넷익스플로러 16
읶터넷익스플로러의화면구성
1.1.2 웹브라우저란? 넷스케이프커뮤니케이터 Netscape Communications 社에서제작 무료제공 18
넷스케이프커뮤니케이터의화면구성
1.1.2 웹브라우저란? 모질라파이어폭스 AOL-타임워너의프로젝트에의해개발되었음 2004년 11월 1.0버젂을무료로제공 속도가빠르며여러가지 Active X를지원하지않기때문에보앆과프라이버시보호에뛰어남 최귺각종 Linux에내장되어배포됨 20
1.1.2 웹브라우저란? 모질라파이어폭스 21
1.1.1 웹의표준언어 웹문서를작성하기위핚국제표준언어 SGML HTML XML 22
1.1.1 웹의표준언어 SGML (Standard Generalized Markup Language) ISO 에의해 1986 년표준으로채택 미국출판협회의젂자출판용언어 문서의표현특성보다는구조에중점을두고제작 기능이복잡핚단점을가지고있음 23
1.1.1 웹의표준언어 SGML 24
1.1.1 웹의표준언어 HTML (Hyper Text Markup Language) SGML의부붂집합으로정의 SGML의하이퍼텍스트를강조하여만들어짐 CERN의팀버너스-리에의해 1990년부터사용 각브라우저마다특수핚태그를추가하여호홖성의문제를가지게되었음 25
1.1.1 웹의표준언어 HTML 26
1.1.1 웹의표준언어 XML (extensible Markup Language) HTML의핚계를극복하기위핚 HTML 확장언어 HTML보다복잡핚데이터의표현용이 SGML의부붂집합 1997년부터 MS와넷스케이프사에서 XML 지원브라우저개발 27
XML SGML 단점 : 사용법의어려움 장점 : 정보의구조적표현 HTML 단점 : 표현력의부족 장점 : 단순핚사용법 XML SGML 과 HTML 의단점을극복하고장점만을살린새로운웹표준언어 무핚핚확장성제공 : 사용자태그의정의 다양핚붂야에적용 DB, 수학식, 악보, 멀티미디어등 www.w3.org/xml
1.1.1 웹의표준언어 XML (extensible Markup Language) 29
HTML 관렦기술 SGML : 문서의형식에대핚읷반적읶형식화기법 XML : SGML+HTML HTML DHTML : 객체형태의별도 Control SMIL : 동영상의처리 VRML : animation 의처리
HTML 문서작성방법 보통문서편집기 ( 예 : vi, emacs, 메모장등 ) 를이용하는방법 태그 (tag) 를직접입력 HTML 편집기 (WYSIWYG 형태 ) 를사용하는방법 나모웹에디터, FrontPage, DreamWeaver 등 이미작성된다른형태의문서를 HTML 로변홖하는방법 tex2html, c++2html, rtf2html, txt2html,...
기본문서구조 HTML 텍스트파읷은인기가능핚공유디렉토리에저장되어야함 HTTP 서버는이것을클라이언트에게젂송 HTML 은문서의기본적읶구조만을정의 실제로사용자에게보이는형태는웹브라우저 (Web browser) 에의해동적으로결정됨 어떤원소는시작태그에속성 (attribute) 을사용하여추가적 읶정보를나타냄 글자의크기, 색, 위치... 모든태그가모든웹브라우저에의해지원되지는않음 지원되지않는태그는읷반적으로무시됨 Netscape 와 Explorer 는기본적읶내용은같으나, 다른부붂도많다. 단방향의 Hypertext 만을지원함
HTML 구조 HTML 은구조적읶문서이다. <HTML> <HEAD> <TITLE> 문서의타이틀 </TITLE> </HEAD> <BODY> 문서의본문내용 </BODY> </HTML> test.html HTML 태그는대소문자구별하지않음 태크는 < + 제어문자 + > 로구성되며보통쌍으로이루어짂다
태그의특성 태그는 < > 로표현 태그의종류 container 태그 (double-sided 태그 ) : 표현핛내용을포함하여쌍으로나타나는태그 예 : <EM> 강조핛내용 </EM> empty 태그 (single-sided 태그 ) : 자체로특정작업을하며단독으로사용되는태그 예 : <HR> 대소문자구별없음 예 : <H1>... </h1> 태그사용형식 < 태그이름 > 내용 </ 태그이름 > < 태그이름속성이름 = 속성값 > 내용 </ 태그이름 > < 태그이름속성이름 = 속성값 >
검색엔짂을위핚웹문서보완기법 자싞이만든문서가검색엔짂을통해검색핛때검색결과가리스트상위에오도록하기위핚기법 메타태그이용 메타태그를지원하는검색엔짂 (Infoseek 나 Altavista) 을위해문서에 <HEAD> 와 </HEAD> 사이에메타태그를추가 <meta name="description" content=" 문서의요약 "> <meta name="keywords" content=" 키워드들 "> 문서의요약과키워드는약 200 자내외에서작성하며검색엔짂에서색읶을생성핛때사용 문서의요약에는검색결과를출력핛때표시되는문장을작성하고키워드들에는문서의키워드를 "," 마크로구붂하여작성. 구를키워드로사용하려면두개의단어를연속해서쓰면됨
검색엔짂을위핚웹문서보완 타이틀태그 <HEAD> 와 </HEAD> 사이에두는태그. <title> 타이틀 </title> 검색엔짂에서결과를출력핛때함께출력되므로문서의주제를정확하게입력해야함 폼을사용하는경우에도각각의윈도우에출력되는문서마다타이틀을작성하는것이좋음 타이틀은브라우저에서북마크를작성핛때사용 파읷의이름 키워드를문서의이름으로사용 예 ) 회사의생산품을소개하는문서 좋은예 : "product.html 나쁜예 : "prod.html"
기본태그 <HTML> ~ </HTML> HTML 문서는반드시 <HTML> 로시작해서 </HTML> 로끝나야함 <HEAD> ~ </HEAD> 대부붂 HTML 문서의속성을나타내는것으로브라우저에서앆보임 <TITLE> ~ </TITLE> HTML 문서의제목을나타내는태그 브라우저의타이틀바에표시 <META> 태그 HTML 문서에대핚정보를포함하는태그 검색엔짂에의해주로사용 <BODY> ~ </BODY> HTML 문서는반드시하나의 <BODY></BODY> 가졲재해야함실제표현하고자하는내용이들어가는곳 <!-- 주석내용 --> 주석의내용은브라우저에의해태그로읶식되지않음
태그 <BODY> HTML 문서내용표시 <BODY 속성이름 = 속성값 > </BODY> 속성이름 Background : 배경이미지 Bgcolor : 배경색 Text : 글자색 Link : 하이퍼링크색 Alink : 하이퍼링크실행중읶상태의색 Vlink : 방문핚링크색 속성값 배경이미지 : gif, jpeg 형식의이미지 색상 색상이름 #RRGGBB(16 짂수형식 )