< html >< /html > - HTML 문서의 시작과 끝을 나타내는 것입니다.
따라서 어떠한 페이지든 간에 태그, 이미지, 글 등이
이 태그의 사이에 있어야 합니다.
② HEAD
< head >내용< /head > - 일종의 머리말로서 보통은 문서의 제목만을
title 태그를 사용하여 나타냅니다.
- 화면을 열었을 때 가장 상단의 색깔있는
부분에 나타나는 글입니다. 다시 말해,
제목표실줄에 문서의 제목을 나타내는 것입니다.
③ BODY
< body >본문내용< /body > - HTML 문서의 실제적인 내용이 들어가는
부분으로 화면에 곧바로 나타나게 되는 부분입니다.
특히 이 명령어를 주어야 여러가지 이미지들이 상하지 않기 때문에
head 태그가 끝난 후에 지정해 줍니다.
④ 참고사항
★ 태그는 줄바꾸기 태그 이외에는
모두 시작과 마무리 태그를 주어야 합니다.
시작은 < 태그 명령어 > 그대로이고 마무리는< /태그 명령어 >와
같이
슬러쉬를 해줘야 합니다.
그리고 두개 이상의 태그가 동시에 주어지는 경우
처음 것은 제일 나중에 마무리 되어야 합니다.
예제로 확인하세요~
★ 태그 명령어는 영어의 대소문자를 구별하지 못합니다.
그러니 편한대로 쓰세요.
★ 태그 명령어는 띠어쓰기를 한칸밖에 인식하지 못합니다.
여러칸을 띠어도 한 칸을 띤 것으로 인식합니다.
그러나 라는 태그명령어로 칸을 띠울수도 있습니다
★예제★ - 각 태그의 시작과 마무리 순서를 눈여겨 보세요.
< html >
< head >< title >머릿글< /title >< /head >
< body >
여기에 본문이들어갑니다
< /body >
< /html >
☞body와 /body 사이에 꼭 본문이들어가야함.
(아래의 태그연습장을 클릭해서 직접 연습해보시고 잘살펴 보세요....)
글자에관련된 태그(둘째날)
※주의할점:아래의 예제에서 < 와 font를 붙여 쓰셔야 합니다. < 와
/font 도 마찬가지구요
공백이 있는곳은 font 와 color ,font 와 size , font 와 face 사이뿐입니다.
① 글자크기 태그
< font size="크기">본문 내용< /font>
글자에 관련된 태그는 font 입니다.
여기에 크기, 색상, 모양 등을 각각 size, color, face라고 지정하고
그에 맞는 이름을 따옴표 안에 넣어주면 됩니다.
크기는 h1, h2, h3...라고 할 경우 h1이 가장 크고 숫자가 커질 수록
글자는 작아집니다.
그러나 보통 크기는 그냥 1, 2, 3...이라고 하거나 8pt, 10pt, 12pt...
등
두가지를 많이 쓰는데 그냥 숫자만 적는 것은 쓰기에 편리하고
pt로 하는 것은 일반적으로 한글에서 말하는 글자크기와 같기 때문에
크기를 조정하기가 편리합니다.
그러면 아래에서 몇가지 크기들을 보여드리겠습니다.
푸른색 글은 명령어 이고 빨간색 글자는 결과 입니다.
(복사하실때는 괄호와 명령어 사이를 붙여 주세요..이후모두동일합니다)
< font size="2">- 작은글자< /font> - 작은글자
< font size="3">- 작은글자< /font> - 작은글자
< font size="4">- 보통글자< /font> - 보통글자
< font size="5">- 보통글자< /font> - 보통글자
< font size="6">- 큰글자< /font> - 큰글자
< font size="7">- 큰글자< /font> - 큰글자
② 글자색상 태그
< font color="색상코드">본문 내용< /font>
글자색상을 바꾸고 싶을 때에는 글자크기 태그처럼 font를
사용하는데 size 대신 color를 써주고
따옴표 안에 색상명이나
색상코드를 넣어주면 됩니다.
색상의 경우에도 크기처럼 방법이 여러가지 있는데
white, black, pink, blue, green, brown...과 같이 색상이름을
영문으로 쓰는 경우에는 코드를 외우지 않아도 되므로
편리하긴 하지만 세분화된 여러가지 색상들을 다양하게
쓰기는 어렵습니다.
반면 색상표(게시판 윗글 참조!!)와 같이 숫자와 영문조합의
코드가 가장 많이 쓰이는데 이 경우 앞에 #이 붙기도 하나
안붙여도 무방하며 대소문자는 혼용해도 상관없습니다.
그 밖에도 숫자와 세미콜론으로 이루어진 코드가 있는데 이것은
보기 드물기 때문에 신경 안쓰셔도 됩니다.
< font color="SteelBlue">- 예쁜파랑< /font> - 예쁜파랑
< font color="4682B4">- 예쁜파랑< /font> - 예쁜파랑
< font color="pink">- 예쁜분홍< /font> - 예쁜분홍
< font color="FFC0CB">- 예쁜분홍< /font> - 예쁜분홍
< font color="458B74">- 예쁜초록< /font> - 예쁜초록
< font color="FF4500">- 예쁜주황< /font> - 예쁜주황
< font color="FFD700">- 예쁜노랑< /font> - 예쁜노랑
③ 글자모양 태그
< font face="글자체">본문 의 내용< /font>
글자체를 바꾸려면 size 혹은 color 대신에 face를 쓰고
따옴표 안에 글자체 이름을 써주면 됩니다.
그러나 주의해야 할 것은 익스플로러에서 지원하는 굴림체,
돋움체, 궁서체, 바탕체는 자유자재로 바꿀 수 있으나 이솝체,
엽서체, 휴먼매직체.. 등 다양한 글자체는 이것을 지원하는 사이트에서
다운을 받아 zip을 풀어준 후 윈도우의 폰트
(제어판에서 바꿔주면 쉽다)에 추가해 줘야지만
사용할 수 있다는 것입니다.
< font face="굴림체">- 굴림체< /font> - 굴림체
< font face="돋움체">- 돋움체< /font> - 돋움체
< font face="궁서체">- 궁서체< /font> - 궁서체
< font face="바탕체">- 바탕체< /font> - 바탕체
< font face="이솝체">- 이솝체< /font> - 이솝체
< font face="엽서체">- 엽서체< /font> - 엽서체
< marquee direction="방향">움직이는 글자 내용< /marquee>
글자움직임은 글자를 상하좌우 등으로 움직여 주는 것입니다.
여기서 direction이라 지정하고 따옴표 안에 up, down, right, left.. 등의
방향을 주는데 방향이 한쪽으로만 움직이지 않을 경우에는 direction 대신 behavior라 지정하고 움직임의 종류를
따옴표 안에 넣어주면 됩니다.
그리고 scrolldelay="숫자"를 해주어 움직이는 속도를 조정할 수 있고
두가지 이상의 움직임을 한꺼번에 적용할 수도 있습니다.
⊙명령어 모음 중요 합니다...
behavior=alternate : 좌우왕복
behavior=slide : 끝에서 처음으로
direction=right : 왼쪽에서 오른쪽으로
direction=up : 밑에서 위로
direction=down : 위에서 아래로
태그가 간단하지요?
대신 그림주소를 찾는 것이 중요합니다.
★ 방법은
① 원하는 그림에 마우스를 대고 우측클릭을 한후
② 나타나는 화면에 보이는 등록정보(properties)나 속성을
③왼쪽클릭하면 http://~로 시작하는
주소가 중앙에 있습니다.
④ 그것이 바로 그림주소입니다.
⑤ 그 그림주소의 글위를 왼쪽 클릭한
상태로 쭉~그으면 글전체가 푸른탭이 쒸어 집니다.
⑥그때 그글을 우측클릭하면 복사 항목이 나옵니다.
⑦이때 왼쪽버턴으로 복사 에 클릭하고 확인버턴누른후
⑧ 작성할 서류의 그림이나 사진 들어갈 자리에 우측클릭한후
⑨ 붙여넣기 항목에 왼쪽 클릭 해서
따옴표 안에 넣으시면 됩니다
★주의점 :: 그림주소는 확장자가~.jpg나 ~gif로 끝나는 파일 이어야
합니다
이미지태그는 마친후에< /img>를 사용하지 않습니다
★이미지태그의 명령어
align=left : 왼쪽정렬
align=right : 오른쪽정렬
alt=설명문 : 사용하지않아도 무관하나 예의상..
border=숫자 : 테두리굵기 (안보이게할때는 =0)
width=숫자 : 이미지 가로폭(위에보이는 다음로고 정도는60)
height=숫자 : 이미지 세로폭
☞예제보기 (복사하실때는 괄호와 명령어 사이를 붙여 주세요)
< img
src="https://t1.daumcdn.net/cafefile/pds42/15_cafe_2008_06_29_11_33_4866f473ca762"
align="left">
☞테두리 넣기(복사하실때는 괄호와
명령어 사이를 붙여 주세요..아래도
마찬가지)
< img
src="https://t1.daumcdn.net/cafefile/pds42/15_cafe_2008_06_29_11_33_4866f473ca762"
align=left border="3">
♤지금까지 한것들을 몇일 연습하시면 기초태그는 거의 다했습니다
♤이제 그림위에 글흘리기, 테이블만들기, 음악넣기등 몇가지만 추가 하시면
인터넷 상 에서 멋진 글들을 쓰실수
있을 겁니다.
☞
(아래의 태그연습장을 클릭해서 직접 연습해보시고 잘살펴 보세요....)
☆음악 태그 입니다.
이제 글에 음악을...
① 음악넣기 태그
< [안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-bgsound src="음악주소">
배경음악으로 넣을 수 있는 것은
~.mid~.wav만이 가능합니다.
음악 주소는 이미지와 동일한 방법으로
복사 하셔서 가져 오세요
(예제를 복사하실때는 괄호와 글자 사이를 붙여 주세요.)
☞예제보기
< [안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-bgsound
src="http://bbs.interbird.co.kr/midi/linkfile/2-71.mid"
loop=infinite>
②또다른 음악 파일 넣기
< embed src="음악주소">
♤embed 를 사용할때는 확장자가
~.asx 나 ~asf 로 끝나는 파일입니다
♤embed를 쓰시면 윈도우재생기 표시가 나타납니다
표시를 감추려면hidden="true" 를
넣어 주시고
자동실행은 autostart="true"를 써주세요
(예제를 복사하실때는 괄호와 글자 사이를 붙여 주세요.)
☞예제보기
< embed
src="http://music.sbs.co.kr/wmko/f2660.asx"
hiddn="true" autostart="true">
(여기까지 오신분이면 거진 도사가 됐으리라 생각 합니다 ^^;)
오늘은 여기까지~! 다음에는 여러분도 보셨을 멋진 테이블을 꾸밉시다
멋진 배경 화면에 의미있는 글들이 영화자막 처럼 올라가거나
사라지는...(^^ 저도 처음엔 그것이
너무 멋있어서 시작 했지요^*^)
하다보니 별의별 희한한 것들이 다있네요...
전광판,분수,폭죽...등등 차차배워봅시다....^.^;
(아래의 태그연습장을 클릭해서 직접 연습해보시고 잘살펴 보세요....)
그림 위에 글 흘리기
그림위에 글 흘리는 태그입니다.
보기 좋은 음식이 먹기에도 좋다고 하죠......
그냥보기엔 그저그런글이라도 꾸미고나면 달라보입니다
