문장, 문서 태그 입문
글자에 대해 배울 때 글자를 크게, 작게, 예쁜 색깔, 움직이기 등
여러가지 글자 관련 태그가 있었던것 처럼 문서만들 때에도
문서 만들기 관련 하여 다양한 태그가있습니다.
아래 소스 가지고 우선 감만 잡아보세요. 그 다음에 하나씩 하나씩
문장, 문단을 배워서 예쁜 문서를 만들어 보아요. ^___^)
■ 소스 ■
<html>
<body bgcolor=pink>
<center>
<hr width=400>
<font size=2>
해용씨, 저 허자에요...
<p>사실은 제가 예전부터 쭉~ 욱
<br>해용씨를 지켜보며 혼자 짝사랑했어요
<p>제 마음을 받아주세요.
<br>
<br>넹? -_-;;;
<br>
</font>
<hr width=400>
<xmp>
<br>태그 <p>태그 <center>태그 <xmp>태그 <hr>태그 bgcolor
</xmp>
</center>
</body>
</html>
▒요약
<body> 속성 태그
문서모양을 예쁘게 만들기 위한 문장,문단을 조절하는 태그들을 배워봅니다.
첫번째로 본문전체를 조절하는 body 관련 속성 태그입니다.
아래 소스 3가지에 대해 모두 실습해보세요.
■ 소스 ■
<body bgcolor=yellow> < /body>
<body text=green> </body>
<body background="http://www.herjaherja.com/image/etc/a04.gif"> </body>
http://www.herjaherja.com/image/etc/a01.gif
http://www.herjaherja.com/image/etc/a02.gif
http://www.herjaherja.com/image/etc/a03.gif
▒요약
<br> <p> 태그
문서를 작성하다보면 다음줄로 줄바꿈해야겠죠?
<br> 과 <p> 태그를 이용하여 줄바꿈을해보고 두개의 차이점을 비교해 보아요.
htnl에서는 글자간격을 많이 띄어도 한칸 띈걸로 인식합니다.
태그를 사용하여 빈칸 숫자를 조절합니다.
■ 소스 ■
<html>
<body>
글자만들기는 이러쿵 저러쿵하여<br>
글자는 이러 저러 만듭니다.<p>
그림만들기는 이러쿵 저러쿵하여<br>
그림을 만들 때는 어쩌구 저쩌구....
철수 영희 바둑이
철수 영희 바둑이
</body>
</html>
▒요약
선긋기 <hr> 태그
문서를 작성하다보면 선을 긋는 경우가 많습니다.
<hr> 태그를 이용하여 선을 그어보고 <hr> 에 끼어넣는
size="숫자"
width="숫자"
noshade
style="color:색상값;"
태그들을 이용하여 다양한 선의 변화를 줄수있습니다.
■ 소스 ■
<html>
<body>
1<hr>
2<hr size=5>
3<hr width=20>
4<hr width=20%>
5<hr noshade>
6<hr style="color:red;">
7<hr size=1 width=60% noshade style="color:#000000;" >
</body>
</html>
▒요약
정렬 <p align> 태그, 소스보기 <xmp> 태그
문서를 왼쪽 정렬할까? 오른쪽 정렬할까? 가운데로 맞출까?
<p align="위치"> 태그를 이용하여 문서의 모양을 왼쪽으로 오른쪽으로, 가운데로...정렬해 보세요.
<p align="left">
<p align="right">
<p align="center">
소스보기 할 때 태그소스까지 다 보여주고 싶으면 <xmp> 를 사용하면 됩니다.
<xmp> 내용 </xmp>
사이의 내용들은 태그 소스까지 모두 보여집니다.
■ 소스 ■
<html>
<body background="http://www.herjaherja.com/image/etc/bgimage.jpg">
<p align="left">5천만 프로젝트 컴으로 허자! 허자!
<p align="right">5천만 프로젝트 컴으로 허자! 허자!
<p align="center">5천만 프로젝트 컴으로 허자! 허자!
</body>
</html>
'컴퓨터 즐기기 > 컴퓨터활용과 태그' 카테고리의 다른 글
| Table 에관하여 1신 ...... [2008/07/09] (0) | 2009.05.10 |
|---|---|
| 만화로 배우는 태그 ⑤ - 그림 불러오기..... [2008/05/24] (0) | 2009.04.25 |
| 만화로 배우는 태그③ - 글자꾸미기 ..... [2008/04/26] (0) | 2009.04.11 |
| 만화로 배우는 태그② - 태그의 이해 ..... [2008/04/17] (0) | 2009.04.08 |
| 만화로 배우는 태그기초 ..... [2008/04/03] (0) | 2009.04.03 |