|
지금까지 홈페이지의 개념과 HTML Editor를 이용해 홈페이지를 만드는 방법에 대해 살펴 보았습니다. 대충 홈페이지를 만드는 법에 대해서는 이해가 가는데 아직도 막연한 두려움이 있지 않으십니까? 그것은 아직 홈페이지를 구성하고 있는 기본원리를 모르기 때문입니다.
홈페이지는 HTML이라는 언어로 되어 있고, HTML을 작성하려면 메모장이나 노트패드와 같이 윈도우즈에서 제공하는 기본적인 텍스트 에디터만 있으면 된다고 말씀드렸습니다. 이처럼 텍스트 에디터를 이용하려면 HTML의 기본이 되는 '태그(TAG)'라는 명령어를 자유롭게 사용할 수 있어야 합니다. 프로그램 언어를 이용해 홈페이지를 작성한다고 해서 '어려운 것! 난 할 수 없는 것!'이라는 선입견을 갖지 마시고, HTML언어는 아주 간단한 프로그램 언어이므로 자신감을 가지고 도전해 보시기 바랍니다. 그리고, 앞으로 홈페이지 만들기는 HTML을 쉽게 작성할 수 있는 HTML Editor를 이용할 것이기 때문에 HTML 태그에는 이러한 종류가 있다는 것만 소개해 드리고, HTML Editor를 이용해 홈페이지를 만들면서 이러한 태그를 직접 입력해야 할 부분에서 가장 중요하고 필요한 태그들에 대해서 자세히 설명드리겠습니다.
HTML이란 무엇인가? HTML이 무엇인지에 대해서는 더 이상 설명을 드리지 않아도 잘 아시리라 생각합니다. HTML은 웹에서 정보를 표현할 수 있도록 웹페이지를 작성하기 위한 언어의 이름입니다. 인터넷에서 웹을 통해 접근되는 모든 웹페이지들이 HTML로 작성됩니다.
HTML과 다른 언어의 차이점 ▶ HTML은 대·소문자를 구별하지 않습니다.
▶ HTML은 Compile하지 않고, 작성한 그대로 브라우저에서 실행됩니다.
▶ HTML에서는 Space나 Enter의 영향을 받지 않습니다.
▶ HTML은 잘못된 표현이라도 그대로 넘어가는 경우가 많습니다.
HTML의 구성요소
요소(Elements)
요소란, HTML에서 시작태그와 종료태그로 이루어진 모든 명령어를 의미합니다. 컨테이너는 시작태그에서 종료태그까지를 의미하며, 시작태그와 종료태그 사이에 텍스트나 다른 요소들을 가질 수 있습니다. 예를 들어 <TITLE></TITLE>이라는 요소는 문서의 제목을 브라우저의 제목 표시줄에 표시하는 명령어인데 시작태그와 종료태그 사이에 제목에 해당하는 텍스트를 <TITLE>문서제목</TITLE>과 같이 써 주어야 하는데 이것을 컨테이너라 합니다.
태그(Tag)
태그는 요소의 일부로서 시작태그와 종료태그, 두 종류가 있습니다. 시작태그는 요소를 시작하며, 종료태그는 요소를 끝냅니다. 물론 모든 요소들이 종료태그로 끝나는 것은 아닙니다. 예를 들어 이미지 삽입 요소인 <IMG>처럼 종료태그를 쓰지 않는 경우도 있습니다.
속성(Attributes)
속성은 요소의 시작태그 안에서 사용되는 것으로 좀더 구체화된 명령어 체계를 의미합니다. 예를 들어 <FONT></FONT>요소는 SIZE, COLOR, FACE 등의 속성을 갖는데, <FONT SIZE=5>처럼 시작태그 안에서 사용되며 속성이름과 변수 사이에는 =부호를 사용하여 연결합니다. 또한 속성은 일반적으로 변수를 명시하지만, <HR NOSHADE>처럼 일부 속성은 변수를 갖지 않기도 합니다.
변수(Arguments)
변수는 속성과 관련된 값을 말합니다. 예를 들면 <P ALIGN="left">에서 따옴표 안에는 'right'나 'center'를 사용할 수 있는데, 이들은 ALIGN이라는 속성의 변수이며, 속성과 변수는 =로 연결됩니다.
메모장을 활용하자. 윈도우즈에서 기본적으로 제공되는 텍스트 에디터인 메모장에서 HTML문서를 작성하는 방법을 살펴 보겠습니다.
① 탐색기를 열어 C:에 앞으로 작성할 홈페이지를 저장할 폴더를 만듭니다. 폴더 이름은 'MyHomepage'로 하도록 하겠습니다. 먼저, 탐색기 좌측에서 C:을 선택하고, 우측에서 빈 공간에서 마우스 오른쪽버튼을 눌러 나타나는 메뉴에서 [새로만들기]→[폴더]를 차례로 선택합니다.
② [새폴더]라는게 생겼으면 새폴더라는 이름대신 MyHomepage라고 입력하고, 다른 빈공간을 마우스 왼쪽으로 클릭하거나 Enter를 칩니다. 그러면 앞으로 작성될 내 홈페이지를 저장할 MyHomepage라는 폴더가 만들어 집니다.
③ 윈도우즈의 [시작버튼]→[프로그램]→[보조프로그램]→[메모장]을 차례로 선택해 메모장을 실행합니다. 메모장이 실행되면 태그를 입력합니다. 홈페이지는 반드시 기본형식을 갖추어야 한다는 것을 명심하시기 바랍니다.
HTML 문서의 기본구조 1. HTML문서는 <html>로 시작해서 </html>로 끝나야 합니다.
2. <html>과 </html> 사이에는 문서의 머리말인 <head>...</head>와 본문을 의미하는 <body>...</body> 두 부분으로 구분됩니다.
3. <head>...</head> 사이에는 브라우저의 작업표시줄에 표시될 제목을 적어주는 <title>...</title>태그가 들어 갑니다.
4. 홈페이지에 나타내고자 하는 모든 내용은 <body>...</body> 사이에 표현해 주어야 합니다.
④ 메뉴에서 [파일]→[저장]을 선택합니다.
⑤ [다른 이름으로 저장]창이 나타나면 저장할 위치를 C:의 'MyHomepage'로 정해주고, 파일이름을 index.htm이나 index.html이라고 입력하고 저장합니다. 이렇게 저장된 htm이나 html파일이 홈페이지입니다.
⑥ 자, 이제 브라우저에서 어떻게 보여지나 확인해 보겠습니다. 브라우저(익스플로러나 넷스케이프)를 실행하고 메뉴에서 [파일]→[열기]를 선택한 후, [열기]칸에 주소를 C:\MyHomepage\index.html이라고 직접 입력해도 되고, [찾아보기]버튼을 눌러 위치를 지정해 주어도 됩니다. 여기서는 [찾아보기]버튼을 눌러 보겠습니다.
⑦ 찾는위치를 C:의 MyHomepage로 지정하고 index.html이라는 파일이 보이며 선택한 후 [열기]버튼을 클릭합니다.
⑧ [열기]칸에 브라우저로 보고자 하는 파일의 이름이 입력되었습니다. [확인]버튼을 클릭합니다.
⑨ 메모장으로 작성한 HTML문서가 브라우저에서는 이렇게 보이는군요. 브라우저는 태그라는 명령어를 해석해서 태그는 보여주지 않고, 태그가 지정하는 대로 화면에 자료를 보여줍니다. 아주 간단하게 홈페이지를 만들지 않았습니까?
HTML태그 모음 아래에 있는 모든 태그를 자세히 알 필요는 없습니다. 하지만 HTML Editor를 사용하더라도 몇 몇 태그는 직접 입력해 주어야 할 필요가 있습니다. 이럴 경우에는 태그의 용도와 구조를 잘 알고 있어야 합니다. 아래 설명한 태그중
표시가 있는 태그는 중요한 태그이므로 반드시 기억해 두시기 바랍니다.
또한, 각 브라우저마다 지원하는 태그가 다르기 때문에 익스플로러에서는 잘 표현이 되는데, 넷스케이프에서는 표현이 되기 않는 경우, 또는 그 반대의 경우가 있을 수 있습니다.
◈ 글자 모양 관련 태그 ◈ 굵은 글자(Bold) <B>...</B> 이탤릭(Italic) <I>...</I> 밑줄(Underline) <U>...</U> 강조(Strikeout) <S>...</S> 아래첨자(Subscript) <SUB>...</SUB> 위첨자(Superscript) <SUP>...</SUP> 타자기 스타일(Typewriter) <TT>...</TT> 내용표시(Preformatted) <PRE>...</PRE> 폭(Width) <PRE>...</PRE>
가운데 정렬(Center) <CENTER>...</CENTER> 깜빡임(Blinking) <BLINK>...</BLINK>
글자크기(Font Size) <FONT SIZE="글씨크기">...</FONT> 기본폰트 크기 정의(Base Font Size) <BASEFONT SIZE="기본폰트크기"> 글자크기 변화(Change Font Size) <FONT SIZE="기본폰트에서크기변화">...</FONT>
글자색(Font Color) <FONT COLOR="#6자리색상이름">...</FONT>
◈ 문서 구분 관련 태그 ◈ 문단 나누기(Paragraph) <P>...</P>
문서 정렬(Align Text) <P ALIGN="LEFT 또는 RIGHT 또는 CENTER">...</P> 수평선(Horizontal Paragraph) <HR>
HR 정렬(Alignment) <HR ALIGN="LEFT 또는 RIGHT 또는 CENTER"> HR 두께(Thickness) <HR SIZE="숫자"> HR 폭-픽셀(Width) <HR WIDTH="숫자"> HR 폭-퍼센트(Width Percent) <HR WIDTH="숫자%"> 하일라이트 없는 수평선(Solid Line) <HR NOSHADE>
한줄 띄우기(Line Break) <BR> 띄우기 방지(No Break) <NOBR><NOBR>
◈ 배경 및 색 관련 태그 ◈
배경 이미지(Tiled Bkground) <BODY BACKGROUND="이미지파일의 URL">
배경 색깔(Bkground Color) <BODY BGCOLOR="#6자리색상이름"> 문서 전체 글자색(Text Color) <BODY TEXT="#6자리색상이름"> 하이퍼링크 색(Link Color) <BODY LINK="#6자리색상이름"> 방문한 하이퍼링크 색(Visited Link) <BODY VLINK="#6자리색상이름"> 활성화된 하이퍼링크(Active Link) <BODY ALINK="#6자리색상이름">
◈ 하이퍼링크와 이미지 관련 태그 ◈
하이퍼링크(Link Something) <A HREF="URL"></A> 책갈피가 있는 경우 <A HREF="URL#책갈피이름"></A> 타겟창을 지정한 링크 <A HREF="URL" TARGET="타켓창이름"></A> 책갈피 정의(Define Target) <A NAME="책갈피이름"></A>
이미지 넣기(Display Image) <IMG SRC="이미지파일URL">
이미지 상하정렬(Alignment) <IMG SRC="URL" ALIGN="TOP 또는 BOTTOM 또는 MIDDLE">
이미지 좌우정렬(Alignment) <IMG SRC="URL" ALIGN="LEFT 또는 RIGHT 또는 CENTER"> 이미지 대체 문자열(Alternate) <IMG SRC="URL" ALT="대체문자열"> 이미지 크기 지정(Dimensions) <IMG SRC="URL" WIDTH="넓이" HEIGHT="높이"> 이미지 테두리(Border) <IMG SRC="URL" BORDER="테두리 두께">
이미지 맵 사용(Imagemap) <IMG SRC="이미지파일" USEMAP="이미지맵이름">
이미지 맵 이름 정의(Map) <MAP NAME="이미지맵이름"></MAP>
이미지 맵 정의(Section) <AREA SHAPE="RECT 또는 CIRCLE 또는 POLY" COORDS="이미지맵좌표" HREF="이동할URL" 또는 NOHREF>
◈ 리스트 관련 태그 ◈
순서 없는 리스트(Unordered List) <UL><LI>...</UL> 불릿 모양(Bullet Type) <UL TYPE="DISC 또는 CIRCLE 또는 SQUARE">
<LI TYPE="DISC 또는 CIRCLE 또는 SQUARE">
순서 있는 리스트(Ordered List) <OL><LI>...</OL> 순서 숫자 붙이는 방법(Numbering Type) <OL TYPE="A 또는 a 또는 I 또는 i 또는 1">
<LI TYPE="A 또는 a 또는 I 또는 i 또는 1">시작 숫자(Starting Number) <OL VALUE="시작숫자">
<LI VALUE="시작숫자">정의 리스트(Definition List) <DL><DT>...<DD>...</DL> 메뉴 리스트(Menu List) <MENU><LI>...</MENU> 디렉토리 리스트(Directory List) <DIR><LI>...</DIR>
◈ 특수문자 관련 태그 ◈ & &
Space
< > " "
> < ※ HTML에서는 위의 특수문자가 특별한 용도로 사용되므로 특수문자를 표시하려면 위와 같이 표기해 주어야 합니다.
◈ 테이블 관련 태그 ◈
테이블 정의(Define Table) <TABLE>...</TABLE> 테이블 테두리(Table Border) <TABLE BORDER="숫자"></TABLE> 테이블 폭(Desired Width) <TABLE WIDTH="숫자 또는 %"> 셀과 셀사이 간격(Cell Spacing) <TABLE CELLSPACING="숫자"> 셀과 내용사이 간격(Cell Padding) <TABLE CELLPADDING="숫자">
테이블 가로줄 정의(Table Row) <TR>...</TR> 가로줄 정렬(Alignment) <TR ALIGN="LEFT 또는 RIGHT 또는 CENTER"
VALIGN="TOP 또는 MIDDLE 또는 BOTTOM">테이블 셀 정의(Table Cell) <TD>...</TD> 셀 정렬(Alignment) <TD ALIGN="LEFT 또는 RIGHT 또는 CENTER"
VALIGN="TOP 또는 MIDDLE 또는 BOTTOM">줄 띄기 없음(No linebreaks) <TD NOWRAP>
세로 병합(Columns to Span) <TD COLSPAN="병합할 셀 수">
가로 병합(Rows to Span) <TD ROWSPAN="병합할 줄 수">
셀 너비(Desired Width) <TD WIDTH="숫자 또는 %"> 테이블 머릿말(Table Header) <TH>...</TH> 머릿말 정렬(Alignment) <TH ALIGN="LEFT 또는 RIGHT 또는 CENTER"
VALIGN="TOP 또는 MIDDLE 또는 BOTTOM">테이블 주석(Table Caption) <CAPTION>...</CAPTION> 정렬(Alignment) <CAPTION ALIGN="TOP 또는 BOTTOM">
◈ 프레임 관련 태그 ◈
프레임 문서(Frame Document) <FRAMESET></FRAMESET> 가로로 프레임 나누기 <FRAMESET ROWS="높이,높이,높이"></FRAMESET> 세로로 프레임 나누기 <FRAMESET COLS="너비,너비,너비"></FRAMESET> 프레임 정의(Define Frame) <FRAME>
문서 표시(Display Document) <FRAME SRC="프레임에 표시될 URL"> 프레임 이름(Frame Name) 정의 <FRAME NAME="프레임이름 또는 _blank 또는
_self 또는 _parent 또는 _top">프레임 좌우 여백(Margin Width) <FRAME MARGINWIDTH="숫자"> 프레임 상하 여백(Margin Height) <FRAME MARGINHEIGHT="숫자"> 스크롤 바가 필요한가? <FRAME SCROLLING="YES 또는 NO 또는 AUTO"> 크기 변경 불가(Not Resizable) <FRAME NORESIZE>
◈ CGI관련 태그 ◈
폼 정의(Define Form) <FORM ACTION="자료를 처리할 CGI의 URL" METHOD="GET 또는 POST"></FORM> 입력 방법 정의(Input Field) <INPUT TYPE="TEXT 또는 PASSWORD 또는 CHECKBOX 또는 RADIO 또는 IMAGE 또는 HIDDEN 또는 SUBMIT 또는 RESET"> 입력 필드 이름(Field Name) <INPUT NAME="입력필드이름"> 입력 필드의 기본값(Field Value) <INPUT VALUE="기본값">
체크박스 체크표시(Checked) <INPUT TYPE="CHECKBOX 또는 RADIO" CHECKED>
입력필드의 크기(Field Size) <INPUT TYPE="TEXT" SIZE="숫자"> 최대 입력 크기(Max Length) <INPUT MAXLENGTH="숫자">
선택 리스트(Selection List) <SELECT><OPTION>...</SELECT> 리스트 이름(Name of List) <SELECT NAME="리스트이름"><OPTION>...</SELECT> 옵션의 숫자(# of Options) <SELECT SIZE=?></SELECT>
리스트 항목(Option) <OPTION VALUE="항목값"> 자동표시될 항목(Default Option) <OPTION SELECTED> 입력 박스 크기(Input Box Size) <TEXTAREA ROWS="줄수" COLS="줄당입력수"></TEXTAREA> 입력 박스 이름(Name of Box) <TEXTAREA NAME="입력박스이름"></TEXTAREA>
◈ 기타 태그 ◈
주석(Comment) <!-- 주석내용 --> 기본 윈도우 이름(Base Window Name) <BASE TARGET="***">
|
|
|
|
