HTML/CSS/JAVASCRIPT 강의실

시삽: 레드플러스 님 
게시판 이동:
 제목 : 6일차 강의내용 - HTML기본태그
글번호: 10
작성자: 관리자
작성일: 2001/01/10 오전 3:08:00 (2001/01/10 오전 3:10:00 수정)
조회수: 6811
HTML

학습내용 : HTML 기본태그 (2001/01/10)

 

HTML의 기본형태

<HTML>

<------   HTML 문서의 시작

   <HEAD>

< -----┐

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

            | HTML 문서의 머리 부분

   </HEAD>

< -----┘

 

 

   <BODY>

< -----┐

 

            |

      ... HTML 문서의 내용 ...

            | HTML 문서의 몸통 부분

 

            |

   </BODY>

< -----┘

</HTML>

<------   HTML 문서의 종료

모든 HTML 문서는 머리부분(HEAD)과 몸통 부분(BODY)부분으로 나뉘어 집니다. 또 머리 부분(HEAD)에는 HTML 문서의 타이틀(TITLE)을 포함하고 있습니다.

 

HTML 문서의 시작과 종료

사용법

<HTML> ~ </HTML>

설명

HTML 문서의 시작과 종료를 나타냅니다. HTML은 HTML 언어로 만들어졌기 때문에 <HTML>로 시작해서 </HTML>로 끝나야 합니다.

 

HTML 문서의 머리부분

사용법

<HEAD> ~ </HEAD>

설명

<HEAD> 태그는 일반적으로 HTML 문서에 관한 정보들을 나타내는데 실제로 타이틀(TITLE)을 제외하고 다른 정보들은 웹 브라우저에 나타나지 않습니다.

 

HTML 문서의 제목

사용법

<TITLE> ~ </TITLE>

설명

<TITLE> 태그는 HTML 문서의 타이틀(제목)을 지정하는 태그입니다. <HEAD> ~ </HEAD>사이에 기입합니다. <TITLE> 태그로 지정한 문서의 타이틀은 웹 브라우저의 화면 상단에 나타납니다. 이 태그는 64문자 이내로 기입하는 것입 좋습니다.

예제1

<html>
<head><title>???의 홈페이지</title></head>
</html>

 

HTML 문서의 본문

사용법

<BODY> ~ </BODY>

설   명

<BODY> 태그는 HTML 문서의 실제적인 내용이 들어가는 곳으로, <BODY>와 </BODY> 안에 포함되는 내용이 웹 브라우저 화면에 나타나게 됩니다.

옵션

설명

BACKGROUND="이미지 파일"

배경으로 들어가는 이미지 파일의 지정

BGCOLOR="#RGB"

배경색의 지정

TEXT="#RGB"

문자색의 지정

LINK="#RGB"

링크색의 지정

VLINK="#RGB"

방문한 것이 있는 링크의 색 지정

ALINK="#RGB"

링크를 클릭했을 때의 색 지정

예   제

<html>
<head><title>???의 홈페이지</title></head>
<body bgcolor="blue">
</body>
</html>

예   제

<html>
<head><title>???의 홈페이지</title></head>
<body bgcolor="red" text="yellow">
지금 보고 계시는 글꼴색은 yellow입니다.
</body>
</html>

예   제

<html>
<head><title>???의 홈페이지</title></head>
<body background="images/back.gif">
이 경우는 'images'라는 폴더에 'back.gif'라는 파일이 들어있어야 합니다.
</body>
</html>

 

<H> 태그

사용법

<H>...</H>

설   명

문서내의 제목들을 지정한다. 제목들에는 1-6의 번호가 붙여지는데, <H1>은 문서의 가장 큰 제목을 표시하며 <H3>는 하위 제목을 표시한다. 일반적으로 제목 태그들 내의 텍스트들은 굵은 글꼴로 표시되며 일반적인 문서 텍스들보다는 더 크게 표시가 된다.

 

<BR> 태그 (Line BReak)

사용법

<BR>

설   명

줄바꿈을 해주는 태그입니다.
일반적으로 소스상에 어떤 내용을 치고 엔터키를 눌러도,
웹 브라우저 상에는 한줄로 붙여 나옵니다. 이부분을 줄바꿈을 해주려면 인위적으로 <br>이라는 태그를 사용해야 합니다.

 

<HR> 태그

사용법

<HR>

설   명

문서에 수평선(자)을 그린다. 이것은 보통 문서를 시각적으로 몇 개의 부분으로 나누어준다.

예   제

<H1> 제목입니다 </H1>
<HR ALIGN="LEFT" WIDTH="60%">
아마도 본문이 들어가겠죠....

 

<P> 태그

사용법

<P>

설   명

문서내의 단락을 설정해 준다.
<p>는 <br>을 두 번 사용한 것과 같습니다.

예   제

<P> 단락을 설정하는 예제입니다. </P>
<P> 안녕하세요... 단락을 테스트 중입니다.</P>

 

<PRE> 태그

사용법

<PRE>...</PRE>

설   명

미리 서식 설정된 평범한 텍스트가 들어간다. 이것은 문서에 컴퓨터 프로그램 출력물이나 소스 코드를 추가할 경우 유용하다.

이 태그 내에서 다른 태그를 사용할 경우 사용된 태그는 브라우저에의해 해당태그의 본래 의미대로 해석된다.

예   제

<PRE>
#include <stdio.h>

void main(void)
{
        printf("Hello World!\n");
}
</PRE>

 

<XMP> 태그

사용법

<XMP>...</XMP>

설   명

문서 내에 미리 서식 설정되어진 텍스트들을 삽입한다. <PRE> 태그와는 달리, <XMP> 태그내의 HTML 태그들을 브라우저가 인터럽트를 하지 않는다. HTML 3.2에서는 이 태그를 더 이상 사용하지 않으므로 이것 대신 <PRE>를 사용하도록 하자

예   제

<XMP>이 태그내의 <H4>다른 태그들</H4>은 무시된다.</XMP>

 

<FONT> 태그

사용법

<FONT>...</FONT>

설   명

브라우저가 텍스트를 표시하는데 사용할 글꼴의 특성들을 설정하거나 변경한다.

예   제

The cat was really <FONT SIZE="+3">BIG!</FONT>
<font size=1>웹마스터 1과정</font><br>
<font size=2>웹마스터 1과정</font><br>
<font size=3>웹마스터 1과정</font><br>
<font size=4>웹마스터 1과정</font><br>
<font size=5>웹마스터 1과정</font><br>
<font size=6>웹마스터 1과정</font><br>
<font size=7>웹마스터 1과정</font><p>
<font color=#0000ff>웹마스터 1과정</font><br>
<font color=#ff0000>웹마스터 1과정</font><br>
<font color=green>웹마스터 1과정</font><br>
<font color=cyan>웹마스터 1과정</font><p>
<font face=궁서>어서오세요</font><br>
<font face=바탕>어서오세요</font><br>
<font face=돋움>어서오세요</font><br>
<font face=굴림>어서오세요</font><p>
<font size=4 color=blue face=궁서>안녕하세요</font><br>
<font size=2 color=red face=돋움>안녕하세요</font><br>
<font size=5 color=yellow face=굴림>안녕하세요</font><br> 

속   성

SIZE : 크기조절 1-7
COLOR : 문자열의 색상 조절
FACE : 글꼴 변환

 

<BLOCKQUOTE> 태그

사용법

<BLOCKQUOTE>...</BLOCKQUOTE>

설   명

한 문단 전체를 들여쓰기 위해 사용
텍스트의 들여쓰기 기능, 문서 내의 직접 인용문에 사용하기 좋다. 

예   제

단어란 <BLOCKQUOTE>글쎄요 뭐라고 설명을 못하겠네요....</BLOCKQUOTE>

속   성

 

 

<CENTER> 태그

사용법

<CENTER>...</CENTER>

설   명

문서를 가운데로 정렬
문서에서 텍스트의 좌우 여백이 동일하도록 만든다. 이 태그는 현재 <DIV ALIGN="CENTER"> 속성으로 공식적으로 대체가 되었는데 HTML 3.2에서는 호환성의 목적으로만 추가가 되었다. 

예   제

<CENTER> 가운데 정렬입니다. </CENTER>

속   성

 

 

<ADDRESS> 태그

사용법

<ADDRESS>...</ADDRESS>

설   명

주소를 다른 내용과 구별이 되게 표시해 준다.

예   제

<ADDRESS>서울시 동대문구 제기1동</ADDRESS>

속   성

 

 

주석 태그

사용법

<! : 한줄주석
<!--...--> : 문단주석

설   명

문서에 주석문을 삽입한다.
주석문은 문서 소스에서는 보이지만 브라우저에서는 표시되지 않는다. 소스코드에 설명을 달 때 사용한다.

예   제

<!-- 주석문. 브라우저에서는 보이지 않는 부분입니다 -->
<H1>안녕하세요 !</H1>

속   성

 

 

※ 학습정리

 

※ 관련문제

 

※ 참고문헌/사이트

 

 

 
이전 글   다음 글 삭제 수정 답변 글쓰기 리스트

(댓글을 남기려면 로그인이 필요합니다.)

관련 아티클 리스트
  제       목 파일 작성자 작성일 조회
이전글 6일차 강의내용 - HTML 정의 - 관리자 2001-01-11 6044
현재글 6일차 강의내용 - HTML기본태그 - 관리자 2001-01-10 6811
  HTML 태그 발음 하기 - 관리자 2001-09-23 5762
  처음으로 작성해보는 HTML 문서 - 레드플러스 2021-12-07 1741
  예제. 001. 안녕하세요HTML.htm HTML-0001.jpg(80 KB) 레드플러스 2003-05-13 4949
  파일 확장자(*.htm, *.html, *.txt) 보이기 - 레드플러스 2014-10-28 3734
  예제. 002. HTML기본구조1.htm HTML-0002.jpg(74 KB) 레드플러스 2003-05-13 5044
  예제. 003. HTML기본구조2.htm HTML-0003.jpg(74 KB) 레드플러스 2003-05-13 4760
  예제. 004. 제목추가하기(H태그).htm HTML-0004.jpg(117 KB) 레드플러스 2003-05-13 5010
  예제. 005. 새줄시작하기(BR태그).htm (1) HTML-0005.jpg(130 KB) 레드플러스 2003-05-13 5204
  예제. 006. 새단락시작하기(P태그).htm HTML-0006.jpg(163 KB) 레드플러스 2003-05-13 5025
  예제. 007. 줄바꿈하지않기(NOBR태그).htm HTML-0007.jpg(132 KB) 레드플러스 2003-05-13 5254
  예제. 008. 수평선(HR태그).htm HTML-0008.jpg(98 KB) 레드플러스 2003-05-13 5194
  예제. 009. 텍스트서식미리설정하기(PRE태그XMP태그).htm HTML-0009.jpg(131 KB) 레드플러스 2003-05-13 5223
  예제. 010. 글꼴바꾸기(FONT태그).htm HTML-0010.jpg(136 KB) 레드플러스 2003-05-13 5239
  예제. 014. 인용문만들기_들여쓰기(BLOCKQUOTE태그).htm HTML-0014.jpg(90 KB) 레드플러스 2003-05-13 5449
다음글 5일차 강의내용 - 정보검색(?) - 관리자 2001-01-09 5404
 
손님 사용자 Anonymous (손님)
로그인 Home