12장 하이퍼텍스트와 하이퍼미디어 12.1 간략한 역사 12.2 하이퍼텍스트의 특징 12.3 브라우징과 탐색

Presentation on theme: "12장 하이퍼텍스트와 하이퍼미디어 12.1 간략한 역사 12.2 하이퍼텍스트의 특징 12.3 브라우징과 탐색"— Presentation transcript:

1 12장 하이퍼텍스트와 하이퍼미디어 12.1 간략한 역사 12.2 하이퍼텍스트의 특징 12.3 브라우징과 탐색
12.1 간략한 역사 12.2 하이퍼텍스트의 특징 12.3 브라우징과 탐색 12.4 HTML 내에서의 링크 12.5 HTML과 하이퍼미디어 멀티미디어시스템 2016-1학기

2 하이퍼텍스트(Hypertext) 링크 (link) 로 연결되어 있는 텍스트를 의미함.
링크: 같은(또는 다른) 문서 내에 있는 텍스트의 다른 부 분을 가리킴. 항해에 비유 마우스로 소스를 클릭함으로써, 소스에서 목적지로 링크를 따라 감. 브라우저를 사용하여 하이퍼텍스트를 보거나 항해함. 멀티미디어시스템 2016-1학기

3 간략한 역사 Memex – V. Bush, 1945년 링크된 문서의 개념; 광학-기계적 장치로 이전까지 는 구현된 적이 없었음. Xanadu – Ted Nelson, 1960년대 후반/ 1970년대 초반 전세계에 걸친 시스템을 구축하려는 의도를 가짐. Hypercard – Apple, 1987년 모든 Mac 제품에 배급됨; 개념이 널리 알려짐. World Wide Web – 1992년 멀티미디어시스템 2016-1학기

4 비선형성 하이퍼텍스트는 보통, 선형적으로(시작부터 끝까지) 읽히지 않음. 링크에 의해 분기를 하게 됨.
하이퍼텍스트는 보통, 선형적으로(시작부터 끝까지) 읽히지 않음. 링크에 의해 분기를 하게 됨. 이전의 위치로 역 추적 하는 것도 가능함. 혁신적인 것은 아니지만, 클릭을 해서 링크를 따라가 는 것은 전통적인 비선형(즉, 백과사전에서의 크로스- 레퍼런스)과는 다른 경험임. 멀티미디어시스템 2016-1학기

5 링크(Link) 단순 단방향(Simple unidirectional) 링크 확장(Extended) 링크
어떤 페이지에 있는 한 점을 다른 페이지의 점과 연결함. (즉, WWW) 확장(Extended) 링크 지역적(Regional) 링크 ; 링크의 끝이 페이지 내의 지역이 됨. 양방향(idirectional) 링크 ; 양방향으로 따라갈 수 있는 링크. 멀티링크(Multilink) ; 둘 이상의 끝을 가질 수 있음. 멀티미디어시스템 2016-1학기

6 브라우징과 탐색 브라우징(Browsing) –연관(association)에 의해 정보를 검색하는 것.
링크를 따라감, 역추적 이전 역사를 유지, 북마크 탐색(Searching) –내용(content)에 의해 정보를 검색하는 것. URL 의 인덱스를 구축. 페이지의 키워드/기술에 의해 탐색함. 멀티미디어시스템 2016-1학기

7 웹 인덱스(Web Index) 수동(Manual) ; Yahoo!, Open Directory Project,…
사람이 사이트 내용을 평가하여 분류함. 키워드에 의해 계층적 항해를 하거나, 내용을 검색. 자동(Automatic) ; Google, AltaVista,… 스파이더(Spider)/로봇(robot)이 Web을 돌아 다니면서, 페이지에서 추출한 키워드와 URL을 수집함. 매우 효율적인 검색 엔진이 질의를 처리함. 멀티미디어시스템 2016-1학기

8 자동 인덱싱 페이지로부터 자동적으로 키워드를 추출해야 함.
텍스트 내의 의미 있는 단어를 식별하기 위해 휴리스 틱을 적용. 페이지 저자에 의해 추가된 메타데이터(metadata) 사 용. <meta name="keywords" content="…"> <meta name="description" content="…"> Google 은, 페이지를 가리키는 링크의 수에 기반 한, 가중치를 적용함. 멀티미디어시스템 2016-1학기

9 URL Uniform Resource Locators
자원(Resource)이란, 높은 수준의 Internet 프로토콜에 의 해 액세스 될 수 있는 어떤 것. 보통은, 파일.(동적으로 생성된 데이터 일 것.) 그 속에 있는 데이터가 액세스되는 방법은 사용된 프로토 콜에 의해 제약을 받음. 즉, mailbox 멀티미디어시스템 2016-1학기

10 URL 구문법(Syntax) Protocol :// domain name / path
이것은 약간 단순화한 형태로, 가장 일반적인 사용 형태를 나타낸 것임. 즉, 도메인 이름은, 계층적 이름 부여 방식에서, 호스 트를 가리킴. 경로(Path)는 Unix의 경로명과 유사함. 즉, 세그먼트는 / 에 의해 분리되며, 계층 내의 자원을 식별함.(즉, 파일 시스템) 멀티미디어시스템 2016-1학기

11 URL 경로(Path) HTML을 포함하고 있는 파일의 위치를 완전하 게 규정함.
즉, /Materials/index.html 디렉토리 내의 표준 파일에 대하여 함축적으로 규정함. 즉, /Materials/ HTML을 동적으로 생성하는 프로그램을 규정함. 특별한 경우(cgi-bin) 또는 확장자에 의해 식별됨 (즉, .php) 멀티미디어시스템 2016-1학기

12 부분(Partial) URL URL 요소의 일부분이 생략된 것.
생략된 요소들은, 부분 URL이 등장한 문서에 있는, 기 본(base) URL 에 의해 채워짐. 보통은, 기본 URL을 사용하여 그 문서를 검색함. 그러 나, 이럴 경우에는 <base> 태그에 의해 명시적으로 설 정됨. 멀티미디어시스템 2016-1학기

13 조각 식별자(Fragment Identifiers)
링크는 페이지 내의 어떤 위치를 가리킬 수 있음. URL은 페이지 전체를 가리킴. URL에 조각 식별자(fragment identifier)를 첨가함. #name 즉, named anchor를 사용하여, 그 페이지 내의 해당되는 위치를 가리킴. 멀티미디어시스템 2016-1학기

14 HTML 링크 근원지(Source) HTML에서, a 요소는 링크의 소스로 사용됨.
href 속성은, 그 값으로 목적지 URL 을 가짐. 요소의 내용은, 그것이 링크인 것을 나타냄.(파랑색의 밑줄 등으로) 즉, Visit <a href=" book's support site</a> 브라우저에서, 밑줄 친 텍스트를 클릭하면 그 링크를 따 라감. Visit the book's support site 멀티미디어시스템 2016-1학기

15 HTML 링크 목적지(Destination)
name 속성의 값은 조각 식별자처럼 사용될 수 있음. <a name="top">… 대안으로(HTML4 와 XHTML), 어떤 요소의 id 속성이 사용되기도 함. 멀티미디어시스템 2016-1학기

16 포맷팅 링크들 CSS의 의사-클래스(pseudo-class) 사용 CSS 스타일시트에서 선택자와 함께 사용; a:link처럼.
visited: 방문한 링크를 포맷팅 hover: 커서가 링크 위에 올 때 포맷팅 active: 링크를 클릭했을 때 포맷팅 CSS 스타일시트에서 선택자와 함께 사용; a:link처럼. css tutorial 사이트 멀티미디어시스템 2016-1학기

17 HTML과 하이퍼미디어 요소의 href 가 HTML 파일을 가리키지 않을 수 도 있음.
자원을 검색했을 때, 서버의 응답에 MIME 타입 이 포함될 수도 있음. 브라우저는 다음 중 하나가 될 수 있음. 그 자신의 데이터를 취급하거나 외부에서 검색한 자원을 디스플레이 하기 위해 도 우미 응용프로그램(helper application)을 호출하거나 브라우저 창에 디스플레이 하기 위해 플러그-인 ( plug-in)을 사용함. html tutorial 멀티미디어시스템 2016-1학기

18 하이퍼미디어 마크업 만약 텍스트가 아닌 데이터를 브라우저 내에 렌더 링 할 때는, 이미지, 비디오 등을 웹 페이지 내에 통 합할 수 있음. img 요소는 비트맵 이미지를 포함시킬 때 사용. (GIF, JPEG, PNG) object 요소는 임의의 데이터 타입을 포함시킬 때 사용. embed 요소는 표준이 아님. 그러나, 비디오, 오디오 및 애플릿을 포함시킬 때 폭넓게 사용됨. 멀티미디어시스템 2016-1학기

19 링크와 이미지 A 요소의 내용에 이미지가 사용되어, 클릭할 수 있는 링크로 사용될 수 있음.
즉, 엄지손가락 크기의 이미지를 큰 그림으로 링크 시킴. 이미지 맵(image map)은 여러 개의 핫 스팟(hot spot)을 가질 수 있고, 각각은 URL로 링크됨. Img의 usemap 속성은 map 요소를 지정하며, 이것은 핫 스팟의 모양과 위치 및 관련 URL을 지정하는 area 요 소를 포함함. 멀티미디어시스템 2016-1학기