HTML 공부하기 - 태그걸기 공부자료

HTML,
태그걸기 공부자료

 

<STRONG>"쓰고 싶은 글"</STRONG> --> 굵은체

<B></B> ---> 두껍고 진하게

<EM></EM> ---> 이탤릭체

<KBD></KBD>, <TT></TT>, <CODE></CODE> ---> 타자체

<SUB></SUB> 아래 첨자를 의미함

<SUP></SUP> 윗 첨자를 나타냄

<BLINK></BLINK> 글자가 깜빡거리는 효과 단, 네스케이프 에서만 실행됨

<U></U> 글자에 밑줄을 긋는 것과 같은 효과

<center></center> 글이나 그림을 중간으로

화살쏘기(단순마퀴태그)*

<marquee width="300">←♡--<</marquee><font size="5">{></font>

 

*반짝반짝(좌우반복,속도)*

<marquee behavior=alternate width=300 scrollamount=1000> 반짝</marquee>

 

*도리도리(좌우반복,너비)*

<marquee behavior=alternate width=30>@^.^@</marquee>

 

*한줄쓰기(방향)*

<MARQUEE DIRECTION=LEFT>여러분~~ 안녕하세요^^~ </MARQUEE>

 

*달팽이(방향,속도)*

<marquee direction="RIGHT" scrollamount="1"> __@/``</marquee>

 

공간이동...이 명령어가 없었다면 인터넷은 조금 덜 발달했을 겁니다.

어디로 가라. 링크를 건다는 건 그런 뜻이죠? 그럼 그게 복잡하느냐? 아닙니다.

<a href=링크걸주소>뭐라뭐라</a> 이게 다입니다. 헐~ 간단하죠?

 

예제 : kr.yahoo.com으로 가고 싶으면?

<a href=http://kr.yahoo.com>야후로</a>

 

샤크라의 오마이 보이의 주소를 알아 냈다 칩시다.

주소는

http://www.tube.co.kr/video/asx/1k1030000813_109.asx

그럼 <a href>와 </a>사이에 끼워놓으면 되죠?

어떻게 나오나 볼까요?

그냥 동영상과 똑같이...

<embed src= 로 올리시면 됩니다.

 

핑클이 한곡조 뽑는다는군요.

소스는... <embed src=http://www.music2001.pe.kr/music/mv/599.wmv>

 

리얼플레이어로 가능한 rm / ram 파일을 태그로 올리는 방법임다.

벌써 rm이나 ram하면 이미 눈치채셨겠지만 리얼플레이어의 엄청축소판이 화면에 나오는데 멋집니다.

(object classid="clsid:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA" width="100" height="20"

id="Real System")

(param name="_ExtentX" value="7938")

(param name="_ExtentY" value="2646")

(param name="Autostart" value="True")

(param name="BACKGROUNDCOLOR" value="#000000")

(param name="CENTER" value="0")

(param name="CONTROLS" value="ControlPanel")

(param name="loop" value="true")

(param name="SRC" value="http://myhome.dreamx.net/jeyyoon/koyote2megamix.rm")

(/object)

 

주소만 바꾸셔서 올려보세요. ( ) < >알죠?

노래는 코요테가 들려드립니다. Let's Go!!

<bgsound src=" http://user.chollian.net/~imorecom/forever-

stratovarius.wma" loop="infinite">

 

이미 아셨겟지만...bgsound src 라는 태그를 씁니다.

비지사운드는 비지끓이는 소리가 아니고 백그라운드의 약자겠죠?

위의 예처럼<bgsound src=음악이 있는 주소>의 형태입니다.

 게시판마다 관리자의 취향에 따라 다르지만...

다음(daum)의 카페게시판들은 아주 쉽습니다.

그냥 답변 글 누르면 원본메시지에서 태그로 올린 글들을 보실 수 있거든요.

 

그냥 복사하시면 자기 꺼!!

이게 제일 간단한데...많이 들 막아 놨더군요.

제일 먼저 시도해야 할 방법임다.

 

쪼끔 복잡하지만 이 글을 두세번 정도 읽으시면서 그대로 해 보시면 이해하실 수 있습니다.

 

한 화면에 여러개의 동영상이 떠있는 경우는 거의 없으니 어차피 그 동영상이 상영되고 있는 화면에 대한 embed 명령어는 하나 밖에 없겠죠?

 

그렇다면 이제 소스보기를 공부해 봅니다.

이제 맨 위에 있는 목록들을 봐 보실까요?

파일, 편집, 보기, 즐겨찾기, 도구, 도움말 순서로 되어 있죠?

그 중 보기를 눌러보세요.

소스보기 또는 소스라는 항목이 있죠?

어라. 뭐가 이리 복잡해.

영어로 잔뜩 써있는 페이지가 나옵니다. 하지만 항상 (html)로 시작해서(/html)로 끝납니다.

이것은 우리가 보고 있는 웹페이지는 다 이 html소스로 만들어 져 있다는 것입니다.

(html)과 (/html)사이에 있다는 거죠.

대부분 순서가 (html)(body)(table>내용(/table)(/body)(/html>순서입니다.

 

우리는 이 안에서 동영상에 관련된 태그명령어를 찾으면 되는 거죠.

이제 열려있는 소스창의 위를 보실까요? 원래 인터넷 페이지 말구...소스창을 화면에 꽉차게 여세요.

여기에도 목록이 있네요? 파일,편집,서식,도움말...

편집을 열어 보세요. 찾기라는 항목이 있죠?

누르시면 검색창이 나옵니다. 거기에 embed라고 치시면 지가 알아서 찾아 줍니다.

쉽죠? 이제 검색창을 취소를 눌러서 없애 버리시고 (embed src로 시작하는 명령어를 드래그 해서 복사하시면 그 동영상의 소스는 본인 것이 되는 겁니다.

 

 

<pre>

<font size=2>

 

지금까지 가장 기초적인 몇가지 태그에 대해서 살펴 보았습니다.

제 설명이 모자라 이해를 잘하셨는지 모르겠습니다만 이 정도만 알고계시면 차츰차츰 스스로 좀더 깊이있게 접근하실 수 있으리라 사료 됩니다.

 

오늘은 마지막회로서 아주쉽고 흔히 사용하는 편법을 알려드릴까 합니다. 보통은 퍼온다고 하는데, 이것은 저작권 침해와 관련된 미묘한 사안이므로 썩 바람직한 방법은 아니라 사료되나 필요한 태그 부분만 발췌해서 사용 한다면 큰 문제는 없으리라 봅니다.

 

게시된 글의 답글쓰기를 클릭하면 <font color=blue>원본 메시지</font>라는게 나타나는데 이게 바로 그 글의 <font color=blue>태그 소스</font>가 되겠습니다. 이 원본메시지에 <font color=blue>마우스왼쪽</font>을 꾹누른 상태에서 아래로 끌어내리면 (일명 드래그) 전체가 파랗게 변하 게 됩니다. 파랗게 변한 글위에 마우스를 놓고 이번에는 <font color=blue>마우스오른쪽</font>을

누르면 작은 창이뜨지요. 그곳에있는 <font color=blue>복사</font>를 <font color=blue>마우스 왼쪽</font>으로 클릭하면

그 태그소스가 캐시라는 메모리에 저장 됩니다.

 

글쓰기를 누르고 <font color=blue>내용란</font>에서 <font color=blue>오른쪽 마우스</font>를 누르면 다시 작은 창이 뜹니다. 그곳에 있는 <font color=blue>붙이기</font>를 <font color=blue>왼쪽마우스</font>로 클릭하면 아까 복사했던 소스가 그대로 나타납니다. 그런 다음 내용란 밑에 있는 <font color=blue>HTML태그포함</font>을 클릭하고 등록시키면 그대로 실행됩니다.

 

 

처음 태그를 접하신 분들은 아마도 저렇게 복잡한 태그를 어떻게 다 외워 써야 할까 걱정을 하셨을지 모릅니다. 하지만 위에서 해보신 것처럼 필요한 소스를 마우스를 이용해 복사해서 쓰시면 됩니다. 복잡한 태그중에서 어떤 것이 내게 필요한 소스인지를 구별하려면 지금까지 게시한 내용은 충분히 이해를 하셔야만 합니다.

 

 

그럼, 이 번에는 올린 그림을 배경으로 하여 테이블을 만들고 그림

위에 글을 올리는 방법을 예제와 태그 소스를 살펴보면서 설명하도록

하겠습니다.

 

(예제)

 

     그곳엔 아직도 백일홍이 떨고 있다

     닳아빠진 검정고무신을 신고서

     낮달보다도 높이 공을 차던

     아이들이 어디로 간 것일까?

 

     붉은 황토 속살 가리운 잔디만 서릿발 처럼 푸르러

     해거름 홍조 띤 소녀의 모습으로 돌아온

     노을빛 조차 깨어진 창가를 서성인다.

 

     그래, 저기 숨어 있는게지

     세상 가리운 플라타너스 잎사귀에 묻혀

     바람이 들려주는 호랑이와 수수깡 이야기 귀 기울이다

     낡은 손풍금 고운 목소리로 고향의 봄 합창하고 있는게지

 

     사십오인승 노란 승합차 한 대 만으로는

     삼십년 세월 쌓인 이야기 부르던 노래

     송두리채 싣고 떠날 수는 없는 노릇이지

 

     고추잠자리 처럼 떼지어 뜀뛰며 깔깔대던

     아이들의 웃음소리 간지러워

     백일홍은 흐드러져 아직 떨고 있는데...

 

     백미터 달리기에서 여자아이한테 뒤진 것은

     찢어진 고무신 때문이라고

     아린 가슴 쓸어내리는 헛기침 소리에

     도둑고양이 한마리

     잡초 무성한 운동장을 황망히 가로지른다.

 

******************************************************************

윗글의 태그 소스입니다.

 

(1)[table border=10 bordercolor=pink width=500 height=600]

(2)[tr](3)[td table background="http://album-200107.com.ne.kr:8080/

  img_upload/Y2001/M07/D09/Pic00038_224123ha4430_com.jpg" width=500 height=600]

(4)[pre]

(5)[font color=blue face=궁서체 size=2](6)[b]

    

 

그곳엔 아직도 백일홍이 떨고 있다

 

 

    닳아빠진 검정고무신을 신고서

    달보다도 높이 공을 차던

    아이들이 어디로 간 것일까?

 

    붉은 황토 속살 가리운 잔디만 서릿발 처럼 푸르러

    해거름 홍조 띤 소녀의 모습으로 돌아온

    노을빛 조차 깨어진 창가를 서성인다.

 

    그래, 저기 숨어 있는 게지

    세상 가리운 플라타너스 잎사귀에 묻혀

    바람이 들려주는 호랑이와 수수깡 이야기 귀 기울이다

    낡은 손풍금 고운 목소리로 고향의 봄 합창하고 있는게지

 

    사십오인승 노란 승합차 한 대 만으로는

    삼십년 세월 쌓인 이야기 부르던 노래

    송두리채 싣고 떠날 수는 없는 노릇이지

 

    고추잠자리 처럼 떼지어 뜀뛰며 깔깔대던

    아이들의 웃음소리 간지러워

    백일홍은 흐드러져 아직 떨고 있는데...

 

    백미터 달리기에서 여자아이한테 뒤진 것은

    찢어진 고무신 때문이라고

    아린 가슴 쓸어내리는 헛기침 소리에

    도둑고양이 한마리

    잡초 무성한 운동장을 황망히 가로지른다.

 

(8)[/font]

   [/pre]

   [/tr]

   [/td]

   [/table]

+++++++++++++++++++++++++++++++++++++

소스해설

 

(1)[table border=10 bordercolor=pink width=500 height=600]

 

table border=10 : 테두리 선의 굵기, 숫자가 클 수록 굵어짐.

bordercolor=pink : 테두리 선의 색깔.

width=500 height=600 : 테두리 선의 가로, 세로 사이즈.

 

(2)[tr] : tr은 열을 바꿔주고, td는 행을 나눠 줍니다.

 

(3)[td table background="http://...." width=500 height=600]

 

table background : 바탕화면의 그림을 지정해 주는 태그로서 뒤에 나오는

    http:// .... 가 그림의 경로(주소)가 됩니다.

    그림만 올릴경우 앞에서 배운것처럼 img src 를 쓰지만 이경우에는

    그림위에 글을 올릴 수가 없습니다.

 

width=500 height=600 : 바탕 그림의 가로 세로 사이즈.

 

(4)[pre] : pre 는 앞에서 다루었던 프리포맷 태그로서 br, p

    를 쓰지않고서도 행을 자유로이 바꿀 수 있어 편리합니다.

 

(5)[font color=blue face=궁서체 size=2]

 

font color=blue : 글자의 색깔을 푸른색으로 지정하는 태그.

face=궁서체 : 글씨체를 지정하는 태그.

size=2 : 글자의 크기를 지정하는 태그로서 숫자가 클수록 글자도 커짐.

 

(6)[b] : 이것도 앞에서 배우셨죠? 글씨를 진하게 하는 태그로서

strong과 같은 의미를 갖습니다.

 

(7) : 이 곳에 올리고 싶은 글을 쓰시면 됩니다.

 

(8)[/font]

   [/pre]

   [/tr]

   [/td]

   [/table]

 

닫기 태그입니다. 앞에서 언급했던 것처럼 모든 HTML 문서는 열기와 닫기의 태그를 설정해야만 실행이 됩니다. 닫기 태그에는 반드시 /(슬러쉬)를 해주어야하며, 처음 열었던 태그를 맨 마지막에 위치시켜야합니다. 그래서 /table 이 끝에 위치한 것이지요.

여기서도 [ ] 을 < > 으로 바꾸시는거 잊지 않으셨겠지요?

반드시 프린트해서 보시면서 연습장에서 직접 연습하시기 바랍니다.

 

 ------------------------------------------------------------

글씨 퍼지게 하는 방법 :

<span style="color:dddddd;FILTER:shadow(color=000000);height:10px"></span style><p style=font-size=30pt><font face="궁서체"><font color=#ff0008><marquee behavior="alternate">

                        <span style="FILTER:shadow;height:10px"><h1></span style>

                        <SPAN style=\"COLOR:orange;FILTER:shadow(color=BLUE);height:10px\"><h1><SPAN style=\"COLOR:dddddd;FILTER:shadow(color=silver);height:10px\"><p style=font-size=50pt><FONT FACE=\"궁서체\"> 말좀해요~~")

 

텔레토비 배경화면

 : <Style>BODY{background:url(http://my.netian.com/~ohsooha/po2.jpg)}</Style>

제자리로 : <style>body{background:blak}</style>

방가워요 : <Input type=submit value="눌러요"onclick=alert("방가워요")>

           <script>{alert("방가워요!")}{alert("전!파워여요")}{alert("조은하루돼구요")}{alert

("항상행복하세요")}{alert("까꿍^^")}