html이란?
HTML 이란 Hyper Text Markup Language 의 약자로써 월드와이드웹 문서를 작성하는 Markup Language 이다. HTML 은 여러 태그들로 구성되어 있으며 각 태그들을 사용하여 원하는 형태의 문서를 만들어 갈 수 있다. 인터넷문서는 Hyper Text 의 원리를 이용하여 여러 문서를 링크시켜 다양한 정보를 손쉽게 검색하여 볼 수 있게 만들어 준다. 이러한 다양한 표현의 가능성과 쉬운 사용으로 월드와이드웹을 짧은 시간에 대중시키는데 원동력이 되었다.
-HTML 문서작성
HTML 문서의 작성은 일반 텍스트 에디터나 전용 에디터를 사용하면 누구나 쉽게 작성할 수 있다. 일반 텍스트 문서와 같이 작성하면 되며 저장시 확장자를 *.HTM 이나 *.HTML으로 저장하면 브라우저가 인터넷 문서임을 인식하고 브라우저 화면에 뿌려준다. 확장자는 위의 두 가지 모두 가능하나 한 가지 주의해야 할 것은 대부분 자신의 계정이 있는 서버에 파일을 올릴 경우 처음으로 보여지는 파일의 경우에는 확장자를 *.HTML 해야한다. 이것은 브라우저나 HTML 자체의 특성이 아니라 서버에서 각 계정사용자들의 주소를 외부사용자의 요구 있을 때 서버에서 설정되어진 이름을 가진 파일을 보여주도록 설정해 놓았기 때문이다. 일반적으로 초기 파일의 이름은 index.html다.
-인터넷문서의 기본형식
HTML 문서는 기본적인 골격은 다음과 같다
<html>
<head> <title>타이틀</title> </head>
<body>
문서의 본문내용
</body>
</html>
먼저 위의 예를 보면 각 태그들이 한 쌍으로 되어있다는 것을 알 수 있다. 태그는 일반적으로 시작을 알리는 태그와 그 태그가 끝났음을 알리는 태그로 이루어져 있다. 그리고 각 태그 안< >에는 태그 내용을 제어할 수 있는 여러 속성들을 포함하고 있다. 하지만 모든 태그가 모두 동일한 형식을 취하는 것은 아니며 어떤 태그는 쌍을 이루지 않은 하나의 태그로써 가능한 것도 있으며 자체에 다른 속성을 포함하지 않는 것도 있다. 위에서 볼 수 있듯이 인터넷문서의 기본적인 형식을 구성하는 태그들에 대하여 살펴보겠습니다
-기본적인 형식을 이루는 태그들
<HTML> </HTML>
문서가 인터넷 문서의 시작과 끝임을 알리는 역할을 합니다. 항상 인터넷문서의 맨 처음과 끝에 위치한다.
<HEAD> </HEAD>
문서 서문의 시작과 끝을 알립니다. 별다른 기능을 하진 않는다.
<TITLE>타이틀 명 기입</TITLE>
문서의 제목을 나타내주는 태그이다 브라우저의 맨 위를 보면 문서의 제목이 나와있는 것을 볼 수 있다.
<BODY>본문의 내용</BODY>
문서 본문의 시작과 끝임을 알린다. 이 태그 안에는 문서 전반에 영향을 주는 여러 속성들이 있다. 그 속성들은 다음과 같다.
(a) Background color
<BODY BGCOLOR="컬러명 또는 헥사코드">
배경의 색을 바꿔준다. 보통 브라우저의 배경색은 윈도우의 디폴트 색인 회색이다 색상은 색상명(Black, White, Blue...)과 헥사코드 값으로 나타낼 수 있다. 헥사코드는 색상의 R. G. B 값을 16진수로 나타낸 것이다.
(예)
<BODY BGCOLOR="#ff0000"> 빨강 배경
<BODY BGCOLOR="#00ff00"> 초록 배경
<BODY BGCOLOR="blue">파랑 배경
(b) Background image
<BODY BACKGROUND="배경이미지가 있는 URL">
웹사이트들을 돌아다니다 보면 벽돌 모양에, 암석 모양의 배경들이 펼쳐진 것을 본적 있을 것이다. 이 속성이 바로 그러한 배경이미지를 지정해 주는 속성이다
(예)
<BODY BACKGROUND="../../image.gif">
<BODY BACKGROUND="http://www.haninfo.net/~narsis/image.gif">
(c) Text Color
<BODY TEXT="색상명 또는 헥사코드">
이 속성은 문서전반에 쓰이는 문자의 색깔을 지정해주는 속성이다. 색상지정은 (a)와 같다
(예)
<BODY TEXT="#0000ff">
(d) Link Color
<BODY LINK="색상명 또는 헥사코드">
링크된 텍스트의 색깔을 바꿔준다. 기본적인 색상은 파란색이다. 링크란 다른 문서나 멀티미디어요소를 연결시키는 것으로 링크에 관련된 태그에서 언급한다.
(e) Visited Link
<BODY VLINK="색상명 또는 헥사코드">
방문했던 링크부분의 색상을 지정하는 속성이다. 기본적인 색상은 보라색이다
(f) Active Link
<BODY ALINK="색상명 또는 헥사코드">
이 속성은 마우스로 링크된 부분을 클릭하고 아직 손을 떼지 않았을 때의 색깔을 말한다. 기본적인 색상은 빨간색이다
-문단정렬(Alignment)
텍스트와 이미지 등 인터넷문서에서의 기본적인 정렬은 왼쪽정렬을 기본으로 한다.
⼇ Center
<CENTER></CENTER>
이 태그는 텍스트나 이미지 등을 문서 중앙에 위치하게 해주는 태그이다 태그의 끝을 알리지 않고 나두면 시작 태그이하의 모든 것들은 문서중앙에 정렬된다.
(예)
<center>
HOMEPAGE DEVELOPER
HTML REFERENCE 입니다
</center>
(화면에 출력된 경우)
HOMEPAGE DEVELOPER
HTML REFERENCE 입니다
⼇ Align text
<P ALIGN=LEFT|CENTER|RIGHT>내용</P>
텍스트 정렬시키는 태그입니다. 이 태그 안에 들어간 태그들은 ALIGN 속성에서 지정한 대로 왼쪽, 오른쪽, 가운데로 정렬한다
(예)
<P ALIGN=RIGHT>
HOMEPAGE DEVELOPER
HTML REFERENCE 입니다
</P>
(화면에 출력된 경우)
HOMEPAGE DEVELOPER
HTML REFERENCE 입니다
-문단구분(Dividers)
⼇ Line Break
<br>
문장을 다음 줄로 넘길 때 사용하는 태그이다 엔터키를 한 번 친 것과 같다
(예)
저의홈페이지에 오신 것을 환영합니다 여러분 정말 환영해요!<br>
저의홈페이지에 오신 것을 환영합니다 <br>여러분 정말 환영해요!
(화면에 출력했을 때)
저의홈페이지에 오신 것을 환영합니다 여러분 정말 환영해요!
저의홈페이지에 오신 것을 환영합니다
여러분 정말 환영해요
⼇ Paragraph
<p>
위의<br> 태그와 비슷하다 하지만 이 태그는 문단을 구분할 때 사용합니다 한 줄의 빈줄을 남기고 줄을 구분한다
(예)
홈페이지를 만들어 봅시다<br>정말 쉽습니다<br>
홈페이지를 만들어 봅시다<p>정말 쉽습니다
(화면에 출력된 경우)
홈페이지를 만들어 봅시다
정말 쉽습니다
홈페이지를 만들어 봅시다
정말 쉽습니다
⼇ Horizontal Rule
<HR 속성>
이 태그는 선을 그어줌으로써 문단을 나누어준다. 이 태그에는 선의 두께와 길이 위치 등을 지정하는 속성이 있다
(a) Alignment
<HR ALIGN=LEFT|RIGHT|CENTER>
선의 위치를 지정한다 왼쪽, 가운데, 오른쪽으로 정렬한다.
(b) Thickness
<HR SIZE="픽셀 값">
선의 굵기를 지정한다. 굵기는 픽셀 값으로 나타낸다.
(예)
<HR SIZE="5"> <BR>
<HR SIZE="10">
(c) Width
<HR WIDTH="픽셀 값이나 백분율">
선의 폭(길이)을 지정한다. 폭은 픽셀 값과 백분율로 나타낼 수 있다. 백분율로 나타낼 때는 화면에 대한 상대적인 백분율이다
(예)
<HR WIDTH="100"> <BR>
<HR WIDTH="50%">
(화면에 출력된 경우)
(d) Solid Line
<HR NOSHADE>
선을 입체감이 없이 그냥 보통 선으로 보인답니다. 이름에서 알 수 있듯이 "그림자 없음(No Shade)" 입니다
(예)
<HR NOSHADE size=4 width=16>
(화면에 출력된 경우)
⼇ No Break
<NOBR >
라인이 끊어지는 것(Line Break)을 막아준다. <BR>태그의 반대 역할을 한다.
3) 리스트 만들기(Lists)
⼇ Unordered List
<UL> <LI> </UL>
이 태그는 순서가 부여되지 않는 리스트를 만들 때 사용된다.
(예)
This is Example Unordered List.<P>
<UL>
<LI>I am One.
<LI>I am Two.
</UL>
(화면에 출력된 경우)
This is Example Unordered List.
⼘I am One.
⼘I am Two.
이 태그에는 정렬되는 문장 앞에 사각형, 원, 빈 사각형 모양을 나타내는 속성이 있습니다. 속성은 다음과 같다.
(a) Bullet Type
<UL TYPE=DISC|CIRCLE|SQUARE>
예를 통해 속성의 역할을 보겠다.
(예)
Complex Unordered List Items. <P>
<UL> type=disc
<LI> Main Item 1
<UL type=square>
<LI> Sub Item 1
<LI> Sub Item 2
<LI> Sub Item 3
</UL>
<LI> Main Item 2
<LI type=square> Main Item 3
<LI> Main Item 4
</UL>
(화면에 출력된 경우)
Complex Unordered List Items.
⼘Main Item 1
⼈Sub Item 1
⼈Sub Item 2
⼈Sub Item 3
⼘Main Item 2
⼈Main Item 3
⼘Main Item 4
⼇ Ordered List
<OL> <LI> </OL>
이 태그는 목록에 순서를 지정하면서 리스트를 만들어 준다.
(예)
This is Example Ordered List.<P>
<OL>
<LI>I am One.
<LI>I am Two.
</OL>
(화면에 출력된 경우)
This is Example Ordered List.
1. I am One.
2. I am Two.
이 태그에는 순서를 나타내는 속성이 있다. 속성의 역할은 다음과 같다.
(a) Outline Type
<OL TYPE=A|a|I|i|1> <LI TYPE=A|a|I|i|1>
이 속성은 순서를 A일 경우는 A, B, C.. 순서로 i일 경우는 i, ii, iii... 등으로 번호가 매겨진다.
(b) Starting number
<OL START=시작하는 숫자> <LI START=시작하는 숫자>
처음 시작할 값을 지정합니다. 특정한 값부터 시작하길 원할 때 이 tag을 사용하시면 된다. 역시 마찬가지로 <OL START=?>는 전체 리스트에 영향을 끼치고, <LI START=?>는 이것을 포함한 다음의 리스트에 영향을 미친다
⼇ Definition List
<DL> <DT> <DD> </DL> (<DT>=term, <DD>=definition)
어떤 용어를 정의하거나 할 때 사용합니다. <DT>는 Term(용어)를 의미하고, <DD>는 Definition(정의)을 의미한다.
- 이 태그의 시작과 끝을 알리는 태그로써<DL></DL>를 사용하고,
- 정의할 단어나 제목을 쓸 때 <DT>태그를 사용,
- 정의를 쓸 때 사용하는 태그로 <DD>를 사용한다
(예)
<DL>
<DT>월드와이드웹이란
<DD>월드와이드웹이란 여러 네트워크가 연결된 전세계적인 네트워크 망이다.
<DT>FTP 란
<DD>파일 전송을 위해 만들어진 서비스로 인터넷 서비스의 한 종류
</DL>
(화면출력결과)
월드와이드웹이란
월드와이드웹이란 여러 네트워크가 연결된 전세계적인 네트워크 망이다.
FTP 란
파일 전송을 위해 만들어진 서비스로 인터넷 서비스의 한 종류