4-1 <OL>, <LI>, <UL>


OL(Ordered List)태그는 순서 있는 목록을 정리하고 싶을때 사용되는 태그입니다. 타입을 정할 수 있습니다.

<OL TYPE="1"></OL> 1, 2, 3, 4, 5.. 아라비아 숫자
<OL TYPE="A"></OL> A, B, C, D, E.. 영어 대문자
<OL TYPE="a"></OL> a, b, c, d, e.. 영어 소문자
<OL TYPE="l"></OL> Ⅰ, Ⅱ, Ⅲ, Ⅳ, Ⅴ.. 로마 대문자
<OL TYPE="i"></OL> ⅰ, ⅱ, ⅲ, ⅳ, ⅴ.. 로마 소문자


LI(List)태그는 종료 태그를 넣지 않아도 무관하며, <BR> 태그를 넣지 않아도 줄바꿈이 자동으로 이루어집니다. <OL>과 </OL> 사이에 써주면 숫자 또는 영문자 등이 삽입됩니다. 타입을 기입하지 않으면 기본적으로 아라비아 숫자가 삽입됩니다.

<HTML>
 <HEAD>
  <TITLE>OL ,LI 태그</TITLE>
  </HEAD>

<BODY> 
  <OL TYPE="I">
   <LI>1번 LIST 태그!
   <LI>2번 LIST 태그!
   <LI>3번 LIST 태그!
  </OL>
 </BODY>
</HTML>


그리고 시작번호도 지정해 줄수 있습니다.

<OL TYPE="I" start="2">


이렇게 바꾸고 결과를 살펴볼까요? 아래와 같은 결과를 확인하실 수 있습니다.

 
UL(Unordered List) 태그는 OL 태그와는 달리 순서가 없는 목록을 정리할때 사용합니다. 타입은 아래와 같습니다.

<UL TYPE="DISC"></UL> 목록 앞에 속이 찬 원형블릿을 넣음
<UL TYPE="SQUARE"></UL> 목록 앞에 속이 찬 사각블릿을 넣음
<UL TYPE="CIRCLE"></UL> 목록 앞에 속이 빈 원형블릿을 넣음


여기서의 <LI>태그는 <OL> 태그와 사용방법이 동일합니다. 그리고 <UL>태그와 <OL>태그는 중첩이 가능합니다.

<HTML>
 <HEAD>
  <TITLE>UL 태그</TITLE>
  </HEAD>

<BODY> 
  <UL TYPE="CIRCLE">
   <LI>1번 LIST 태그!
   <LI>2번 LIST 태그!
   <LI>3번 LIST 태그!
  </OL>
 </BODY>
</HTML>



 

4-2 특수문자 표시


우리는 HTML 태그가 < 기호로 시작해서 > 기호로 끝난다는 것을 알고있습니다. 그런데 이 기호들을 화면상에 표시하려면 어떻게 해야할까요? 특수문자(Character Entities)를 사용하여 우리가 원하는 문자들을 표시할 수 있습니다.
 

<HTML 특수문자(Character Entities)>

4-3 이미지 넣기


<IMG> 태그는 이미지를 넣을때 사용되는 태그이며, 태그 속성은 아래와 같습니다.

<IMG
src="이미지 이름"
width="이미지 너비"
height="이미지 높이"
align="정렬"
alt="이미지 설명"
border="테두리 두께"
hspace="좌우 여백"
vspace="상하 여백"
>


예를 들어, 아래와 같이 코드를 짤수 있습니다.

<HTML>
 <HEAD>
  <TITLE>IMG 태그</TITLE>
  </HEAD>

<BODY> 
  <IMG src="C:/html.jpg" width="300" height="214" alt="HTML!" border="4" hspace="10" vspace="10">
 </BODY>
</HTML>