1) 대소문자 구별이 없어요.
인터넷은 디렉토리와 파일 이름에 대소문자를 구별해 인식하지만,
Html 태그는 대소문자를 구분하지 않아요.
그러니까 <img name=resize_img_1 xxonLoad=ImgAutoResize(1) xxonClick=ImgOriginal(1) style='cursor:hand' SRC=”back.gif”> 와 <img name=resize_img_2 xxonLoad=ImgAutoResize(2) xxonClick=ImgOriginal(2) style='cursor:hand' src=”back.gif”> <img name=resize_img_3 xxonLoad=ImgAutoResize(3) xxonClick=ImgOriginal(3) style='cursor:hand' Src=”back.gif”>가 서로 아무런 차이가 없는 태그들이죠.
하지만 눈에 띄게 하기 위해서 대문자로 많이 표시해요.
2) 큰 따옴표는 써도 되고 쓰지 않아도 되요.
html의 속성과 옵션 중 숫자나 값을 지정할 때 큰따옴표(“)를 사용하는 것이 원칙이지만 생략해도 괜찮아요. 예를 들어
<FONT SIZE =”1” COLOR=”BLACK”> mapone.com</FONT> 와
<FONT SIZE=1 COLOR=BLACK> MAPONE.COM</FONT>
는 서로 아무런 차이가 없어요.
기본구조Tag는 이것만 있어도 홈페이지를 만들수 있다는 거죠..
<html>
<head></head>
<body></body>
</html>
<html> -> html이란걸 알려주는 거죠..
<head> </head> -> 머리가 있겠고,..
<body> </body> -> 몸이 있겠네요..
</html> -> html의 끝이란걸 알려 주죠..
실제로 보여질땐 몸통안에 있는 것만 보이죠..
<head> </head>사이에 들어갈수 있는 태그들이 있죠..
<title></title>이 바로 그중 하나죠..
<title></title>사이에 들어가는 글은 브라우저에서 제목표시줄에 보이게 되죠.
그럼 <body> </body>사이에는?
대부분의 태그는 여기에 들어간다고 생각하면 되죠..
HTML 소스
<html>
<head> <title>예제 임다.^^</title> </head>
<body> 기본구조tag 예제입니다. </body>
</html>
참고 : html tag는 대소문자를 구별하지 않는다.
참고 : html tag는 한줄에 다써도되고 여러줄에 써도 된다.
참고 : tag는 일종의 해석기호라 할수 있다
<head> 태그 안에 들어 가는 태그들입니다.
TITLE : <title>
HTML 3.2 규약에서는 반드시 넣어야 하는 태그라고 하더군여.
브라우저 창의 제목표시줄에 보이는 글을 넣는 겁니다.
STYLE : <style>
style sheets 삽입 태그입니다.
SCRIPT : <script>
client-side scripts 삽입 태그입니다. 자바스크립트, VBScript등
ISINDEX : <isindex>
사용자로부터 텍스트 입력받아 전송할수 있는 폼을제공한다.
BASE : <base href="url">
<base href="http://www.phpgroup.com/~goodsoil/basetest/">
....
<img name=resize_img_4 xxonLoad=ImgAutoResize(4) xxonClick=ImgOriginal(4) style='cursor:hand' src="main_title.gif">
위와같이 했을때는 결과적으로 이렇게 보이게 되는 겁니다.
<img name=resize_img_5 xxonLoad=ImgAutoResize(5) xxonClick=ImgOriginal(5) style='cursor:hand' src="http://www.phpgroup.com/~goodsoil/basetest/main_title.gif">
체계적인 관리를 할수 있는 겁니다.
META : <meta>
마침태그가 필요없다. 해당문서를 설명하는 내용을 넣는다.
지정시간후 다른 문서로 이동할수 있으며, 캐쉬에 저장되는 기간을 지정.
<meta name="author" content="Kimbyongchoul"> : 저자는 누구이다..
<meta name="keyword" content="homepage, html, .."> :
이 페이지를 설명할수 있는 키워드를 써줍니다.
<meta name="discription" content=" how to make homepage..."> :
이 홈페이지는 이러저러한 내용이 있으며....
그러면, 검색엔진들이 이것들을 참고하여 홈페이지들을 분류하죠.
<meta http-ｅquiv="expires" content="mon, 28 aug 2000 12:00:00 EST" > :
2000년 8월 28일 월요일 12:00 에 캐쉬에 들어있는 문서를 파기(삭제)한다.
<meta http-ｅquiv="refresh" content="3;url=next.html" > :
content="3; <- 3초라는 뜻. 그후 next.html로 이동한다는 뜻.
LINK : <link>
뭔가를 연결해 줄라구 하는것 같네요.
문자를 이뿌게~ 만드는 태그들입니다.
시작태그와 끝 태그가 필요합니다.
<hx>문자</hx> x : 1~6
ex) <h4>제목:HTML tag 연습</h4>
제목:HTML tag 연습
단락의 제목을 쓸때 사용하죠..
h1 부터 h6까지 있습니다. 숫자가 클수록 글씨는 작습니다.
<address>문자</address>
주소를 표시하고 싶을때 쓰는 건데, 사실 많이 쓰이진 않는 것 같습니다.
ex) <address>서울특별시 영등포구 여의도동 1번지 </address>
123-45 ha-an dong kwang-myong kyong-ki do
ex) <address>서울특별시 영등포구 여의도동 1번지 </address>
서울특별시 영등포구 여의도동 1번지
주소라고 특별한 것이 없죠.. 그냥 이텔릭체일 뿐이죠머..
<b>문자</b> : Bold ,. 글씨체를 굵게 합니다.
<b>문자 모양 연습중</b> -> 문자 모양 연습중
<i>문자</i> : italic ,. 글씨를 이텔릭체로 보여줍니다.
<i>문자 모양 연습중</i> -> 문자 모양 연습중
<u>문자</u> : UnderLine ,. 글씨에 밑줄을 그어줍니다.
<u>문자 모양 연습중</u> -> 문자 모양 연습중
<strike>문자</strike> : strike-through ,. 글씨에 가운데줄을 그어줍니다.
<strike>문자 모양 연습중</strike> -> 문자 모양 연습중
<big>문자</big> : large-font ,. 글씨 크기를 크게 해줍니다.
<big>문자 모양 연습중</big> -> 문자 모양 연습중
<tt>문자</tt> : large-font ,. 타자체로 보여줍니다. courier체.
<tt>문자 모양 연습중</tt> -> 문자 모양 연습중
<small>문자</small> : small-font ,. 글씨 크기를 작게 해줍니다.
<small>문자 모양 연습중</small> -> 문자 모양 연습중
<sub>문자</sub> : subscript style ,. 아래첨자를 쓸때 사용합니다.
문자 모양<sub>연습중</sub> -> 문자 모양연습중
<sup>문자</sup> : superscript style ,. 위 첨자를 쓸때 사용합니다.
문자 모양<sup>연습중</sup> -> 문자 모양연습중
<em>문자</em> : empasized text ,. 문자를 강조, 이텔릭체로 보여집니다.
<em>문자 모양 연습중</em> -> 문자 모양 연습중
<strong>문자</strong> : strong ,. 문자를 강조, 굵은 글씨로 보여집니다.
<strong>문자 모양 연습중</strong> -> 문자 모양 연습중
<dfn>문자</dfn> : defining instance ,. 정의되어지는 단어.
<dfn>문자 모양 연습중</dfn> -> 문자 모양 연습중
<code>문자</code> : program code ,. 프로그램 코드 보여줌. Courier체.
<code>문자 모양 연습중 Courier</code> -> 문자 모양 연습중 Courier
<samp>문자</samp> : sample output ,. 프로그램,스크립트의 출력 셈플.
<samp>문자 모양 연습중 Courier</samp> -> 문자 모양 연습중 Courier
<kbd>문자</kbd> : keyboard ,. 사용자입력 문자. Courier체.
<kbd>문자 모양 연습중 Courier</kbd> -> 문자 모양 연습중 Courier
<var>문자</var> : variables ,. 명렁주기위한 변수나 인수표현. 이텔릭체.
<var>문자 모양 연습중 </var> -> 문자 모양 연습중
<cite>문자</cite> : cite ,. 인용문등의 제목을 쓸때. 이텔릭체.
<cite>문자 모양 연습중 </cite> -> 문자 모양 연습중
글자관련태그-2
<font>문자</font>
글씨 크기와 색, 글꼴을 바꿀 수 있습니다.
속성(attribute)들이 있습니다. - (size, color, face)
태그 안에 들어가는 거죠.
예를 보면 금방 알수 있죠.
<font size=2 color=blue face=굴림체>문자</font> -> 문자
<font size=4 color=red face=궁서체>문자</font> -> 문자
size 는 1부터 6까지 있으며 6이 가장 큰 글씨크기를 보여줍니다.
color 는 영문으로 쓰는 것과, 숫자(16진수)로 쓰는 것이 있습니다.
영어로 쓰는경우는 컬러명&16진컬러메뉴를 참고하시면 되겠구요
16진수로 사용할 경우 원리는 다음과 같습니다.
6자리 수를 사용합니다.
#xxxxxx 앞쪽에 수(Number)를 뜻하는 #기호를 넣습니다.
생략도 가능합니다.
RGB컬러의 개념입니다.
6자리수를 2자리씩 나눠서 앞자리부터 Red Green Blue의 값을 줍니다.
각 2자리 수는 16진수 이며, 00 ~ FF의 값을 갖게 되죠.
예를 들어 #000000이면 세가지 색이 모두 없으므로 검정색입니다.
또 #0000FF 이면 파란색만 값이 최대이므로 파란색이 됩니다.
또 #FF00FF 이면 파란색과 빨간색의 값이 최대이므로 보라색이 됩니다.
누가 이렇게 16진수로 계산해 가며 그 수많은 조합을 이용하겠습니까?
어렵구요,.. 쉽게 사용할수 있는 에디터를 이용하는 방법을 쓰죠..
face 는 글꼴인데, 보는 사람 컴퓨터에 글꼴이 있어야 보여집니다.
그러므로 자신이 갖고 있는 이쁜 폰트를 쓴다고 해서 반드시 보는 사람이 볼수 있는 것은 아니라는 얘깁니다.
글자관련태그-3
1. 줄바꾸기태그
<br> breakLine
2. 글자크기변경태그
<H1>글자</H1>
3. 글자크기변경태그
<font size="2">글자</font>
<font(태그) size(속성)="2(값)">2p작게</font>
<font size="-2">2p작게</font>
<font size="+2">2p크게</font>
4. 글자색변경태그
<font color="red">글자</font>
<font color="검정">글자</font>
<font color="black">글자</font>
<font color="#000000">글자</font>
5. 글꼴변경태그
<font face="굴림">글자</font>
<font face="굴림 | 돋움 ...">글자</font>
6. 글자간격조정
<pre>글 자 글</pre>
글 자글
7. 주석문태그
<!-- 글자 -->
<comment>화면에 해석이 안됩니다.</comment>
8.문서저장은 어떻게 하나요?
[파일]
[저장]
[다른이름으로저장] 대화상자가 나타난다면
[위치] 에서 저장할 폴더엽니다.
[피일이름] 피일이름을 index.html로 입력합니다.
[파일형식] 은 모든 파일(*,*) 지정합니다.
[저장] 단추를 클릭합니다.
9. 브라우저에서 HTML 문서 보기
인터넷 익스플로러를 실행합니다.
[파일] => [열기]를 클릭합니다.
[열기] 대화상자가 나타나면..
[찾아보기] 단추를 클릭합니다.
내가 저장한 폴더를 찾아 불러올 문서를 선택한 다음
[열기] 단추를 클릭합니다.
[확인] 단추를 클릭합니다.
윈도우 탐색기로 폴더를 찾아 들어가서 클릭 해서 열기
글자의 속성변경
<Font> 태그를 쓰시면 됩니다.
<Font Size=크기 Color=색 이름 Face=글꼴 이름 > 쓰고 싶은 말 </Font>
라고 쓰면 되요.
1) Font Size는 1부터 7까지 할 수 있는데 1이 가장 작고 7이 가장 큰 글씨에요. 크기 지정만 할 수 있는 태그도 있는데, 일단 나중에 설명할게요.
2) Color=" "에서 글자 색 이름은 "yellow, Blue, Black, White, red..."등의 영문 색상 이름을 쓰셔도 되고, html 색상테이블에서의 색 기호를 쓰셔도 됩니다.
예를들어 white는 RGB 색상기호로 FFFFFF 입니다.
색상테이블은 첨부파일로 붙였으니, 참조해주세요.
3) Face= "글꼴 이름" 에서 글꼴은 "굴림""바탕""돋움"이 가장 많이 쓰입니다. 이외에 여러가지 다양한 모양의 글꼴이 있습니다.
'태그♡소스방' 카테고리의 다른 글
| 이미지 옆에 글자정렬 (0) | 2007.01.22 |
|---|---|
| 스타일시트 총정리 (0) | 2007.01.22 |
| 이미지하나로 거꾸로된 이미지도 연출 (0) | 2007.01.22 |
| [절단태그]포토샵없이도 원하는 부위만 자를수 있는 소스 (0) | 2007.01.15 |
| 여러곡의 배경음악이 나오게하는 방법 (0) | 2007.01.06 |