HTML

HTML 1장 HTML 2장 HTML 고급

1장 HTML(Hyper Text Mark-up Language) • HTML • 인터넷 인트라넷의 기본 • WWW의 표준 언어 • W3C에서 HTML 표준안 제정 • HTML은 프로그래밍 언어가 아니라 문서를 웹상에 나타내기 위한 마크-업 언어이다 • 홈페이지를 작성하기 위해서는 HTML문법을 익혀 작성

HTML의 태그 • 태그는 “< >”로 표시. 단독태그와 이중태그로 구분 • 단독태그 : 하나의 태그만을 사용한다 • 예 : • 이중태그 : 시작태그와 마침태그로 구성 • 예 : <HTML>….</HTML> <OL>….</OL> <PRE>….</PRE>

HTML의 태그 - 단독태그 • 주요 단독 태그 <BASE> : 기본 문맥 순서 <ISINDEX> : 검색가능한 문서 <LINK> : 이 문서로부터의 링크 <NEXTID> : 다음 ID가 링크 이름으로 사용됨 : 줄 바꾸기 <DT> : 정의를 위한 타이틀 기술 <DD> : 정의의 내용을 기술 <HR> : 수평선을 긋는다 <IMG> : 이미지를 넣는 기능 <LI> : 리스트의 한 항목을 기술 : 문단을 바꾸는 기능 <SELECT> : 옵션 선택기능

HTML의 태그 - 이중태그 • 주요 이중 태그 <HTML>......</HTML> : HTML 문서의 시작과 끝을 나타낸다. <HEAD>.......</HEAD> : 문서의 HEAD 부분을 나타낸다 <TITLE>......</TITLE> : 문서의 타이틀 부분을 나타낸다 <META>......</META> : 일반적인 메타 정보를 나타낸다 <BODY>......</BODY> : 문서의 BODY 부분을 나타낸다 <A>......</A> : 문서의 링크를 지정한다 <ADDRESS>......</ADDRESS> : 주소나 서명등을 나타낸다 ...... : 볼드체를 나타낸다 ...... : 이탤릭체를 나타낸다 ...... : 강조체를 나타낸다 <CODE>......</CODE> : 프로그램 코드체를 나타낸다 <TT>......</TT>: 타자체를 나타낸다 <Hn>......</Hn> n=1..6 : 문자의 크기를 지정한다 <CITE>......</CITE> : 인용구절의 이름이나 본문

HTML의 태그 - 이중태그 <DIR>......</DIR> : 디렉토리 리스트를 나타낸다 <DL>......</DL> : 정의를 나타낸다(<DT><DD>와 같이 사용 <KBD>......</KBD> : 사용자의 입력과 같은 키보드 입력 <LISTING>......</LISTING> : 컴퓨터의 리스트 <MENU>......</MENU> : 메뉴 리스트 <OL>......</OL> : 순서가 있는 리스트 <PRE>......</PRE> : 사용자가 포맷한 리스트 <SAMP>......</SAMPLE> : 예제 리스트나 문자 ...... : 강조체를 나타낸다 <UL>......</UL> : 순서가 없는 리스트 <VAR>......</VAR> : 변형가능한 또는 대체할 수 있는 구절 <XMP>......</XMP> : 예제 섹션 <FRAMESET>.....</FRAMESET> :다중창을 구성하기 위해 사용 <FRAME>......</FRAME> : 다중창과 관련된 문서를 지정하기 위해 사용 <NOFRAMES>......</NOFRAMES> : 프레임을 지원하지 않는 검색기를 위해 사용 <TABLE>......</TABLE> : 테이블을 나타내기 위해 사용 <TR>......</TR> : 테이블 내에서 열을 지정하기 위해 사용 <TD>......</TD> : 열에서 한 항목(행)을 지정하기 위해 사용

HTML문서의 기본 태그(문법설명) <HTML> <HEAD> <TITLE>타이틀</TITLE> </HEAD> <BODY> 내용 </BODY> </HTML> : HTML 문서는 <HTML>로 시작하여 </HTML>로 끝낸다. 문서내에는 <HEAD>와 <BODY>두 개의 섹션이 있다. <HEAD>섹션은 주로 문서의 타이틀 관련 내용을 지정하고 <BODY>섹션은 나타낼 내용을 지정한다.

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

HTML 문서의 기본 태그(실행결과)

문자의 크기 지정 태그(문법설명) <Hn ALIGN=position> : 글자의 크기를 지정하는 태그로서 n은 1부터 6까지의 크기를 지정할 수 있고 position은 LEFT, CENTER, RIGHT로 지정할 수 있다 : 글자의 크기를 지정하는 태그로서 n은 1부터 7까지의 크기를 지정할 수 있다. 또한 글자의 크기를 기본 글자체 크기 3에 대한 상대크기로도 지정할 수 있다. "+,-" 기호를 사용하여 지정한다.

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

문자의 크기 지정 태그(실행결과)

문자의 크기 지정 태그(사용 예) <HTML> <HEAD> <TITLE>문자의 크기 지정 태그 테스트</TITLE> </HEAD> <BODY> * FONT태그 실습입니다. FONT1 FONT2 FONT3 FONT4 FONT5 FONT6 FONT -1 FONT -2 FONT +2 FONT +5 </BODY> </HTML>

문자의 크기 지정 태그(실행결과)

줄, 문단 바꿈 태그(문법설명) HTML 문법에서는 엔터키를 인식하지 못한다. 즉 HTML 문장에서 엔터키를 쳐서 줄을 바꾸어도 실제 화면에는 줄이 바뀌지 않고 나타난다. 화면에 나타나는 내용중에서 줄을 바꿀 필요가 있을 경우는 태그를 이용하여 지정해 주어야 한다. : 줄을 바꾸고자 하는 곳에 사용한다 : 문단을 바꾸고자 하는 곳에 사용한다. 이 태그를 사용하면 줄을 바꾸고 한 줄의 띠어 다음 내용을 나타낸다

줄바꿈, 문단바꿈(사용 예) <HTML> <HEAD> <TITLE>줄,문단 바꿈 태그 테스트</TITLE> </HEAD> <BODY> BR태그란 줄을 바꾸고자 하는 곳에 사용한다. P태그란 줄을 바꾸고 한줄을 띠어 다음 내용을 나타낸다. 즉 문단을 바꾸는 것이다. </BODY> </HTML>

줄, 문단 바꿈 태그(실행결과)

문자의 형태 지정(문법설명) , : 택스트의 중요한 부분을 강조하여 볼드체로 나타내고자 할 때 사용하는 태그 ,<CITE>, : 텍스트를 인용문(Citation)이나 이탤릭체로 나타내고자 할 때 사용하는 태그 <CODE> : 프로그램 코드체로 나타내고자 할 때 사용하는 태그 <TT> : 타자기 문자체로 나타내고 할 때 사용하는 태그 <KBD><SAMP> : 키보드에서 입력한 텍스트를 그대로 나타내기 위해 사용하며, 모든 문자의 폭이 같은 크기로 나타난다. <VAR> : 변수의 이름을 나타낼 때 사용한다. 태그와 같이 이탤릭체로 표시된다 <ADDRESS> : 연락주소나 전화번호등을 나타내기 위해 사용하는 태그

문자의 형태 지정(사용 예) <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>

문자의 형태 지정(실행결과)

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

택스트의 원형대로 출력(사용 예) <HTML> <HEAD> <TITLE>텍스트의 원형대로 출력하는 태그 테스트</TITLE> </HEAD> <BODY> <PRE> --------------------------- 쉽게 온 것은 쉽게 가고 어렵게 얻은 복이 오래간다는 것이 고금의 진리다. --------------------------- </PRE> </BODY> </HTML>

택스트의 원형대로 출력(실행결과)

순서가 없는 리스트 항목(문법설명) <UL TYPE=xxx> : 리스트로 나타낼 항목 전체를 <UL>과 </UL> 태그로 묶는다. <UL>태그안에 새로운 <UL>태그가 나타날 수 있으며 내포관계를 가진다. TYPE : 각 항목의 앞에 나타낼 그래픽의 형태를 나타낸다. CIRCLE, SQUARE, DISC로 지정할 수 있다. <MENU> : 리스트로 나타낼 항목 전체를 <MENU>와 </MENU>로 묶는다. <LI> : <UL>과 <MENU>안에 나타날 항목들을 <LI>태그를 사용하여 나타낸다

순서가 없는 리스트 항목(사용 예) <HTML> <HEAD> <TITLE>순서가 없는 리스트 태그 테스트</TITLE> </HEAD> <BODY> <UL> <LI>예제 보기 <LI>원 <UL> <LI>속이 빈 원 <LI>인터넷 서비스 도구 <UL> <LI>속이 찬 사각형 <LI>원격 로그인 <LI>FTP <LI>유즈넷 </UL> </UL> </UL> </BODY> </HTML>

순서가 없는 리스트 항목(실행결과)

순서가 있는 리스트(문법설명) <OL TYPE=xxx START=number> : <UL> 태그처럼 각종 항목들을 나열할 때 쓰인다. 항목들 앞에 아라비아 숫자나 로마 문자등의 순서를 붙여 나열한다. <OL>태그에는 두개의 속성을 지정할 수 있다. 번호의 형태와 시작번호를 지정할 수 있다. 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는 시작 숫자 <LI> : <OL>과 </OL>사이의 항목들을 나타내기 위해 사용

순서가 있는 리스트(사용 예) <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>

순서가 있는 리스트(실행결과)

정의 표현(문법설명) <DL> : 정의를 나타내고자 하는 문장을 <DL>과 </DL>로 묶는다. <DT> : 정의할 항목의 제목을 나타내고자 할 때 사용한다 <DD> : 정의할 내용을 기술한다.

정의 설명(사용 예) <HTML> <HEAD> <TITLE>정의 표현 태그 테스트</TITLE> </HEAD> <BODY> <DL> <DT>하이퍼텍스트(HyperText)란? <DD>그림, 동화상, 음성 등의 링크를 포함하는 문서 <DT>HTML이란? <DD>Hyper Text Markup Language </DL> </BODY> </HTML>

정의 설명(실행결과)

선 긋기(문법설명) <HR ALIGN=postion WIDTH=percent SIZE=number> : 화면에 수평선을 그릴 수 있는 기능이다. ALIGN : 선의 위치를 지정하는 속성으로서 RIGHT, CENTER, LEFT 값을 지정할 수 있다. WIDTH : 검색기 화면의 폭을 기준으로 선의 폭을 백분율 로 지정할 수 있다. SIZE : 선의 두께를 픽셀 단위로 지정할 수 있다.

선 긋기(사용 예) <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> </BODY> </HTML>

선 긋기(실행결과)

문장의 정렬(문법설명) HTML에서는 묵시적으로 문장을 왼쪽에서 정렬한다. <CENTER> 태그는 문장을 가운데로 정렬하기 위해 사용되는 태그이다. <CENTER> : <CENTER>와 </CENTER>사이에 들어가는 문장을 중앙정렬하기 위해 사용하는 태그

문장의 정렬(사용 예) <HTML> <HEAD> <TITLE>문장의 정렬 태그 테스트</TITLE> </HEAD> <BODY> 좌측정렬 <CENTER> 중앙정렬 </CENTER> </BODY> </HTML>

문장의 정렬(실행결과)

BODY 태그에서 속성 지정하기(문법설명) <BODY BGCOLOR="#$$$" BACKGROUND="file_name" TEXT="#$$$" LINK="#$$$" ALINK="#$$$" VLINK="#$$$"> : $$$는 차례대로 R(red)/G(green)/B(blue)를 나타내는 2자리의 16진수 코드로서 0부터 F까지의 값을 가질 수 있다. 예를 들면 "#ff0000"는 빨간색을, "#00ff00"는 녹색을 "#0000ff"는 파랑색을 나타낸다. 적절한 숫자를 가지고 색을 표현할 수 있다. BGCOLOR : 배경색을 RGB 값으로 지정한다 BACKGROUND : 배경을 지정한 파일(그래픽파일)로 채운다. TEXT : 택스트의 색을 RGB 값으로 지정한다. 묵시적으로 검은색을 나타낸다. LINK : 다른 문서를 지정하는 링크문자의 색을 RGB값으로 지정한다. 묵시적으로 파란색을 나타낸다. ALINK : 링크부분을 사용자가 마우스로 눌렀을 때의 색을 지정한다. 묵시적으로 빨간색을 나타낸다. VLINK : 한번 찾아갔던 링크의 색을 지정한다. 묵시적으로 자주색을 나타낸다.

BODY 태그에서 속성 지정하기(사용예) <HTML> <HEAD> <TITLE>BODY태그 속성지정하기 테스트</TITLE> </HEAD> <BODY BGCOLOR="#eeffff" TEXT="#000000" LINK="#ff0000" ALINK="#0000ff" VLINK="#00ff00"> 1.일반텍스트의 색 2.<A HREF="http://www.empas.com">링크된 텍스트의 색</A> 3.<A HREF="http://kr.yahoo.com">한번 찾아갔던 링크의 색을 지정</A> </BODY> </HTML>

BODY 태그에서 속성 지정하기(실행결과)

다른 문서와의 연결 - 다른 파일 연결(문법설명) <A HREF = "URL or Filename">문자열 </A> : HTML 문서는 다른 HTML 문서나 이미지와 연결할 수 있다. 다른 서버의 문서와 연결하기 위해서는 그 서버의 이름과 연결을 원하는 파일의 경로, 파일명을 정확하게 기록하여야 한다 예:"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 고퍼 gopher://컴퓨터이름 gopher://panda.uiowa.edu 원격로그인 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:imp@bravo.kwangju.ac.kr">메일보내기</A> 3. <A HREF="news:news.newusers.questions">뉴스그룹 </A> 4. <A HREF="ftp://bravo.kwangju.ac.kr">FTP서비스로 bravo와 연결</A> 5. <A HREF="gopher://panda.uiowa.edu">GOPHER 서비스로 IWOA와 연결</A> 6. <A HREF="telnet://bravo.kwangju.ac.kr">TELNET 서비스로 bravo와 연결</A> </BODY> </HTML>

다른 문서와의 연결(실행결과)

문서내에서 지정된 섹션으로 이동하기(문법설명) 하나의 HTML 문서가 매우 길어지는 경우가 있다. 이러한 경우 한 HTML 문서 내에서 인덱스를 하이퍼 링크로 지정하여 원하는 곳으로 직접 이동시킬 수 있다 <A HREF ="#index_name">문자열 </A> : 한 HTML 문서내에서 index_name으로 지정된 곳으로 이동한다. <A NAME="index_name"> : 이동을 원하는 위치에 표시한다. </A>는 생략해도 된다.

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

문서내에서 지정된 섹션으로 이동하기(실행결과)

그래픽 이미지 • 대부분의 홈페이지 구성에는 많은 이미지나 아이콘을 사용한다. 그래픽 이미지의 포맷은 GIF 또는 JPG 포맷을 사용한다 • GIF • 1987년 미국의 컴퓨서브사에서 개발하여 널리 사용된 포맷. • 다양한 컴퓨터에서 사용할 수 있는 호환성 제공 • GIF 애니메이션 기법 제공 • 256컬러(8비트사용) 이상을 사용할 수 없다 • JPG • 1990년대 초 Joint Photographic Expert Group에서 개발 • 독톡한 압축방법을 사용하여 작은 크기의 파일을 생성 • 24비트의 컬러를 지원하므로서 1,670만 컬러를 사용

그래픽 이미지 제공 사이트 URL 인터넷에는 이러한 이미지만 만들어 제공하는 사이트가 많이 있다 http://summer.snu.ac.kr/images/Images.html : 서울대학교(아이콘) http://summer.snu.ac.kr/www/texture_land/n1.html : 서울대학교(배경) http://lotus.silla.ac.kr/~hsjung/inter/start.htm : 신라대학교 정홍섭 교수 홈페이지 http://www.cit.gu.edu.au/~anthony/icons/index.html : Anthony's Icon Library http://www.fau.edu/student/chemclub/dave/img1.htm : Authors' Images, Buttons, Balls and Bars http://mysite.com/benber/ : BenBer Does Icons http://www.cs.uwm.edu:2010/ : Bit Map Vault http://www.february14th.com/grafx/index.html : BizCafe File Library http://ivory.nosc.mil/html/trancv/html/icons-bsdi.html : BSDI Icons ………………….교재 참조 http://www.dd.chalmers.se/~gu94joli/icons.html : Fractal Icon Archive http://dig.netcentral.net/vx/ : Fragile Liquid http://www.mcs.net/~wallach/freeart/buttons.html : Free-Art - 3D Icons http://fuzine.mt.cs.cmu.edu/mlm/iconlist.html : Fuzzy's Icon Directory http://www.fsu.edu/~bbuchana/icons/index.html : Geoff's Icons Page http://www.igpp.ucla.edu/~ghyatt/icons/index.html : Gilbert's Icon Index http://www.eit.com/web/gopher.icons/gopher.html : Gopher Icons

HTML

HTML

Presentation Transcript

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML!

HTML

HTML

HTML

HTML Advanced: HTML 5

HTML

html