네트워크 명령 실습 -...

HTML 실습

http://cs.kumoh.ac.kr/main.do

Contents

1. WWW, HTTP, HTML 개요

2. HTML 기본 구조

3. HTML 기본 태그

1. 글자 관련

2. 서식 관련

3. 표 관련

4. 하이퍼링크 관련

5. 프레임 관련

6. 멀티미디어 관련

7. 배경 등 꾸미기 관련

8. 아이템화 관련


1. HTML 개요

1. HTML(Hyper Text Markup Language)

A. 웹 문서를 표현하는 기술

B. ASCII 코드로 구성된 일반적인 텍스트 파일

C. 컴퓨터 시스템이나 운영체제에 독립

2. 문서의 확장자

A. .html / .htm

메뉴 [보기]-[소스]


1. HTML 동작

1. HTML 문서의 작동 원리


1. WWW(World Wide Web): 웹 시스템 구조

1. 웹 서비스: TCP 포트 80번

2. 클라이언트-서버 모델

A. URL (Uniform Resource Locator)

웹 서버의 자원 명칭으로 사용하는 프로토콜, 서버의 호스트 이름,

서버 내부의 파일 경로명으로 구성

예: http://www.korea.co.kr/welcom.html

UNIX/Linux 시스템

로그인 이름 kumoh

홈 디렉토리/public_html/index.html

http://www.korea.co.kr/~



1. 연결 설정과 해제



1. 연결 설정 및 해제

A. 사용자가 웹 브라우저에게 웹 서버 URL 주소 입력

B. 웹 브라우저가 DNS 서버에게

웹 서버의 호스트 이름을 IP 주소로 변경 요청

C. 웹 브라우저가 <IP 주소 + 포트 80번>의 웹 서버와

TCP 접속 시도

D. 웹 브라우저가 웹 서버에게 최초 화면을 위한 GET 명령 전송

E. 웹 서버가 웹 브라우저에게 요청한 웹 문서를 회신

F. 웹 브라우저와 웹 서버 사이의 연결 해제

G. 웹 브라우저가 사용자 화면에 웹 문서를 출력


1. WWW: HTTP (Hypertext transfer protocol)

1. HTTP: TCP 포트 80 번

웹 문서를 전송하는 프로토콜

2. 요청과 응답

A. 동작 원리: 요청과 응답

B. 요청

HTTP 클라이언트가 서버에 요청을 전송

요청 메소드, URL, HTTP 버전과 기타 부가 정보 포함

C. 응답

HTTP 서버가 요청의 결과인 응답 코드가 포함된 정보를 회신



1. 요청과 응답

A. 비연결(Connectionless):

클라이언트 요청에 응답한 후에 바로 연결을 끊음

B. 비상태 (Stateless):

서버의 상태에 상관없이 요청 수행



1. 요청과 응답: 요청 메시지

A. 요청문

요청 메소드

URL

HTTP 버전

B. 헤더 (Header)

C. 바디 (Body)



1. 요청과 응답: 응답 메시지

A. 상태문

HTTP 버전

상태 코드

상태 이름

B. 헤더 (Header)

C. 바디 (Body)



1. 요청과 응답: 응답 메시지 및 상태 코드

A. 200 OK: 요청이 성공적으로 수행

B. 202 Accepted: 요청이 수신되었으나, 즉각 실행되지 않고 있음

C. 400 Bad Request: 요청 메시지의 문법 오류

D. 401 Unauthorized: 요청의 실행에 필요한 권한이 없음

E. 403 Forbidden: 요청이 거부됨

F. 404 Not Found: 원하는 문서를 찾을 수 없음

G. 500 Internal Server Error: 서버에 오류 발생

H. 501 Not Implemented: 요청을 수행할 수 없음


2. HTML 문서의 구성요소

1. 태그(Tag) A. 태그란 <와 > 기호로 둘러싸인 일종의 표현 명령어.

B. 시작 태그와 종료 태그 두 종류가 있다.

2. 요소(Element) A. 요소는 태그의 의미를 결정하는 것으로 태그에 포함된 가장 중요한 부분이다.

B. 시작 태그 내에 들어가는 표현명령이며 옵션 형태의 속성이 있을 수 있다.

C. 만일 </TITLE>이라는 태그가 있다면 요소는 TITLE이 된다.

3. 속성(Attribute) A. 속성은 요소의 시작 태그 내에 사용해 명령을 구체화시킨다.

B. 예를 들어, 텍스트의 글꼴을 지정하기 위해 사용하는 FONT 요소는 SIZE, COLOR, FACE 등의 속성을 가지고 있다. 예)<FONT SIZE = 5>

4. 변수(Argument) A. 변수는 속성과 관련된 값이다.

B. <BR CLEAR = "left">인 경우 속성 CLEAR의 변수다.

C. 속성과 변수는 = 부호로 구분한다.


2. HTML 문서의 기본 구조

1. <HTML></HTML>

A. 작성된 문서가 HTML로 작성되었음을 알려준다.

2. <HEAD></HEAD>

A. 문서의 정보를 기술하는 곳이다.

문서에 관련된 저자, 키워드, 언어, 문서 제목 등을 기술한다.

B. 문서의 제목을 작성하는 부분에는 <TITLE>...</TITLE> 태그와 함께 사용한다.

3. <BODY></BODY>

A. 화면에 출력할 내용을 모두 나열하는 곳이다.

B. 웹 페이지 안의 모든 본문(보여지는 부분)을 지정한다.

<HTML>

<HEAD>

<TITLE> 웹 문서의 제목 </TITLE>

</HEAD>

<BODY>

본문 내용

</BODY>

</HTML>

HTML 문서의 시작

HTML 문서의 헤더 시작

HTML 문서의 제목 작성

HTML 문서의 헤더 끝

HTML 문서의 본문 시작

HTML 문서의 본문 내용 작성

HTML 문서의 본문 끝

HTML 문서의 끝

html-tp-page6n.html


3.1 기본 HTML 태그 – 글자 관련 <FONT>

1. <FONT> 태그에 정의된 여러 속성을 이용해 텍스트의 크

기, 색상, 글꼴 등을 제어

<FONT> ... </FONT>

기능 글자를 제어한다.

속성 SIZE : 글자 크기(1~7, 기본값은 3) COLOR : 글자 색상(값은 색상 코드나 색상명을 사용) FACE : 글꼴

사용 예 <FONT SIZE=“5” COLOR=“#FF0000” FACE=“궁서체”> </FONT>

html-tp-page7n.html


3.1 기본 HTML 태그 – 글자 관련 <B> <I> …

태그 기능 예

<B> 글자 </B> 글자를 굵게 한다. 굵게

<I> 글자 </I> 이탤릭체를 만든다. 기울임

<U> 글자 </U> 선택한 부분에 밑줄을 긋는다. 글자에 밑줄 긋기

<SUB> 글자 </SUB> 아래첨자 아래첨자 52

<SUP> 글자 </SUP> 윗첨자 윗첨자 52

<S> 글자 </S> 글자를 가로 질러 취소선을 긋는다. 취소 글자

<BIG> 글자 </BIG> 글자를 조금 크게 한다. 글자를 크게 표현

<SMALL> 글자 </SMALL> 글자를 조금 작게 한다. 글자를 작게 표현

html-tp-page8n.html


3.2 기본 HTML 태그 – 문서 서식 관련

1. 대표적인 문서 서식 태그

A. 문단 바꾸기, 정렬하기 : <P> 태그

B. 문단 정렬하기 : <P> 태그, <CENTER> 태그

C. 소스에 설명문 달기 :  태그

D. 수평선 그리기 : <HR> 태그

E. 구역 구분하기 : <DIV> 태그


1. 줄과 문단 바꾸기 : <BR>, <P> 태그

<BR>

기능 글자를 제어한다.

사용예 소스 결과

<P>…</P>

기능 문단을 구분할 때 사용한다. 종료 태그를 생략할 수 있다.

속성 ALIGN : 문단 정렬 [ 왼쪽(LEFT), 가운데(CENTER), 오른쪽(RIGHT)]

사용 예 소스 결과

서식 관련 태그<BR> 문단 태그 서식 관련 태그 문단 태그

<P>서식 관련 태그</P> <P ALIGH=“RIGHT”> 문단 태그 </P>

서식 관련 태그 문단 태그



1. 문단 정렬하기 : <P> 태그, <CENTER> 태그

A. <P> 태그

ALGIN 속성을 이용해 왼쪽, 가운데, 오른쪽 정렬 가능

B. <CENTER> 태그

<CENTER> 태그를 사용하면 문서를 가장 쉽게 가운데 정렬

<CENTER> 태와 </CENTER> 사이에 있는 내용이 모두 가운데 정렬

되므로 문서 전체의 정렬 등 넓은 범위를 가운데 정렬하고자 할 때

자주 사용


1. 수평선 그리기 : <HR> 태그

2. 소스에 설명 달기 :  태그

<HR>

기능 수평선을 만든다

속성 SIZE : 수평선의 높이 WIDTH : 수평선의 길이를 픽셀 값(px)나 비율 값(%)으로 지정한다. COLOR : 수평선의 색상 ALIGN : 수평선 위치[왼쪽(LEFT), 가운데(CENTER), 오른쪽(RIGHT)] NOSHADE : 수평선의 입체감을 없앤다.

사용 예 <HR COLOR=“#FF0000” WIDTH=“70%” SIZE=“10” NOSHADE ALIGN=“LEFT”>



기능 코드에 대한 힌트나 설명(주석)을 넣는다.

사용 예 <!– 표 제목 지정--><H1>시간표</H1>

html-tp-page10-11-12n.html


1. 구역 구분하기 : <DIV>, <SPAN> 태그

2. 편집한 내용 그대로 브라우저에 나타내기 : <PRE> 태그

<DIV>…</DIV>

기능 문서 내에서 특정 문단을 그룹화한다. <P> 태그와 거의 비슷한 역할을 하지만 문단을 구분하지는 않는다.

속성 ALIGN : 문단 정렬 [ 왼쪽(LEFT), 가운데(CENTER), 오른쪽(RIGHT)]

<SPAN>…</SPAN>

기능 <DIV> 태그처럼 문서의 내용을 그룹화하지만 줄바꿈 처리를 하지 않는다.

<PRE>…</PRE>

기능 공백이나 입력한 모양 그대로 출력한다.


<PRE> 서식 관련 태그 공백이나 줄바꿈을 자유롭게</PRE>

서식 관련 태그 공백이나 줄바꿈을 자유롭게

ENTER

ENTER

html-tp-page13n.html



1. 제목 글자 조절하기 : <Hn> 태그

<Hn>

기능 제목 글자의 크기를 지정한다.

기능 n : 1~6까지 사용할 수 있고, 1이 가장 큰 크기다.


<H1> 제목글 크기 지정</H1> 제목글 크기 지정



3.3 기본 HTML 태그 – 표 관련

1. 대표적인 표 관련 태그

A. <TABLE> 태그

B. <TR> 태그

C. <TD> 태그



1. <TABLE> 태그: 표의 시작과 끝을 표시

<TABLE> ... </TABLE>

기능 표의 시작과 끝을 알린다.

속성 ALIGN : 표 정렬[왼쪽(LEFT), 가운데(CENTER), 오른쪽(RIGHT)] WIDTH : 행의 가로 크기를 픽셀 값(px)이나 비율 값(%)으로 지정 HEIGHT : 표의 세로 크기를 픽셀 값(px)이나 비율 값(%)으로 지정 BODER: 표의 테두리 두께 CELLPADDING: 셀과 내용 사이의 거리를 픽셀 값(px)으로 지정 CELLSPACING: 셀(칸)과 셀 사이의 거리를 픽셀 값(px)으로 지정 BACKGROUND : 표의 배경 그림 BGCOLOR: 표의 배경 색상

사용 예 <TABLE WIDTH=”610” HEIGHT=”200” BORDER=”0” ALIGN=”CENETR” CELLPADDING=”2” CELLSPACING=”1” BGCOLOR=”#3366CC”> <TR> <TD> 표 만들기 </TD> </TR> </TABLE>




1. <TR> 태그

A. 표의 가로행 수는 <TR> 태그를 사용해 지정한다.

<TR> ... </TR>

기능 표의 행을 알린다.

속성 ALIGN : 행 내용의 수평 정렬[왼쪽(LEFT), 가운데(CENTER), 오른쪽(RIGHT)] VALIGN : 행 내용의 수직 정렬[위쪽(TOP), 가운데(MIDDLE), 아래쪽(BOTTOM) WIDTH : 행의 가로 크기를 픽셀 값(PX)이나 비율 값(%)으로 설정 HEIGHT : 행의 세로 크기를 픽셀 값(PX)이나 비율 값(%)으로 설정 BACKGROUND : 행의 배경 이미지 BGCOLOR : 행의 배경 색상

사용 예 <TABLE> <TR BGCOLOR=”#FF0000”> <TD> 홈페이지 </TD> </TR> </TABLE>




1. <TD> 태그

A. <TD> 태그는 항상 <TR> 태그에 종속되어 <TR> 태그가 나누어 놓은 행

을 세로로 자르는 역할을 한다.

<TD> ... </TD>

기능 표의 열을 알린다.

속성 ALIGN : 열 내용의 수평 정렬[왼쪽(LEFT), 가운데(CENTER), 오른쪽(RIGHT)] VALIGN : 열 내용의 수직 정렬[위쪽(TOP), 가운데(MIDDLE), 아래쪽(BOTTOM) WIDTH : 열의 가로 크기를 픽셀 값(PX)이나 비율 값(%)으로 설정 HEIGHT : 열의 세로 크기를 픽셀 값(PX)이나 비율 값(%)으로 설정 BACKGROUND : 열의 배경 이미지 BGCOLOR : 열의 배경 색상 COLSPAN :셀을 열(세로 방향)로 합치기 ROWSPAN : 셀을 행(가로 방향)로 합치기

사용 예 <TABLE> <TR> <TD WIDTH=”110”><B>월</B></TD> <TD WIDTH=”110”><B>화</B></TD> <TD WIDTH=”110”><B>수</B></TD> </TR> </TABLE>




1. <TH>, <CAPTION> 태그 <TH> ... </TH>

기능 <TD>의 기능과 속성은 동일하나 진하게와 가운데 정렬이 적용되어 표에서 제목 셀을 표현하는 데 이용된다.

사용 예 <TABLE> <TR> <TH WIDTH=”110”>요일</TD> </TR> </TABLE>

<CAPTION> ... </CAPTION>

기능 표의 제목(캡션)을 지정한다.

속성 ALIGN : 표 제목의 정렬[위쪽(TOP), 가운데(MIDDLE), 아래쪽(BOTTOM)

사용 예 <TABLE> <CAPTION ALIGN=”TOP”> 시간표</CAPTION> <TR> <TD WIDTH=”110”><B>월</B></TD> <TD WIDTH=”110”><B>화</B></TD> <TD WIDTH=”110”><B>수</B></TD> </TR> </TABLE>

html-tp-page19n.html + 확장


네트워크 명령 실습 -...

Documents

Transcript of 네트워크 명령 실습 -...