html 강좌

html이란? 웹의 기본문서양식, 일반적인 텍스트 파일로 되어있으며 태그라고 불리우는 표시를 통해 웹부라우저로 보일 내용을 나타낸다. 파일 확장자는 html 또는 htm 이다. html(hyper text. markup)문서는 전자 출판에서 상용되었던 언어로서 문서를 보기좋게 만들어 줄 뿐만아니라 그림과 소리 또는 동화상을 삽입할수 있는 멀티미디어 기능을 손쉽게 구현할 수 있다는 장점을 가지고 있습니다. 그러나 아쉽게도 연산을 하는 작업이 부족하여 cgi 나 자바스크립트를 별도로 사용해야 하는 경우가 많습니다. 그리고 동적인 인터넷 문서를 만들 때 다이나믹html을 사용합니다.

html기본규칙 1, 태그의 대부분은 쌍으로 되어있으며, 효과를 주려고 하는 주위를 들러싸고 있다. 첫 번째 태그는 효과를 시작하는 태고이고 마지막 태그는 효과를 마감하는 것이다. (몇가지 예외도 있다.) 앞의 태그는 열고 마지막에 태그를 닫는다.

2. 태그는 그 형태를 적합하게 하는 변수값을 쓰기위한 선택적 속성을 가지고 있다. 예를 들어

태그의 ALIGN속성은 기본적인 문단 정렬을 바꾼다.

3. 태그는 대소문자 구별이 없다.

제1장 HTML문서의 구성
HTML문서의 구성

HTML문서는 < html >...< /html >로 정의된다.
HTML문서는 Header와 Body로 구성
- Header를 정의하는 태그 < head >......< /head >
- Body를 정의하는 태그 < body >....< /body >

Header에 정의 가능한 태그

< title > 문서의 제목 < /title > : 브라우저프레임에 출력,
제목은 최대 64자
< style > 문서의 스타일
< script > 스크립트 프로그램
< isindex > 탐색
< base > 상대적 URL을 사용할 때 베이스 URL지정
: < base href=" //www.han.com/index.html " >일때
< img src=" icons/logo.gif " > 문장의 src는
//www.han.com/iconslogo.gif와 동일하다.

Body부분에 들어갈 수 있는 요소 : 문서의 본문 및 이미지등

주석문 형태
< !--여기에 주석을 입력한다.-->

HTML문서의 특징

HTML문서의 구성요소 : HTML언어는 문서의 구조만을 기술한다.
HTML문서의 형식인 외양을 결정하는 것은

브라우저의 기능
: < h1 > 태그의 글자크기, < ul > 태그에서 각 항목의 불렛 심볼등은 브라우저에 의해 결정.
HTML문서에 작성자가 의도적으로 삽입한 공백은 무시된다
: 공백을 삽입하고자 한다면 < pre > ...< /pre >태그 등을 이용할것.
HTML문서의 확장자는 .html이나 .htm을 이용하는 것이 좋다.
HTML태그는 대소문자를 구분하지 않는다.

간단한 HTML문서의 예

Body에 나타나는 구성요소들의 분류

텍스트 기반요소
- 텍스트중 일부를 구성하는 요소로서 하나의 문단으로
인식되지 않는다. - 텍스트 기반요소들을 내부에 내포할 수 있다.
- 종류
문자스타일 : < b >... < /b >, < i >... < /i >등
폰트 : < font > ... < /font >
문구스타일 : < em >.... < /em >, < code > .....< /code >
이미지 : < img >
한 줄 띄기 :< br >
이미지맵 : < talbe >...< /table >
폼필드 : < input >
밑줄긋기 : < u >.....< /u >

블록기반요소
- 블록을 지정할 수 있는 태그들로서 하나의 문단을 구성한다.
- 블록기반요소와 텍스트 기반요소들을 내부에 내포할 수 있다.


- 종류
단락 : < p > ...< /p >
주소 : < address > ... < /address >
블록 : < blockquote > .... < /blockquote >
순서없는 리스트 : < ul > ... < /ul >
순서있는 리스트 : < ol > ... < /ol >
수평선 :< hr >
테이블 :< table >.... < /table >
폼 : < form >....< /form >
확정포맷텍스트 :< pre >....< /pre >

제2장 제목(Heading)
Html문서에서 문단의 제목을 지정하는 태그 : 6가지 종류
- 한 줄에는 반드시 하나의 제목만이 지정된다.
- h1에서 h6에 지정되는 제목의 크기는 브라우저에 의해 결정된다.

< h1 > 문단 제목< /h1 > 제일 큰 제목
< h2 > 문단 제목< /h2 > 두번째 큰 제목
< h3 > 문단 제목 < /h3 > 세번째 큰 제목
< h4 > 문단 제목< /h4 > 네번째 큰 제목
< h5 > 문단 제목< /h5 > 다섯번째 큰 제목
< h6 > 문단 제목 < /h6 > 제일작은 제목

Heading태그의 속성
- < h1 align =[center|left|right] > ....문단제목..... < /h1 >
- align : "문단제목"이 화면의 왼쪽(left), 중앙(center),오른쪽(right)
에 설정될 지를 지정.
제목(Heading)의 예


제3장 단락
브라우저의 텍스트 처리원칙
여러 개의 빈칸은 하나로 처리
저작자가 임의로 입력한 [enter]키는 무시.
특별한 지시가 없는 한 모든 단락은 인덴테이션 없이 왼쪽 끝에 정렬 출력
단락에 인덴테이션을 주고자 하면 < blockquote > 태그 이용
탭이나 빈칸을 임의로 삽입하고자 하면 < pre > 태그 이용
< p > .... < /p >태그를 이용하여 하나의 단락지정하기
- 단락과 단락사이는 한줄을 띈다.
- 새로운 단락이 시작되어< p >가 사용되면< /p >로 단락의 끝을
닫지 않아도 된다.

< blockquote > .... < /blockquote >태그 : 단락에 인덴테이션 주기
- < p > 태그 : 인덴테이션없이 단락이 왼쪽 끝에 정렬 출력
- < blockquote >태그 : 단락에 인덴테이션을 줄 수 있다.
< pre > ....< / pre> 태그
- 저작자에 의해 포맷을 미리 정하는 단락
- 이 태그에 의해 둘러싸인 텍스트는 있는 그대로 출력된다.
단락의 예


제4장 수평선 긋기
수평선 긋기 < hr > 태그 이용
< hr align = [center | left | right] width= 백분율 size = 선굵기정수
noshade >

align : 수평선을 화면의 중간, 왼쪽, 혹은 오른쪽에 맞추도록 지정
width : 브라우저 화면의 폭에 대한 퍼센트
size : 수평선의 선 굵기, 가장 가는 선이 1이며 굵기는 이에 대한
상대치
noshade : 선의 그림자 제거, 브라우저에 따라 지원되지 않을 수 있음

< hr > 의 디폴트 값
< hr align= center width=100% size=1 >


제5장 문자
문자의 크기 조절을 위한 방법
- 제목(heading)태그를 이용
- < font > 태그 이용
폰트 < font >태그
< font size = 정수 color = 색상 face = "fontstyle" > .... < /font >

size : 폰트크기지정.상대적인 크기로서, 제일 작은 크기는 1이다.
color : 문자의 색상을 지어하는 속성.
face : HTML3.2표준에서는 없는 속성으로 몇몇브라우저에서
지원한다. 폰트의 타입페이스를 지정하기 위한 속성이며
다음과 같이 사용된다. face ="굴림체"

물리적 스타일
진하게 : < b > ... < /b >
이탤릭 : < i > ...< /i >
타자체 : < tt > ... < /tt >
아래첨자 : < sub > ...< /sub >
위첨자 :< sup > ... < /sup >

논리적 스타일
강조체 : < strong > .... < /strong >,혹은 < em > ...< /em >
깜박임 : < blink > .... < /blink >, netscape에서만 지원.
코드 : < code > .... < /code >
예제 : < samp > .... < /samp >
정의 : < dfn > .... < /dfn >
인용 : < cite > .... < /cite >
밑줄 : < u > .... < /u >
중앙정렬 : < center > .... < center >
* 참고 : 현재브라우저상에는 support안되지만 머지않아
첨부될기능들.

각주 : < a href = "#footnote!" > .... < /a >
< fn id = footnote! > ......< /fn >
삽입 : < ins > .... < ins >
주변글씨보다 작게 : < small > .... < /small >
주변글씨보다 크게 : < big > .... < /big >

문자의 예


제6장 리스트
리스트 태그
- 여러 항목을 나열할 때 사용한다.
순서 있는 리스트(ordered list)
- < ol > ... < /ol > 태그 사용
- < ol type= [ 1 | a | A | i | I ] > .......< /ol >에 사용되는 불렛
type = 1 1,2,3,4,......
type = a a,b,c,d,......
type = A A,B,C,D,......
type = i i,ii,iii,.....
type = I I,II,III,.....

순서없는 리스트(unordered ist)
< ul >... < /ul > 태그사용.
각 항목에 자동으로 불렛을 부여
각 항목에 번호 생략

각 항목을 지정할 때 < li >태그를 사용

여러 종류의 리스트
디렉토리 리스트 : < dir > ... < /dir >
메뉴 리스트 : < menu >... < /menu >
용어목록 리스트 : < dl > ... < /dl >
용어는 정의 부분과 설명부분으로 구성
정의부분 지정태그 < dt >
설명부분 지정태그 < dd >

각 항목의 지정시 < li > 태그를 사용

리스트의 예

제7장 이미지
인라인 이미지
- 문서에 직접 삽입할 수 있는 이미지
- 브라우저가 포맷을 해석할 수 있는 이미지
- GIF, JPG,XBM포맷
브라우저가 해석할 수 없는 이미지들
- 특정이미지를 출력할 수 있는 helper응용 프로그램이나 플러그인
프로그램에 의해 출력
- helper프로그램이나 플러그인 프로그램은 사전에 브라우저에 설정되어
있어야 한다.
- PDF, BMP포맷등
인라인 이미지를 위한 < img >태그
< img align= [ top | middle | left | right ]
width = [ pixels | percentage ] height= [pixcels] [percentage]
border = pixels vspace = pixels hspace = pixels
src = "url" alt = "text" >

align : 이미지와 텍스트가 한줄에 출력될 때 텍스트의 위치
width, height : 화면상의 이미지 크기, 픽셀 혹은 퍼센트단위
border : 이미지 경계선의 두께, 픽셀단위
vspace, hspace : vspace는 아래위간격,
hspace는 양 옆 간격지정, 픽셀단위
src : 그림 파일의 주소, URL로 표현
alt : 그림 파일이 없거나 출력할 수 없을 때 대신 출력하는 문자열


제8장 문서의 배경 및 스타일
문서의 배경 및 스타일 지정 : < body >태그이용
< body background = "이미지파일에 대한 URL"
bgcolor = 색상 vlink=색상 alink=색상 >
......... 본문.......... < /body >

background : 이미지파일에 대한 URL을 지정한다.
브라우저는 이미지를 화면전체에 타일형태로 출력한다.
bgcolor : 배경색상지정. background가 지정되면 bgcolor는 무효
text : 본문의 텍스트색상지정
link : 하이퍼링크(링크)로 설정된 텍스트의 색상지정
vlink : 이미 탐색한 하이퍼링크의 색상지정
alink : 사용자가 링크 위를 클릭하는 순간 하이퍼링크의 텍스트색깔

색상지정방법
- 색상 : RGB로 표시하며 rrggbb의 6개의 hexa로 표현
- 색상 예)빨간색:#ff0000, 초록색 :#00ff00, 파란색:#0000ff 등등
- 색상표 Black=" #000000 " samplecolor Sky Blue=" #A6CAF0 " samplecolor
Brown=" #996633 " samplecolor Cream=" #FFFBF0 " samplecolor
Cyan=" #00FFFF " samplecolor Dark Blue=" #000080 " samplecolor
Dark Gray=" #808080 " samplecolor Dark Green=" #008000 " samplecolor
Dark Purple samplecolor Dark Red=" #800000 " samplecolor
Dark yellow=" #808000 " samplecolor Grass Green=" #C0DCC0 " samplecolor
Green=" #008000 " sampleco

lor Silver=" #C0C0C0" samplecolor
Gray=" #808080 " samplecolor Medium Gray=" #A0A0A4 " samplecolor
White=" #FFFFFF " samplecolor Blue=" #0000FF " samplecolor
Teal=" #008080 " samplecolor Red= " #FF0000 " samplecolor
Purple=" #800080 " samplecolor Fuchsia=" #FF00FF " samplecolor
Lime=" #00FF00 " samplecolor Olive= " #808000 " samplecolor
Yellow=" #FFFF00 " samplecolor Navy=" #000080 " samplecolor


제9장 링크(Link)와 앵커(Anchor)
링크
다른문서 혹은 다른문서의 특정앵커로의 연결 포인터
링크로 설정된 부분의 텍스트는 밑줄과 함께 다른 색깔로 표시됨
링크로 설정된 부분을 클릭하면 연결된 다른 문서 혹은 앵커로 이동

앵커
링크에 의해 연결 가능한 문서의 특정부분

링크와 앵커를 설정하기 위해 사용되는 태그
< a >... < /a >로서 동일하다

링크 설정의 3가지 모형
< a href="url">... < /a > : url문서를 가리키는 링크
< a href="url#lable">... < /a > : url문서내의 lable에 대한 링크
< a href="#lable" >... < /a > : 현재문서 내의 lable에 대한 링크

앵커의 설정
< a name="label" >... < /a >
현재 위치를 이름이 lable인 앵커로 지정

링크이면서 동시에 앵커인 경우
< a name="lable"href="url" >... < /a >
현재위치를 이름이 lable인 앵커로 정의함과 동시에 링크로 설정

링크와 앵커로 설정 가능한 요소
텍스트 예
< a href="//www.chosun.co.kr>Chosun Il BO >... < /a >


이미지 예
< a href="//www.sun.co.kr" > < img src="cho.gif" > < /a >
이미지맵의 한부분

제10장 예약문자
HTML에서 특수하게 다루어지는 문자들을 위한 문자셋
예약어 예 : < .... > , &, "등
이들 문자를 텍스트로 사용하기 위한 다른 방법 : ISO Latin-1 문자셋
ISO Latin-1은 문자참조방식과 엔터티 참조방식을 지원 문자 문자참조 엔터티참조
& & #38 & amp
< & #60 & lt
> & #62 & gt
" & #34 & quot
- & #173 & shy


ISO Latin-1 문자셋 사용 예
- 틀린문장 : < p > < code > if ( x < 0 ) do execute x < /code > < /p >
- 옳은문장 : < p > < code > if ( x < /p >
또는 < p > < code > if( x & #60; 0 ) do execute x < /code > < /p >
* 참고 : 문자참조나 엔터티참조사용시 &와 #38 (또는 &와 amp)는 붙여쓰세요.
ISO Latin-1 문자셋
문자 문자참조 엔터티참조 약어풀이
¡ & #161 & iexcl inverted exclamation mark
¤ & #164 & curren general currency sign
§ & #167 & sect section sign
¨ & #168 & uml umlaut


(C) & #169 & copy copyright sign
ª & #170 & ordf ordinary indicator, feminine
­ & #173 & shy soft hyphen
(R) & #174 & reg registered sign
° & #176 & deg degree sign
² & #178 & sup2 superscript two


제11장 표(Table) 만들기
다수의 행과 열을 가진 다양한 형태의 표를 만들수 있다.

< table >태그 형식
< table border = pixels cellpadding = pixels cellspacing = pixels
width=[ pixels|percentage ] align=[ left|right|center ] cols= c >
...표제목과 셀을 지정하는 태그들... < /table >

border : 표의 테두리 선 굵기, 픽셀 단위
cellpadding : 각 셀의 경계선과 셀 내용 사이의 공간,픽셀단위
cellspacing : 각 셀과 셀 사이의 선 굵기, 픽셀단위
width : 전체 화면에 대한 표의 크기를 지정하는 것으로 절대적인
픽셀단위 (width=240) 를 주거나 전체화면에 대한 표의
상대적인 크기를 주기 위해서는 퍼센트값(width=80%)을 준다.
align : 셀 데이터를 셀 내부 출력할 위치 설정(왼쪽,오른쪽, 중간)
cols : 브라우저가 문서정보를 빨리 알수 있도록하기위해 문서
전체를 읽기전에 미리 컬럼수를 알려주는것

< table > ...... < /table > 안에 포함될 수 있는 태그

표 제목- 표의 상단과 하단 중에 선택적으로 출력가능
< caption align=[ top |bottom ] >
...... 표제목 문자열......... < /caption >

align : 표 제목을 표의 상단(align=top)또는
하단(align=bottom)의 어느 쪽에 출력할 것인지 설정

행과 열을 정의하기 위한 태그
< tr >... < /tr > : 하나의 행 정의
< td >... < /td > : 하나의 셀 데이타 정의
< th >... < /th > : 하나의 헤더 셀 정의

헤더 셀이란 ?
- 행이나 열의 의미를 표현하는 헤더 정보를 가지는 셀을 지칭
< tr > ... < /tr >는 < th >와 < td >태그를 포함한다.

셀 데이타
< th > : th는 table header의 약어로서, 표 헤더로 사용되는
셀 데이터를 지정
< td > : td는 table data의 약어로서, 보통 셀 데이터를 지정
< th > 와 < td > 는 동일한 형식을 가진다. < th > 로 지정된 셀
데이터는 굵게 출력된다.
< td colspan= c
rowspan = r
align = [ left | center | right ]
valign= top | middle | bottom ]
bgcolor = red > .....셀 데이터..... < /td >

colspan : 현재의 셀이 몇 개의 열을 차지할 것인지 지정
rowspan : 현재의 셀이 몇 개의 행을 차지할 것인지 지정
valign : 셀데이터를 셀 내에서 수직으로 어느 쪽에 맞출
것인지 지정
align : 셀데이터를 셀 내에서 수평으로 어느 쪽에 맞출
것인지 지정
bgcolor : 현재 셀의 색깔 지정
셀 데이터 : 텍스트 스트링, 이미지, 혹은 또하나의 표등
모든 것 가능


제12장 프레임(Frame)으로 나누기
프레임(Frame)이란?

웹페이지를 여러 개의 스크롤이 가능한 구역으로 나눈 구역
각 프레임은 개별적인 이름(URL)을 가지므로 다른 프레임과 무관한
정보를 실을 수 있다
각 프레임은 어떤 결과를 다른 프레임에 출력할 수 있다.
동적으로 프레임 창의 크기를 조절하는 것이 가능하다.
프레임을 가지는 HTML문서는 프레임 문서라고 부른다.

프레임을 적용하는 주된 예

툴 바와 같은 고정적으로 변하지 않고 한자리에 있어야 되는 것이 있을 경우
목차가 필요하고, 클릭하면 연결된 프레임에 결과가 출력되게 하는 경우
한 프레임에서 질문을 받으면 다른 프레임에 결과가 출력되게 하는 경우

프레임 문서(Frame Document)의 구성

프레임 문서는 기본적인 HTML문서와는 조금 다른 형태를 가진다.
프레임 문서는 < body > ....< /body >를 가지지 않는다.
프레임 문서는 < body > ....< /body >대신
< frameset > ....< /frameset >를 사용한다.
기본적인 Html문서의 구성
< html >
< head > < title > title < /title > < /head >
< body > ....문서의 본문....< /body >
< /

html >

프레임문서의 구성
< html >
< head > < title > title < /title > < /head >
< frameset > 창을 프레임으로 나누는 표현들< /frameset >
< /html >


프레임을 나누는데 필요한 < frameset > 태그
테이블과 유사한 형식구조
< frameset > 태그 이전에 < body >가 나오면 < frameset >이 무시됨
< frameset > 과 < /frameset >안에 존재 가능한 태그
- 내포된< frameset > ... < frameset >들
- < frame > 태그
- < noframeset > 태그
< frameset rows = "숫자 | % " cols = "숫자 | %, *" border = "숫자" >
....브라우저의 창을 프레임들로 나누는 표현들..... < /frameset >


rows : 가로로 프레임을 나누며 각 프레임의 크기는 픽셀수나
상대적비율 또는 *를 이용해 나머지의 크기로 설정할 수 있다.
예) < frameset rows="100,*" >....... < /frameset >
: 브라우저 창을 수평으로 2개의 프레임으로 분할.
가로폭이 한 프레임은 100픽셀, 다른 프레임은 브라우저
창의 나머지폭으로 분할.

cols : 세로로 프레임을 나누며 픽셀 수나 상대적인 비율, 또는 *를
이용하여 나머지의 크기로 설정할 수 있다.
예) < frameset cols="100,200,*" >....... < /frameset >
: 브라우저 창을 수직으로 3개의 프레임으로 분할.
세로폭이 한 프레임은 100픽셀, 두번째는 200픽셀,
다른하나는 나머지는폭으로 분할.

border : 프레임 경계의 폭을 지정한다.

< frame > 태그
- 하나의 프레임을 정의하는 태그
- < frameset >안에서만 존재가능
< frame src = "URL" name = "frame name" marginwidth= "숫자"
scrolling = "yes | no| auto" noresize > . src : 프레임에 들어갈 문서의 URL
. name : 프레임의 이름, 이 이름은 다른 프레임이나
다른 문서에서 언급 가능
. marginwidth : 프레임의 좌우 여백 지정
. marginheight : 프레임의 상하 여백 지정
. scrolling : 프레임의 스크롤바를 생성하는 방법을 지정
. noresize : 프레임의 크기를 사용자가 임의로 조정 못하게 지정


프레임의 지원하지 않는 브라우저를 위한 태처 < noframes > 태그

프레임을 지원하는 브라우저 : < noframes > ...< /noframes >를 무시

프레임을 지원하지 않는 브라우저
: < frameset >, < frame >을 모두 무시하고
< noframes > ...< /noframes > 만을 인식하여 처리

< noframes > ...< /noframes >태그 특성
: 내부에 html문서를 포함.< body > ...< /body >를
반드시 포함하여야함.

< noframes >의 코드예 < html >
< head > < title > Noframe Element < /title > < /head >
< noframes >
< body bgcolor=yellow >
< h1 > Warning!!! < h1 > < hr >
< p > 이 브라우저는 프레임을 지원하지 않습니다. < /p >
< /body >
< noframes >
< frameset rows="50%, 50%" >
< frame src = "menu.html" name = "menu" >
< frame src = "textbody.html" name = "textbody" >
< /frameset >
< /html >


제13장 이미지맵
이미지 맵이란?
하나의 이미지를 몇 개의 논리적 영역으로 분할하고 각 영역마다 서로 다른 하이퍼링크를 설정하게 하는 방법

이미지 맵의 종류
server-side 이미지 맵 : 이미지맵이 서버에 존재
client-side 이미지 맵 : 이미지 맵이 클라이언트에 존재
client-side 이미지 맵을 만들기 위해 필요한 요소와 순서
이미지를 만든다.
이미지를 원하는 만큼 논리적 영역으로 분리한다.
분할된 영역의 픽셀 주소를 결정하고이미지맵 파일을 만든다.
각이미지영역에 링크를 설정한다
이미지맵 완성

제14장 폼테그 (Form)
폼테그(Form) : 일정한 형식을 통해 사용자로부터 데이타를 입력받을수 있는 태그
< form method=[GET|POST|HEAD] action="URL" name="스트링" >
........................................ < /form >

method HTTP method를 지정하는 필드
action 폼 데이터를 처리할 CGI프로그램의 이름을 지정하는 URL
name 폼의 이름

< form > .. < /form >에 삽입가능 형식 한 줄 텍스트창 < input type = "text" >
암호화된 데이타 입력 창 < input type = "password" >
라디오 버튼 < input type = "radio" >
체크박스 < input type = "checkbox" >
폼 내용 전송 버튼 < input type = "submit" >
폼 내용 리셋 버튼 < input type = "reset" >
여러줄 텍스트 창 < textarea >
풀다운 메뉴 < select >

폼테그의 예