table-------------
논리적으로 컬럼을 그룹핑
1 <colgroup>
1개이상의 <col> 요소를 포함
<colgroup class="aa"  span="2" />

<colgroup >
   <col class="a" />
   <col class="b" />
</colgroup>

2. <col /> 요소
1개 컬럼을 포함


<td colspan="">
<td rowspan="">

포함된 콘텐츠(embeded contents)============

1. img

2. iframe
다른 html 문서를 포함

src="포함할  html문서의경로"


3. embed
-외부어플리케이션(html 이미지가 아닌)을 포함
-HTML5에서만 유효한 태그
-HTML4, xhtml에서 사용되었지만 표준x
-대체할 내용을 입력할수없어요
<embed src="경로" />

src="포함시킬미디어경로"  필수속성
type="유효한 MIME TYPE"
width="너비"
height="높이"

4. object
-외부어플리케이션을 포함

<obejct data="경로">대체할 내용</object>
data="포함시킬미디어경로"
type="유효한 MIME TYPE"
width="너비"
height="높이"

<object data="경로1">
 <param  name="" value="" />
  <!-- 첫번째 data 보여주지 못할 경우 대체 미디어-->
   <object data="경로2">
      <param  name="" value="" />
          <!-- 두번번째 data 보여주지 못할 경우 대체 미디어-->
        <object data="경로3" >
                  <param  name="" value="" />
               <p>우리는 회사는 좋은 회사입니다.</p>
       </object>
   </object>
</object>

 

5. param
-object요소의 플러그인에 전달할 매개변수값을 정의

<obejct data="경로">
  <param name="매개변수명">
  <param value="매개변수값">
  대체할 내용
</object>

name="매개변수이름"
value="매개변수의 값"

6. video
-동영상을 재생
-html5 추가

<video></video>

src  ="경로"
poster ="경로"
preload  ="none | metadata |auto"
autoplay
loop
controls
width ="너비값"
height ="높이값"


---비디오포맷---
Format MIME-type 브라우저 지원
MP4 video/mp4 ie,c,s
WebM video/webm c,f,o
Ogg video/ogg c,f,o


7. audio
-소리를 재생

<audio></audio>

src  ="경로"
preload  ="none | metadata |auto"
autoplay
loop
controls


----오디오 포맷----
Format MIME-type 브라우저지원 
MP3 audio/mpeg ie,c,s
Ogg audio/ogg c,f,o
Wav audio/wav c,f,s,o


8. source
audio, video  요소에서 사용할 대체 미디어 정보 제공

src="경로"
type="유효한 MIME TYPE"

9. 이미지 맵
한개의 이미지에 여러개의 하이퍼링크를 연결할 경우
※imagemapic 프로그램 사용

---1개이미지에 1개의 하이퍼링크
<a href=""><img src="" alt=""></a>

--한개의 이미지에 여러개의 하이퍼링크 연결
<img src="" alt="" usemap="#이미지맵" />
<map name="이미지맵">
  <area  shape="" coords=""  href="" alt="">
  <area  shape="" coords=""  href="" alt="">
</map>

 

9.1 이미지요소에  usemap 속성 지정
<img src="경로"  usemap="#이미지맵이름" />

9.2 map
이미지맵 정보 선언
<map name="이미지맵이름">
 <area  href="" shape="" coords="" alt="" >
</map>


9.3 area
이미지맵상의 영역의 정보

<area  href="" shape="" coords="" alt="" >

href="참조주소"
shape ="circle | poly | rect"
  circle:원모양
  poly:다각형
  rect:사각형
coords="영역의 좌표정보"
alt="대체텍스트"

 

10 유투브의 영상 넣기
<iframe width="560" height="315" src="//www.youtube.com/embed/pEm_CB1ku3I" frameborder="0" allowfullscreen></iframe>

<object width="560" height="315"><param name="movie" value="//www.youtube.com/v/pEm_CB1ku3I?version=3&amp;hl=ko_KR"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/pEm_CB1ku3I?version=3&amp;hl=ko_KR" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</iframe>

'웹퍼블리셔 > HTML' 카테고리의 다른 글

html table 외 등등  (0) 2014.11.18
태그 형식 및 목록 그룹핑  (0) 2014.11.12
html 구조  (0) 2014.11.12
html_css 참고사이트  (0) 2014.11.12
블로그 이미지

해피미르86

댓글을 달아 주세요

태그형식

<시작태그>내용</종료태그>

단 빈요소(empty element)

<태그>  ->html, <태그 />->xhtml


요소 그룹핑

-contents가 포함하는 내용의 성격

-배경

-테두리

-여백

-정렬


논리적인 그룹핑 요소

div ->  block level

span  ->  inline level


목록 요소

1. 순서가 있는 목록  ol

Ordered List

block level

자식 요소로 li를 포함 List Item


2. 순서가 없는 목록 ul

Unordered  List

block level

자식 요소로 li를 포함 List Item


3. 목록 항목  list item

ul, ol 자식요소

block level


4. 정의 목록 dl

definition list

용어(term)에 대한 정의

<dl>  </dl>

자식 <dt> <dd>

5. 용어 정의 dt

definitioin terms


6. 용어 설명 dd

definition description


예)

좋아하는 한식

.김치찌게

.된장찌게

.삼겹살


좋아하는 한식

1 김치찌게

2된장찌게

3 삼겹살

'웹퍼블리셔 > HTML' 카테고리의 다른 글

html table 외 등등  (0) 2014.11.18
태그 형식 및 목록 그룹핑  (0) 2014.11.12
html 구조  (0) 2014.11.12
html_css 참고사이트  (0) 2014.11.12
블로그 이미지

해피미르86

댓글을 달아 주세요

html 구조

웹퍼블리셔/HTML 2014. 11. 12. 14:55

doctype============

-xhtml  strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


-xhtml  transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


-html4 strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


-html4 transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


-html5

<!doctype html>



html의 구조


1. head

문서의 정보 요소


1.1 <meta>

-empty element


-문자 문자설정

html5 <meta charset="utf-8" />

xhtml html4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />


-문서의 정보

<meta name="keywords" content= " 키워드,키워드,키워드,키워드" />

<meta name="subject" content="문서 제목 정보" />

<meta name="description" content="요약 설명 내용" />

<meta name="author" content="작성자 정보" />

<meta name="robots" content="index,follow" />

<meta name="copyright" content="저작권 정보" />


-IE 최상위버전을 강제적으로 설정

<meta http-equiv="X-UA-Compatible" content="IE=edge" />


1.2 title 문서의 제목

<title>내용</title>


2. body 영역

브라우저 표시 요소


2.1 그룹핑, 섹션닝

2.1.1 div 논리적 영역

2.1.2 html5에 추가된 요소

section, article, nav, aside

header,footer



'웹퍼블리셔 > HTML' 카테고리의 다른 글

html table 외 등등  (0) 2014.11.18
태그 형식 및 목록 그룹핑  (0) 2014.11.12
html 구조  (0) 2014.11.12
html_css 참고사이트  (0) 2014.11.12
블로그 이미지

해피미르86

댓글을 달아 주세요