HTML 태그 학습 교재 Part09 참조.

HTML 태그 학습 교재 Part09 참조

0. 시작하기 전에 1) Dreamweaver CS6실행 2) HTML5 형식 빈 파일 생성 3) Code 뷰모드로 설정

1. HTML 태그 교재 Part2-01 교재 Part3-01 교재 Part2-02 교재 Part2-03 교재 Part4/5
관 련 태 그 비 고 HTML 헤더(Head) 지정 태그 HTML 제목(Headings) 지정 태그 HTML 단락(Paragraphs) 지정 태그 HTML 서식(Formatting) 지정 태그 HTML 블록Blocks) 지정 태그 HTML 목록(Lists) 지정 태그 HTML 색(Colors): 색이름(Colornames) HTML 색값(Colorvalues) HTML 이미지(Images) 지정 태그 HTML 링크(Links) 지정 태그 HTML 테이블(Tables) 지정 태그 HTML 폼(Forms) 지정 태그 HTML 스타일시트(CSS) 지정 태그 HTML 배치(Layout) 지정 태그 HTML 프레임(frames) 지정 태그 HTML 엔터티(Entities) HTML5 관련 태그 HTML 자바스크립트(JavaScript) : 수업 범위 외 교재 Part2-01 교재 Part3-01 교재 Part2-02 교재 Part2-03 교재 Part4/5 교재 Part3 교재 Part6

2. HTML 문서 구조 (교재 pp. 320) 기본구조 1) 헤더부 2) 바디부
<head> ~ </head> 내에 정의 2) 바디부 <body> ~ </body> 내에 정의 <!DOCTYPE html> <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> ㄴㅇㄴㅇㄴㅇ </BODY> </HTML>

2. HTML 헤더부 태그 관련 태그 태그 설 명 <head> 현 문서에 대한 정보 정의 <title>
설 명 <head> 현 문서에 대한 정보 정의 <title> 현 웹 문서에 대한 제목 표시줄 내용 정의 <base> 현 웹 문서 내 모든 링크에 대한 기본 주소 또는 기본 타겟 정의 <link> 현 웹 문서와 외부 관련 파일과의 관계 정의 <meta> 현 HTML 문서의 메타데이터 정의 <script> 클라이언트 측 스크립트 정의 <style> 현 웹 문서의 스타일 정보 정의

1) <title> 태그 문서 제목 표시줄 내용 정의 <!Doctype html> <html>
<head> <meta charset=UTF-8"> <title> 첫번째 웹 문서 </title> </head> <body> 첫번째 HTML 문서의 내용 </body> </html> 실습: title.htm

2) <base> 태그 웹 문서 내 모든 링크에 대한 기본 주소 또는 기본 타겟 정의 실습 : base.htm
<!Doctype html> <html> <head> <meta charset=UTF-8"> <title> 첫번째 웹 문서 </title> <base href=" target="_blank "> </head> <body> 첫번째 웹 문서의 내용...... <p> <img src=" <img src="/kor/images/header/logo.gif"> <p> <a href=" <a href=".">동서울대학교</a> </body> </html> 실습 : base.htm

3) <link> 태그 실습 : link.htm
현 웹 문서와 외부 자원(xxx.css, xxx.js)과 관계 정의(p.p. 357 에서 학습예정) <!Doctype html> <html> <head> <title> 첫번째 웹 문서 </title> <meta charset=UTF-8"> <link rel="stylesheet" type="text/css" href="theme.css"> </head> <body> 문서의 내용......<p> <img src=" <p> <img src="/kor/images/header/logo.gif"> <p> <a href=" <a href=".">동서울대학교</a> </body> </html> 실습 : link.htm

4) <meta> 태그 실습 : meta.htm <!Doctype html>
현 웹에 대한 메타데이터 정의 “description” : 웹 문서 설명 “kewords” : 검색엔진을 위한 키워드 정의 “author” : 페이지 프로그래머 이름 정의 Charset : 문서 인코딩 정의 출력되지 않음 <!Doctype html> <html> <head> <meta name="description" content=“HTML 태그 연습"> <meta name="keywords" content="HTML, CSS, XML, JavaScript"> <meta name="author" content=＂홍 길 동"> <meta charset=UTF-8"> <title> 첫번째 웹 문서 </title> </head> <body> 문서의 내용......<p> </body> </html> 실습 : meta.htm

5) <script> 태그 클라이언트 측 자바스크립트(브라우저에서 실행) 정의 실습 : script.htm
<!Doctype html> <html> <head> <meta charset=UTF-8"> <title> 첫번째 웹 문서 </title> <script> document.write("Hello World!") </script> </head> <body> </body> </html> 실습 : script.htm

6) <style> 태그 현 웹 문서의 스타일(글꼴, 문단, 색상…) 정의(part6/7에서 학습 예정)
<!Doctype html> <html> <head> <meta charset=UTF-8"> <style type="text/css"> h1 {color:red;} p {color:blue; font-family:궁서;} </style> </head> <body> <h1> 제목글 </h1> <p> 단락 내용……… </p> 스타일 적용 없는 글 </body> </html> 실습 : style.htm

2. HTML 제목(Heading) 지정 태그 (교재 pp. 320)
관련 태그 태그 설 명 <h1> ~ <h6> 제목글(heading) 정의 <hr> 수평선 정의 <! > 주석 내용 정의

1) <h1> ~ <h6> 태그
제목 지정 태그 <h1> ~ <h6> 태그로 지정 <h#> 제목글 </h#> 여기서, # 숫자가 작을 수록 크기가 크다 <!Doctype html> <html> <head> <meta charset=UTF-8"> <title> 제목글 태그 연습</title> </head> <body> <h1> 제목글 1 </h1> <h2> 제목글 2 </h2> <h3> 제목글 3 </h3> <h4> 제목글 4 </h4> <h5> 제목글 5 </h5> <h6> 제목글 6 </h6> </body> </html> 실습 : heading.htm

2) <hr> &  태그
1) 수평선(horizontal line) 긋기 수직선 긋기 태그는 없음 2) HTML 주석(comment) : 화면에 표시되지 않음  <!Doctype html> <html> <head> <title> 제목글 연습</title> <meta charset=UTF-8"> </head> <body>  <h1> 제목글 1 </h1> <h2> 제목글 2 </h2> <hr> <h3> 제목글 3 </h3> <h4> 제목글 4 </h4> <h5> 제목글 5 </h5> <h6> 제목글 6 </h6> </body> </html>

3. HTML 단락(Paragraphs) 지정 태그 (교재 pp. 322)
관련 태그 태 그 설 명 <p> 단락(paragraph) 지정 <br> 1개의 개행(line break) 삽입

1) <p> & <br> 태그
1) 단락(paragraph) 지정 <p> ~ </p> 2) 개행(line break) : 줄 바꾸기 <br> 또는 <br /> 실습 : para-1.htm <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8"> <title> 문단 연습 </title> </head> <body> <h1> 제목 : 해외 자원봉사 참가자 모집</h1> <p>2013학년도 해외자원봉사 참가자를 모집하오니 관심 있는 재학생들은 신청하시기 바랍니다.</p> <p>봉사지역 : 필리핀 비자야 지방 Cebu 인근 2개 지역<br> 봉사기간 : ∼ 박 13일</p> </body> </html>

심화 실습 Para-1.htm 을 수정하시오 실습 : para-2.htm

4. HTML 서식(Formatting) 지정 태그 (교재 pp. 322)
1) 텍스트 서식관련 태그 태그 설 명 <b> 진한 글씨(bold text) <em> 강조 글씨(emphasized text)= 이탤릭체 <i> 와 동일 <i> 이탤릭체= <em> <small> 작은 글씨 <strong> 진한 글씨=<b> <ins> 믿줄 긋기(inserted text)= <u> <del> 중간선 글씨(deleted text) <sub> 아래 첨자(subscripted text) <sup> 윗 첨자(superscripted text) 실습 : para-3.htm

2) “컴퓨터 출력” 서식관련 태그 태그 설 명 <code> 컴퓨터 코드 문자 정의 <kbd>
설 명 <code> 컴퓨터 코드 문자 정의 <kbd> 타자기 글꼴 문자 정의 <samp> 컴퓨터 코드 예제 정의 <var> 변수(variable) 정의 <pre> 미리 정해진 서식 문자 실습 : para-4.htm

3) “인용구, 따옴표 및 정의” 관련 태그 태그 설 명 <bdo>
설 명 <bdo> 문자 방향 정의(dir=“rtl” 우측좌측, dir=“ltr” 좌측우측) <blockquote> 다른 소스로 부터 인용된 단락임을 정의들여쓰기 됨 <q> 문장내 단문 인용 “” 부호 표시 <dfn> 용어 제목(definition term) 정의 : 추후 목록(list) 관련 학습 실습 : para-5.htm

예제) 실습: format.htm

5. HTML 블록(Blocks) 지정 태그 (교재 pp. 322)
여러 태그 요소들을 포함하는 그룹핑(grouping/container) 역할 관련 태그 태그 설 명 <div> 웹 문서 내 블록 레벨(block-level) 절(section) 정의, 항상 새로운 줄(new line)로 시작 함 <span> 웹 문서 내 인라인(inline) 절 정의

실습 실습 : blocks.htm <!DOCTYPE HTML> <html> <head>
<meta charset=UTF-8"> <title> 블록 연습 </title> </head> <body> <div style="color:#0000FF"> <h1> 제목 : 해외 자원봉사 참가자 모집</h1> <p>2013학년도 해외자원봉사 참가자를 모집하오니 관심 있는 재학생들은 신청하시기 바랍니다.<p> </div> <p>봉사지역 : <span style="color:red">필리핀 비자야 </span>지방 Cebu 인근 2개 지역<br> 봉사기간 : ∼ 박 13일</p> </body> </html>

6. HTML 목록(List) 지정 태그 (교재 pp. 322)
순서있는 목록(Ordered List) 순서없는 목록(Unordered List) 정의 목록(Definition List) 관련 태그 태그 설 명 <ol> 순서있는 목록(ordered list) 정의 <ul> 순서없는 목록(unordered list) 정의 <li> OL/UL 목록 내 항목(list item) 정의 <dl> 정의 목록(definition list) 지정 <dt> 정의목록 내 항목(item) 지정 <dd> 정의 목록 내 항목에 대한 설명(definition description) 지정

1) OL 태그 순서있는 목록 : 각 항목 앞에 번호가 붙음 번호형식, 시작번호, 번호나열방식 : 속성값으로 지정 가능
A,B,C…, a,b,c…, 1,2,3…, i,ii,iii,iv…, I,II,III, IV,… 관련 속성 속성명 속성값 설 명 reversed 내림차순(9,8,7...)으로 목록 지정, chrome, safari 에서만 지원됨 start number 순서있는 목록의 시작 번호 지정 type 1 A a I i 표시형식 지정

OL/Li 태그 실습 실습 : ol.htm <!DOCTYPE HTML> <html>
<head> <meta charset=UTF-8"> <title> 순서있는 연습 </title> </head> <body> <ol> <li> 커피</li> <li> 홍차</li> <li> 우유</li> </ol> <ol start="50"> <li>커피</li> <li>홍차</li> <li>우유</li> <ol type="i"> </body> </html> 실습 : ol.htm

2) UL 태그 순서없는 목록 : 각 항목 앞에 글머리기호가 붙음 글머리형식: 속성값으로 지정 가능 관련 속성 속성명 속성값
설 명 type disc square circle 표시형식 지정

UL/Li 태그 실습 실습 : ul.htm <!DOCTYPE HTML> <html>
<head> <meta charset=UTF-8"> <title> 순서 없는 목록 연습 </title> </head> <body> <ul type="disc"> <li> 커피</li> <li> 홍차</li> <li> 우유</li> </ul> <ul type="square"> <li>커피</li> <li>홍차</li> <li>우유</li> <ul type="circle"> </body> </html> 실습 : ul.htm

3) DL/DT/DD 태그 정의 목록 : 용어 정의, 또는 항목 표현에 사용 실습 : dl.htm
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8"> <title> 정의 목록 연습 </title> </head> <body> <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> </body> </html> 실습 : dl.htm

** 컴퓨터 수체계 10진수(Decimal) 2진수(Binary) 8진수(Octal) 16진수(Hexadeciaml)
인간사용, 모든 숫자 자리값(digit)이 0~9 로 이루어짐 (123)10 = 1 x x x 100 2진수(Binary) 컴퓨터 내부 모든 데이터 처리에 사용, 모든 숫자 자리값이 0, 1 로 이루어짐 (1011)2 = 1 x x x x 20 = (11)10 8진수(Octal) 2진수 값 간편화, 모든 숫자 자리값이 0~7 로 이루어짐 (1011)2 = (13)8 = 1 x x 80 = (11)10 16진수(Hexadeciaml) 2진수 값 간편화, 모든 숫자 자리값이 0~9, a,b,c,d,e,f 로 이루어짐 (1011)2 = (b)16 = b x 160 = 11 x 160 = (11)10

** 컴퓨터 데이터 저장 단위 bit(binary digit) : 2진수 1자리를 의미 1 B(Byte) = 8 bit
1 KB = 210 byte = 1024 x 8 bit 1 MB = 210 KB = 220 byte 1 GB = 210 MB = 230 byte 1 TB = 210 GB = 240 byte 영문자 1글자 : 8 bit 코드사용 한글 1글자 : 16 bit 코드사용 JPG 파일 1pixel : 24 bit 사용

7. HTML 컬러/컬러명/컬러값 (교재 pp. 326)
HTML Color 값 256x256x256 색 지정 가능 1) 16진수 표현법 사용 i) #RRGGBB(각 R,G,B 는 16진수 00(0) ~ ff(255))로 표현 ii) rgb(0~255, 0~255, 0~255) 2) 영문 컬러 이름 사용 Color 명 iii) Blue, white, black, pink …..

컬러명, 컬러값 활용 1) 태그의 인라인 스타일 속성값으로 사용 2) CSS 에서 사용 : 교재 Part6에서 추후 학습
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8"> <title> 컬러 지정 연습</title> </head> <body> <p style="background-color: #FFFF00"> 컬러 16진수 값을 사용한 컬러집합 </p> <p style="background-color: rgb(255,255,0) "> rgb 값을 사용한 컬러집합 <p style="background-color: yellow"> 컬러 명을 사용한 컬러집합 HTML 에서는 <font color="red">다양한 방법</font>으로 컬러를 지정할 수 있다 </body> </html> 실습 : color.htm

8. HTML 이미지(image) 지정 태그 (교재 pp. 328)
관련 태그 태그 설 명 <img> 이미지(image) 지정 <map> 이미지맵(image-map) 지정 : 교재 part 3(pp. 96)에서 추후 학습 <area> 이미지맵 내부 클릭 가능한 영역 지정: 교재 part 3(pp. 96)에서 추후 학습

<img src=＂url＂ width=＂너비 픽셀＂ height=＂높이 픽셀＂ alt=＂대체 문자＂>
관련 속성 속성명 속성값 설 명 alt text 이미지에 대한 대체 문자 지정 height 픽셀값 이미지 높이 지정 ismap 서버측 이미지맵 지정 src URL 이미지 URL 지정 usemap #mapname 클라이언트측 이미지맵 지정 width pixels 이미지 너비 지정 <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8"> <title> 이미지 지정 연습</title> </head> <body> <img src=" " alt=“동서울대학로고" height="48" width=“160"> </body> </html> 실습 : image.htm

2) 이미지맵 및 하이퍼링크 지정: 교재 part3에서 추후 학습
관련 태그 <img>, <map>, <area> 태그 동시 사용 <map> 태그 속성 <area> 태그 속성 속성명 속성값 설 명 name mapname 필수 속성. 이미지맵 이름 지정 속성명 속성값 설 명 coords coordinates 영역 좌표 지정 href URL 지정된 영역의 타겟 하이퍼링크 shape default rect circle poly 영역 모양 지정 target _blank _parent _self _top framename 타겟 URL 문서를 출력 위치 지정

9. HTML 멀티미디어 웹 문서에 포함되는 멀티미디어 Sound, Music, Video, Animation
파일 포맷이 서로 다름 웹브라우저  대부분 멀티미디어 파일 지원 1) 사운드 파일 포맷 WAV, AIF : 별도 플러그인 설치 없이 재생 가능, 용량 큼 MID : 별도 플러그인 설치 없이 재생 가능, 연주 음악용, 다수 브라우저에 서 지원 MP3 : 압축율 높고 CD 수준 음질, 별도 플러그인 필요 RA, RAM : 스트리밍 재생, 별도 플러그인 필요

HTML Plug-in 2) 비디오 파일 포맷 브라우저 기본 기능 확장을 위한 프로그램 플러그인 프로그램이라 함 예)
WMV : MS window media video 파일 MPEG : MPEG 포맷, 대부분 브라우저 지원 MP4 : 인터넷을 위한 새로운 MPEG 파일 포맷, YouTube에서 사용 FLA : flash 무비 소스 파일, 웹 문서에 직접 삽입 불가/수정 가능 SWF : flash 무비 파일, 웹 문서 삽입 가능 FLV : flash 플레이어로 재생, 오디오/비디오 데이터 포함된 비디오 파일 MOV : 애플 QuickTime 포맷 HTML Plug-in 브라우저 기본 기능 확장을 위한 프로그램 플러그인 프로그램이라 함 예) Adobe Flash Player, Apple QuickTime 웹 문서 내 Plug-in 추가 방법 <object> 태그 또는 <embed> 태그 사용

1) HTML 4.01 멀티미디어 지정 태그 멀티미디어 관련 태그
<embed width=“…” height=“…”src=“멀티미디어 파일명”> : 플 러그인 활용 멀티미디어 파일 삽입 <bgsound src=“파일명” loop=“횟수”> : 배경음악 삽입

1) embed/bgsound 예제 <!DOCTYPE html> <html> <head>
<meta charset=UTF-8"> <title>멀티미디어 삽입</title> </head> <body> <h1>플래시 이미지</h1> <embed height="300" src=" type="application/x-shockwave-flash"> <h2>배경음악</h2> <bgsound src="kalimba.mp3" loop="1"> </body> </html> 실습 : multimedia.htm

2. HTML5 멀티미디어 지정 태그 (교재 pp. 328) 관련 태그(HTML5 only)
현재 지원 가능한 <video> 및 <audio> MIME 타입 비디오 Video/oog Video/mp4 Video/webm 오디오 Audio/oog Audio/mpeg : mp3 파일 태그 설 명 <video> 비디오(video) 또는 영화(movie) 지정 <audio> 사운드 콘텐츠 지정 <source> <video> 및 < audio> 의 미디어 요소에 대한 리소스 지정

1) Video 예제 실습 : video.htm <!DOCTYPE html> <html>
<head> <meta charset=UTF-8"> <title>비디오 삽입</title> </head> <body> <video controls> <source src=" mov_bbb.mp4" type="video/mp4"> <source src=" type="video/ogg"> </ video > </body> </html> 실습 : video.htm

2) Audio 예제 <!DOCTYPE html> <html> <head>
<meta charset=UTF-8"> <title>오디오 삽입</title> </head> <body> <audio controls> <source src=" /horse.ogg" type="audio/ogg"> <source src=" /horse.mp3" type="audio/mpeg"> </audio> </body> </html> 실습 : audio.htm

HTML 태그 학습 교재 Part09 참조.

Similar presentations

Presentation on theme: "HTML 태그 학습 교재 Part09 참조."— Presentation transcript:

Similar presentations

About project

지원

로그인

Auth with social network:

HTML 태그 학습 교재 Part09 참조.

Similar presentations

Presentation on theme: "HTML 태그 학습 교재 Part09 참조."— Presentation transcript:

Similar presentations

About project

지원