Markup Language 란?

출판업계 원고에 교정, 식자 작업을 위해 주석을 첨가한 것이 기원 인쇄할 때 사용하는 조판 지정 언어 인쇄할 내용의 문단, 폰트 등을 지정하는 언어 텍스트 데이터에 처리할 내용을 애플리케이션에게 지시하는 언어로 개념이 확장 원고 교정을 위해 마크업 사용 서식지정을 위해 마크업 사용 Markup Language란? 출판 서식 작성 원고 작성

HTML HEAD BODY HTML(HyperText Markup Language)란? • HTML은 프로그래밍 언어가 아니다. HTML은 문서를 웹 상에서 나타내기 위해 필요한 기능을 태그를 사용하여 표시하는 마크-업 언어  웹상에서 Hypertext 문서를 만들 수 있는 간단한 마크업 언어 • HTML은 웹의 표준 언어 • HTML은 표준 문서 기술 언어인 SGML(Standard General Markup Language)의 부분 집합으로 개발 • HTML의 표준화 작업은 W3C 컨소시엄에서 진행 • ASCII Text 양식의 문서 • 일반 텍스트 편집기 작성 가능 • 1997년 W3C는 HTML 4.0 버전을 표준으로 발표

HTML의 발전 • 1989 스위스 CERN의 Tim Berners-Lee에 의해 WWW project 시작 • 1990HTML이 웹 문서 작성에 사용 • 1992HTML 1.0 발표 • 1993HTML 1.0 브라우저인 모자익 개발(미, 일리노이대학 NCSA 연구소), HTML+ 제안 • 1995HTML 2.0 표준, HTML 3.0 제안 • 1996 HTML 3.2 표준 • 1997HTML 4.0 표준(DHTML 지원) • 1998XML 1.0 표준 • 1999XHTML 1.0 제안(모듈화 개념도입, 태그의 확장성, 폼 추가, 디지털 TV 등에서 HTML 문서 사용가능)

HTML 특징 • HTML 단점 • 고정된 태그 집합 • 100여 개의 태그가 존재하나, 응용에 따라 다른 태그를 요구 • 다양한 페이지 포맷 • 임의 구조화 능력 부족 • 효과적인 검색, 재사용, 검증이 불편 • HTML의 장점 • 이식성과 사용이 편리 • HTML Instance를 Web에서 손쉽게 다운로드 가능

HTML 문서 편집기 • 단순한 기능을 제공하는 편집기에서 HTML 태그를 직접 사용하여 웹 문서가 작성 • 윈도우의 메모장, 에디터플러스 편집기 등 • 전문적인 웹 편집기를 사용하여 웹 문서를 작성할 수 있다. HTML을 알지 못해도 작성 가능 • 나모 웹 편집기, 프론트 페이지, 콤포저 등 • 웹에서 어떠한 도구를 사용하여 웹 문서를 만들어도 결국 모든 파일은 HTML 문서로 작성된다

HTML의 태그 • 단독태그 : 하나의 태그만을 사용 • <BASE> <DT><DD>….등 • 이중태그 : 시작 태그와 마침 태그로 구성 • <BODY></BODY>, <PRE></PRE>…..등

<HTML>로 시작 </HTML>로 끝 <HEAD> 섹션 문서의 타이틀 관련 내용을 지정 <BODY> 섹션 나타낼 내용을 지정 <HTML> <HEAD> <TITLE>타이틀</TITLE> </HEAD> <BODY> 내용 </BODY> </HTML> HTML 문서의 기본 태그

사용 예 • <HTML> • <HEAD> • <TITLE>HTML의 기본구조 테스트</TITLE> • </HEAD> • <BODY> • HTML(Hyper Text Mark-up Language)은 문서를 웹 상에서 • 나타내기 위해 필요한 기능을 태그를 사용하여 표시하는 마크-업 언어라 볼 수 있다. • 사용자는 홈페이지를 작성하기 위해 HTML문법을 익혀 나타내고자하는 내용들을 작성한다. • </BODY> • </HTML>

HTML 문서 편집기 윈도우의 메모장을 이용한 웹 문서 편집 화면 EditPlus 편집기를 이용한 웹 문서 편집 화면

문자의 크기 지정 .......... • 글자에 대하여 상세 정보를 설정할 수 있는 태그 • n은 1부터 7까지의 크기를 지정 • 글꼴이름은 폰트 정보로서 폰트명을 사용하여 글꼴을 지정 • 16진수/색이름은 글자의 컬러를 지정하는 부분으로서 16진수 값으로 지정하거나 색 이름을 직접 사용하여 지정할 수 있다.(컬러명은 부록 참조)

문자의 크기 지정 <BIG> ..... </BIG> : 현재 글꼴의 크기보다 한 단계 큰 크기로 나타낸다. ..... : 현재 글꼴의 크기보다 한 단계 작은 크기로 나타낸다. <BASEFONT size=n> : 문서에서 사용할 글자의 기본 크기를 설정한다

<HTML> <HEAD> <TITLE>문자의 크기 지정 태그 테스트</TITLE> </HEAD> <BODY> 새천년 새천년 새천년 새천년 새천년 새천년 새천년 새천년 새천년 새천년 새천년 새천년 새천년 새천년 새천년 대한민국 <BIG>새천년 대한민국</BIG> <BASEFONT size=7> 새천년 대한민국 </BODY> </HTML>

문서의 제목 표시 태그 <Hn align="위치"> ..... </Hn> : 제목 글자의 크기를 지정한다. 이 태그는 제목을 출력하고 자동으로 줄바꿈을 수행한다 • n • 글자의 크기를 지정하는 숫자 • 1..6까지의 숫자로 지정 • 1이 가장 큰 크기이고 6이 가장 작은 크기 • 위치 • 글자의 위치를 의미 • LEFT, CENTER, RIGHT를 사용

<HTML> <HEAD> <TITLE>문자의 크기 지정 태그<H> 테스트</TITLE> </HEAD> <BODY> * H태그 실습입니다. <H1 align=LEFT> H1 크기 제목</H1> <H2 align=LEFT> H2 크기 제목</H2> <H3 align=CENTER> H3 크기 제목</H3> <H4 align=CENTER> H4 크기 제목</H4> <H5 align=RIGHT> H5 크기 제목</H5> <H6 align=RIGHT> H6 크기 제목</H6> </BODY> </HTML>

5.6 줄, 문단 바꿈 태그 : 줄을 바꾸고자 하는 곳에 사용한다. ..... : 하나의 문단을 이 태그로 지정한다. 지정된 문단이 끝나면 자동적으로 한 줄을 띠어 다음 문단이 시작된다.

<HTML> <HEAD> <TITLE>줄,문단 바꿈 태그 테스트</TITLE> </HEAD> <BODY> 비어 있어야 비로서 가득해 지는 사랑 영원히 사랑한다는 것은 평온한 마음으로 아침을 맞는다는 것입니다 비어 있어야 비로서 가득해 지는 사랑 영원히 사랑한다는 것은 평온한 마음으로 아침을 맞는다는 것입니다 </BODY> </HTML>

문자의 형태 지정 ....., ..... 택스트의 중요한 부분을 강조하여 볼드체로 나타내고자 할 때 사용하는 태그 ....., <CITE>.....</CITE>, ..... 텍스트를 인용문(Citation)이나 이탤릭체로 나타내고자 할 때 사용하는 태그 <CODE>.....</CODE> 프로그램 코드체로 나타내고자 할 때 사용하는 태그 <TT>.....</TT> 타자기 문자체로 나타내고자 할 때 사용하는 태그

문자의 형태 지정 <KBD>.....</KBD>, <SAMP>.....</SAMP> 키보드에서 입력한 텍스트를 그대로 나타내기 위해 사용하며, 모든 문자의 폭이 같은 크기로 나타난다. <VAR>.....</VAR> 변수의 이름을 나타낼 때 사용한다. 태그와 같이 이탤릭체로 표시된다 <ADDRESS>.....</ADDRESS> 연락주소나 전화번호 등을 나타내기 위해 사용하는 태그이다. 이탤릭체로 나타난다. ..... 위 첨자로 글씨를 나타낸다. ..... 아래 첨자로 글씨를 나타낸다 ..... 글씨의 아래에 밑줄을 긋는다 <S>.....</S>, <STRIKE>.....</STRIKE> 글씨의 가운데에 밑줄을 긋는다.

<HTML> <HEAD> <TITLE>HTML문자 형태 테스트</TITLE> </HEAD> <BODY> 볼드체로 나타내는 태그 중요한 부분을 강조하여 나타낸 태그 이탤릭체를 나타내는 태그 강조를 나타내는 태그 <CITE> 헤아림 끝에 얻은 지식은 오래도록 잊혀지지 않은 참된 지식으로 남는다</CITE> <CODE> void main() printf("Welcome"); </CODE> <TT>타자기 문자체로 나타내는 태그</TT> <KBD>키보드에서 입력한 텍스트를 그대로 나타내는 태그</KBD> <SAMP>프로그램에 의해 출력된 내용의 샘플을 보여주는 태그</SAMP> <VAR>변수의 이름을 나타내는 태그</VAR> <ADDRESS>서울특별시 강남구 ○○동 1234-56번지 7통 8반</ADDRESS> </BODY></HTML>

<HTML> <HEAD> <TITLE>HTML문자 형태 테스트</TITLE></HEAD> <BODY> 이것은위 첨자 문자 입니다 이것은아래 첨자 문자 입니다 이것은밑줄을 가진 문자 입니다 이것은<S>가운데 선을 가진 문자 입니다</S> 이것도 <STRIKE>가운데 선을 가진 문자 입니다</STRIKE> </BODY> </HTML>

텍스트의 원형대로 출력 <PRE>.....</PRE> • HTML 문서는 공백을 하나밖에 허용하지 않는다. • <PRE> 태그는 사용자가 작성한 형식을 화면에 그대로 나타내기 위해 사용하는 태그이다. • <PRE> 태그 내에서 글자의 형태를 지정하는 다른 태그를 사용할 수 있다.

<HTML><HEAD> <TITLE>텍스트의 원형대로 출력하는 태그 테스트</TITLE> </HEAD><BODY> <PRE> 봄 소풍 안도현 점심 먹을 때였네 누가 내 옆에 슬쩍, 와서 앉았네 할미꽃이었네 내가 내려다보니까 일제히 고개를 수그리네 나한테 말 한번 걸어보려 했다네 나, 햇볕 아래 앉아서 김밥을 씹었네 햇볕한테 들킨 게 무안해서 단무지도 우걱우걱 씹었네 </PRE> </BODY></HTML>

문장의 정렬 <CENTER>.....</CENTER> • <CENTER>와 </CENTER>사이에 들어가는 문장을 중앙 정렬하기 위해 사용하는 태그 <DIV align="위치">.....</DIV> • 문장을 align의 값에 따라 정렬한다. • 위치 값으로 LEFT, CENTER, RIGHT를 지정할 수 있다.

<HTML> <HEAD><TITLE>문장의 정렬 태그 테스트</TITLE></HEAD> <BODY> 묵시적으로 좌측정렬 <CENTER> CENTER 태그에 의해 중앙정렬 </CENTER> <DIV align="LEFT">DIV 태그에 의해 왼쪽 정렬</DIV> <DIV align="CENTER">DIV 태그에 의해 중앙 정렬</DIV> <DIV align="RIGHT">DIV 태그에 의해 오른쪽 정렬</DIV> </BODY> </HTML>

선 긋기 <HR ALIGN=postion WIDTH=percent SIZE=number noshade> 화면에 수평선을 그릴 수 있는 기능이다. ALIGN : 선의 위치를 지정하는 속성 RIGHT, CENTER, LEFT 값을 지정할 수 있다. WIDTH : 검색기 화면의 폭을 기준으로 선의 폭을 백분율로 지정 SIZE : 선의 두께를 픽셀 단위로 지정할 수 있다. Noshade : 선을 입체감 없이 단순한 라인으로 그린다.

<HTML> <HEAD><TITLE>선 긋기 태그 테스트</TITLE></HEAD> <BODY> <HR> <HR ALIGN=LEFT WIDTH=30%> <HR ALIGN=CENTER WIDTH=30%> <HR ALIGN=RIGHT WIDTH=30%> <HR WIDTH=70% SIZE=1> <HR WIDTH=70% SIZE=5> <HR WIDTH=70% SIZE=20> <HR size=10> <HR size=10 noshade> </BODY> </HTML>

주석과 특수 문자 나타내기  : 설명문(주석)을 나타낸다. 특수 문자 들은 다음과 같은 표기법을 사용하여 나타낼 수 있다. < : < > : > “ : " & : &

<HTML> <HEAD> <TITLE>선 긋기 태그 테스트</TITLE></HEAD> <BODY>  </BODY> </HTML>

정의 표현 <DL> <DT>정의할 용어</DT> <DD>용어의 설명</DD> </DL> • 정의를 나타내고자 하는 문장을 <DL>과 </DL>로 묶는다. • 나타내고자 하는 정의가 여러개일 경우 <DT><DD>태그가 여러번 나올 수 있다.

<HTML> <HEAD> <TITLE>정의 표현 태그 테스트</TITLE> </HEAD> <BODY> <DL> <DT>하이퍼텍스트(HyperText)란?</DT> <DD>그림, 동화상, 음성 등의 링크를 포함하는 HTML 문서를 말한다</DD> <DT>HTML이란?</DT> <DD>웹의 표준 언어로서 Hyper Text Markup Language를 의미한다</DD> </DL> </BODY></HTML>

순서가 없는 리스트 항목 <UL type="xxx"> <LI type="xxx">항목1</LI> <LI>항목2</LI> <LI>항목n</LI> </UL> 리스트로 나타낼 항목 전체를 <UL>과 </UL> 태그로 묶는다. xxx • <UL>태그와 <LI>태그에서 모두 사용 • 각 항목의 머리기호 종류를 지정하기 위해 사용 • CIRCLE(속이 빈 원) • SQUARE(속이 채워진 사각형) • DISC(속이 채워진 원, - 기본 생략 가능)

<UL TYPE=SQUARE> <LI>속이 꽉찬 사각형 <LI>인터넷 서비스 도구 <UL TYPE=DISC> <LI>전자우편 <LI>원격 로그인 <LI>FTP <LI>유즈넷 </UL> </UL> </BODY></HTML> <HTML> <HEAD> <TITLE>순서가 없는 리스트 태그 테스트</TITLE> </HEAD> <BODY> <UL> <LI>강원도 <LI>충청도 <LI>전라도 </UL> <UL> <LI type="disc">경상도 <LI type="circle">경기도 <LI type="squre">제주도 </UL>

순서가 있는 리스트 <OL TYPE=xxx START=number> <LI>항목1</LI> <LI>항목2</LI> <LI>항목n</LI> </OL> <UL> 태그처럼 각종 항목들을 나열할 때 쓰인다. 항목들 앞에 아라비아 숫자나 로마 문자 등의 순서를 붙여 나열한다. Xxx : 번호의 형태를 지정한다. 다음은 번호의 형태를 나타낸 것이다. TYPE=A : 숫자대신 영문자 대문자(A,B,C....) TYPE=a : 숫자대신 영문자 소문자(a,b,c.....) TYPE=I : 숫자대신 로마숫자 대문자(I,II,III,IV...) TYPE=i : 숫자대신 로마숫자 소문자(i,ii,iii,iv....) TYPE=1 : 숫자를 사용 START=number : number는 시작 숫자 Number : 시작 번호를 의미한다.

<HTML><HEAD><TITLE>순서가 있는 리스트 태그 테스트</TITLE> </HEAD><BODY> <OL TYPE=A> <LI>알파벳 대문자 순서로 1 <LI>알파벳 대문자 순서로 2 <LI>알파벳 대문자 순서로 3 </OL> <OL TYPE=i> <LI>로마숫자 소문자 순서로 1 <LI>로마숫자 소문자 순서로 2 <OL START=50> <LI>숫자 50부터 시작번호 지정 시작 1 <LI>숫자 50부터 시작번호 지정 시작 2 </OL> <LI>로마숫자 소문자 순서로 3 </OL> </BODY></HTML>

다른 문서와의 연결 <A HREF = "URL or Filename"> 문자열 </A> • 다른 서버의 문서와 연결하기 위해서는 그 서버의 이름과 연결을 원하는 파일의 경로, 파일명을 정확하게 기록하여야 한다  예: "http://netscape.yahoo.com/guide/technology.html"). • 같은 서버내의 파일과 연결시키기 위해서는 연결하고자 하는 파일이 같은 디렉토리에 있는 경우 파일이름만 지정해 주면 되지만 하위 디렉토리나 상위 디렉토리에 있는 경우 경로도 같이 지정해 주어야 한다.

다른 문서와의 연결 인터넷의 다른 서비스와의 연결 <A HREF = "service_URL"> 문자열 </A> : 인터넷의 다른 기능과 바로 연결시킬 수 있다. 즉 전자우편이나, 뉴스그룹, FTP, 원격로그인 등의 서비스와 연결시켜 웹에서 이러한 기능들을 바로 사용할 수 있다. 이러한 기능을 사용하기 위해서는 링크에 URL을 지정하여야 한다. 사용할 수 있는 URL의 예는 다음과 같다. 서비스명 형 식 예 -------------------------------------------------------------------------------------------------------------- 전자우편 mailto:주소 mailto:cskim@www.silla.ac.kr 뉴스그룹 news:뉴스그룹이름 news:news.newusers.questions FTP ftp://컴퓨터이름 ftp://cair.kaist.ac.kr 원격로그인 telnet://컴퓨터이름 telnet://asiad.silla.ac.kr

<HTML><HEAD><TITLE>다른 문서와의 연결 태스트</TITLE> </HEAD> <BODY> 1. <A HREF="http://netscape.yahoo.com/guide/technology.html"> 야후 컴퓨터와 인터넷 가이드 사이트</A> 2. <A HREF="mailto:cskim@www.silla.ac.kr"> 메일보내기</A> 3. <A HREF="news:news.newusers.questions">뉴스그룹 </A> 4. <A HREF="ftp://cair.kaist.ac.kr">FTP서비스로 KAIST와 연결</A> 5. <A HREF="telnet://asiad.silla.ac.kr">TELNET 서비스로 ASIAD와 연결</A> </BODY></HTML>

문서 내에서 지정된 섹션으로 이동하기 <A href ="#index_name">문자열 </A> : 같은 HTML 문서 내에서 index_name으로 지정된 곳으로 이동한다. <A href="URL#index_name">문자열</A> : URL로 지정된 다른 사이트에 있는 문서의 index_name 위치로 이동한다. <A NAME="index_name">.....</A> : 이동을 원하는 위치에 표시한다. </A>는 생략해도 된다.

<HTML> <HEAD> <TITLE>문서내에서 지정된 섹션으로 이동</TITLE> </HEAD> <BODY> <CENTER> <H2>인터넷 서비스에 대하여</H2> <HR> <A HREF="#EMAIL">전자우편인란?</A> <A HREF="#USENET">유즈넷이란?</A>  <A href="www.daehan.ac.kr/time_table.html#time">대한대학교 일정표</A> <H2>인터넷 서비스 도구 설명 </H2> <A NAME=EMAIL> 전자우편이란 인터넷 사용자로서, 인터넷과 연결된 사용자들과 메시지를 주고 받을 수 있다. 그러나 우편이라고 해서 단순히 개인적인 메시지만을 의미하는 것은 아니다. 파일로 저장될 수 있는 것은 전부 우편으로 보낼 수 있다. 컴퓨터 원시프로그램, 문서, 전자잡지, 멀티미디어정보(음성, 이미지, 동화상 등) 등이 그예이다. 인터넷 전자우편 시스템은 인터넷의 다양한 서비스 중 가장 많이 사용되는 서비스 중의 하나이다. <A NAME=USENET> 유즈넷(이 이름은 "User's Network"의 약자이다)은 많은 사람들이 사용하고 있는 서비스 중의 하나이다.유즈넷은 공통관심분야에 대하여 관심을 가진 사람들이 모여 많은 대화를 할 수 있는 토론그룹이라 할 수 있다. 각자의 관심분야를 뉴스그룹이라 한다. </BODY> </HTML>

BODY 태그에서 속성 지정하기 <BODY bgcolor="#$$$" background="file_name“ text="#$$$" link="#$$$" alink="#$$$" vlink="#$$$"> <BODY> 태그 내의 선택사항을 이용하여 나타낼 문서의 다양한 형태를 지정할 수 있다. Bgcolor 문서의 배경색을 RGB값으로 나타낸다. background 문서의 배경을 지정한 파일(이미지 파일)로 채운다 text 링크가 되어 있지 않은 일반 텍스트의 색을 지정한다. 지정하지 않으면 검은색으로 나타낸다. link 다른 문서를 하이퍼링크로 연결하는 문자의 색을 RGB값으로 지정한다. alink 하이퍼링크로 연결된 문자를 마우스로 클릭 하였을 때의 문자 색을 RGB값으로 지정한다. vlink 한번 방문한 링크 문자의 색을 RGB값으로 나타낸다.

<HTML> <HEAD><TITLE>BODY태그 속성지정하기 테스트</TITLE></HEAD> <BODY BGCOLOR="#eeffff" TEXT="#000000" LINK="#ff0000"ALINK="#0000ff" VLINK="#00ff00"> 1.일반텍스트의 색 2.<A HREF="ALINK.HTML">링크된 텍스트의 색</A> 3.<A HREF="VLINK.HTML">한번 찾아갔던 링크의 색을 지정</A> </BODY> </HTML>

Markup Language 란?

Markup Language 란?

Presentation Transcript

XML eXtensible Markup Language

XML eXtensible Markup Language

HTML: HyperText Markup Language

HTML HyperText Markup Language

Strategy Markup Language

HTML Hypertext Markup Language

Hyper Text Markup Language

Financial Products Markup Language

Hypertext Markup Language HTML

Hypertext markup language

eXtensible Markup Language

HyperText Markup Language

Extensible Markup Language

XML - Extensible Markup Language

Strategy Markup Language (StratML)

FREESTYLE MARKUP LANGUAGE

XML (eXtensible Markup Language)

XML (Extensible Markup Language)

XML: eXtensible Markup Language

Hyper Text Markup Language

Pattern Markup-Language

HyperText Markup Language