제 23 장 WWW 23.1 하이퍼텍스트와 하이퍼미디어 23.2 브라우저 구조 23.3 고정 문서 23.4 HTML

Slides:



Advertisements
Similar presentations
Term Project Hints Topics Keep-alive CGI Multi-thread Multi-process Event-based.
Advertisements

Lynx, Opera, and Other Browsers 인공지능연구실. Contents Lynx (Text 기반의 Browser) 역사 및 특징 사용법 및 기능 Opera (Small Browser) 역사 및 특징 사용법 및 기능 과 뉴스 그룹 사용법 Other.
4 장 웹 브라우저의 사용 World Wide Web 의 개요  1990 년 말 스위스의 CERN 연구센터에서 많은 사용자가 쉽게 사용할 수 있도록 그래픽을 제공하는 환경을 개발  WWW, Web, World Wide Web, W3 등의 호칭  Hypertext.
Chapter 02. 웹에 대한 이해. Chapter 02. 웹에 대한 이해 웹의 역사 HTTP 웹 애플리케이션 기술.
제 09 장 인터넷과 월드와이드웹 한국대학교 홍길동 교수.
* 07/16/96 처음으로 배우는 C 프로그래밍 제1부 기초 제1장 시작하기 *.
11장. 프로토콜 핸들러 AI &HC I LAB 김 성 현.
Introduction to Servlets
Introduction to Django
웹 페이지.
HTML과 CGI 프로그래밍 PHP 웹 프로그래밍 (PHP Web Programming) 문양세
정보활용 능력과정 경일대학교 컴퓨터공학과 김 현성
웹 해킹 기초와 실습.
어서와 Java는 처음이지! 제2장 자바 프로그래밍 기초.
Internet Computing KUT Youn-Hee Han
12 커스텀 액션.
컴퓨터 소프트웨어.
Chapter 32 Analyzing Web Traffic
2 서블릿의 기초.
1. JSP(Java Server Pages) 소개
9 표준 액션.
9장. 요청 흐름제어와 모듈화 #1: <jsp:forward> 액션태그 사용
5 익셉션 처리.
DB와 WEB 연동(1) [2-Tier] Java Applet 이용
Internet Computing KUT Youn-Hee Han
2주 실습강의 Java의 기본문법(1) 인공지능연구실.
1장. JSP 및 Servlet을 활용한 동적 웹 프로그래밍 소개 제1장.
Web Servers (IIS & Apache)
1. JSP(Java Server Pages) 소개
이 름: 정홍도 (과장) 팀 명: 개발사업팀 일 자:
10장 객체-지향 프로그래밍 II ©창병모.
4 쿠키와 세션.
1강 01장. 웹과 자바.
27장 HTTP와 WWW 27.1 HTTP(Hypertext Transfer Protocol)
HTML5 웹 프로그래밍 입문(교수용) 2장.HTML5 문서의 기본.
중 간 고 사 (웹프로그래밍)
Embeded 기초 다지기 2015년 10월 26일 intern Sally
2장 자바환경과 자바 프로그램 2.1 자바 개발 환경 2.2 자바 통합환경 2.3 자바 응용 프로그램과 애플릿 프로그램
강의 보조자료 & Homework #2 - 로그인과 이미지 카운터 만들기 -
명품 JAVA Programming 제 15 장 애플릿과 멀티미디어.
Lesson 10. 애플릿과 그래픽.
웹서버와 설치에 필요한 것 WWW ( world wide web ) TCP/IP 프로토콜을 이용하는 클라이언트/서버 환경
HTML5+CSS3 실무 테크닉 김은기 저.
12 데이터베이스 사용하기.
Network Programming(1)
Cookie 와 Session.
Html(front end) & jsp(back end)
1강_web과 html Web이란? HTML이란? CSS란? Lecturer Kim Myoung-Ho Nickname 블스
Network Security WireShark를 활용한 프로토콜 분석 II.
Cafe24 쇼핑몰 구축방법 전략연구소 교육팀 권계영 대리.
1강. 웹프로그래밍 웹프로그래밍이란? JAVA웹 웹프로그램의 동작 필요한 학습 Lecturer Kim Myoung-Ho
Web Vulnerabilities 정보 보호 2008/05/31 Getroot.
DataScience Lab. 박사과정 김희찬 (월)
강의 소개, 자료구조의 개념, SW 개발과 자료구조
CGI (Common Gateway Interface)
JSP문법 JSP 기본 구조를 이해한다. 지시어, 스크립트릿 JSP 액션 태그 사용법을 익힌다. 한빛미디어(주)
CGI (Common Gateway Interface)
Cyber Shopping Mall 구축 - CD New - 안소연,박지윤,박종봉,정영은.
myfood.com 상명대 맛집 홈페이지 구축 제안서
컴퓨터 개론 √ 원리를 알면 IT가 맛있다 쉽게 배우는 컴퓨터 기본 원리 한빛미디어 교재출판부.
자바 5.0 프로그래밍.
Operating System Multiple Access Chatting Program using Multithread
Internet Computing KUT Youn-Hee Han
이번 시간에는... 지난 시간까지 제 1장을 통해 모바일의 정의와 개념, 시작과 발전, 기술과 서비스 및 그 전략을 살펴봄으로써 모바일 산업에 대한 전반적인 이해를 쌓았습니다. 이번시간 부터는 제 2장 모바일 기술을 통해, 무선 인터넷을 위한 컨텐츠 제작 기술, 네트워크.
웹 스크래핑.
웹 프로그래밍 기술 요약 Yang-Sae Moon Department of Computer Science
C.
Java의 정석 제 7 장 객체지향개념 II-3 Java 정석 남궁성 강의
Chapter2 : 자바환경과 자바 프로그램 2.1 자바 개발 환경 2.2 자바 통합개발환경(IDE)
Chapter8 : 인터페이스와 패키지 8.1 인터페이스 개요와 인터페이스 정의 8.2 인터페이스의 사용
Presentation transcript:

제 23 장 WWW 23.1 하이퍼텍스트와 하이퍼미디어 23.2 브라우저 구조 23.3 고정 문서 23.4 HTML 23.1 하이퍼텍스트와 하이퍼미디어 23.2 브라우저 구조 23.3 고정 문서 23.4 HTML 23.5 동적문서 23.6 CGI 23.7 액티브 문서 23.8 자바 23.9 요약

23. WWW 인터넷에 의해 제공된다 CERN 유연성, 이식성, 사용자 편의성 과학적 연구에 필요한 분산되어있는 자원들을 처리할 수 있는 시스템 창조를 위해 시작 European Laboratory for Particle Physics European Lab for Network Collision

23. WWW (계속) 브라우저를 사용하는 클라이언트가 서버를 사용하여 서비스 받음 제공되는 서비스는 웹 사이트에 분산 Site A Site B Site C Site F Site G Site E Site D 브라우저를 사용하는 클라이언트가 서버를 사용하여 서비스 받음 제공되는 서비스는 웹 사이트에 분산

23.1 하이퍼 텍스트와 하이퍼 미디어 A computer is a digital electronic machine made of a CPU, a control unit, and memory Computer It is random access memory. RAM It is used to do mathematical and logical calculation CPU It is part of a computer that controls the flow of data Control unit It can be RAM or ROM. It is used in a computer to store information. Memory It is read-only memory. ROM

23.2 브라우저 구조 … 브라우저 제어기, 클라이언트 프로그램, 해석기 Controller HTML Java HTTP FTP Browser HTML Java Controller HTTP FTP TELNET SMTP … 브라우저 제어기, 클라이언트 프로그램, 해석기

23.2 브라우저 구조(계속) WWW에서의 문서 Web document Static Dynamic Active

23.3 고정 문서 Request Web document Client Server a. Request Web document b. Response

The text to be boldfaced 23.4 HTML HTML (HyperText Markup Language) Beginning of boldface The text to be boldfaced End of boldface <B> this is the text that must be boldfaced. </B> <B> This is the test to be boldfaces. </B> This is the test to be boldfaces. Browser

23.4 HTML(계속) Web page 구조 Header Body Web page의 첫번째 부분 표제(title)와 browser가 사용할 다른 매개 변수들을 포함 Body Page의 실제 내용을 포함 Tag를 포함하여 문서를 표현한다.

23.4 HTML(계속) 태그 부등호 (< , >)로 둘러 싸여 보통 쌍으로 사용한다.

23.4 HTML(계속) 공통태그 Beginning Tag Ending Tag Meaning Skeletal Tags Defines an HTML document <HEAD> </HEAD> Defines the head of the document <BODY> </BODY> Defines the body of the document Title and Header Tags <TITLE> </TITLE> Defines the tiltle of th document <Hi> </Hi> Defines different headers(i is and integer)

23.4 HTML(계속) 공통태그 Beginning Tag Ending Tag Meaning Text Formatting Tags <B> </B> Boldface <I> </I> Italic <U> </U> Underlined <SUB> < /SUB > Subscript <SUP> </SUP> Superscript

23.4 HTML(계속) 공통태그 Beginning Tag Ending Tag Meaning Data Flow Tags <CENTER> </CENTER> Centered <BR> </BR> Line break List Tags <OL> < /OL > Ordered list <UL> </UL> Unordered list <LI> </LI> An item in a list

23.4 HTML(계속) 공통태그 Beginning Tag Ending Tag Meaning Image Tags <IMG> Defines an image Hyperlink Tags <A> </A> Defines an address(hyperlink) Executable contents <APPLET> < /APPLET > The document is an applet

23.4 HTML(계속) 예제 1 <HTML> <HEAD> <TITLE> First Sample Document </TITLE> </HEAD> <BODY> The body of the first sample program ........................................................... </BODY> </HTML>

23.4 HTML(계속) 예제 2 <HTML> <HEAD> <TITLE> Second Sample Document </TITLE> </HEAD> <BODY> <CENTER> <H1><B> ATTENTION </B></H1> </CENTER> You can get a copy of this document by: <UL> <LI> Writing to the publisher <LI> Ordering on-line <LI> Ordering through a bookstore </UL> </BODY> </HTML>

23.4 HTML(계속) 예제 3 <HTML> <HEAD> <TITLE> Third Sample Document </TITLE> </HEAD> <BODY> This is the picture of a book: <IMG SRC="Pictures/book1.gif" ALIGN=MIDDLE> </BODY> </HTML>

23.4 HTML(계속) 예제 4 <HTML> <HEAD> <TITLE> Fourth Sample Document </TITLE> </HEAD> <BODY> This is a wonderful product that can save you money and time. To get information about the producer, click on <A HREF=”http://www.phony.producer”> Producer </A> </BODY> </HTML>

23.5 동적문서 동적문서 동적문서 처리과정 미리 정의된 형식으로 존재하지 않음 브라우저가 요청할 때마다 웹 서버에 의해 생성 서버는 URL이 동적문서를 정의하고 있는지 알아내기 위해 검사한다. 만일 URL이 동적 문서를 정의하고 있다면, 서버는 프로그램을 수행 시킨다. 서버는 프로그램의 출력을 클라이언트(브라우저)로 송신한다.

23.5 동적문서

23.6 CGI CGI(Common Gateway Interface) 동적 문서를 생성하고 처리하는 기술 C, C++, Bouren Shell, Korn Shell, C Shell, Tcl, Perl Common Gateway Interface 공통적으로 정의 되는 규칙의 집합을 정의 다른 자원을 엑세스하기 위해 사용될 수 있는 게이트웨이라는 것을 의미 임의 CGI 프로그램에서도 사용될 수 있는 미리 정의된 용어, 변수, 함수 등의 집합이 존재한다는 것을 의미

23.6 CGI (계속) CGI 프로그램 환경변수 CGI 언어중 하나로 작성된 코드 일련의 논리를 코딩 브라우저의 질의에 응답하고 자원을 액세스 하기위해 일련의 환경변수를 사용 부모 프로세스로부터 변수들을 상속 받거나, 혹은 브라우저에 의해 제공된 변수

23.6 CGI (계속) 환경변수 Beginning Tag Meaning AUTH_TYPE Authentication method used to validate a user CONTENT_LENGTH The length of data passed to CGI CONTENT_TYPE The MINE type of the query data DOCUMENT_ROOT Directory of the Web document GATEQAY_INTERFACE Version of CGI HTTP_ACCEPT A list of MIME types that client can accept HTTP_FORM E-mail address of the user HTTP_REFERER URL of the document pointed to by the client HTTP_USER_AGENT Name of the client program(browser) PATH_INFO Extra path information given by URL PATH_TRANSLATED Translation of the contents of PATH_INFO

23.6 CGI (계속) 환경변수 Beginning Tag Meaning QUERY_STRING Input information supplied by the user REMOTE_ADDR IP address of the client REMOTE_HOST Name of the client REMOTE_IDENT Username of the user REMOTE_USER Authenticated name of the user SCRIPT_NAME Path of the script being executed SERVER-NAME Server name or IP address SERVER-PORT Port number of the server SERVER-PROTOCOL Name and version of protocol used to receive request SERVER-SOFTWARE Name and version of the protocol used to send response

23.6 CGI (계속) 입력 http://www.deanza/cgi-bin/prog.pl?file1 QUERY_STRING 서버가 URL을 수신하면, 서버는 수행될 프로그램을 액세스 하기위해 사용 클라이언트에서 전송된 입력으로 해석 QUERY_STRING 저장

23.6 CGI (계속) 출력 헤더 CONTENT_LENGTH : 출력 데이터를 바이트로 표시 Text, Http, …. CGI Program Server site Client 2진 data, 상태 코드, 명령어, …. Header 생성 헤더 CONTENT_LENGTH : 출력 데이터를 바이트로 표시 CONTENT_TYPE : 출력 데이터의 종류를 정의 EXPIRES : 날짜와 시간을 표시 LOCATION : 방향 재지정 PRAGMA : 문서의 캐쉬기능 설정 or 해제 STATUS : 요청의 상태 표시

23.6 CGI (계속) 방향 재지정 CGI 프로그램의 출력이 어떤 파일의 주소가 될 경우 프로그램의 출력이 요청을 고정문서로 방향 재지정하는 주소가 될 수 있다. 브라우저는 고정문서를 가져오기 위해 주소(URL)를 사용한다.

23.6 CGI (계속) 예제 1 (Bourne shell) #!/bin/sh # The head of the program echo Content_type: text/plain echo # The body of the program now=’date‘ echo $now exit 0

23.6 CGI (계속) 예제 2 (HTML) #!/bin/sh # The head of the program echo Content_type: text/html echo # The body of the program echo <HTML> echo <HEAD><TITLE> Date and Time </TITLE></HEAD> echo <BODY> now=’date‘ echo <CENTER><B> $now </B></CENTER> echo </BODY> echo </HTML> exit 0

23.6 CGI (계속) 예제 3 (Perl) #!/bin/perl # The head of the program print "Content_type: text/html\n" ; print "\n" ; # The body of the program print "<HTML>\n" ; print "<HEAD><TITLE> Date and Time </TITLE></HEAD>\n" ; print "<BODY>\n" ; $now = ’date‘; print "<CENTER><B> $now </B></CENTER>\n" ; print "</BODY>\n" ; print "</HTML>\n" exit 0

23.6 CGI (계속) 예제 4 (서버정보 생성, 클라이언트에 반환) #!/bin/perl # The head of the program print "Content/type: text/html\n" ; print "\n" ; # The body of the program print "<HTML>\n" ; print "<HEAD><TITLE> Server Information </TITLE></HEAD>\n" ; print "<BODY>\n" ; print " Server name:" , $ENV {’SERVER_NAME’}, "\n" ; print " Port Number:" , $ENV {’SERVER_PORT’}, "\n" ; print "</BODY>\n" ; print "</HTML>\n" ; exit 0

23.6 CGI (계속) 예제 5 (사용자 입력, C) #include <stdio.h> #include <stdlib.h> #include <string.h> int main (void) { char *query = getenv ("QUERY_STRING"); float balance; printf ("Content_type: text/plain\n\n"); if (query == NULL) { printf ("Sorry, you did not supply the name of the account.\n") ; printf ("To access the database, the account name is needed.\n") ; } else { balance = Access_Balance (query) ; printf ("The balance is: %f\n", balance); } return 0 ; }

23.7 액티브 문서 Active document 클라이언트 사이트에서 수행될 프로그램 서버로부터 클라이언트로 2진 형태로 운반 문서가 서버 사이트에서 압축 클라이언트 사이트에서 복원 대역폭과 전송시간을 절감할 수 있다.

23.7 액티브 문서 (계속)

23.7 액티브 문서 (계속) 생성, 컴파일, 실행 서버 클라이언트 소스 코드로된 프로그램 작성, 파일로 저장 프로그램 컴파일, 2진코드 생성 파일로 저장 (경로명은 URL에서 파일 참조로 사용) 파일 프로그램 명령어 : 2진 형태 식별자 : 2진 옵셋 주소에 의해 참조 (변수, 상수, 함수 이름 등) 클라이언트 2진 코드의 복사본 요청 (압축된 형태로 전송) 2진 코드를 실행 가능한 코드로 변환 프로그램 수행 애니메이션이나 사용자와의 상호작용을 포함할 수 있는 결과 출력

23.8 자바 Java 클래스 라이브러리의 조합 객체지향 언어 고급 프로그래밍 언어와 런타임 환경 활동적인 문서를 작성하고 브라우저가 이를 수행 (APPLET, JSP) 브라우저를 사용하지 않는 독립적 프로그램으로도 사용 (application) 애플릿을 생성하는데 사용 객체지향 언어 C++ 과 매우 유사 C++의 복잡성은 없다.( 연산자 오버로드, 다중 상속) 하드웨어에 독립적, 포인터를 사용하지 않음. Type 언어 : 데이터를 사용하기 전에 데이터 유형을 선언 다중처리 언어 : 다중성을 만들도록 복수 쓰레드 사용 가능

23.8 자바 (계속) 클래스와 객체 객체는 캡슐화 된 데이터를 처리하기 위해 메소드를 사용하는 클래스의 인스턴스이다. 데이터와 메소드 개방형(public) 데이터 클래스 정의에 속하지 않는 프로시저나 프로그램에 의해 액세스 될 수 있다. 어떤 프로시저나 프로그램에 의해서도 호출 가능 폐쇄형(private) 데이터 클래스 내에서 정의 된 메소드에 의해서만 액세스 될 수 있다. 클래스 내에서 정의 된 메소드에 의해서만 호출 가능

23.8 자바 (계속) 인스턴스 생성 객체를 사용하기 위해서, 프로세스는 객체의 인스턴스를 생성 인스턴스 프로세스 클래스에서 정의된 데이터의 집합을 캡슐화 프로세스 객체에 캡슐화된 데이터를 처리하기 위해 개방형 메소드 사용 가능

23.8 자바 (계속) 상속 객체의 계층 구조를 정의하여, 한 객체가 다른 객체로부터 데이터와 메소드를 상속 받을 수 있도록 한다. Java 하나의 클래스를 많은 클래스들에 공통된 데이터와 메소드를 포함하는 기초 클래스(base class)로 정의 할 수 있다

23.8 자바 (계속) 패키지 클래스 라이브러리로 하여금 애플릿에서 서로 다른 객체들을 생성하고 사용할 수 있도록 한다. java.lang : 쓰레드와 예외 처리와 같은 메소드를 포함 Java.io : 입출력 동작을 처리 Java.net : 네트워크를 통한 메시지 전송을 처리 Java.util : 공통적 데이터 구조를 처리 (스택, 벡터, 시간, 날짜, 해쉬 테이블 등) Java.applet : 웹 페이지를 취득하고 화면에 나타낼 수 있는 메소드를 포함 Java.awt : 자바 언어를 이식 가능하게 만들도록 설계된 패키지 (Abstract Window Toolkit)

23.8 자바 (계속) 애플릿의 골격 자바로 작성된 동적 문서로, 개방적으로 상속된 클래스의 정의 java.applet 라이브러리에 정의 된 애플릿 클래스로부터 상속 폐쇄형 데이터와 개방형 및 폐쇄형 메소드를 정의 할 수 있다

23.8 자바 (계속) 애플릿의 골격 클라이언트 프로세스는 애플릿의 인스턴스를 생성 브라우저는 폐쇄형 메소드를 호출 데이터를 액세스하기 위해 애플릿에 정의 된 개방형 메소드를 사용

23.8 자바 (계속) 생성 및 컴파일 텍스트 편집기를 사용하여 생성 File name : * . java 자바 컴파일러 바이트 코드 생성 File name : * . class

23.8 자바 (계속) HTML 문서 애플릿을 사용하기 위해선 HTML 문서를 만들어 애플릿의 이름을 <APPLET> 태그 사이에 삽입 태그는 애클릿을 위해 사용될 창의 크기를 결정

23.8 자바 (계속) 예제 1 import java.applet.* ; import java.awt.* ; public class First extends Applet { public void paint (Graphics g) g.drawString ("Hello World", 100, 100 ) ; } Java.awt에서 정의 된 메소드 호출 개방적으로 상속된 클래스 사용 브라우저는 paint를 통해 First의 인스턴스를 액세스 세 개의 매개변수가 drqwstring으로 전달

23.8 자바 (계속) 예제 2 import java.applet.* ; import java.awt.* ; public class Second extends Applet { public void paint (Graphics g) g.drawLine (0, 0, 80, 90 ) ; } 선을 그리도록 한다(시작점 x, y, 끝점 x, y)

23.8 자바 (계속) 예제 3 import java.applet.* ; import java.awt.* ; public class Third extends Applet { public void paint (Graphics g) g.drawRect (30, 30, 80, 20 ) ; g.setColor (Color.black) ; g.fillRect (30, 30, 80, 20) ; } 사각형을 그리도록 한다 (시작점 x, y, 폭, 높이) 사각형을 채우기 위한 메소드 사각형 안에 색칠을 한다

23.8 자바 (계속) 예제 4 import java.applet.* ; import java.awt.* ; public class Fourth extends Applet { public void paint (Graphics g)            { g.drawTriangle (g, 10, 10, 10, 30, 50, 30 ) ;           g.drawTriangle (g, 50, 30, 50, 10, 70, 10) ;  }            private void drawTriangle (Graphics g, int x1, int y1,            int x2, int y2, int x3, int y3 )            { g.drawLine (x1, y1, x2, y2 );           g.drawLine (x2, y2, x3, y3 );           g.drawLine (x3, y3, x1, y1 ); } } 자체의 폐쇄형 메소드 정의 다른 위치에 서로 다른 삼각형을 원하는 수만큼 그릴수 있다.

23.8 자바 (계속) 예제 5 스크롤바를 생성(초기값, 증감단위, 범위(시작, 종료)) 사용자가 바를 스크롤할때, import java.applet.* ; import java.awt.* ; public class Fifth extends Applet { private Scrollbar bar ; private int barValue = 0 ; public void init () { bar = new Scrollbar (Scrollbar.HORIZONTAL, 0, 2, 1, 100) ; add (bar) ; } public void paint (Graphics g) { g.drawString ("Value is " + barValue, 100, 100 ) ; } public void boolean handleEvent (Event e) { barValue = bar.getValue ( ) ; repaint () ; return true ; } } 스크롤바를 생성(초기값, 증감단위, 범위(시작, 종료)) 사용자가 바를 스크롤할때, 바와 연관된 값이 포착 바의 값을 화면에 다시 그리기 위해 사용

6.6 요약