xml 2)html의 이해
TRANSCRIPT
HTML 의 이해XML 의 이해1. HTML 이란 ?
1. HTML 이란 ?
HTML 의 이해
What is “HTML” (Wikipedia)
short for HyperText Markup Language, Predominant markup language for the creation of web pages. It provides a means
To describe the structure of text-based information in a document (headings, para-graphs, lists).
To supplement that text with interactive forms, embedded images, and other ob-jects.
Written in the form of labels (known as tags), created by less-than signs (<) and greater-than signs (>).
HTML can also describe, to some degree, the appearance and semantics of a document
HTML can include embedded scripting language code which can affect the behavior of web browsers and other HTML processors.
HTML 의 이해
HTML 의 구성 요소
<FONT FACE=" 돋움 " COLOR="RED" SIZE="3">.......... </FONT>
ELEMENT( 요소 )
시작 태그 종료 태그요소값
ATTRIBUTE( 속성 )
속성값
1. HTML 이란 ?
HTML 의 이해
<HTML> HTML 문서의 시작
<HEAD> HTML 문서의 헤더
<TITLE> 문서의 제목 ( 윈도우 타이틀바에 표시 ) </TITLE>
</HEAD>
<BODY> HTML 문서의 몸체
본문내용
</BODY> </HTML> HTML 문서의 종료
HTML 문서의 기본 구조 1. HTML 이란 ?
HTML 의 이해XML 의 이해2. HTML TAG
2. HTML TAGs
HTML 의 이해
<Hn> ... </Hn> 단락의 제목
<P> ... </P> 단락 구분
<BR/> 줄 바꾸기
<HR/> 수평선 그리기
<CENTER> ... </CENTER> 가운데 정렬
<!-- ... --> 주석
문서 구성을 위한 태그 2. HTML TAG
HTML 의 이해
문자 스타일 지정을 위한 태그
<FONT> … </FONT> 폰트 지정
FACE=“ 서체” 서체 지정SIZE=“ 숫자” 크기 지정
<B> ... </B> 짙은 글씨
<I> ... </I> 이탤릭체
<U> ... </U> 밑줄 문자
<SUB> ... </SUB> 밑첨자
<SUP> ... </SUP> 윗첨자
2. HTML TAG
HTML 의 이해
단락 스타일 지정을 위한 태그
<PRE> ... </PRE> 쓴 모양 그대로 보여주기 <BLOCKQUOTE> ... </BLOCKQUOTE> 인용문
<ADDRESS> ... </ADDRESS> 저작자 주소
2. HTML TAG
HTML 의 이해
목록 작성을 위한 태그
<OL> ... </OL> 순서 있는 목록
TYPE=“1/A/a/I” 항목 번호 형식START=“ 값” 항목 번호의 시작 값
<UL> ... </UL> 순서 없는 목록
<LI> ... </LI> 목록 내의 항목
<DL> ... </DL> 용어 정의 목록
<DT> ... </DT> 용어 제목
<DD> ... </DD> 용어 설명
2. HTML TAG
HTML 의 이해
테이블 작성을 위한 태그
<TABLE> ... </TABLE> 표 작성BORDER=“숫자” 테두리 두께조정 , 입체감 WIDTH=“숫자 %” 표 넓이 HIGHT=“숫자 %” 표 높이CELLSPACING=“숫자” 표의 안여백 지정
CELLSPADDING=“숫자” 내용 선의 굵기 <TR> ... </TR> 표의 각 줄 <TH> ... </TH> 표의 헤더 <TD> ... </TD> 표의 데이터 각 칸
ALIGN=“light/left/center” 가로 정열 방식VALIGN=“top/bottom/middle” 세로 정열 방식
ROWSPAN=“숫자” 숫자만큼의 줄을 합치기
COLSPAN=“숫자” 숫자만큼의 칸을 합치기 <CAPTION> ... </CAPTION> 표의 제목
2. HTML TAG
HTML 의 이해
이미지 삽입을 위한 태그
<IMG> 이미지 삽입
SRC=“ 그림화일명” 그림화일 선택
ALIGN=“top/middle/bottom/left/right/texttop/absmid-
dle/baseline/absbottom” 그림위치설정
BORDER=“ 숫자” 테두리 굵기설정 , 0 은 테두리 없애기
WIDTH=“ 숫자” 그림 크기 지정
HEIGHT=“ 숫자” 그림 크기 지정
VSPACE=“ 숫자” 그림의 아래 , 위의 거리 지정
HSPACE=“ 숫자” 그림의 좌우 거리 지정
ALT=“ 풍선 도움말” 도움말
2. HTML TAG
HTML 의 이해
데이터 입력을 위한 태그
<FORM> ... </FORM> 입력 양식의 시작과 끝
<INPUT TYPE="text"> 텍스트 입력 양식
<INPUT TYPE="password"> 암호 입력 양식
<INPUT TYPE="checkbox"> 체크 박스
<INPUT TYPE="hidden"> 숨겨진 입력 양식
<INPUT TYPE="radio"> 라디오 버튼
<INPUT TYPE="submit"> 데이터 보내기 버튼
<INPUT TYPE="reset"> 리셋 버튼
<SELECT> ... </SELECT> 여러 개의 항목을 나열한 후 선택
<OPTION> ... </OPTION> SELECT 의 각 항목 나열
HTML 의 이해
텍스트 입력과 전송
<FORM METHOD="POST" ACTION="NEXT.ASP"><INPUT NAME="ssid" TYPE="hidden" VALUE="1234"/><HR/> 텍스트 데이터 입력 <HR/>이름 : <INPUT NAME="name" TYPE="text" SIZE="60"/><BR/>암호 : <INPUT NAME="password" TYPE="password" SIZE="30"/><BR/>내용 : <TEXTAREA NAME="content" ROWS="5" COLS="40">
이 곳에 텍스트 데이터를 입력하십시오 .</TEXTAREA><HR/> 데이터 전송 <HR/><INPUT TYPE="submit" VALUE=" 전송 "/><INPUT TYPE="reset" VALUE=" 취소 "/><HR/>
</FORM>
HTML 의 이해
값의 선택과 전송
<FORM METHOD="POST" ACTION="NEXT.ASP"><HR/> 선택 입력 <HR/>소속 :<INPUT NAME="index1" TYPE="radio" VALUE="1" CHECKED/>
한국학중앙연구원<INPUT NAME="index1" TYPE="radio" VALUE="2"/> 한국고전번역원<INPUT NAME="index1" TYPE="radio" VALUE="3"/> 건국대학교
<BR/>관심 :<INPUT NAME="index2" TYPE="checkbox" VALUE="1"/>XML<INPUT NAME="index2" TYPE="checkbox" VALUE="2"/>DBMS<INPUT NAME="index2" TYPE="checkbox" VALUE="3"/
>WWW<BR/>전공 :<SELECT NAME="index3" SIZE=1>
<OPTION VALUE="1" SELECTED> 문학 </OPTION><OPTION VALUE="2"> 사학 </OPTION><OPTION VALUE="3"> 철학 </OPTION><OPTION VALUE="4"> 인문정보학 </OPTION><OPTION VALUE="5"> 문화콘텐츠학 </OPTION>
</SELECT><HR/> 데이터 전송 <HR/><INPUT TYPE="submit" VALUE=" 전송 "/><INPUT TYPE="reset" VALUE=" 취소 "/><HR/>
</FORM>
HTML 의 이해
데이터 입력 전송 실습
<HTML> <HEAD> <TITLE>HTML 기본 태그 </TITLE> </HEAD> <BODY> <FORM METHOD="post" ACTION="NEXT.ASP"> <INPUT style="LEFT: 65px; TOP: 19px" type=hidden value=1234 name=ssid> <HR> 값 선택 <HR> 소속 : <INPUT NAME="index1" TYPE="radio" VALUE="1" CHECKED> 한국학중앙연구원 <INPUT NAME="index1" TYPE="radio" VALUE="2"> 한국고전번역원 <INPUT NAME="index1" TYPE="radio" VALUE="3"> 건국대학교
<BR>관심분야 :<INPUT NAME="index2" TYPE="checkbox" VALUE="1">XML
<INPUT NAME="index2" TYPE="checkbox" VALUE="2">DBMS <INPUT NAME="index2" TYPE="checkbox" VALUE="3">WWW
<BR>전공 :<SELECT NAME="index3" SIZE=1> <OPTION VALUE="1" SELECTED> 문학 </OPTION><OPTION VALUE="2"> 사학 </OPTION><OPTION VALUE="3"> 철학 </OPTION><OPTION VALUE="4"> 인문정보학 </OPTION><OPTION VALUE="5"> 문화콘텐츠학 </OPTION></SELECT><HR> 텍스트 데이터 입력 <HR>이름 : <INPUT NAME="name" SIZE="60" ><BR>암호 : <INPUT NAME="password" TYPE="password" SIZE="30"><BR>
내용 : <TEXTAREA name=content rows=5 cols=40> 이 곳에 텍스트 데이터를 입력하십시오 .</TEXTAREA> <HR> 데이터 전송 <HR> <INPUT TYPE="submit" VALUE=" 전송 "> <INPUT TYPE="reset" VALUE=" 취소 "> <HR> </FORM> </BODY> </HTML>
HTML 의 이해
전송된 데이터 값의 수신 (ASP)
<% DIM strssid, strndx1, strndx2, strndx3, strname, strpass, strtext
strssid = Request.Form("ssid") strndx1 = Request.Form("index1") strndx2 = Request.Form("index2") strndx3 = Request.Form("index3") strname = Request.Form("name") strpass = Request.Form("password") strtext = Request.Form("content") Response.Write "Session ID = " & strssid & "<BR/>" Response.Write " 소속 = " & strindex1 & "<BR/>" Response.Write " 과정 = " & strindex2 & "<BR/>" Response.Write " 전공 = " & strindex3 & "<BR/>" Response.Write " 이름 = " & strname & "<BR/>" Response.Write " 암호 = " & strpass & "<BR/>" Response.Write " 내용 = " & strtext & "<BR/>"
%>