씨밀레로 블로그
태그쉽게배우기 본문
☆ IT시험 또는 카페에 도움이 될 것 같아서 올림.☆
HTML(Hypertext Markup Language)
* 월드와이드웹(WWW)에서 하이퍼텍스트 문서를 만들기 위해 사용되는 기본언어
* 쉽게말해 인터넷을 통해 볼 수 있는 문서를 만들 때 사용되는 프로그래밍 언어
* 인터넷에서 접할 수 있는 모든 웹 페이지들은 HTML로 작성된다.
* 태그(TAG)는 HTML에서 사용하는 명령어이다
* 웹 브라우저(익스플러러, 네스케이프등등)는 HTML로 작성된 문서를 해석하여 화면에 출력하게 된다.
HTML 문서의 특징
* 태그는 대소문자 구분이 없습니다. 단, 파일 이름은 소문자로 해주는 것이 좋습니다.
* HTML 문자열 사이에 있는 하나 이상의 공백은 무시됩니다.
* 태그가 중복 되지 않도록 주의합니다.
* HTML 태그를 잘못 사용했다 하더라도 브라우져에서는 에러를 발생시키지 않습니다.
HTML 문서의 구성
*<HTML> 태그 : HTML 문서 시작
*<HEAD> 태그 : 시작을 알리는 태그입니다.
*<TITLE> 태그 : 문서 제목 정의(브라우저 타이틀바에 표시됨).
*</TITLE> 태그 : 문서의 제목 끝.
*</HEAD> 태그 : 시작을 알리는 태그 끝.
*<body> 태그 : HTML 문서의 본문 부분
*</body> 태그 : 본문내용과 태그 끝.
*</HTML> 태그 : HTML 문서 마무리
▶문서
배경 태그의 사용법
*<body
bgcolor="색상"> : 윈도우 배경화면색 지정.
*<body
background="이미지 주소"> : 배경을 그림으로할때 쓰는 속성.
*<body
text="색상"> : 표준 글씨색 지정.
*<body
link="색상"> : 링크 부분의 색 지정.
*<body
vlink="색상"> : 검색한 링크 부분의 색 지정.
*<body
alink="색상"> : 링크된글자를 누르는순간의 색을 지정.
▶<P>
태그의 사용법
*<P>
내용 </P> : 문단을 나누는 태그입니다.
▶빈칸
사용하기
*
: 빈칸을 만들어 줍니다.(빈공간,글씨의 공란을 대신함.)
▶주석
사용하기
*한
줄을
주석으로
사용할
때는
<! 주석>
태그를
이용하고
여러줄을
주석으로
이용하려면
<!--
, //--> 태그를
이용합니다.
주석태그는
브라우져에서는
보이지
않는
태그입니다.
▶<br>
사용하기
<br>
태그는
줄을
바꾸고
싶을
때
사용하는
것입니다.
br
은
예를들어
한번만
사용하면
다음줄로
넘어갑니다.
하지만
여러줄을
띄우고
싶을
때는
br 의
횟수를
더
많이
해주면
됩니다.
3칸을
띄우고
싶으면
3번을
쓰시면
됩니다.
▶문단
정렬하기
*<p
align="정렬형태">
:
left 나
right 를
써서
줄
단위로
정렬합니다.
*<center></center>
:
여러문단을
중앙
정렬합니다.
▶선
태그 사용하기
*<hr
size="크기"
width="크기"
align="정렬형태"
style="color:색상;"
noshade>
수평선
그리기
태그입니다.
size
:
픽셀
단위의
선의
두께입니다.
width
:
선의
수평길이
입니다.
align
:
길이가
화면보다
작을
때
수평선이
그려질
위치입니다.
noshade
:
음영
효과
없는
보통의
선
그리기
입니다.
style="color:색상;"
:
선의
색상을
바꿔줍니다.
▶글자
크기
변경
*<basefont
size="크기">
:
전체
글자
크기를
지정.
*<font
size="크기">
:
일부의
글자
크기를
변경.
▶글자색
변경
*<font
color="색상">
:
글자의
색상
지정.
▶글꼴
변경
*<font
face="글꼴명">
: 글꼴
지정.
만약,
글자의
크기와
색상,글꼴을
동시에
바꾸시려면
<font
size="크기"
color="색상"
face="글꼴">
이렇게
하시면
됩니다.
▶글자
모양 정리
|
태그 |
관용적
표현(결과) |
|
<i>내용
<i> |
이탤릭체
모양 |
|
<b>내용</b> |
진한
모양 |
|
<tt>내용</tt> |
타자체 |
▶입력된
그대로 출력하기
<pre>내용</pre>
:
화면에
나와
있는
내용을
그대로
출력합니다.
엔터를
치면
<br> 의
효과를
보게
됩니다.
<xmp>내용</xmp>
:
<pre> 태그와
비슷하지만
태그
소스까지
표시합니다.
한때
대화방에서
폭탄태그
방어로도
쓰였던
것입니다..^^
▶그림
삽입하기
<img
src="이미지
파일
경로(주소)"
alt="그림
설명">
그림과
설명을
삽입합니다.
▶그림
크기
지정하기
<img
src="이미지
파일
경로(주소)"
width="가로크기"
height="세로크기">
그림을
자신이
원하는
크기만큼
조정합니다.
숫자가
높을
수록
커집니다.
▶그림의
위치
설정하기
<img
src="이미지
파일
경로(주소)"
align="정렬위치">
그림을
삽입하고
left 나
right 로
위치를
지정해
줍니다.
▶그림의
여백과
테두리
설정
<img
src="이미지
파일
경로(주소)"
border="테두리
두께">
그림의
경계선을
만듭니다.
<img
src="이미지
파일
경로(주소)"
hspace="크기">
그림의
좌우
여백을
지정합니다.
<img
src="이미지
파일
경로(주소)"
vspace="크기">
그림의
상하
여백을
지정합니다.
▶사운드
태그
<[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-bgsound
src="음악주소">
:
주로
배경음악으로
많이
쓰이는
태그입니다.
이
것은
mid 나
wav,mp3 파일등을
사용할때
쓰는
태그인데,
주로
배경음악으로
사용하는
파일은
mid 파일입니다.
용량도
작고해서
홈페이지
로딩시간에
별
지장을
주지
않습니다.
다른
파일들은
시간이
좀
오래
걸립니다.
요즘은
asf 파일도
사용합니다만
그것도
역시
시간이
좀
걸린답니다.
<embed
src="음악주소">
:
이
태그는
전에
채팅상에서
많이
쓰이는
태그
였습니다.
주로
사용하는
파일이
asf 나
asx 파일입니다.
이
태그를
쓰게
되면
미디어
재생기가
나타나므로
자신이
맘대루
끌수도
있고
다시
재생시킬수도
있습니다.
이
외에도
리얼음악도
있지만
거의
배경음악으로는
사용이
불가능합니다.
리얼은
링크태그를
써서
클릭하면
들을수
있는
그런
방식입니다.
<a
href="리얼
음악주소"
target"new_window">여기를
클릭하세요!!</a>
이런식으로
하시면
됩니다.
또
한가지
[Tip],
홈페이지에
리얼과(다른
파일도
해당됨.)
같은
음악을
바로
띄우게
할수
있는
방법도
있습니다.
이건
스크립트를
이용하는
것입니다.
<script>open('음악파일주소')</script>
위의
예제처럼
하시면
홈에
들어오자
마자
플레이어가
나타나게
되죠^^.
<embed
src="음악주소">
이
태그를
쓰실때
재생기가
작게
나오게
하려면.....
width="수치"
height="수치"
를
쓰게
되면
재생기의
크기를
마음껏
조절할수
있습니다.
<embed
src="음악주소"
width="수치"
height="수치">
이런식으로요..^^
음악을
반복해서
여러번
듣고
싶을때는
아래처럼
하시면
됩니다.
<embed
src="음악주소"
loop="반복횟수">
이렇게
하시면
자신이
원하는
반복횟수만큼
들으실수
있습니다.
▶간단한
버튼
만들기
버튼만드는
기능은
여러가지가
있지만
여기선
간단한
것만
한가지
설명드리겠습니다.
아래
소스에
주소와
버튼에
들어갈
이름만
고쳐
쓰시면
됩니다.
<form
action="http://myhome.naver.com/silverju1/tag.html"
target="_blank">
<input type="submit"
value="태그연습장">
</form>
양식의
맨
위
양식의
맨
아래
스타일시트로
응용해서
이쁜색
버튼을
만들수도
있습니다.
소스
<input
type="button" value="이쁜
버튼"
style="color:white; font-size: 9pt;
background-color:pink;
border:1 solid red;size=
30;height:20px"></style>
소스
<input
type="button" value="이쁜
버튼"
style="color:white; font-size: 9pt;
background-color:00ccff;
border:1 solid blue;size= 30;height:20px"></style>
버튼응용에서
연결까지
양식의
맨
위
양식의
맨
아래
<form action="연결시킬주소"
target="_blank">
<input
type="submit" value="버튼이름"
style="color:white; font-size: 9pt;
background-color:pink;
border:1 solid red;size= 30;height:20px"></style>
</form>
'▒▒ 생활 이야기 ▒▒ > 컴퓨터상식' 카테고리의 다른 글
| 드레그 복사, 스크랩 막아 놓은 소스보기 (0) | 2006.09.20 |
|---|---|
| 윈도우XP최적화tip57가지 (0) | 2006.09.20 |
| 태그모음 (0) | 2006.09.20 |
| 소스 막았으면/shift F10, 우클 enter, ctrl 우클반복, 보기 (0) | 2006.09.20 |
| 태그기초 (0) | 2006.09.20 |