HTML교육자료

교육자료방

HTML교육자료

이연옥(지니) 2017. 12. 19. 09:33

HTML[태그] 연습 자료

HTML이란 Hyper Text Markup Language의 약자로 웹브라우저에 하이퍼텍스트 기능을 가진

문서를 만드는 언어입니다. 여기서 Hyper Text라고 하는 것은 웹문서의 임의의 위치에서
해당부분을 클릭했을 때 다른 곳으로 이동하는 것이 가능하도록 해 주는 것입니다.
태그란 HTML을 작성하기위한 하나의 재료로써 태그를 사용하여 HTML을 작성한다고
이해하시면 됩니다.

문서 지정

<HTML> </HTML>	문서의 맨 처음과 맨 끝에 사용이 됩니다.
<HEAD></HEAD>	HTML문서의 큰 제목 부분을 정함
<TITLE></TITLE>	웹 페이지의 제목을 지정
<BODY></BODY>	문서의 본문을 담당
예) <HTML> <HEAD> <TITLE>문서 제목</TITLE> </HEAD> <BODY BGCOLOR="배경색을 지정"> <body bgcolor="white" text="black" link="blue" vlink="purple" alink="red"> 본문내용 </BODY> </HTML>

서식 관련

<P>내용</P>	본문에서 단락을 구분.
<P ALIGN=LEFT,CENTER,RIGHT>내용</P>	문단내용 정렬
<DIV>내용</DIV>	단락구분.마지막 줄 안 띄어줌
<BR>내용</BR>	줄 바꿈
<CENTER>내용</CENTER>	본문의 중앙에 오게 배치
<HR></HR>	수평선
<HR SIZE=n WIDTH=n ALIGN=LEFT,CENTER,RIGHT></HR>	수평선의 두께,넓이,문단에서 왼쪽,중앙,오른쪽을 지정
<PRE>내용</PRE>	스페이스의 공백 인식
<H1~6>문서 제목</H1~6>	글짜 크기를 1~6까지 사용
<FONT SIZE=n COLOR=#000000 FACE=굴림>내용</FONT>	글자를 크기,색상,글꼴을 지정
<BIG>내용</BIG>	기본 글꼴보다 한 단계 크게
<SMALL>내용</SMALL>	기본 글꼴보다 한 단계 작게
<ADDRESS>내용</ADDRESS>	메일주소,연락처등을 기록
<BLOCKQUOTE>내용</BLOCKQUOTE>	인용문 등을 사용
<B>내용</B>	지정된 내용을 굵게
<I>내용</I>	이태릭체로
<U>내용</U>	밑줄
<BLANK>내용</BLANK>	깜박이게
<CITE>내용</CITE>	인용이나 참조로 표시할때
<CODE>내용</CODE>	컴퓨터프로그램 코드모양 변환
<EM></EM>	강조, 이태릭체
<KBD></KBD>	키보드로 입력한 것과 같은모양
<STMP></STMP>	예제로 표시할때
<STRONG></STRONG>	글자를 굵게
<STRIKE></STRIKE>	글자를 중앙에 선을 그어보여줌
<SUB></SUB>	아래 첨자로 보여줍니다.
<SUP></SUP>	위 첨자로
<TT></TT>	타자기로 친 것처럼 보여줌
<!--주석-->	주석

목록 정의

<UL></UL>	순서가 필요없는 목록을 적을때
<OL></OL>	순서가 필요한 목록을 적을때
<LI></LI>	UL,OL태그사용시 목록을 적을때
<DL></DL>	용어정의 목록을 시작하는 곳에 쓴다.
<DT>	용어의 이름을 쓴다.
<DD>	용어의 대한 설명을 쓴다.
&NBSP;	브라우저에서 스페이스바를 띄우는 효과

그림 관련

<IMG>	그림을 삽입하기 위한 태그
<IMG SRC="주소" BORDER=n>	그림을 나타나게함.테두리선은 n값
<IMG SRC="그림주소" BORDER=0 WIDTH=n HEIGHT=n>	그림의 넓이와 높이를 지정
<IMG SRC="파일명" ALT="그림설명"ALIGN=LEFT, CENTER,RIGHT>	Alt=그림에 대한 설명, ALIGN=그림정렬방식
<IMG SRC="파일명" ALIGN=TOP,MIDDLE,BOTTOM>	그림 다음에 오는 글자를 그림의 상단,중앙,아랫부분에 집어넣을 수 있도록 지정

링크 관련

<A HREF="연결될 파일명">글자,그림</A>	글자,그림을 누르면 연결될 문서로 이동한다.
<A HREF="HTTP://링크할 주소">글자,그림</A>	링크된 주소로 이동한다.
<A HREF="MAIL TO:자신의 메일 주소">글자, 그림</A>	편지함과 연결된다
<A HREF="문서명">글자,그림</A><A NAME="문서명">문서명 문단의 첫부분</A>	같은 문서 내에서의 이동이 가능하게 하는 태그

<TABLE></TABLE>	표를 나타냄
<TR></TR>	TABLE안에 쓰여 한 행을 만들어 줌
<TD></TD>	TR안에 쓰여 한 셀을 만들어 줌
<TH></TH>	TABLE안에 셀의 제목을 나타냄.
<TABLE BORDER=n CELLSPACING=n>	TABLE의 테두리선 크기,셀과 셀 사이의 간격을 조절
<TABLE CELLPADDING=n BGCOLOR=색상코드>	셀과 내부 글자와의 간격을 벌려줌, 바탕색을 지정
<TABLE WIDTH=n HEIGHT=n>	TABLE 넓이와 높이를 지정
<TD COLSPAN=n ROWSPAN=n>	셀을 가로,세로로 합치고 싶을때 사용
<TD ALIGN=LEFT,CENTER,RIGHT VALIGN=TOP,MIDDLE,BOTTOM>	좌우,중앙,상하 정렬

테이블 관련

프레임 관련

<FRAMESET></FRAMESET>	한 페이지에 두개 이상의 창을 작성
*<FRAMESET COLS="n%,">**	부라우저의 화면에 세로 방향으로 금을 그어 화면을 나누는 방식
*<FRAMESET ROWS="n%,">**	부라우저의 화면에 가로 방향으로 금을그어 화면을 나누는 방식
<FRAME SRC="문서.파일명">	프레임에 불러올 HTML문서 링크
<MARGINWIDTH=n>	프레임 창의 가로 여백을 지정
<MARGINHEIGHT=n>	프레임 창의 세로 여백을 지정
<SCROLLING=YES,NO,AUTO>	프레임 차의 스크롤 지정여부,자동여부
<FRAMEBORDER=n>	프레임의 경계선의 크기를 지정
<NAME= >	프레임에 고유의 이름을 간단하게 씀
<TARGET=_BLANK,_TOP,파일명>	프레임 창에서 링크된 경우 링크될때 보여주는 창을 지정

기타 본문 관련

<EMBED SRC="사운드.파일명" AUTOSTART=TRUE LOOP=n>	AUTOSTART를 사용해 홈페이지로 들어오면 백 그라운드 음악이 자동으로 시작하도록 지정할 수 있습니다. 이 태그는 넷스케이프에서만 적용됩니다.
<BGSOUND="사운드.파일명" LOOP=2>	EMBED>태그와 비슷하며 익스플로러에서만 적용됩니다.

HTML 테그 정리표


형 식	구 성	내 용
문서의 기본 구조를 나타내 주는 태그
<HTML>	<HTML>...</HTML>	HTML 언어로 작성되어 있다는 것을 알려줍니다.
<HEAD>	<HEAD>...</HEAD>	Heading의 준말로 글의 머리말에 해당합니다.
<BODY>	<BODY>...</BODY>	본문에 해당하는 부분을 알려줍니다.
<TITLE>	<TITLE>...</TITLE>	타이틀바에 새겨질 글자를 정의합니다.
문단 혹은 줄을 바꾸는 태그
<P>	<P>	문단을 바꾸는 태그입니다. 줄바꿈과 동시에 줄을 띤 것같은 효과가 나타납니다.
<BR>	<BR>	문단을 바꾸는 태그입니다. 줄바꿈의 역할만을 수행합니다.
<PRE>	<PRE>...</PRE>	여백이나 줄간격 등을 고정시켜 주는 역할을 합니다.
글자의 크기를 마음대로 조절하는 태그
<FONT>	<FONT SIZE=n> ...</FONT>	글자의 크기를 마음대로 조절해 줍니다. 뒤의 숫자는 1~7이며 7이 가장 큰 크기입니다. 기본값은 3입니다.
목록을 정리해 주는 태그
<LI>	<UL>...</UL>	순서가 없는 목록으로 일반적인 나열을 말합니다.
<LI>
문서를 가운데로 정렬시켜 주는 태그
<CENTER>	<CENTER>... </CENTER>	전체 문장을 가운데로 정렬시켜 줍니다.


글자의 모양을 정의해 주는 태그
<STRONG>	<STRONG>...</STRONG>	굵은 글씨를 나타내 주는 태그입니다.
<B>	<B>...</B>	굵은 글씨를 나타내 주는 태그입니다.
배경 이미지 작업하기
<BODY>	<BODY BACKGROUND="...">	배경 이미지를 띄워줍니다.
<BODY>	<BODY BGCOLOR="#nnnnnn">	배경 색깔을 지정해 줍니다.
색상 지정하기
<BODY>	<BODY TEXT= "#nnnnnn">...</BODY>	글자색을 지정합니다.
	<BODY LINK= "#nnnnnn">...</BODY>	하이퍼링크의 색을 지정합니다.
	<BODY VLINK= "#nnnnnn">...</BODY>	한 번 누른적이 있는 하이퍼링크의 색을 지정합니다.
	<BODY ALINK= "#nnnnnn">...</BODY>	누르고 있는 동안의 색을 지정합니다.
표 만들기 태그
<TABLE>	<TABLE BORDER>... </TABLE>	표의 전체 형식을 나타냅니다.
	<TR><TD></TD></TR>	표 내부에 들어갈 형식을 정의합니다.
	<TD COLSPAN=n>	가로칸을 n만큼 합쳐줍니다.
	<TD ROWSPAN=n>	세로칸을 n만큼 합쳐줍니다.
	<TD ALIGN=...>	표안의 좌우 정렬 방식을 정의합니다.
	<TD VALIGN=...>	표안의 상하 정렬 방식을 정의합니다.


이미지 다루기에 필요한 태그
<IMG>	<IMG SRC="...">	이미지를 정의해 줍니다.
	<IMG SRC="..." ALIGN=...>	이미지의 정렬 상태를 나타내 줍니다.
	<IMG SRC="..." WIDTH="..." HEIGHT="...">	이미지의 크기를 조절해 줍니다.
	<IMG SRC="..." LOWSRC="...">	이미지를 JPEG파일로 나타내 줍니다.
	<IMG SRC="..." VSPACE= HSPACE=>	이미지의 여백을 조절해 줍니다.
	<IMG SRC="..." BORDER="...">	이미지의 태두리선을 조절합니다.
	<IMG SRC="..." ALT="...">	이미지가 전송되지 않았을 경우에 글자로 대처해 줍니다.

Table 만들기 연습 태그연습장

<table>= 종이 우리가 글을 쓰려면 백지가 필요한데 <table>은 백지라고 생각하죠
가로칸을 만드는게 <td>
세로줄을 막는게 <tr>

<html>
<head>
<title> 誠   實 </title>
</head>
<body>
 누가 해도 할 일이면 내가 하자.

 언제 해도 할 일이면 지금 하자.

 내가 지금 할 일이면 더 잘하자
</body>
</html>

   ○  <table border=2> <tr><td>테이블 1</td></tr></table>
        테이블의 시작과 끝은 <table>과 </table>로 표시되고 ,
        각 가로줄(=행)은 <tr>과 </tr>로 구분되고 있고,
        (각 세로칸(=열)은 <td>과 </td>로 구분됩니다.
        그리고, 이 사이에 내용이 들어가게 됩니다.

     1. border=원하는수
        테이블의 테두리 선 굵기를 1 에서20 픽셀로 지정(원하는 만큼 적으면 됩니다).
        이 값을 0으로 놓으면, 테이블 테두리가 사라지죠.

     2. width=원하는 크기의 수
         테이블의 전체 폭을 픽셀로 지정합니다.보통300에서800까지가 적당).
        여기서 width=60%와 같은 식으로 주면, 전체 창 크기의 60%로 테이블의
        크기를 정하게 되지요.

3. height=200 테이블의 전체 높이를 지정한다.
사용법은 폭 정하는 법과 같습니다.

4. cellspacing=띄우고 싶은 만큼 의 수를 넣음
칸과 칸 사이의 간격을 픽셀로 지정(5에서 50 사이가 적당).

5. cellpadding=띄우고 싶은 만큼 의 수를 넣음
"칸의 테두리"와 "그 안에 쓰여지는 내용" 사이의 간격을 지정.

6. bordercolor=원하는 색 이름 테두리의 색상을 지정.

7. bgcolor=원하는색이름 내용이 들어가는 부분의 배경색을 지정.

모든 속성에 숫자는 원하시는데로 바꾸어 넣어서 실험해보세요

연습1) <tr><td>를 없앴을 때 태그연습장
bgcolor--green gold blue red pink border=1~20

연습2) 태그연습장

<pre>가 있을 때 <br>의 예 <TR><TD>를 지웠을 때 face=글꼴 <ul>을 뺐을 때

<PRE><FONT size=3 face=verdana color=00009c><ul><ul>
<b> 誠實<br><br>

누가 해도 할 일이면 내가 하자.<br>
언제 해도 할 일이면 지금 하자.<br>
내가 지금 할 일이면 더 잘하자</b>

연습3) 태그연습장

<pre>가 있을 때 <br>의 예 <TR><TD>를 지웠을 때 face=글꼴

<TABLE borderColor=#ffffff cellSpacing=10 cellPadding=20 width=450 background=http://kaebi.com/bbs/data2/pohto3/07_29.jpg border=0>
<TBODY><TR><TD>
<TABLE borderColor=#ffe69d cellSpacing=0 cellPadding=10 width=450 background=http://kaebi.com/bbs/data2/pohto3/07_29.jpg border=2>
<TBODY><TR><TD>
<table border=0 cellpadding=5 background=http://id.emimg.com/imgdir/00/00/00/51/12/00511217_3.jpg width=450><tr><td>
<center><embed height="360" src="https://t1.daumcdn.net/tistoryfile/fs13/5_tistory_2008_11_25_18_58_492bcc3d74aba?original" width="480"></center>
<PRE><FONT size=3 face=verdana color=00009c><ul><ul>
<b> 誠實<br><br> 누가 해도 할 일이면 내가 하자.<br>
언제 해도 할 일이면 지금 하자.<br>
내가 지금 할 일이면 더 잘하자</b><br>

<TABLE borderColor=#ffffff border= 30 cellSpacing=30 cellPadding=20 width=450 background=http://kaebi.com/bbs/data2/pohto3/07_29.jpg border=0>
<TBODY><TR><TD>
<TABLE borderColor=#ffe69d cellSpacing=0 cellPadding=10 width=450 background=http://kaebi.com/bbs/data2/pohto3/07_29.jpg border=2>
<TBODY><TR><TD>
<table border=0 cellpadding=5 background=http://id.emimg.com/imgdir/00/00/00/51/12/00511217_3.jpg width=450><tr><td>
<center><embed height="360" src="https://t1.daumcdn.net/tistoryfile/fs13/5_tistory_2008_11_25_18_58_492bcc3d74aba<_u><_a>?original" width="480"></center>
<PRE><FONT size=6 face=verdana color=00009c>
<center> <b>誠實<br><font size=4 color=blue>
누가 해도 할 일이면 내가 하자.<br>
언제 해도 할 일이면 지금 하자.<br>
내가 지금 할 일이면 더 잘하자</b><br>
<center>
<img src="https://t1.daumcdn.net/cfile/blog/9944913A5A37636C24" class="txc-image" width="244"

style="clear: none; float: none;" border="0" vspace="1" hspace="1" data-filename="I-LOVE-YOU.gif" exif="{}"

actualwidth="244" /></marquee>
<embed width="150" height="45" src="https://t1.daumcdn.net/cafefile/pds51/3_cafe_2007_12_01_01_50_47503f3f855c9&token=20081010&.mp3" type="audio/mpeg" x-x-x-x-x-allowscriptaccess="sameDomain" allownetworking="internal" loop="-1" volume="0" allowNetworking='internal' x-x-x-x-x-allowscriptaccess='sameDomain'hidden=true>

★<marquee> 태그연습장

<marquee>는 글자를 오른쪽에서 왼쪽으로 움직이라는 명령어
</marquee> 는 명령어를 끝낸다는 말입니다

<br> <marquee direction="right">오른쪽으로 움직여라</marquee>< br>
< marquee direction="up">위쪽으로 움직여라</marquee>< br>
< marquee direction="down">밑으로 떨어진다</marquee>< br>
< marquee behavior="slide"> 왼쪽으로 오다 멈추어라 </marquee> <p>

marquee 다음에 direction은 움직임의 방향 명령이고
scrollamount 속도 명령

★marquee의 속도                                                  태그연습장
  1. scrollamount 움직임의 속도를 명령합니다
    <marquee scrollamount="원하는 속도의 수치"> 원하는 속도의 수치에 값을 넣으면
    움직임의 속도가 변합니다. 1 이 가장 느리고 숫자가 증가 할수록 속도도 빨라 지죠.

  <marquee scrollamount="1"> 천천히 움직여라</marquee> <br>
  <marquee scrollamount="2"> 조금 더 빠르게 움직여라</marquee>< br>
  <marquee scrollamount="3"> 더욱 빨리</marquee> <br>
  <marquee scrollamount="4"> 더 빨리 움직여 볼래?</marquee>< br>
  <marquee scrollamount="5"> 넘느려 더 빨리</marquee>< br>
  <marquee scrollamount="6"> 음..빠르군^^</marquee>
  <marquee scrollamount="20"> 우와 너무 빨라</marquee>< br>
  <marquee direction="right" scrollamount="1"> 넌 오른쪽으로 천천히 움직여라</marquee>

연습3) 태그연습장

bgcolor="yellow" 바꿔 보기 green gold blue red pink

<table bordercolor=pink border=30 cellSpacing=30 cellPadding=20 width=500 height=350 bgcolor=yellow><tr><td>

<marquee direction=up behavior="slide" scrollamount="1" width=450 height=350><ul><ul>

<b><font face=md솔체 size=4 color=blue> 홀로서기 1 <br><br>
    기다림은<br> 만남을 목적으로 하지 않아도<br>
    좋다.<br>
    가슴이 아프면<br>
    아픈채로,<br>
    바람이 불면<br>
    고개를 높이 쳐들면서, 날리는<br>
    아득한 미소.<br><br></b><center>
<img src="https://t1.daumcdn.net/cfile/blog/9944913A5A37636C24" class="txc-image" width="244"

style="clear: none; float: none;" border="0" vspace="1" hspace="1" data-filename="I-LOVE-YOU.gif" exif="{}"

actualwidth="244" /></marquee>

1.움직이는 방향
  direction="left"   왼쪽으로 움직임
  direction="right"  오른쪽으로 움직임
  direction="up"     위로 움직임
  direction="down"   아래로 떨어짐
2.속도
  scrollamount="1"    느림
  scrollamount="2"    조금 빠름
  이렇게 뒤의 숫자를 올려주면 빨라지고
3.배경색
  bgcolor="yellow"    노란색 바탕
  bgcolor="blue"      파란색 바탕
  이렇게 bgcolor 뒤에 원하는 색의 이름을 넣어주면
  바탕색이 내가원하는색으로 변한다는것을 이해하셨을 겁니다
  marquee만 단순히 사용하면 기본적인 지원이 됩니다
  기본이란 왼쪽으로 계속 움직이며 속도는 약 4정도로 움직이죠

4. behavior="slide" marquee 다음에 이렇게 넣으면 글이 오다가 끝에서 멈추라는 말입니다
5. behavior="alternate" 이건 왔다갔다 하라는 말이죠
6. width="원하는 크기의 수" 가로의 크기를 지정합니다
height="원하는 크기의 수" 높이를 지정합니다
7.글자가 지그 재그로 움직이는건 marquee를 이중으로 사용합니다

연습4) behavior="slide"(위로 올라와서 멈추기) 태그연습장

(1)
<marquee direction="up" scrollamount="1" bgcolor="skyblue" behavior="slide">
키스의 의미 <br><br>
이마에 하는 Kiss는<br>
우정을 의미하고<br>
감은 눈 위에 하는 입맞춤은<br>
감사의 Kiss<br> 코 끝에 하는 Kiss는<br>
당신에게 행운이 함께 하길빈다는 뜻<br>
볼에 하는 Kiss는<br> 반가움을 뜻하고<br>
입술에 하는 것은<br>
사랑의 Kiss<br></marquee>

<marquee direction="up" scrollamount="3" bgcolor="skyblue" behavior="slide"height=600>
<pre><font color=blue size=4 face=궁서체><ul><ul>
키스의 의미

이마에 하는 Kiss는
우정을 의미하고

감은 눈 위에 하는 입맞춤은
감사의 Kiss

코 끝에 하는 Kiss는
당신에게 행운이 함께 하길빈다는 뜻

볼에 하는 Kiss는
반가움을 뜻하고

입술에 하는 것은
사랑의 Kiss
<img src="https://t1.daumcdn.net/cfile/blog/99C257335A2E2B1829" class="txc-image" width="244" style="clear: none; float: none;" border="0" vspace="1" hspace="1" data-filename="I-LOVE-YOU.gif" exif="{}" actualwidth="244" />

(2) height="330~420" 조정해 보기 태그연습장

<marquee direction="up" scrollamount="5" bgcolor="yellow"behavior="slide" width="536" height="420"><ul>
<pre><font color=blue size=3 face=md솔체>
<b>고향에 고향에 돌아와도
그리던 고향은 아니러뇨.
산꿩이 알을 품고
뻐꾹이 제철에 울건만,
마음은 제고향 지니지 않고
머언 항구로 떠도는 구름.
오늘도 메끝에 홀로 오르니
흰점 꽃이 인정스레 웃고,
어린 시절에 불던 풀피리 소리 아니 나고
메마른 입술이 쓰디쓰다.
고향에 고향에 돌아와도
그리던 하늘만이 높푸르구나</b>
<img src="https://t1.daumcdn.net/cfile/blog/99249B335A2E2CD205" class="txc-image" width="444" style="clear: none; float: none;" border="0" vspace="1" hspace="1" data-filename="cf-sodlfmawlsk-angelfish523-kdb3477_063dna.jpg" exif="{}" actualwidth="444" />

연습5) ★ behavior="alternate"의 적용(왔다갔다 하라는 명령) 태그연습장

1)scrollamount="1~5" 조정해 보기

2)width="100~500" 조정해 보기

3)height="10~100" 조정해 보기

4) marquee의 2중 사용예 (한번은 상하로 한번은 좌우로 움직이게 합니다 )

<marquee><marquee direction="up" scrollamount="5" behavior="alternate" width="350" height="150">
<font color=red size=4 face=궁서체>
♥ 사랑해요 ♥~~</marquee></marquee>

★글자의 크기와 색상 태그연습장
글자의 명령은 모두가 font에서 이루어집니다
font 글자는 이렇게 하라는 말
color 글의 색상을 지정하는 명령어
size 글의 크기를 지정하는 명령어

   움직여라 ☞ marquee
   방향은 ☞ direction
   속도는 ☞ scrollamount
   바탕색 ☞ bgcolor
   넓이는 ☞ width
   높이는 ☞ height

★문단의 정렬                              태그연습장

1.<br> 일반 문서와 같이 엔터키는 태그에서 통용이 안됩나다
    아무리 엔터키를 쳐봐야 줄이 바뀌지 않죠
    엔터키와 같은 효과를 내는것이 <br>입니다

   <br>을 한번 넣으면 엔터키 한번 누른 효과가 나고
   <br><br>이렇게 두번 넣으면 두줄이 떨어 집니다
    물론 3개넣으면 3줄 떨어지겠죠

2.<p> 이건 두줄이 동시에 떨어지라는것입니다
<br>과<p>를 비교해보죠

<br>과 <p>의 차이점
1.<br>은 한줄이 떨어지고 <p>는 두줄이 떨어지는것입니다
2.<br>은 넣으면 넣는대로 줄이 떨어지지만
<p>는 아무리 넣어도 한 칸만 떨어지지요

1.<p align=left>넣고 싶은글.</p> 글의 정렬을 왼쪽으로 하라는것입니다
  이건 쓰지 않아도 기본적으로 모든 글은 왼쪽 정렬 상태로 나타납니다
2.<p align=right>넣고 싶은글.</p> 글을 오른쪽으로 정렬시킵니다 이건 별로 안쓰죠
3.<p align=center>넣고 싶은글.</p> 글을 중앙에 정렬시킵니다
4.<center>넣고 싶은글.</center> 글을 중앙에 정렬시킵니다 3번과 동일한 것입니다.
   제일 많이 쓰며, 제일 간단하지요
5. <pre> <pre>넣을 글 </pre>
   <pre> 은 사용자 정의대로 표현되는 것입니다
  < pre> 내에는 <br>나<p>를 사용할 필요가 없지요( naver에서는 예외)
6..<b>넣고 싶은 글</b> 이건 글자를 진하게 하라는 말입니다
7.<i>넣고 싶은 글</i> 이명령어는 이탤릭채로 표현하라는 말이구요
8.<u>넣고 싶은 글</u> 이건 글밑에 밑줄울 그어라는 말이죠

★ 연습(<center> <pre> <ul> <br> <p>의 사용 연습) 태그연습장
(1)<center><pre><font size=4 color=blue face=궁서체>
<b>고 향 정 지 용

고향에 고향에 돌아와도
그리던 고향은 아니러뇨.

산꿩이 알을 품고
뻐꾹이 제철에 울건만,

마음은 제고향 지니지 않고
머언 항구로 떠도는 구름.

오늘도 메끝에 홀로 오르니
흰점 꽃이 인정스레 웃고,

어린 시절에 불던 풀피리 소리 아니 나고
메마른 입술이 쓰디쓰다.

고향에 고향에 돌아와도
그리던 하늘만이 높푸르구나</b>

(2)<center><font size=4 color=blue face=궁서체>

<b>고 향 정 지 용고향에 고향에 돌아와도
그리던 고향은 아니러뇨.

산꿩이 알을 품고
뻐꾹이 제철에 울건만,

마음은 제고향 지니지 않고
머언 항구로 떠도는 구름.

오늘도 메끝에 홀로 오르니
흰점 꽃이 인정스레 웃고,

어린 시절에 불던 풀피리 소리 아니 나고
메마른 입술이 쓰디쓰다.

고향에 고향에 돌아와도
그리던 하늘만이 높푸르구나</b>

(3)<br> 사용 예 태그연습장
<font size=4 color=blue face=궁서체><ul><ul><b>고 향 정 지 용<br><br>고향에 고향에 돌아와도<br>
그리던 고향은 아니러뇨.<br><br>

산꿩이 알을 품고<br>
뻐꾹이 제철에 울건만,<br><br>

마음은 제고향 지니지 않고<br>
머언 항구로 떠도는 구름.<br><br>

오늘도 메끝에 홀로 오르니<br>
흰점 꽃이 인정스레 웃고, <br><br>

어린 시절에 불던 풀피리 소리 아니 나고<br>
메마른 입술이 쓰디쓰다.<br><br>

고향에 고향에 돌아와도<br>
그리던 하늘만이 높푸르구나</b><br>

(4)<P> 사용 예 태그연습장
<center><font size=4 color=blue face=궁서체><ul><ul><b>고 향 정 지 용<P><P>고향에 고향에 돌아와도<P>
그리던 고향은 아니러뇨.<P><P>

산꿩이 알을 품고<P>
뻐꾹이 제철에 울건만,<P><P>

마음은 제고향 지니지 않고<P>
머언 항구로 떠도는 구름.<P><P>

오늘도 메끝에 홀로 오르니<P>
흰점 꽃이 인정스레 웃고, <P><P>

어린 시절에 불던 풀피리 소리 아니 나고<P>
메마른 입술이 쓰디쓰다.<P><P>

고향에 고향에 돌아와도<P>
그리던 하늘만이 높푸르구나</b><P>

총연습) 태그연습장

<body bgcolor=778899><pre><font color=822222 size=2>
<p align=center><b>그리움을 벗어 놓고</b></font>
<font color=#333399 size=2>< i><u> 용혜원</u></i></p></font></pre>
<marquee direction=up scrollamount=1><font color=#ccffcc size=3>
<center><pre><b> 갓 피어난 꽃처럼
그리움을 벗어 놓고 그대를 만나고 싶습니다
발이 있어도 달려가지 못하고
마음이 있어도 표현 못하고
손이 있어도 붙잡지 못합니다.
늘 미련과 아쉬움으로 살아가며
외로움이 큰 만큼
눈물이 쏟아지도록 그립기만 합니다
선잠이 들어도 그대 생각으로 가득하고
깊은 잠이 들면 그대 꿈만 꿉니다.
날마다 뼈아프도록 견디기 어려웠던 세월도 이겨 낼 수 있음은
그대가 내 마음을 알고 있기 때문입니다 </b></pre></center></font></marquee></body>

★이미지 태그연습장

★배경 그림= 명령어는 background

<table background="그림 주소" "width="넓이" height="높이" border=10>

<table background="http://mysesang.com/buty/img/bs2.jpg" width="518" height="362" border=10>
<tr><td>
<marquee direction=up scrollamount=1>
<font color=white size=3><center>
<b>
홀로서기 1 <br><br>
지은이 : 서정윤<br><br> 기다림은<br>
만남을 목적으로 하지 않아도 좋다.<br>
가슴이 아프면<br>
아픈채로,<br>
바람이 불면<br>
고개를 높이 쳐들면서,<br>
아득한 미소.<br>
</b></center> </font> </marquee> </td></tr></table>

※알아 둬야 할 것 태그연습장

2. img src="그림주소" 하여 width와 height를 조절하면 그림 크기를 마음대로 해도 되었지만
    table 의 background로 할 때, 다시말하면 바탕그림으로 할 때는 크기조절을 하면 원본에 손상이 갑니다
    바탕에 그림없이 색만 표시할 때는 background를 하면 안 되고 반드시 bgcolor="원하는 색"하여야하고
    바탕에 그림을 넣을 때는 지금 배우신대로 해야합니다

* 멀티미디어란?
- 멀티미디어는 여러 매체가 혼합된 형태의 커뮤니케이션입니다.
우리에게 멀티미디어 개념을 갖게 해준 것은 CD-ROM의 출현부터라고 합니다.
1980년 중반부터 CD-ROM과 CD-ROM타이틀의 발전과 함께 멀티미디어도 폭넓게
성장하였다. 예전의 멀티미디어란 홈페이지에 사운드나 동영상을 넣는 것이 전부였지만,
지금은 많은 플러그인 형태의 멀티미디어가 소개되고 있습니다.

우선 음악의 종류가 어떤 것이 있는지 알아 보겠습니다
① .mid, .midi (미디파일)
mid 는Musical Instrument Digital Interface로 mid파일 포맷은 국제 미디 제조업 협회
(International MIDI Manufacturers Association)에서 개발하였고, 음악 표기를 전자적으로 교환
가능하게 하는 프로토콜입니다. 샘플 크기는 없으며, 음질은 각 사용자의 컴퓨터내에 부착된
사운드 카드성능에 크게 의존합니다.

② .ra, .ram 파일
리얼플레이어(realplayer)를 이용해서 음악을 듣는 파일입니다. 리얼플레이어 없이는 재생이 되질않습니다.
음악을 불러오면 컴퓨터에 설치되어 있는 리얼플레이어가 작동되면서 음악이 나오게 됩니다. ra, ram 파일은
mid 파일과는 달리 가수의 목소리를 직접 들을 수 있고 용량도 mp3 파일보다 적습니다.
(약 1/4 수준) 하지만 음질이 상당히 떨어지고 전용선 사용자들에게는 전혀 무리가 가지 않는 대신
모뎀사용자들은 어느정도 무리가 있습니다.

③ .wav 파일
윈도우에서 소리를 녹음하고 듣는데 기본적으로 사용하는 포맷입니다. 웨이브 채널을 사용하며,
윈도우 의 매체재생기와 연결되어 있습니다. 녹음할 음질에 따라 용량이 다르지만 CD 수준의
음질로 녹음할 경우 1분에 10MB 정도의 용량을 차지합니다

④ .aiff 파일
aiff(Audio Interchange File Format)는 매킨토시용으로 개발된 사운드포맷. 샘플 크기는
일반적으로 16bit 이지만, 32bit 까지 사용 가능합니다. 음질은 아주 좋습니다.

⑤ .au파일
가장 일반적인 파일맷입니다. SUN와 NeXT가 사용하는 파일포맷입니다.
샘플 크기는 8bit 입니다. 음질은 좋은 편입니다.

⑥ .snd파일
매킨토시 사운드 파일입니다. 성능면에서 .au 사운드 파일 포맷과 거의 같습니다.
샘플 크기는 8bit 입니다. 음질은 좋은 편입니다.

⑦ .asf, .asx파일
우선 asf 와 asx 의 차이점에 대해서 설명하겠습니다.
asf 는 동영상, 또는 음성 파일입니다. 즉, mpg, mp3, wav, rm 등과 같이 직접 영상이나
음성이 들어 있는 파일입니다. asf 와 가장 비슷한 형태는 rm 입니다. 인터넷상에서 스트리밍으로
데이터를 전송할 수 있는 형태이니까요.. 즉 다시 말하면 asf 는 이 파일 하나만으로도 영상이나,
음성을 볼 수 있습니다. asx 는 텍스트 파일입니다. 메모장에서 asx 파일을 열어 보실 수 도 있습니다.
동영상, 음성 파일이 아닙니다. asx 는 asf 의 위치, 주소, 기타 정보를 저장하고 있는 파일입니다.
실제 메모장에서 열어보면. asf 파일의 url 이나 하드상의 위치가 나와 있습니다. asx 파일은 혼자서는
존재의 의미가 없으며... asf 파일이 있어야만 합니다. 어떤 asf 파일이 있고, 그 파일의 위치를 나타내주는
것이 바로 asx 파일인 것입니다. windows media player 가 asx 파일을 읽어들여서 위치를 파악한
다음 그 위치의 asf 파일을 실행하는 것입니다.

⑧ mp3 / mp2
앞서 설명한 웨이브 파일은 음질을 높이면 파일 크기가 너무 커진다는 큰 단점이 있습니다.
예를 들어 4분짜리 노래를 CD에서 녹음할 경우 웨이브는 40MB 이상을 차지하게 되죠.
mp3와 mp2는 동영상 규격인 MPEG에서 사운드 부분만을 구현한 것으로, 뛰어난 압축률을 자랑합니다.
특히 요즘 인기를 끌고 있는 mp3의 경우 웨이브의 11분의 1의 용량만으로 같은 음질의 소리를 구현할 수 있어,
CD음악을 녹음하는데 많이 사용하고 있습니다.

음악 올리는법 태그연습장


												 

					  
1 . 우선 음악을 인터넷에서 찾아 봅니다.
    검색에 asx 나 asf 또는 mid를 넣으면 수많은 음악 사이트가 나옵니다
2 . 컴에  윈 미디어가 있어야해요.
    윈미디어 이외의 것은 등록정보 보기가 어렵습니다
    없으신 분은 윈미디어 홈에 가서 다운 받으세요 무료입니다
3 . 음악의 명령어는 대체로 세 가지를 많이 사용합니다
    ① <embed src="음악주소">
    ② <bgsound src="음악주소">
    ③ <OBJECT WIDTH=수치 HEIGHT=수치 CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95"codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.        cab#Version=6,4,05,0809" Standby="Loading Microsoft Windows Media Player components..."type="application/x-oleobject" VIEWASTEXT><PARAM NAME="FileName" VALUE="음악 주소"></OBJECT>
      
*여기서 embed 는 넷스케이프용 태그이고 
 bgsound 는 익스플로러용 태그입니다. 
 두 가지를 다 써넣어야 두 브라우저 모두에서 음악을 들을 수 있습니다  
 
<bgsound src="      ">
" 와 " 사이에 아래 주소를 복사해서 붙이기
음악 상자 (뮤직 박스)안 보이게 하려면 끝에   hidden=true  붙여 넣기

1.달아 달아 밝은 달아/경기민요
<embed src="https://t1.daumcdn.net/cfile/tistory/157301395017CDF207?original">
<bgsound src="">
 2.기러기/윤석중 시/포스터 곡
<embed src="https://t1.daumcdn.net/cfile/tistory/134460574E51055403?original">
<bgsound src="">
 3.귀뚜라미 우는 밤/강소천 시/스코틀랜드 민요
<embed src="https://t1.daumcdn.net/cfile/tistory/136244495062FF312F?original">
<bgsound src="">
 4.가을밤/이태선 시/박태준 곡
<embed src="https://t1.daumcdn.net/cfile/tistory/1835AF454E9EABDD1F?original">
<bgsound src="">
 5.귀뚜라미 노래잔치/어효선 시/이계석 곡
<embed src="https://t1.daumcdn.net/cfile/tistory/200CBD475030C5C228?original">
<bgsound src="">
 6.달맞이/윤석중 시/홍난파 곡
<embed src="https://t1.daumcdn.net/cfile/tistory/147B4F4A5062FFA513?original">
<bgsound src="">
 7.가을/백남석 시/현제명 곡
<embed src="https://t1.daumcdn.net/cfile/tistory/132F75405062D2F60E?original">
<bgsound src="">
 8.그리운 언덕/강소천 시/ 정세문 곡
<embed src="https://t1.daumcdn.net/cfile/tistory/1766F8554E5525EE20?original">
<bgsound src="">
 9.가을길/김규환 시/김규환 곡
<embed src="https://t1.daumcdn.net/cfile/tistory/153C1D474EC0C7651D?original">
<bgsound src="">
 10.가을편지/이복자 시/신귀복 곡
<embed src="https://t1.daumcdn.net/cfile/tistory/173D02334FD88FB519?original">
<bgsound src="">
 11.가을길/김찬양 시/신귀복 곡
<embed src="https://t1.daumcdn.net/cfile/tistory/1509964B4FD711BA28?original">
<bgsound src="">
 12.내 고향/박상경 시/신귀복 곡
<embed src=" https://t1.daumcdn.net/cfile/tistory/203458344FD323C91E?original">
<bgsound src="">
 13.꽃씨/유경환 시/신귀복 곡
<embed src="https://t1.daumcdn.net/cfile/tistory/131BD3475004DAB51E?original">
<bgsound src="">
14.고향땅/정지용 시/한용희 곡
<embed src="https://t1.daumcdn.net/cfile/tistory/1826B7464DDBE98B08?original">
<bgsound src="">
 15.구름/정근 시/이수인 곡
<embed src="https://t1.daumcdn.net/cfile/tistory/173FC7514DF059BD2E?original">
<bgsound src="">
 16.별 보며 달 보며/유성윤 시/유병무 곡
<embed src="https://t1.daumcdn.net/cfile/tistory/1744463A4EB6B5A515?original">
<bgsound src="">
 17.노을/이동진 시/최현규 곡
<embed src="https://t1.daumcdn.net/cfile/tistory/1845E03D4EB917F20F?original">
<bgsound src="">
 18.흰 구름 푸른 구름/강소천 시/한용희 곡
<embed src="https://t1.daumcdn.net/cfile/tistory/133D704E504F367633?original">
<bgsound src="">
 19.고향 생각/에스파니아 민요
<embed src="https://t1.daumcdn.net/cfile/tistory/122AB64B502CD7C114?original">
<bgsound src="">
 20.목장의 노래/석용원 시/이수인 곡
<embed src="https://t1.daumcdn.net/cfile/tistory/1276523A5062D6CA17?original">
<bgsound src="">


<embed src="   ">
<bgsound src="      ">
" 와 " 사이에 아래 주소를 복사해서 붙이기
음악 상자(뮤직 박스)안 보이게 하려면 끝에 hidden=true  붙여 넣기 
01. https://t1.daumcdn.net/cfile/tistory/157301395017CDF207?original  
(달아 달아 밝은 달아/경기민요)
02. https://t1.daumcdn.net/cfile/tistory/134460574E51055403?original  
(기러기/윤석중 시/포스터 곡)
03. https://t1.daumcdn.net/cfile/tistory/136244495062FF312F?original  
(귀뚜라미 우는 밤/강소천 시/스코틀랜드 민요)
04. https://t1.daumcdn.net/cfile/tistory/1835AF454E9EABDD1F?original  
(가을밤/이태선 시/박태준 곡)
05. https://t1.daumcdn.net/cfile/tistory/200CBD475030C5C228?original  
(귀뚜라미 노래잔치/어효선 시/이계석 곡)
06. https://t1.daumcdn.net/cfile/tistory/147B4F4A5062FFA513?original  
(달맞이/윤석중 시/홍난파 곡)
07. https://t1.daumcdn.net/cfile/tistory/132F75405062D2F60E?original  
(가을/백남석 시/현제명 곡)
08. https://t1.daumcdn.net/cfile/tistory/1766F8554E5525EE20?original  
(그리운 언덕/강소천 시/ 정세문 곡)
09. https://t1.daumcdn.net/cfile/tistory/153C1D474EC0C7651D?original  
(가을길/김규환 시/김규환 곡)
10. https://t1.daumcdn.net/cfile/tistory/173D02334FD88FB519?original  
(가을편지/이복자 시/신귀복 곡)
11. https://t1.daumcdn.net/cfile/tistory/1509964B4FD711BA28?original  
(가을길/김찬양 시/신귀복 곡)
12. https://t1.daumcdn.net/cfile/tistory/203458344FD323C91E?original  
(내 고향/박상경 시/신귀복 곡)
13. https://t1.daumcdn.net/cfile/tistory/131BD3475004DAB51E?original  
(꽃씨/유경환 시/신귀복 곡)
14. https://t1.daumcdn.net/cfile/tistory/1826B7464DDBE98B08?original  
(고향땅/정지용 시/한용희 곡)
15. https://t1.daumcdn.net/cfile/tistory/173FC7514DF059BD2E?original  
(구름/정근 시/이수인 곡)
16. https://t1.daumcdn.net/cfile/tistory/1744463A4EB6B5A515?original  
(별 보며 달 보며/유성윤 시/유병무 곡)
17. https://t1.daumcdn.net/cfile/tistory/1845E03D4EB917F20F?original 
(노을/이동진 시/최현규 곡)
18. https://t1.daumcdn.net/cfile/tistory/133D704E504F367633?original  
(흰 구름 푸른 구름/강소천 시/한용희 곡)
19. https://t1.daumcdn.net/cfile/tistory/122AB64B502CD7C114?original  
(고향 생각/에스파니아 민요)
20. https://t1.daumcdn.net/cfile/tistory/1276523A5062D6CA17?original  
(목장의 노래/석용원 시/이수인 곡)


1)세레나데(슈베르트) 
<EMBED style="WIDTH: 450px; HEIGHT: 59px" height=59 type=audio/x-ms-wma width=450 src=https://t1.daumcdn.net/cfile/blog/1234AF264B66A4EE20?download SHOWSTATUSBAR="1" volume="0" loop="-1"autostart="1" s wmode="transparent" x-x-x-x-allowscriptaccess="sameDomain" allowNetworking="internal" x-x-x-x-allowscriptaccess='sameDomain' allowNetworking='internal'>

2)마오리족연가  
 <embed src=http://www.paragate.org/av/POKAREKAREANA.wma hidden=true loop=true>

3)정지용의 "고향"
<bgsound src="http://www.kimwonjoong.com/son/12 -1.wma">

4)정지용의 향수                    
<EMBED style="WIDTH: 276px; HEIGHT: 44px"src=http://www.lifewater.co.kr/nore/hyangsu.wma width=476 height=44 loop="-1" volume="-0" hidden="true">

5)♬Beautiful Dreamer (꿈길에서) 
<embed width="300" height="45" src="https://t1.daumcdn.net/cfile/tistory/126A6A4A4F077BA236?original" type="audio/mpeg" hidden="true" autostart="true" volume="0" loop="-1" hiddentrue="
" allownetworking="internal" x-x-x-x-allowscriptaccess="sameDomain">

Beautiful Dreamer
<EMBED style="WIDTH: 452px; HEIGHT: 20px" src=http://pds11.egloos.com/pds/200902/17/44/Beautiful_Dreamer_Mandy_Barnett.mp3 width=452 height=20 type=application/x-mplayer2 x-x-x-x-x-x-allowscriptaccess="sameDomain" allowNetworking="internal" loop="-1" volume="0" autostart="true" allowNetworking='internal' x-x-x-x-x-x-allowscriptaccess='sameDomain' allowNetworking='internal' x-x-x-x-x-x-allowscriptaccess='sameDomain'>

6)2010 월드컵 응원가
<EMBED style="FILTER: xray(); WIDTH: 300px; HEIGHT: 25px" src=https://t1.daumcdn.net/planet/fs15/12_10_14_22_7IyUE_13809364_11_1157.ASX?original&filename=1157.ASX width=400 height=45 type=application/x-mplayer2 showtracker="1" volume="0" playcount="1" autostart="true" enablecontextmenu="false" loop="-1">

7)그네
<EMBED hidden=true style="FILTER: alpha(opacity=100, style=2, finishopacity=50) gray" src=https://t1.daumcdn.net/cafefile/pds73/12_cafe_2008_05_17_11_44_482e469bb9e66&token=20080517&filename=06.wma width=150 height=45 type=application/download loop="-1" ?hidden='true"volume="0"' autostart="true" x-x-x-x-allowscriptaccess='sameDomain' allowNetworking='internal' x-x-x-x-allowscriptaccess='sameDomain' allowNetworking='internal'>

8)산타루치아
<EMBED src=http://pds.egloos.com/pds/1/200509/07/48/Romance%20in%20venice.asx width=300 height=51 type=video/x-ms-asf invokeURLs="false" x-x-x-x-allowscriptaccess="never" volume="0" loop="-1" showstatusbar="1" autostart="true" hidden=true wmode="transparent" allowNetworking="internal" x-x-x-x-allowscriptaccess='sameDomain' allowNetworking='internal'>

9)비목
<EMBED src=https://t1.daumcdn.net/cfile/blog/1816DF374CDCEE115C?original width=580 height=750 type=application/x-shockwave-flash wmode="transparent" x-x-x-x-allowscriptaccess='sameDomain' allowNetworking='internal'> 

10)뻐꾹 왈츠/요나손
<EMBED style="FILTER: gray(); LEFT: 362px; WIDTH: 300px; TOP: 48px; HEIGHT: 69px" src=http://club.catholic.or.kr/capsule/blog/download.asp?userid=769269&seq=5&id=145975&strmember=u90120&filenm=Cuckoo+Waltz.asf width=300 height=70 type=audio/mpeg enablecontextmenu="0" showstatusbar="1" LOOP="TRUE" volume="0" x-x-x-x-allowscriptaccess="never" autostart="true" x-x-x-x-allowscriptaccess='sameDomain' allowNetworking='internal'>

11)오 수잔나
<EMBED height=45 type=audio/mpeg width=300 src=http://mini-files.thinkpool.com/files/mini/2005/07/07/04-0823-04.wma wmode="transparent" x-x-x-x-allowscriptaccess="sameDomain" allowNetworking="internal" volume="0" autostart="true" loop="-1" enablecontextmenu="false" showstatusbar="1" allowNetworking='internal' x-x-x-x-allowscriptaccess='sameDomain'>

12)엄마야 누나야 강변 살자
<EMBED style="FILTER: gray()" height=69 type=audio/mpeg width=300 src=https://t1.daumcdn.net/planet/fs12/12_2_22_30_5vOAM_13701764_0_0.wma?original&filename=0.wma enablecontextmenu="0" autostart="true" loop="-1" volume="0" showstatusbar="1" allowNetworking="internal" x-x-x-x-allowscriptaccess="sameDomain">

13)한국 환상곡(Korea Fantasy) - 안익태 
<embed hidden=true style="FILTER: xray gray(); LEFT: 362px; WIDTH: 400px; TOP: 48px; HEIGHT: 69px" src=http://www.boyunglee.com/music/Ahn_Iktae/EaktayAnnSymphonicFantasiaKoreaLosAngelesPhilharmonicOrchestraConductedByEaktayAnn.mp3 width=400 height=69 type=audio/mpeg volume="0" loop="TRUE" showstatusbar="1" autostart="true" allowNetworking="internal" x-x-x-x-allowscriptaccess="sameDomain" wmode="transparent" allowNetworking='internal' x-x-x-x-allowscriptaccess='sameDomain'>

14)사랑으로
<embed src=http://www.lifewater.co.kr/nore/69.wma loop=-1 hidden=true allowNetworking='internal' x-x-x-x-allowscriptaccess='sameDomain' wmode="transparent" allowNetworking='internal' x-x-x-x-allowscriptaccess='sameDomain'>

15)당신은 사랑받기 위해 태어난 사람         
<embed src="http://wisjoy.com/wisjoy1/Gospel/Born4Loved.asf" width="0" height="0" volume="0" loop="-1">

16)기다리는 마음
<embed width="370" height="34" src="http://www.choose-happiness.com/inc/../data/arbor_4/기다리는 마음 -엄정행.mp3" type="audio/mpeg" style="width: 370px; height: 34px;" x-x-x-x-allowscriptaccess="sameDomain" allownetworking="internal" loop="true" autostart="true" allowNetworking='internal' x-x-x-x-allowscriptaccess='sameDomain'>

17)아버지 우리아버지
<EMBED style="FILTER: invert; WIDTH: 323px; HEIGHT: 54px" height=54 type=audio/mpeg width=323 src=https://t1.daumcdn.net/planet/fs12/20_14_10_2_7QqsQ_13154120_0_22.asx?original&filename=22.asx wmode="transparent" loop="-1" volume="0" autostart="true" allowNetworking="internal" x-x-x-x-allowscriptaccess="sameDomain" allowNetworking='internal' x-x-x-x-allowscriptaccess='sameDomain'>

18)성불사의밤   이은상 시, 홍난파 곡   바리톤  오  현  명  
<EMBED style="HEIGHT: 47px; WIDTH: 336px" type=audio/mpeg height=47 width=336 src=http://senka36.iptime.org/~lyk36/mukormp3/sungbulsa.mp3 autostart="true" loop="1" volume="0" allownetworking="internal" x-x-x-x-allowscriptaccess="sameDomain">

19)김소월 작시 /  김동진 작곡    진달래꽃
<EMBED style="HEIGHT: 45px; LEFT: 362px; TOP: 48px; WIDTH: 300px" type=audio/mpeg height=45 width=300 src=http://pds26.egloos.com/pds/201705/06/45/..wma autostart="true" x-x-x-x-allowscriptaccess="never" enablecontextmenu="0" showstatusbar="1" loop="TRUE" volume="0">

20)주옥 같은 뉴에이지 모음 20곡
<EMBED style="HEIGHT: 28px; WIDTH: 320px" type=audio/x-ms-wma height=28 width=320 src=https://t1.daumcdn.net/planet/fs12/11_25_29_5_4Ku54_13705939_0_25.asx?original&filename=25.asx autostart="true" playcount="0" volume="0" showstatusbar="0" invokeurls="false" allownetworking="internal" x-x-x-x-allowscriptaccess="sameDomain" allowNetworking="internal" x-x-x-x-allowscriptaccess="sameDomain">

21)beautifulbrowneyes
<embed width="260" height="46" src="http://senka36.iptime.org/~lyk36/mupopsong3/conniefrancis-beautifulbrowneyes.wma" type="audio/x-ms-wma" style="border: 3px ridge white; border-image: none;" volume="0" autostart="true" showstatusbar="-1">

22)사랑하는그대에게 / 유익종
<embed width="200" height="40" src="http://kcinta1.woobi.co.kr/유익종-사랑하는그대에게1.wma" type="audio/x-ms-wma" style="width: 200px; height: 40px;" x-x-x-x-x-x-x-x-allowscriptaccess="sameDomain" x-x-x-x-x-x-x-x-x-allowscriptaccess="sameDomain" loop="-1" autostart="true" volume="0" allownetworking="internal" x-x-x-x-allowscriptaccess="sameDomain" allowNetworking='internal' x-x-x-x-allowscriptaccess='sameDomain'>

23)<pre><b>
이별의 노래 / 박목월 시, 김성태 작곡  
기러기 울어예는 하늘 구만리
바람이 싸늘불어 가을은 깊었네
아아 너도 가고 나도 가야지 
산촌에 눈이 쌓인 어느날 밤에 
촛불을 밝혀두고 홀로 울리라
아아 아아 너도 가고 나도 가야지 </b>
<embed width="150" height="45" src="https://t1.daumcdn.net/cafefile/pds51/3_cafe_2007_12_01_01_50_47503f3f855c9&token=20081010&.mp3" type="audio/mpeg" x-x-x-allowscriptaccess="sameDomain" allownetworking="internal" loop="-1" volume="0" allowNetworking='internal' x-x-x-allowscriptaccess='sameDomain'>

24)홀로 아리랑
<EMBED type=application/x-mplayer2 height=35 width=300 src=https://t1.daumcdn.net/cfile/blog/264AFD4851AC9AF401?download x-x-x-x-allowscriptaccess="sameDomain" allownetworking="internal" enablecontextmenu="0" volume="0" loop="-1" invokeurls="false" x-x-x-x-x-allowscriptaccess="sameDomain" autostart="true">

음악 명령어의 속성             태그연습장
1. autostart="true"  문서가 뜨는 동시에 음악이 연주되라는 명령어
2. hidden="true" 는 뮤직박스를 숨기라는 명령어 
3. hidden="false" 는 뮤직박스를 나타내라는 명령어
   (사실 이명령어는 뮤직박스를 숨길때만 필요하죠 넣지 안아도 기본적으로 보이도록 되어있읍니다)
4. loop="infinite" 는 음악을 무한히 계속 반복하라는 명령어
   loop="1" 이면 음악이 한곡만 나오고 멈추지요
   loop="2" 면 당연히 두번 연주 되겠죠
   loop="-1" 이렇게 해도 음악을 무한 반복 합니다
5. volume=" 원하는 수" 를 넣으면 음악의 볼륨을 조절할수 있읍니다
   volume="30"정도면 아주 적게 들리고
   volume="70"이면 보통
6. width="수치" 미디어 플레이어의 가로 크기를 지정 합니다.
7. height="수치" 미디어 플레이어의 세로 크기를 지정 합니다.
8. PLUGINSPAGE="URL" : 플러그인이 설치되어 있지 않은 사용자를 위하여 
                       해당 플러그인을 제공하는 사이트의 주소를 적습니다. 
9. <NOEMBED> </NOEMBED>  사용자의 브라우저가 플러그인이 설치되어 있지 않은 경우나 
                         이를 지원하지 못하는 브라우저를 
                         사용하고 있는 경우에 <IMG>의 ALT와 같은 역할을 합니다. 
                         사용 방법은 <NOEMBED> 넣고 싶은 내용 </NOEMBED> 를 <EMBED> 와 </EMBED> 
                         사이에 넣어 주시면 됩니다.
<embed src="http://myhome.hanafos.com/~dimmerm/music/adagio.asf" autostart="false" hidden="false" volume="70" loop="1" 
width=280 height=45 PLUGINSPAGE="HTTP://quicktime.apple.com/qt/sw/sw.html">
<NOEMBED> 음악이 들리시지 않으면 미디어 플레이어를 설치 하세요.</NOEMBED></embed>

링크된 음악 올리기

미디어 플레이어를 사용하지 않고 음악을 링크만 시켜 놓은 것도 있어요. 아래 amor 음악 듣기를 클릭해보세요. 위의 음악을 종료한 후에 클릭하세요!!! 미디어 플레이어가 나오면서 음악이 재생됩니다. 여기서 파일의 등록 정보를 클릭 하세요.

◆총연습 태그연습장

<center>
<marquee bgcolor="pink" direction="left" behavior="alternate" scrollamount="4"><font color="blue" size="5"><b>"명시 감상" ♣ 고 향 ♣ -정 지 용-</b></font></marquee>
<center>
<marquee width="716" height="950" bgcolor="yellow" direction="up" behavior="slide" scrollamount="5">
<center><ul><pre><font color="blue" face="휴먼옛체" size="4"><b>
고향에 고향에 돌아와도
그리던 고향은 아니러뇨.<br>
산꿩이 알을 품고
뻐꾹이 제철에 울건만,<br>
마음은 제고향 지니지 않고
머언 항구로 떠도는 구름.<br>
오늘도 메끝에 홀로 오르니
흰점 꽃이 인정스레 웃고,<br>
어린 시절에 불던 풀피리 소리 아니 나고
메마른 입술이 쓰디쓰다.<br>
고향에 고향에 돌아와도
그리던 하늘만이 높푸르구나</b><br><br>
<img src="https://t1.daumcdn.net/cfile/blog/261FE546550222C50D" class="txc-image" width="400" style="clear: none; float: none;" border="0" vspace="1" hspace="1" data-filename="20150203_073930_-1865300424.gif" exif="{}" actualwidth="400" />
</font></pre></ul></center></marquee><bgsound src="http://www.kimwonjoong.com/son/12 -1.wma" volume="0" balance="0"></center></center></td></tr></tbody></table>
<div></div></td></tr></tbody></table><p><br><br><a href="http://mail2.daum.net/hanmail/mail/MailComposeFrame.daum?TO=2454422@hanmail.net" target="emptyframe"></a></p>

★ 성탄절 카드-1 태그 연습장

<CENTER><TABLE style="BORDER-RIGHT: red 5px solid; BORDER-TOP: red 5px solid; FILTER: progid:DXImageTransform.Microsoft.Shadow
(color:#cccccc,direction:145,strength:15); BORDER-LEFT: red 5px solid; WIDTH: 602px; BORDER-BOTTOM: red 5px solid; HEIGHT: 587px"
height=587 cellSpacing=3 cellPadding=15 width=0 align=center><TBODY><TR><TD>
<TABLE style="BORDER-RIGHT: red 1px solid; BORDER-TOP: red 1px solid; BORDER-LEFT: red 1px solid; BORDER-BOTTOM: red 1px solid" cellSpacing=0 cellPadding=10 bgColor=#ffffff><TBODY><TR><TD><embed src="http://itb35.zc.bz/swish/x-9.swf" width="570" height="410"><BR>
<applet‎‎ code="RainbowText.class" width=100% height=40 codebase=http://ektha307.com.ne.kr/JS/>
    <param name=text value="하늘에는 영광 땅에는 평화 가정에는 행복이 넘치기를...샬롬">
    <param name=bgcolor value="#AAEBAA">
    <param name=fontname value="TimesRoman">
    <param name=fontstyle value="-I">
    <param name=fontsize value="20">
    <param name=sleeptime value="100"></applet‎‎>
<br><center><font size=5 color=red face=서울소나무M><b>즐거운 성탄절 보내세요<br><font size=5 color=green face=서울소나무M> 0 0 0 인사드립니다</b><br>
<EMBED hidden=true src=https://t1.daumcdn.net/cafefile/pds26/25_z_g_lnYQ_GNGo_000_00_00000042 autostart="true" loop="true" volume=0>

★ 성탄절 카드-2 태그 연습장

<P><TABLE style="BACKGROUND: none transparent scroll repeat 0% 0%" border=0 cellSpacing=0 cellPadding=0 width="100%" align=center>
<TBODY><TR><TD style="PADDING-BOTTOM: 8pt; PADDING-LEFT: 8pt; PADDING-RIGHT: 8pt; PADDING-TOP: 8pt" vAlign=top>
<DIV style="LINE-HEIGHT: 1.5; BACKGROUND-COLOR: transparent; FONT-FAMILY: 돋움; COLOR: #333333; FONT-SIZE: 10pt; browser: msie" class=tx-hanmail-content-wrapper>
<P><SPAN style="FONT-SIZE: 12pt"><FONT color=#ff00dd><SPAN style="FONT-SIZE: 18pt"><STRONG> </STRONG></SPAN></FONT></SPAN><SPAN style="FONT-SIZE: 11pt"><STRONG> </STRONG></SPAN></P><DIV class=mail_con>
<TABLE style="BORDER-BOTTOM-STYLE: dashed; BORDER-LEFT-STYLE: dashed; BORDER-TOP-STYLE: dashed; BORDER-RIGHT-STYLE: dashed" border=3 cellSpacing=0 borderColor=#3366cc cellPadding=0 width=600 height=400><TBODY><TR><TD>
<TABLE style="BORDER-BOTTOM-STYLE: dotted; BORDER-LEFT-STYLE: dotted; BORDER-TOP-STYLE: dotted; BORDER-RIGHT-STYLE: dotted" border=2 cellSpacing=0 borderColor=#330099 cellPadding=1 width=600><TBODY><TR><TD><TABLE border=0 cellSpacing=13 cellPadding=0 width=500 background=http://daechoo.info/imgte/g48.jpg align=center>
<TBODY><TR><TD>
<TABLE style="BORDER-BOTTOM: #eab708 3px ridge; BORDER-LEFT: #eab708 3px ridge; BORDER-TOP: #eab708 3px ridge; BORDER-RIGHT: #eab708 3px ridge" cellSpacing=2 background=http://user.chollian.net/~kjleel/background/board/border46.jpg>
<TBODY><TR><TD><TABLE border=3 borderColorLight=yellow borderColorDark=yellow width=450 align=center>
<TBODY><TR><TD width=450><P align=center><TABLE border=1 cellPadding=0 width=450 bgColor=blue height=26>
<TBODY><TR><TD><SPAN style="FONT-SIZE: 11pt"><EMBED height=450 type=application/x-shockwave-flash width=600 src=http://itb35.zc.bz/swish/x-9.swf allowNetworking='internal' x-x-x-allowscriptaccess='sameDomain'></SPAN><SPAN style="FONT-SIZE: 11pt"> </SPAN>
<TR><TD background=https://t1.daumcdn.net/cafefile/pds7/20_t_e_15NUG_Wyq_000_00_00000029 style="FILTER: glow(color=blue,strength:5); WIDTH: 100%; HEIGHT: 20px; COLOR: #000000; FONT-SIZE: 10.5pt">
<CENTER><PRE><SPAN style="FONT-SIZE: 11pt"> </SPAN><FONT style="FONT-SIZE: 14pt" color=white>
<B><BIG>♣♡ Merry Christmas ♡♣</BIG>
하늘에는 영광 땅에는 평화가
온누리에 가득하고
성탄의 기쁨이 가슴가슴마다
차고 넘치게 하소서

0 0 0 인사드립니다
<TR><TD><SPAN style="FONT-SIZE: 11pt"><EMBED height=420 type=application/x-shockwave-flash width=600 src=https://t1.daumcdn.net/cafefile/pds111/7_cafe_2008_12_04_16_29_493786d11c71a&token=20081204&.swf wmode="transparent" allowNetworking='internal' x-x-x-allowscriptaccess='sameDomain'></SPAN><SPAN style="FONT-SIZE: 11pt"> </SPAN><SPAN style="FONT-SIZE: 11pt"></EMBED></SPAN></TD></TR></TBODY></TABLE></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<SPAN style="FONT-SIZE: 11pt">
<CENTER></CENTER></SPAN><SPAN style="FONT-SIZE: 11pt"><EMBED style="FILTER: gray()"

height=27 type=audio/mpeg hidden=true width=330 src=http://wsm.ezsitedesigner.com/share/scrapbook/27/274741/

Celine_Dion_-_Oh_Holy_Night_Christmas_.mp3?unique_id=1132529338203 autostart="true" loop="-1" volume="0"

allowNetworking='internal' x-x-x-allowscriptaccess='sameDomain'>

★ 성탄절 카드-2-1

<P><TABLE style="BACKGROUND: none transparent scroll repeat 0% 0%" cellSpacing=0 cellPadding=0 width="100%" align=center border=0> <TBODY><TR>

<TBODY> <TR> <TD width=450> <P align=center> <TABLE height=26 cellPadding=0 width=450 bgColor=blue border=1> <TBODY> <TR>

<TD><SPAN style="FONT-SIZE: 11pt"><EMBED type=application/x-shockwave-flash height=450 width=600 src=http://itb35.zc.bz/swish/x-9.swf x-x-x-allowscriptaccess="sameDomain" allowNetworking="internal"></SPAN><SPAN style="FONT-SIZE: 11pt"> </SPAN> <TR> <TD background=https://t1.daumcdn.net/cafefile/pds7/20_t_e_15NUG_Wyq_000_00_00000029 style="FONT-SIZE: 10.5pt; HEIGHT: 20px; WIDTH: 100%; COLOR: #000000; FILTER: glow(color=blue,strength:5)"> <CENTER><PRE><SPAN style="FONT-SIZE: 11pt"> </SPAN><FONT style="FONT-SIZE: 14pt" color=white> <B><BIG>♣♡ Merry Christmas ♡♣</BIG>

하늘에는 영광

땅에는 평화가 온누리에 가득하고

성탄의 기쁨이 가슴가슴마다 차고 넘치게 하소서

0 0 0 인사드립니다</B></FONT></PRE><PRE> </PRE><PRE><FONT style="FONT-SIZE: 14pt" color=white><B> </B></FONT></PRE></CENTER></SPAN> <TR> <TD><SPAN style="FONT-SIZE: 11pt"><EMBED type=application/x-shockwave-flash height=420 width=600 src=https://t1.daumcdn.net/cafefile/pds111/7_cafe_2008_12_04_16_29_493786d11c71a&token=20081204&.swf x-x-x-allowscriptaccess="sameDomain" allowNetworking="internal" wmode="transparent"></SPAN><SPAN style="FONT-SIZE: 11pt"> </SPAN><SPAN style="FONT-SIZE: 11pt"></EMBED></SPAN></TD></TR></TBODY></TABLE></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><SPAN style="FONT-SIZE: 11pt">

<CENTER></CENTER></SPAN><SPAN style="FONT-SIZE: 11pt">

<iframe width="640" height="360" src="https://www.youtube.com/embed/1Rh1xzpKc-o

" frameborder="0" allowfullscreen></iframe>

※근하신년 카드 1 태그 연습장

<center><img src=https://t1.daumcdn.net/cfile/blog/260765375488F0C506?original>
<TABLE title="하얀미소가 머무는 곳" borderColor=#cd0000 cellSpacing=0 cellPadding=30 align=center bgColor=black border=2>
<TBODY><TR><TD><STRONG><FONT face=바탕></FONT></STRONG><BR><FONT color=#befa5a>
<EMBED src="http://moris3.byus.net/flash/f06new year.swf" width=600 height=400 type=application/x-shockwave-flash embed><br><br>
<center><FONT face=휴먼옛체 size=5 color=white>
<b>戊戌年 새해 아침에 <br>0 0 0 세배드립니다 </b>

※근하신년 카드 2 태그 연습장

<center><img src=https://t1.daumcdn.net/cfile/blog/260765375488F0C506?original>
<TABLE title="하얀미소가 머무는 곳" borderColor=#cd0000 cellSpacing=0 cellPadding=30 align=center bgColor=black border=2>
<TBODY><TR><TD><CENTER><STRONG><FONT face=바탕></FONT></STRONG><BR><FONT color=#befa5a>
<EMBED src="http://moris3.byus.net/flash/f06new year.swf" width=600 height=400 type=application/x-shockwave-flash embed><br>
<TR><TD><br>
<center><FONT face=Arial size=3 color=white>
<b> 戊戌年 새해에도 건강하시고 <br>댁내 두루두루 평안하시기를<br>
간절히 기원하면서<br><br> o o o 세배드립니다 </b>

'교육자료방' 카테고리의 다른 글

배 (0)	2018.05.21
고향 (0)	2017.12.26
[스크랩] Re:긴급ㅡ플러그인 경로 찾아가기 (0)	2017.12.06
참고사항 (0)	2017.11.14
음악 올리는법 (0)	2017.11.13

현재글 HTML교육자료

지니의 사랑방

Today :
Yesterday :

지니의 사랑방