HTML

Download Report

Transcript HTML 

HTML
정보보호학과
양 계 탁
HTML의 정의






월드 와이드 웹(WWW)을 통해 볼 수 있는 문서
를 만들 때 사용하는 프로그래밍 언어
하이퍼텍스트를 작성하기 위해 개발된 언어로,
인터넷에서 모든 웹 페이지들은 HTML로 작성
문서의 글자크기, 글자 색, 글자모양, 그래픽, 문
서이동(하이퍼링크) 등을 정의하는 명령어로서
홈페이지를 작성하는 데 쓰인다
세계 공통의 인터넷 표준언어로 htm, html의 확
장자를 갖는다.
HyperText Makeup Language의 약자
컴파일러가 필요치 없고, 웹 브라우저에서 해석
이 가능한 사용하기 쉬운 언어로 각광
Web Brower
홈페이지 문서를 볼 수 있도록 해주는
프로그램
 인터넷을 검색할 수 있는 응용프로그램
 Netscape, Explorer
 다양한 형태의 프로그램 언어를 읽을 수
있다.(JAVA, Perl, XML…)

HTML의 단점 및 보안책
단점 :
1. HTML은 전자 출판을 위해 고안된 언어로
서, 글과 그림을 사용하여 문서를 꾸미기에
적당하나 동적인 효과나 멀티미디어 구현에
미흡함.
2. 글을 올리면 Server는 할일 끝, 정적이다
 보안책 : Flash, Java스크립트, VRML등을
HTML문서에 삽입하여 홈페이지를 제작.

CGI
ASP
ASP
JSP
C#
Html +
Java스크립트 +
VB스크립트 +
ASP명령
URL

인터넷 주소
접속방법// 기계이름. 서버이름. 기관이름. 국가
http://kytis.konyang.ac.kr
http://www.samsung.co.kr
http://www.whitehouse.gov
Web 에디터
메모장
 나모 웹에디터
 드림 위버
 프론트 페이지
 Interdev

HTML의 기본구조
키워드,내용설명,
제작자명,
스크립트 언어
<HTML>
<HEAD>
<META NAME="GENERATOR"
Content="Microsoft Visual Studio 6.0“>
…. 문서에 관한 정보를 표시…..
<TITLE> …문서의 제목….. </TITLE>
</HEAD>
<BODY>
…..본문 의 실제내용…..
</BODY>
</HTML>
TAG의 종류
Tag(태그)
–HTML 문서를 만들기 위한 명령어 골격
–<>와 </>가 한 쌍을 이룸(예외)
–사용되는 영문자의 대소문자 구별이 없다.
<html> 태그 : html 문서의 시작과 끝을 알려준다.
<head> 태그 : html의 머리말에 해당하는 부분으로
<head>에서 <title>태그를 많이 사용한다.
<title> 태그 : html 문서의 제목에 해당되는 부분.
<body> 태그 : html 문서에서 실제적으로 출력할
본문의 내용을 작성.
문단사용 태그
<P> : 문단 바꾸기(문단사이 공간 만듬)
 <BR> : 줄 바꾸기
 <PRE></PRE> : 공백 자유자재로 사용
입력한 그대로 화면에 출력
 <!-- -- > : 주석 문
 <H#></H#> : 문자 크기
 <FONT SIZE=크기></FONT> : 글씨 크기
 <HR> : 선 긋기

예제
글꼴과 문자열의 강조
태그종류
<B></B>
<STRONG></STRONG>
<I></I>
<EM></EM>
<SUB></SUB>
<SUP></SUP>
<STRIKE></STRIKE>
<U></U>
<TT></TT>
<BIG></BIG>
<SMALL></SMALL>
<BLOCKQUOTE></…>
뜻
볼드체
이태릭체
아래 첨자
위 첨자
가운데 줄 그은 글자
밑줄 그은 글자
타자기체
조금 큰 글자
조금 작은 글자
들여 쓰기
목록 만들기
태
그
설
명
<OL></OL>
번호 있는 목록 만들기
<UL></<UL>
번호 없는 목록 만들기
<LI></LI>
목록 만들기 태그에서 기호를 보여줌
<UL>안에서는 ●를 표시
<OL>안에서는 번호를 표시
예제
이미지 넣기
HTML안에 이미지를 출력하려면 <IMG>태그를 사용
< img src=“파일명” align=위치 width=너비 height=높이 >
Align
left
이미지를 문장의 왼쪽에 정렬
right
이미지를 문장의 오른쪽에 정렬
center
이미지를 문장의 가운데에 정렬
top
문장을 이미지의 상단에 정렬
bottom
문장을 이미지의 하단에 정렬
middle
문장을 이미지의 중심에 정렬
texttop
이미지를 글자 상단에 맞추어 정렬
absbottom
이미지를 글자 하단에 맞추어 정렬
absmiddle
이미지를 글자 중간에 맞추어 정렬
baseline
이미지하단에 문장 기준선에 맞추어 정렬
링 크
< a href = “이동위치” > 문장 </a>
현재 디렉토리에서 “test.html”을 찾는다
<a href = “test.html”>
<a href =
“/html/test.html”>
<a href =
“c:/test.html”>
현재 디렉토리 위치에서 html 디렉토리
안에 있는 “test.html”을 찾는다
C 드라이브의 루트 디렉토리에서
“test.html”을 찾는다
 배경 이미지 넣기
<BODY BACKGROUND=“배경그림화일명”>
 이미지에 다른 문서 연결
<A HREF=“연결될 화일명”>
<IMG SRC=“그림화일명”>
</A>
표 만들기
표를 만들기 위해 <table>를 사용
 <tr>, <td>태그와 함께 사용

<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
속 성
border
width
height
align
<tr></tr> : 표 내의 행을 정의
<td></td> : 각 행의 셀을 정의
속 성
설
명
width
너비를 설정( <td>에서만 사용 )
height
높이를 설정( <td>에서만 사용 )
align
정렬을 설정( left, right, center )
colspan
한 열 이상의 셀을 합친 셀을 만들 때 사용
rowspan
한 행 이상의 셀을 합친 행을 만들 때 사용
창 나누기
<frameset >
<frame>
………………
<frame>
</frameset>
<frameset cols=“30%,70%”>
<frame src=“1.html” >
<frame src=“2.html” >
</frameset>
프레임 셋과 프레임
Frame의 속성
속성
설명
border
프레임 구분 테두리
cols
열의 너비(비율 또는 수치)
rows
행의 높이 (비율 또는 수치)
name
프레임의 이름
src
프레임에서 html파일을 읽어옴
target
_blank, _parent, _self
Target의 속성
속 성
설 명
_blank
새로운 창에 표시
_parent
전체 창에 표시
_self
하이퍼 링크가 되어있는 창에
입력 양식
텍스
트
<input type = text name = “이름” size = 크기
maxlength = 최대길이 value = “초기값”
암호
입력
<input type = password name = “이름” size = 크기
maxlength = 최대길이 value = “초기값”
<form> 태그
텍스트 입력양식과 함께 사용
 적용될 양식을 그룹화한다
 Method 양식을 지원

< form action = “이동위치” method = 방식 >
속 성
설
명
Action
디렉토리 경로를 포함한 파일명
파일명만 있는 경우 현재의 디렉토리에서 찾음
Method
데이터를 넘겨주는 방식을 결정
get : 정보를 사용자가 알 수 있도록 전송
post : 정보를 사용자가 알 수 없도록 전송
체크박스 양식

사용자가 목록 중 선택할 수 있게 함
< input type = chkbox name = 이름
Value = 초기값 checked = 유무 >
Name의 속성이 다르면 다른 그룹으로 처리됨
동일한 체크 박스의 목록은 이름이 같아야 한다
라디오버튼 양식

사용자가 그룹내의 목록 중 하나의 항목
만 선택할 수 있게 함
< input type = radio name = 이름
value = 초기값 checked = 유무 >
Name의 속성이 다르면 다른 그룹으로 처리됨
동일한 라디오 버튼 박스의 목록 이름은 같아야
한다
Select 태그

<select> 태그는 리스트박스와 콤보 박
스를 만들 수 있게 한다.
<select name = 종류 size = 크기 multiple>
<option> 문장
<option> 문장
</select>
종류 : list or combo
Size : 항목의 개수가 아니라 웹상에 보여지는 개수
Multiple : 여러 항목의 선택(없으면 1개 선택)
자바 스크립트
자바 스크립트
HTML만으로는 표현할 수 없는 여러 가
지 효과들을 얻을 수 있다
 자바 스크립트는 웹 브라우저 내에서만
돌아가는 스크립트 언어
 스크립트 : 객체에 대한 속성이나 움직임
에 대한 내용을 정의해 놓은 것.

자바스크립트의 특징

웹 브라우저에서 실행된다.
– 서버에서 실행되지는 않고, 클라이언트 PC
에서 실행된다.

객체 언어이다.
– 문서를 구성하는 요소를 객체로 정의하여
효과적으로 사용한다.

작업이 편리하다.
자바와 자바 스크립트의 차이
종류
JavaScript
Java
작성
Html안에 포함
하여 작성
자바에디터에서 작성
컴파일을 하여 사용
방식
인터프리터 방식
컴파일 방식
OOP
클래스 없고
상속 안됨
클래스 있고
상속 가능
데이터형 데이터형 설정 안함
보안
소스 노출
보안성 없음
자동인식, 데이터형 설정
컴파일된 실행파일로
만들어져 보안성 있음
자바스크립트의 장단점
장 점
1. 사용하기가 편하다
2. 작업이 빠르다
3. 생산성이 좋다
4. 별도의 프로그램이 필요 없다.
(운영체제 불문)
5. 웹 브라우저에서 실행속도가
빠르다.
6. 배우기가 쉽다
7. 애니메이션 효과를 만들 수 있다
단 점
소스코드의 노출
객체와 메소드가
한정되어 있다.
웹 서버에 정보를
저장하지 못한다.
자바 스크립트 태그

Html 문서 안에 삽입<head> or
<body>
< script language = javascript>
자바 스크립트 코드
</script>
주 석 문
// 주 석 문
/* 주 석 문*/
<!– 주 석 문 ?? (HTML문)
변 수
Var 을 사용하여 선언
 데이터형은 사용하지 않음

변수
이름
규칙
영문,숫자,밑줄 사용
 특수문자, 한글 및 예약어 사용못함
 대소문자 구분

산술 연산자
연산자
설
명
사용예
*
곱 셈
A*B
/
나눗셈
A/B
+
덧 셈
A+B
-
뺄 셈
A-B
%
두수를 나눈 나머지
A%B
+
두개의 문장이나 숫자를 연결
관계 연산자
연산자
설
명
사용예
==
A와 B는 같다
A==B
!=
A와 B는 다르다
A != B
<
A는 B보다 작다
A < B
<=
A는 B보다 작거나 같다
A <= B
>
A는 B보다 크다
A>B
>=
A는 B보다 크거나 같다
A >= B
논리 연산자
A 연산자 B
A
B
||
&&
^
T
T
T
T
F
T
F
T
F
T
F
T
T
F
T
F
F
F
F
F
Or
And
Nor
조건 연산자
(조건) ? 문장1 : 문장2
조건식이 참이면 문장1을 수행하고,
조건식이 거짓이면 문장2를 수행한다.
조건 연산자
조건문이나 반복문에서 조건 판단식으로 주로 사용.
연산의 결과가 true/false 인 수식으로도 사용 가능.
비교 연산자
의미
X == Y
X != Y
X>Y
X >= Y
X<Y
X <= Y
X,Y 가 같으면 true
X,Y 가 다르면 true
X 가 Y 보다 크면 true
X 가 Y 보다 크거나 같으면 true
X 가 Y 보다 작으면 true
X 가 Y 보다 작거나 같으면 true
증감 연산자
연산자
설 명
사용 예
++
1씩 증가
++A, A++
--
1씩 감소
--A, A--
++에 의해 1을 준비 A에 1을 더한 값을
반환
 A값을 반환한 후 ++에 의해 1을 증가

대입 연산자
연산자
=
설
명
오른쪽 값을 왼쪽변수에 할당
+=
A +=B
( A = A + B)
-=
A -=B
*=
A *=B
( A = A * B)
/=
A /=B
( A = A / B)
%=
A %=B
( A = A % B)
( A = A - B)
IF 문
If (조건)
{ 문장
문장
..
..
}

조건식을 만족하면 중괄호
안의 문장을 수행하고 조건
식을 만족하지 않으면 아무
일도 수행하지 않는다
If (조건1)
{문장1}
Else If (조건2)
{문장2}
Else
{문장 3}
If (조건)
{문장1}
Else
{문장2}

조건식을 만
족하면 문장
1을, 조건식
을 만족하지
않으면 문장
2을 수행

조건1을 만족하면
문장1을 조건2을
만족하면 문장2을
조건1,2를 모두 만
족하지 않으면 문
장3을 수행
Switch 문(다중 if 문)
Switch (변수)
{
case 상수1 : 문장1
break
case 상수2 : 문장2
break
…
…
default : 문장 3
}

변수 값이 상수1
과 같으면 문장1
을, 상수2와 같으
면 문장2을, 변수
값이 switch 문에
선언한 상수와 일
치하지 않으면 문
장3을 실행
For 문
For (초기 값 ; 최종 값 ; 증감식 )
{
문장
}

초기 값에서 시작하여 최종 값까지 증감
식 만큼 증감하여 문장을 반복 수행한
다.
While 문
조건 만족
While (조건식)
{
문장
…
…
}
아니오(False)
예 (True)
반복 문장
While문
다음문장
Do While 문
반복 문장
Do
{
문장
…
…
} While (조건식)
조건 만족
예 (True)
아니오(False)
While문
다음문장
Continue, Break 문
For, While, Do While 문의 반복문에 사
용
 Continue 문을 만나면 조건을 판단한
후 다음 구문을 수행
 Break 문을 만나면 반복중인 반복구문
을 강제적으로 종료

함수 만들기
반환 값이 없는 함수와 반환 값이 있는
함수(return 문으로 구분)
 <head>와 </head> 사이에 작성

Function 함수명(매개변수1, 매개변수2, …)
{
문장
…
…
return 반환 값이나 반환 변수
}
자바스크립트의 객체
자바 스크립트는 객체지향(OOP)언어
 객체를 클래스 대용으로 사용
 객체는 함수 객체, 자바 스크립트 내장
객체, 브라우저 내장 객체 등이 있다.

함수 객체
function 함수명(매개변수1, 매개변수2, …)
{
this.이름1=매개변수1
this.이름2=매개변수2
.
.
.
}
자바스크립트 객체와 이벤트
자바스크립트 객체의 계층구조
자바스크립트를 지원하는 웹 브라우저는 HTML
페이지를 로드할 때 그 페이지에 존재하는 요소들을
반영하는 자바스크립트 객체를 생성하며, 페이지의
내용에 관계없이 한 페이지가 로딩될 때 처음부터
다음과 같은 5개의 자바스크립트 객체가 존재한다.
° Navigator
Window
° History
Location
Document
window
Frame
Layer
Text
document
Image
Textarea
FileUpload
Form
Password
Hidden
navigator
Location
Link
History
Area
Reset
Submit
Anchor
Plugin
Checkbox
Radio
Button
Select
객체의 이름 및 설명
종류 명칭
설명
Window 윈도우마다 하나씩 존재하는 객체로 윈도우 내에
객
체
존재하는 모든 객체의 상위객체
Document HTML 문서마다 하나씩 존재하는 객체로 HTML
문서의 내용애 관한 정보를 가진다.
Location Browser 에서 보여주고 있는 현재 URL
History
Browser 의 History List
Navigator 사용중인 Browser 의 정보(이름, 버전 등)
이벤트와 이벤트 핸들러
이벤트의 종류
이벤트
abort
blur
change
click
dblclick
dragdrop
error
focus
keydown
발생하는 경우
사용자가 이미지 로딩을 강제로 중단할 때
윈도우, 폼 구성요소, 프레임이 포커스를 잃을 때
Select, text, Textarea 객체의 필드값을 변경한 후
포커스를 잃을 때
폼 구성요소가 클릭될 때
폼 구성 요소나 링크를 더블 클릭할 때
사용자가 한 객체를 브 라우저 윈도우 상으로 드
롭할 때
문서나 이미지의 로딩시 오류가 발생할 때
윈도우,프레임,프레임셋, 폼 요소가 포커스를 받을
떄
사용자가 키를 누른 순간
이벤트
keypress
keyup
load
mousedown
mousemove
mouseover
mouseup
move
reset
resize
select
submit
unload
발생하는 경우
사용자가 키를 누른 채 유지하는 동안
사용자가 누른 키를 놓는 순간
브라우저 윈도우에 HTML 문서의 로딩 직후,
또는 프레임셋 문서의 모든 프레임이 로딩을 마칠 때
사용자가 마우스를 누르는 순간
사용자가 마우스를 움직일 때마다
사용자가 마우스 커서를 이미지 맵이나 링크위에 올려
놓을 떄
사용자가 마우스 커서를 이미지 맵이나 링크위에서 내려
놓을 떄
사용자나 자바스크립트 코드에 위해 윈도우나 프레임의
위치가 이동될 떄
사용자가 reset 버튼을 누를 때
사용자나 자바스크립트 코드에 위해 윈도우나 프레임의
크기가 조절되는 순간
사용자가 Text 나 Textarea 객체의 필드내의 텍스트 일부
를 선택할 때
사용자가 submit 버튼을 누를 때
현재 HTML 문서를 종료하고 다른 웹사이트로 이동할 때
이벤트 핸들링
onBlur, onFocus 핸들러
이벤트 발생:
OnBlur - 윈도우나 프레임, 폼 요소가 포커스를 잃을 때 호출
OnFocus - 윈도우나 프레임, 폼 요소가 포커스를 받을 때 호출
대상 객체:
Button, Checkbox, FileUpload, Layer, Password, Radio, Reset,
Select, Submit, Text, Textarea, window
<html>
<head><title> OnBlur, OnFocus</title>
</head>
<body bgcolor="blue”
OnBlur="document.bgColor='blue'”
OnFocus="document.bgColor='red'">
<h3> 포커스를 받으면 빨강색<br>
잃으면 파랑색 배경으로 변합니다. </h3>
</body>
</html>
<html>
<head><title> OnBlur, OnFocus</title>
</head>
<body onLoad="document.f.t.focus()">
<script>
function checkText(text1)
{
if (text1.value==""){
alert("이름을 입력하세요")
text1.focus()
}
}
</script>
이름 입력없이 다른 창으로 갈 수 없다.
<form name="f">
이름 <input type="text" name="t" value="" OnBlur="checkText(this)"><br>
학번 <input type="text" name="num1">
</form>
</body>
</html>
onChange 핸들러
이벤트 발생:
객체의 내용을 변경한 후 포커스를 잃었을 때 호출.
대상 객체:
Select, Text, Textarea
onClick과 onDblClick 핸들러
이벤트 발생:
OnClick - 폼 요소나 링크가 클릭되었을 때 호출.
OnDblClick - 폼 요소나 링크가 더블클릭되었을 때 호출.
대상 객체:
Button, document, Checkbox, link, Radio, reset, Submit
onError 핸들러
이벤트 발생:
자바스크립트 문법 오류나 런타임 오류시, 혹은 <img>태그에
지정된 이미지의 로딩시 이미지에 대한 URL이 잘못되었거나 이
미지가 손상되었을 때 호출된다.
대상 객체:
document, Image
onLoad 핸들러
이벤트 발생:
°
윈도우상에 문서의 로딩 완료 시점- 브라우저가 윈도우의 로
딩을 마친 후 곧장 호출되거나 <frmeset> 태그 내의 모든
프레임의 로딩을 마칠 때 호출
° <body onLoad=“...”>
°<frameset onLoad=“...”>
° 이미지의 로딩 완료 시점
대상 객체:
Image, Layer, window
onReset, onSubmit 핸들러
이벤트 발생:
onReset - 사용자가 reset 버튼을 누를 때 호출하며, 핸들러가
false를 리턴하면 폼이 리셋되지 않는다.
onSubmit - 사용자가 submit 버튼을 누를 때 호출하며, 핸들러
가 false를 리턴하면 브라우저는 폼 데이터를 전송하
지 않는다.
* 이 핸들러들은 Submit이나 Reset 버튼에 설정되지 않고 <form>
태그내에 설정된다.
대상 객체:
Form