글
초보자도 쉽게하는 분석하는 HTML 문서
| 초보자도 쉽게하는 분석하는 HTML 문서 | | |
HTML은 인터넷 표준언어로서 거의 모든 웹페이지가 HTML 형식으로 작성되어 있습니다.
인터넷을 다양한 용도로 사용하면서 HTML태그는 홈페이지 제작을 위한 프로그래머 뿐 아니라 단순 이용자들도 알고 있으면 여러모로 편리합니다.
HTML태그 사용과 분석이 필요한 사람은?
1. 게시판에 멋진 그림과 TEXT를 꾸미고자 하는 분
2. 다른 소스에서 이미지나 플래쉬를 가져오고 싶은 분
3. 쇼핑몰 및 홈페이지 운영자
4. 인터넷 사업 홍보하시는 분
인터넷 초보자가 알아 두어야 할 HTML태그와 소스분석을 알아보겠습니다.
전문적인 컴퓨터 강사가 아니라 용어에 부족한 점이 있더라도 이해해 주시기 바랍니다.
아래의 내용은 HTML문서에 구성되는 기본적인 태그들입니다.
예제1 - 문서의 구조
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="성공,부업,창업">
<META NAME="Description" CONTENT="성공으로 가는 길">
</HEAD>
<BODY>
내용삽입
</BODY>
</HTML>
[예제1 분석]
모든 HTML문서는 <HTML>로 시작해서 </HTML>로 끝납니다. HTML태그는 쌍으로 사용하는 태그들이 많이 있습니다.
쌍으로 사용할때는 태그이름앞에 '/'을 사용합니다. '/'가 붙은 태그가 보인다면 사용된 태그의 끝을 의미한다고 보시면 됩니다.
HTML태그는 대문자 또는 소문자를 사용하며 시작태그가 대문자면 끝나는 태그도 대문자로 적는 것이 좋습니다.
<HTML>와 </HTML> 문서 사이에는 <HEAD></HEAD><BODY></BODY>태그가 존재합니다.
<HEAD>와 </HEAD> 사이는 웹페이지에는 보여지지 않지만 웹문서의 중요한 정보가 들어 갑니다.
<BODY>와 </BODY> 사이에는 웹페이지에 뿌려질 실제 내용을 입력합니다.
우리가 웹페이지에 보는 모든 내용은 <BODY>와 </BODY> 사이에 있는 내용이라고 보시면 됩니다.
<TITLE></TITLE>태그는 <HEAD>와 </HEAD>사이에 기록하며 문서의 타이틀을 적습니다.
<META>태그는<HEAD>와 </HEAD>사이에 기록하면 문서의 일반정보, 검색엔진 등록정보등을 수록하게 됩니다. 불필요한 경우 삭제해도 무방합니다.
웹사이트 분석시 가장 자주 보게 되는 곳은 <BODY>와 </BODY>사이입니다.
글씨나 이미지 등이 여기에 포함되어 있습니다.
위 문자은 매우 간단하지만 매우 장문으로 이루어진 HTML문서도 많습니다.
그런 문서는 대부분 테이블을 많이 사용합니다.
예제2 - 테이블의 구조
<TABLE>
<TR>
<TD>내용삽입</TD>
</TR>
</TABLE>
[예제2 분석]
테이블은 워드작성시 표의 역활과 유사합니다.
테이블은 <TABLE>로 </TABLE>로 끝나며 <TD>와 </TD> 사이에 내용이 입력되어 있습니다.
예제2_1
<TABLE>
<TR>
<TD>내용삽입1</TD>
<TD>내용삽입2</TD>
</TR>
</TABLE>
[예제2_1 분석]
웹사이트를 좌측과 우측으로 나눠서 내용을 삽입합니다.
예제2_2
<TABLE>
<TR>
<TD>내용삽입1</TD>
<TD>내용삽입2</TD>
</TR>
<TR>
<TD>내용삽입3</TD>
<TD>내용삽입4</TD>
</TR>
</TABLE>
[예제2_2 분석]
좌측/우측으로 2줄에 걸쳐서 내용을 삽입니다.
예제2_3 - 이중 테이블
<TABLE>
<TR>
<TD>
<TABLE>
<TR>
<TD>내용삽입</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
[예제2_3 분석]
테이블 속에 테이블이 있는 경우입니다. 또는 이중, 3,4,5 중의 테이블로 구성될 경우 매우 복잡해 집니다. 위 문서는 매우 간단하지만 실제 웹사이트 제작시 문서는 HTML태그와 문서내용으로 매우 길게 이루어져 있어서 테이블의 소스를 분석은 시작테이블(<TABLE>)과 끝나는(</TABLE>)의 위치를 파악해 보면 됩니다.
# 테이블 소스를 분석해야 하는 이유는 자신이 직접 배너를 삽입한다거나 로그분석프로그램을 설치할 경우 또는 다양한 경우가 있을 수 있습니다.
예제3 - 이미지 삽입하기
1. <IMG SRC="http://www.naver.com/logo.gif">
2. <IMG SRC="http://www.naver.com/logo.gif" ALT="네이버" WIDTH="200" HEIGHT="60" BORDER=1>
[예제3 분석]
HTML 문서에 이미지를 삽입할려면 위와 같이 <IMG>태그를 넣으면 됩니다.
'SRC', 'ALT', 'WIDTH', 'HEIGHT'는 파라메터라고합니다.
'SRC'는 이미지가 있는 주소를 기록합니다.
'ALT'는 이미지 설명(주석)이라고 보시면 됩니다.
'WIDTH'는 이미지의 가로크기를 적습니다.
'HEIGHT'는 이미지의 세로크기를 적습니다.
'ALT', 'WIDTH', 'HEIGHT' 는 삭제해도 무방합니다.
그러나 'WIDTH', 'HEIGHT'는 많이 되고 있습니다.
이미지에 테두리를 치고 싶다면 BORDER="1"을 삽입하면됩니다. 없애고 싶은면 0을 넣습니다. ( 많이 이용되는 기술 ... )
예제4 - 링크 걸기
<A HREF="http://www.naver.com" TARGET="">
<IMG SRC="http://www.naver.com/logo.gif" ALT="네이버" WIDTH="200" HEIGHT="60">
</A>
[예제4 분석]
<A>와 </A>사이에 링크될 텍스트나 이미지를 삽입합니다.(위내용은 이미지 삽입)
<A>태그는 링크될 주소를 입력할 'HREF'파라미터가 존재합니다.
'TAGET'파라미터는 링크로 이동할때 기존페이지로 이동할 것인지 새창을 뛰우면서 이동할 것인지를 선택할 수 있습니다.
보통은 'TARGET'은 사용하지 않아도 무방합니다. 하지만 새창 뛰우면서 이동하기 할 경우는 TARGET="_blank"를 써주면 됩니다. (많이 사용되는 기술중 하나)
예제5 - 텍스트 꾸미기
1. 안녕하세요? ( 전혀 꾸미지 않은 상태입니다. )
2. <FONT SIZE="1">안녕하세요?</FONT> (가장 작은 글씨입니다.)
3. <FONT SIZE="3">안녕하세요?</FONT> (중간 글씨 크기입니다. 보통크기는 별도로 SIZE를 파라미터를 사용하지 않습니다.)
4. <FONT SIZE="7">안녕하세요?</FONT> (가장 큰 글씨입니다.)
5. <FONT COLOR="RED">안녕하세요?</FONT> ( COLOR은 색상을 표기합니다.)
6. <B>안녕하세요</B> ( 글씨를 굵게 합니다. )
7. <I>안녕하세요</I> ( 글씨를 이태릭체로 바꿉니다. )
8. <U>안녕하세요</U> ( 글씨에 밑줄을 칩니다. )
예제5_1 - 복합적인 폰트 태그
<FONT SIZE="4" COLOR="BLUE"><B><U>안녕하세요</U> 반갑습니다.</B></FONT>
[예제5-1 분석] 태그는 위와 같이 복합적으로 사용되곤 합니다.
태그분석 TIP
1. 태그사용은 키보드의 복사하기(CTrl+C키)/붙여넣기(CTrl+V)를 사용하면 초보자는 매우 편리하고 빠를 겁니다.
2. 다른 홈페이지의 태그를 보고 싶다면 브라우저에서 '보기' 클릭 후 '소스'를 클릭하면 소스를 확인할 수 있습니다. 또는 오른쪽 마우스 클릭 후 '소스'를 선택하시면 딥니다. ( 일부 웹사이트는 볼 수 없는 경우도 많이 있습니다. )
3. 소스분석시 HTML문서를 불러와서 '찾기(CTrl+F)'를 잘 활용하면 빠르게 HTML문서의 원하는 위치를 찾을 수 있을 겁니다.
4. 보통 프로그래머는 소스보기가 편한 소스편집 전용프로그램을 사용합니다. 울트라에디터, 에디터플러스, HTML전용 편집 프로그램 등도 있습니다.
※ 기타 많이 사용되는 태그들
1. <style>내용</style> 이 태그는 <head></head>사이에 위치하며 글꼴, 폰트크기, 테이블 등 웹페이지 전반에 걸치는 속성을 미리 지정하는 것입니다.
2. <javascript>내용</javascript> 이 태그 사이에는 자바스크립트가 포함되어 있습니다.
주로 <head></head>사이에 위치하지만 웹페이지 어느위치에든 삽입할 수 있습니다.
3. <object>내용</object>에는 주로 플래쉬, 동영상이 삽입됩니다
출처 : 네이버카페
'HTML' 카테고리의 다른 글
| 글자 꺼꾸로 나타나게 하는 HTML 소스 (0) | 2011.12.13 |
|---|---|
| id,class (0) | 2011.12.08 |
| 입체감있는 텍스트상자들 (0) | 2011.10.14 |
| 텍스트상자를 투명하게 (0) | 2011.10.10 |
| 링크에 마우스를 대면 아래위로 선이 그려집니다. (0) | 2011.10.07 |
