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를 수행한다.
증감 연산자
연산자
설 명
사용 예
++
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
.
.
.
}