본문 바로가기
그룹명/사회

[스크랩] 홈페이지 만들기용 태그 - html 기초강좌

by 풍뢰(류재열) 2007. 6. 30.
  홈페이지는 태그(tag)명령어로 만들어 집니다.  태그명령어는 어찌보면 많다고 할 수도 있겠으나 다 외울 필요는 없습니다. (다 외우면 좋겠죠^^) 단지, 이런걸 만들 땐 이런 명령어를 쓰는 구나 하면서 한번 쭉 읽어보시고 기본적이고 자주 쓰이는 몇가지 명령어만 알고 있으시면 됩니다. 그리고 나머지것은 그때 가서 찾아서 쓰셔도 됩니다. 그러다 보면 어느 순간에 자신도 모르게 태그명령어를 다 알게 되죠^^ 그럼 여기에서는 전체적으로 태그명령어와 간단한 설명을 해보겠습니다. 그냥 한번 가볍게 본다는 기분으로 읽어보세요^^

 
 <html></html>  문서의 맨처음과 맨끝에 들어감
 <body></body>  문서의 본문내용이 들어감
 <head></head>  HTML문서의 큰 제목 부분을 정함
 text="글자색"  글자색을 지정
 <title></title>  웹페이지의 제목을 지정
 link,vlink, alink  링크, 방문한 링크, 클릭시 색을 지정
 예제)
 <html> 
 <head> 
 <title>대화방 태그</title> 
 </head> 
 <body bgcolor="배경색을 지정"> 
 <body bgcolor="white" text="black"  link="blue" vlink="purple" alink="red"> 
 본문내용 : 대화방 태그 홈페이지 시작. 
 </body> 
 </html> 

 ※ 서식 관련

 
<P>내용</P> 본문에서 단락을 구분.  <I>내용</I>  이태릭체로
<DIV>내용</DIV> 단락구분.마지막 줄 안 띄어줌 <U>내용</U>  밑줄
<BR>내용 줄바꿈 <blink>내용</blink> 깜박이게
<CENTER>내용</CENTER>  본문의 중앙에 오게 배치 <CITE>내용</CITE>  인용이나 참조로 표시할때 
<HR></HR> 수평선 <CODE>내용</CODE>  컴퓨터프로그램 코드모양변환
<PRE>내용</PRE>  스페이스의 공백 인식 <EM></EM>  강조,이태릭체
<H1~6>문서 제목</H1~6> 글짜 크기를 1~6까지 사용 <KBD></KBD>  키보드로입력한것과 같은모양
<BIG>내용</BIG>  기본 글꼴보다 한 단계 크게 <STMP></STMP>  예제로 표시할때
<SMALL>내용</SMALL> BIG의 내용과 반대되는 표현 <STRONG></STRONG>  글자를 굵게
<ADDRESS>내용</ADDRESS>  메일주소,연락처등을 기록 <SUB></SUB>  아래 첨자로 보여줍니다. 
<B>내용</B>  지정된 내용을 굵게 <!--주석-->  주석
<TT></TT> 타자기로 친 것처럼 보여줌 <SUP></SUP> 위첨자로
<HR SIZE=n WIDTH=n ALIGN=LEFT,CENTER,RIGHT></HR> 수평선의 두께,넓이,문단에서 왼쪽,중앙,오른쪽을 지정
<FONT SIZE=n COLOR=영어,기호 FACE=글꼴체>내용</FONT> 글자를 크기,색상,글꼴을 지정
<BLOCKQUOTE>내용</BLOCKQUOTE>  인용문 등을 사용
<P ALIGN=LEFT,CENTER,RIGHT>내용</P> 문단내용정렬

 ※ 목록정의

　
<UL></UL> 순서가 필요없는 목록을 적을때
<OL></OL> 순서가 필요한 목록을 적을때
<LI></LI> UL,OL태그사용시 목록을 적을때
<DL></DL>  용어정의 목록을 시작하는 곳에 사용
<DT>  용어의 이름을 쓴다. 
<DD> 용어의 대한 설명을 쓴다
※ 그림 관련 태그
 
<IMG>   그림을 삽입하기 위한 태그 
<IMG SRC="파일명" BORDER=n>  그림을 나타나게함.테두리선은  n값
<IMG SRC="파일명" BORDER=0 WIDTH=n HEIGHT=n>   그림의 넓이와 높이를 지정
<IMG SRC="파일명" ALT="그림설명"ALIGN=LEFT,CENTER,RIGHT>  Alt=그림에 대한 설명, ALIGN=그림정렬방식
<IMG SRC="파일명"
ALIGN=TOP,MIDDLE,BOTTOM>		  그림 다음에 오는 글자를 그림의 상단,중앙,아랫부분에
 집어넣을 수 있도록 지정

 ※ 링크 관련 태그

 
<A HREF="연결될 파일명">글자,그림</A>   글자,그림을 누르면 연결될 문서로 이동한다
<A HREF="HTTP://링크할 주소">글자,그림</A>  링크된 주소로 이동한다
<A HREF="MAIL TO:자신의 메일 주소">글자,그림</A>  편지함과 연결된다
<A HREF="문서명">글자,그림</A><A NAME="문서명">문서명 문단의 첫부분</A>  같은 문서 내에서의 이동이 가능하게 하는 태그

 ※ 테이블 관련 태그

 
<TABLE></TABLE> 표를 나타냄
<TR></TR> TABLE안에 쓰여 한 행을 만들어 줌
<TD></TD> TR안에 스여 한 셀을 만들어 줌
<TH></TH>  TABLE안에 셀의 제목을 나타냄
<TABLE BORDER=n CELLSPACING=n> TABLE의 테두리선 크기,셀과 셀 사이의 간격을 조절 
<TABLE CELLPADDING=n BGCOLOR=색상코드>  셀과 내부 글자와의 간격을 벌려줌, 바탕색을 지정
<TABLE WIDTH=n HEIGHT=n>  TABLE 넓이와 높이를 지정
<TD COLSPAN=n ROWSPAN=n> 셀을 가로,세로로 합치고 싶을때 사용
<TD ALIGN=LEFT,CENTER,RIGHT VALIGN=TOP,MIDDLE,BOTTOM> 좌우,중앙,상하 정렬

 ※ 프레임 관련 태그

 
<FRAMESET></FRAMESET>  한 페이지에 두개 이상의 창을 작성
<FRAMESET COLS="n%,*">  화면에 세로 방향으로 금을 그어 화면을 나누는 방식
<FRAMESET ROWS="n%,*">   화면에 가로 방향으로 금을그어 화면을 나누는 방식 
<FRAME SRC="문서.파일명">  프레임에 불러올 HTML문서 링크
<MARGINWIDTH=n>  프레임 창의 가로 여백을 지정
<MARGINHEIGHT=n>  프레임 창의 세로 여백을 지정
<SCROLLING=YES,NO,AUTO>  프레임 차의 스크롤 지정여부,자동여부
<FRAMEBORDER=n>   프레임의 경계선의 크기를 지정
<TARGET=_BLANK,_TOP,파일명>   프레임 창에서 링크된 경우 링크될때 보여주는 창을 지정
<NAME= >   프레임에 고유의 이름을 간단하게 씀

 ※ 기타 본문 관련

 
<EMBED SRC="사운드.파일명" AUTOSTART=TRUE LOOP=n>  AUTOSTART를 사용해 홈페이지로 들어오면 백 그라운드 음악이 자동으로 시작하도록 지정할 수 있습니다. 이 태그는 넷스케이프에서만 적용됩니다.
<BGSOUND src="사운드.파일명" LOOP=2>   <EMBED>태그와 비슷하며 익스플로러에서만 적용됩니다. 

 

 

  위의 자료는 태그매니아에서 퍼왓습니다.

 

정리가 잘 되어 있고 몇년전 첨 홈페이지만들기 공부할때 자주 가든 사이트여서 ㅎㅎㅎ

 

출처 : 좋게 좋게.. 단순하게.. 긍정적으로..
글쓴이 : 이호 원글보기
메모 :

'그룹명 > 사회' 카테고리의 다른 글

[스크랩] HTML 기초강좌 -기본문법태그  (0) 2007.06.30
[스크랩] HTML 기초강좌 - text태그  (0) 2007.06.30
[스크랩] 애드클릭스, 고수입 직업 블로거 국내서도 탄생할까?  (0) 2007.06.30
[스크랩] 블러그로 돈버는 사람들  (0) 2007.06.30
[스크랩] [ 보리밭 사잇길로 ] - 송계 박영대 화백  (0) 2007.06.29

관련글

티스토리툴바