HTML 5 버전기준 멀티미디어글 태그배열 (종합)

[이정권]

                           HTML 5 버전기준 멀티미디어글 태그배열 

     지금까지 테이블태그, 글자태그, 이미지영상 태그, 음원태그, Marquee 태그, Strength 태그 등

     각부문별 태그를 종합해서 정리합니다.

     아래 배열태그를 그대로 복사해서 해당 명령어와 속성태그 만을 바꾸아주면 원하는 멀티미어글을

     작성 할 수 있습니다.

     마우스로 드래그 복사해서 사용하시면 됩니다.

     어떠한 멀티미디어글 표준태그는 없습니다.

     멀티미디어글의 형태에따라 여러가지로 배열이 됩니다.

     HTML 관련 명령어인 프로그래밍언어로 작성을 해 나가는 것입니다.

     때문에 글작성 할때마다 배열태그를 작성을 하게됨으로 번거롭고 시간도 많이 걸리게 됩니다.

     그래서 기본 골격의 태그배열을 만들어 복사해서 사용하는 것이지요.

     아래 기본배열태그를 소개하오니 많은 참고 바랍니다. 

                                                   [기본 배열태그]

<table style="border: 7px ridge blueviolet;" border=1 cellSpacing=1  borderColor=black  cellPadding=0  width=720 

height=450  bgColor=white background= >
<TR><TD>
<table style="border: 5px ridge lightblue;" border=0 cellSpacing=0  borderColor=black   cellPadding=0  width=720  

 height=450  bgColor=white background= >
<TR><TD>
<table style="border: 5px ridge #7093db;" border=0  cellSpacing=0   borderColor=black  cellPadding=0  width=720  

height=450  bgColor=white  background= >

<TR><TD>
<Img style="filter:alpha(opacity=100,style=4, finishopacity=0);" align=right  src="http://cfile202.uf.daum.net/image/2604043959190D0132D48D" (jpg 또는 gif) width=720 height=480><EMBED align=right src=http://cfile259.uf.daum.net/original/1857BE114B2737471398A8 (swf) width=720 height=500 wmode="transparent" quality="high">

<TR><TD>
<DIV style="Z-INDEX ; POSITION: absolute; TOP: 150px; LEFT: 300px">
<Img style="filter:alpha(opacity=100,style=2, finishopacity=0);" align=right 

src="http://cfile224.uf.daum.net/image/21775246591281B71A48A5" (태극기) width=450 height=250>

<MBED type=application/x-shockwave-flash align=right  

src=http://cfile259.uf.daum.net/original/1857BE114B2737471398A8 (swf) width=720 height=520>
</TABLE>

<TR><TD>
<DIV style="Z-INDEX ; POSITION: absolute; TOP: 50px; LEFT: 200px">
<DIV style="FILTER: glow(color=black, strength=3); FONT-SIZE: 9pt">
<PRE><UL>
<FONT color=white face=궁서체><SPAN style="LINE-HEIGHT: 140%; FONT-SIZE: 25pt">
호국 보훈의 달  6월..!!
<FONT color=white face=궁서체><SPAN style="LINE-HEIGHT: 140%; FONT-SIZE: 18pt">
        호국영령의 숭고한
               희생정신을 기립니다.

<TR><TD>
<DIV style="Z-INDEX ; POSITION: absolute; TOP: 20px; LEFT: 50px">
<DIV style="FILTER: glow(color=black, strength=3);">
<MARQUEE direction=up height=480 width=700 scrollAmount=1>
<PRE><UL>
<FONT color=white face=verdana><DIV style="LINE-HEIGHT: 140%; FONT-SIZE: 13pt"><B>
님계신 전선 (금사향/1952년)
<FONT color=white face=돋움체><DIV style="LINE-HEIGHT: 140%; FONT-SIZE: 13pt"></B>
태극기 흔들며 님이 떠난<BR><BR>
새벽 정거장 기적이 울었소<BR><BR>
만세 소리 하늘 높이 들려 오던 날<BR><BR>
지금은 어느 전선 어느 곳에서<BR><BR>
지금은 어느 전선 어느 곳에서<BR><BR>
용감하게 싸우시나<BR><BR>
님이여 건강하소서<BR><BR>
<BR><BR><BR><BR><BR>

<TR><TD>
<PRE><UL>
<FONT color=darkblue face=궁서체><SPAN style="LINE-HEIGHT: 150%; FONT-SIZE: 18pt"><B>
(궁서체)금사향 노래비 제막식  
<FONT color=darkblue face=바탕체><DIV style="LINE-HEIGHT: 140%; FONT-SIZE: 10pt"><B>
(바탕체)
2014년 6월 24일 서울시 은평구 역촌역 인근 은평평화공원 에서
금사향 선생이 부른노래(님계신 전선) 노래비 제막식을 하였습니다.
<FONT color=darkblue face=바탕체><DIV style="LINE-HEIGHT: 140%; FONT-SIZE: 12pt"><B>
<SPAN style="FONT-FAMILY: YDmydarling"><B>(고딕체)
금사향은 은평사랑가수회 회원으로 6·25 전쟁 당시 위문 공연하러 다닌
공훈을 인정받아 6·25 참전 국가유공자로 선정 됐습니다.
<FONT color=darkblue face=바탕체><DIV style="LINE-HEIGHT: 100%; FONT-SIZE: 13pt"><B>
<SPAN style="FONT-FAMILY: SDWebBabyLotion"><B>
(필기체)
또 이 공로로 2012년 대한민국 대중문화예술상 은관문화훈장을 받았습니다.
호국의 달 6월을 맞이하여 호국영령의 숭고한 희생정신을 기립니다.
<FONT color=darkblue face=돋음체><DIV style="LINE-HEIGHT: 140%; FONT-SIZE: 15pt"><B>
돋움체=굴림체=verdana

</TABLE>
</TABLE>
</TABLE>

<embed src=http://pds6.cafe.daum.net/download.php?grpid=14M9j&amp;fldid=8Z2r&amp;dataid

=286&amp;fileid=1&amp;regdt=20061127141739&amp;disk=10&amp;grpcode=vkc2004&amp;dncnt=N&amp;.mp3
autostart=true hidden=true loop=true volume=0  width=0  height=0

[해설]

   상기 기본배열태그는 테이블태그, 이미지영상태그, 글자태그, 음원태그, Marquee태그, Strength 태그 등

   멀티미디어글 작성에 필요한 각부문의 태그를 모두 배열한 태그 입니다.

   이 태그를 기본으로해서 여러가지 형태의 멀티미디어글을 작성할 수 있습니다.

  1. 핑크색 부분

      테이블태그 부분으로 테이블선으로 영역을 지정할 수 있으며 bgcolor 와 background 기능을 수행 합니다.

      특히 bgcolor 와 background 을 잘 활용하면 멀티미디어글 형태를 다양하게 꾸밀 수 있습니다. 

  2. 그린색 부분

      헤드영상 부분으로 이미지영상, 글자 등 필요한 모든자료를 개별 또는 복합적으로 나타낼수 있는 부분입니다.

      주로 이미지영상 부분을 편집 합니다.

  3. 청색 부분

      body 부분으로 헤드부분과 마찬가지로 모든자료를 삽입하는데 주로 글의 세부내용 등을 삽입합니다.

  4. 노란색 부분

      배경음악 등 음원의 자료를 삽입하는 부분입니다.

  5. 마무리

      멀티미디어글 작성에 있어서 어떠한 태그배열표준이나 기준은 없습니다.

      테이블태그는 편리적인 측면에서 만들어놓은 것이지 절대적인 기준은 아닙니다.

      얼마든지 다른 배열기법으로 해도 됩니다.

      단지 멀티미디어글을 충족시켜주어야 하겠지요.  

      많은 참고 바라오며 끝으로 한말씀 간단히 드리고 마무리 하고져 합니다.

  HTML 웹 프로그램 체계는 1990년에 개발하여 인터넷 기술과 인터넷 문화의 근간을 이루고있는 시스템입니다.

  이 시스템은 현재는 물론이고 미래의 체계로 계속 발전할 것으로 생각이 됩니다.

  현재 W3C (World Wide Web Consortium) 에서 표준과 개발을 관리하고 있습니다.

  W3C 에서는 기본적인 웹 기술은 상호간에 호환성을 가지고 어떠한 소프트웨어나 하드웨어 에서도 접근할
  수 있어야 한다.

  라고 말하고 있습니다.

  그런데 현재 HTML 의 웹 브라우저를 보면 제대로 지원이 안되는 부분이 많습니다.

  즉. 컴퓨터 기기별, 운영 OS 별 HTML 웹 프로그램을 충분히 지원을 하지 못하고 있다는 예깁니다.

  HTML  지원현황을 보면 다음과 같습니다.

  윈도우 7 의 Explorer 8 버전 ---> 모든 명령어가 정상적으로 지원이됨.

  윈도우 7 의 Explorer 10 버전 ---> Filter 태그의  Style, Opacity 등의 명령어가 적용이 안됨.

  윈도우 10 의 Explorer 11 버전 ---> Filter 태그의 Style , Opacity 등의 명령어가 적용이 안됨.

  스마트폰의 안드로이드 (크롬) ---> Filter 태그의  Style, Opacity 와 swf 확장자의 지원이 안됨.

  상기내용 외에도 하위 속성태그 에서도 일부 적용이 안되는 부분도 있습니다.
 

  이상 HTML 관련해서 멀티미디어글 작성 기본 배열태그 와 운영체제의 웹 브라우저의 현황을 모두 마무리 합니다.

  상기 배열태그는  HTML 관련 디지털 프로그래밍 언어로 불필요한 태그는 모두 빼고 필수적인 태그로만 간결하게

  배열을한 테이블태그 이다.

  라고 말씀 드리고 싶습니다.   

  앞으로 이 배열태그를 기본으로 해서 멀티글을 작성하게 될겁니다.

  회원님 여러분 ...!!

  많은 참고와 함께 카페에 좋은글을 많이 올려주시면 좋겠습니다.

  앞으로 명령태그 및 웹 브라우저의 변경사항이 있으면 추가 자료를 올려드리도록 하겠습니다.

  많은 참고 바랍니다.

                                                               - 운영자 올림 -