2 7 12 DOCTYPE html head title title

  • Slides: 56
Download presentation

예제 2– 7 특수 문자, 기호, 심볼 삽입 12 <!DOCTYPE html> <head> <title>문자, 기호,

예제 2– 7 특수 문자, 기호, 심볼 삽입 12 <!DOCTYPE html> <head> <title>문자, 기호, 심볼 표현</title> </head> <body> ÷ <h 3>기호 넣기</h 3> <hr> 10 ÷ 2 = 5 √ 2 = 1. 414 2   <   3 오늘 " Elvis" 노래를 들었다. </body> </html> 빈칸 3개(  3개) "

<base> 태그 18 웹 페이지들의 기본URL과 페이지가 출력될 윈도우 지정 사용 예 math. html이나

<base> 태그 18 웹 페이지들의 기본URL과 페이지가 출력될 윈도우 지정 사용 예 math. html이나 science. html 웹 페이지가 모두 http: //www. mysite. com/score/에 있는 경우 <a href="http: //www. mysite. com/score/math. html">수학</a> <a href="http: //www. mysite. com/score/science. html">과학</a> 위의 HTML 소스를 <base> 태그를 이용하여 수정 <head> <base href="http: //www. mysite. com/score/"> </head> <a href="math. html">수학</a> <a href="science. html">과학</a> 수정 가능

예제 2 -11 <img> 태그로 이미지 삽입 21 <!DOCTYPE html> <head><title>이미지 삽입</title></head> <body> <h

예제 2 -11 <img> 태그로 이미지 삽입 21 <!DOCTYPE html> <head><title>이미지 삽입</title></head> <body> <h 3>이미지 삽입</h 3> <hr> <p> 엘비스 프레슬리의 사진입니다. </p> 150 x 200 픽셀 크기로 출력 <img src="media/Elvis 1. jpg" width="150" height="200" alt="Elvis"> <img src="media/kitae. jpg" width="80" height="100" alt="황기태사진없음"> <img src="http: //img. naver. net/static/www/u/2013/0731/nmms_224940510. gif" alt=“사진 주소 변경됨" width="100" height="100"> </body> </html> 사진이 없는 경우 alt에 지 정된 텍스트 출력 네이버 사이트 의 주소로 연결 한 이미지

23

23

예제 2– 16 기본 표 만들기 30 <!DOCTYPE html> <head><title>기본 테이블 만들기</title></head> <body> <h

예제 2– 16 기본 표 만들기 30 <!DOCTYPE html> <head><title>기본 테이블 만들기</title></head> <body> <h 3>기본 구조를 가진 표</h 3> <hr> 1픽셀 테두리. 5장의 CSS 3로 표현 <table border="1"> 하는 것이 바람직함 <caption>1학기 성적</caption> <thead> <tr><th>이름</th><th>HTML</th><th>CSS</th></tr> </thead> <tfoot> <tr><th>합</th><th>225</th><th>230</th></tr> </tfoot> <tbody> <tr><td>황기태</td><td>80</td><td>70</td></tr> <tr><td>이재문</td><td>95</td><td>99</td></tr> <tr><td>이병은</td><td>40</td><td>61</td></tr> </tbody> </table> </body> </html>

예제 2 -17 이미지를 가지는 표 만들기 31 <!DOCTYPE html> <head><title>표에 이미지 삽입</title></head> <body>

예제 2 -17 이미지를 가지는 표 만들기 31 <!DOCTYPE html> <head><title>표에 이미지 삽입</title></head> <body> <h 3>표에 이미지 삽입</h 3> <hr> 디폴트 굵기(0)로 하여 테두리 제거. 굵기 조절은 CSS 3로 하는 것이 바람직 <table> <caption>좋아하는 과일</caption> <tbody> <tr> <td><img src="media/apple. jpg"></td> <td><img src="media/banana. jpg"></td> <td><img src="media/mango. jpg"></td> </tr> </tbody> </table> </body> </html>

예제 2– 18 하이퍼링크 만들기 35 <!DOCTYPE html> <html><head><title>링크 만들기</title></head> <body> <h 3>링크 만들기</h

예제 2– 18 하이퍼링크 만들기 35 <!DOCTYPE html> <html><head><title>링크 만들기</title></head> <body> <h 3>링크 만들기</h 3> <hr> 포털 사이트 <ul> <li><a href="http: //www. naver. com">네이버</a></li> <li><a href="http: //www. daum. net">다음</a></li> </ul> 신문 사이트 <ul> <li><a href="http: //www. etnews. com/"> <img src="media/iconetnews. png" alt="전자신문"> </a> </li> <li><a href="http: //www. chosun. com"> <img src="media/iconchosun. png" alt="조선일보"> </a> </li> 현재 사이트의 다른 페 </ul> 이지로 이동하는 링크 <hr> <a href="ex 2 -17. html">예제 2 -17로 이동</a> </body> </html> 링크 클릭

예제 2 -19 링크의 target 속성 활용 36 <!DOCTYPE html> <head><title>링크의 target 속성 활용</title></head>

예제 2 -19 링크의 target 속성 활용 36 <!DOCTYPE html> <head><title>링크의 target 속성 활용</title></head> <body> <h 3>링크의 target 속성 활용</h 3> <hr> <ul> <li><a href="http: //www. w 3. org" target="_blank">W 3 C(새 윈도우, _blank)</a> <li><a href="http: //www. etnews. com" target="_self">전자신문(현재 윈도우, _self)</a> <li><a href="http: //www. naver. com" target="_parent">네이버(부모 윈도우, _parent)</a> <li><a href="http: //www. mk. co. kr" target="_top">매일경제신문(브라우저 윈도우, _top)</a> </ul> </body> </html> 새 탭에서 열기

동일 페이지 내 앵커와 링크 사 례 링크 앵커 38 <a href="#intro">1 Introduction</a> <h

동일 페이지 내 앵커와 링크 사 례 링크 앵커 38 <a href="#intro">1 Introduction</a> <h 3 id="intro">1 Introduction</h 3>

예제 2– 20 앵커로 이동하는 링크 만들기 39 앵커 <!DOCTYPE html> <head><title>링크 만들기</title></head> <body>

예제 2– 20 앵커로 이동하는 링크 만들기 39 앵커 <!DOCTYPE html> <head><title>링크 만들기</title></head> <body> <h 3>Elvis Presley</h 3> <hr> <ul> 링크 <li><a href="#love">Love me tender</a> <li><a href="#can">Can't help falling in love</a> <li><a href="#it">It's now or never</a> </ul> <h 3 id="love">Love me tender</h 3> Love me tender, Love me sweet, Never let me go. You have made my life complete, And I love you so. Love me tender, Love me true, All my dreams fulfilled. For my darling I love you, And I always will. <h 3 id="can">Can't help falling in love</h 3> Love me tender, Love me sweet, Never let me go. You have made my life complete, And I love you so. Love me tender, Love me true, All my dreams fulfilled. For my darling I love you, And I always will. <h 3 id="it">It''s now or never</h 3> It's now or never, Come hold me tight Kiss me my darling, Be mine tonight Tomorrow will be too late, It's now or never. My love won't wait. </body> </html> 앵커 위치로 이동

예제 2 -21 파일 다운로드 링크 만들기 40 <!DOCTYPE html> <head><title>파일 다운로드</title></head> <body> <h

예제 2 -21 파일 다운로드 링크 만들기 40 <!DOCTYPE html> <head><title>파일 다운로드</title></head> <body> <h 3>친구들아! 여기서 다운받아!</h 3> <hr> <ul> <li><a href="media/Elvis. png" download>엘비스 이미지 다운로드</a> <li><a href="media/chapter 9. pdf" download>chapter 9. pdf 다운로드 </a> <li><a href="media/Embraceable. You. mp 3" download>mp 3 다운로드</a> <li><a href="ex 2 -09. html" download> 예제 2 -9 HTML 파일 다운로드</a> <li><a href="media/test. hwp" download>한글 파일 다운로드</a> </ul> </body> </html> 링크 클릭 시 이미지 파일 다운 로드

예제 2 -22 2개의 인라인 프레임을 가진 웹 페이지 42 ex 2 -22. html

예제 2 -22 2개의 인라인 프레임을 가진 웹 페이지 42 ex 2 -22. html <!DOCTYPE html> <head><title>iframe을 가지는 웹 페이지</title> </head> <body> <h 3>2 개의 < iframe> 을 가집니다. </h 3> <hr> <iframe src="iframe 1. html" width="200" height="150"> </iframe> <iframe src="iframe 2. html" width="200" height="100"> </iframe> </body> </html> iframe 1. html iframe 2. html <!DOCTYPE html> <head><title>첫번째 iframe</title></head> <body> <h 4>첫번째 iframe</h 4> </body> </html> <!DOCTYPE html> <head><title>두번째 iframe</title></head> <body> <h 4>두번째 iframe</h 4> </body> </html>

인라인 프레임에 출력할 문서를 srcdoc 속성으 로 만들기 43 <!DOCTYPE html> <head><title>srcdoc 속성 활용</title></head>

인라인 프레임에 출력할 문서를 srcdoc 속성으 로 만들기 43 <!DOCTYPE html> <head><title>srcdoc 속성 활용</title></head> <body> <h 3>srcdoc에 HTML 문서 작성</h 3> <hr> <iframe src="iframe 1. html" width="200" height="80" srcdoc="<html><head></head> <body>hello</body></html>" ></iframe> </body> </html> srcdoc 속성이 있으면 src 속성은 무시됨

예제 2 -23<iframe>으로 2개의 신문 사이트 내장 하기 44 <!DOCTYPE html> <head><title>iframe을 이용한 신문

예제 2 -23<iframe>으로 2개의 신문 사이트 내장 하기 44 <!DOCTYPE html> <head><title>iframe을 이용한 신문 사이트</title></head> <body> <h 3>2 개의 신문 사이트입니다. </h 3> <hr> <iframe src="http: //www. etnews. com" width="300" height="300"></iframe> <iframe src="http: //www. mk. co. kr" width="300" height="300"></iframe> </body> </html> <iframe>

fig 2 -04. html <!DOCTYPE html> <head><title>브라우저 윈도우(top)</title></head> <body> <h 3>2 개의 < iframe>

fig 2 -04. html <!DOCTYPE html> <head><title>브라우저 윈도우(top)</title></head> <body> <h 3>2 개의 < iframe> 윈도우를 가집니다</h 3> <hr> <iframe src="leftframe. html" name= "left" width="100" height="500"></iframe> <iframe src="rightframe. html" name= "right" width="400" height="500"></iframe> </body> </html> 브라우저 rightframe. html <!DOCTYPE html> <head><title>right iframe</title></head> <body> <h 4>right iframe</h 4> <hr> <iframe src="http: //www. etnews. com" name="upper" width="100%" height="200"></iframe> <iframe src="http: //www. mk. co. kr" name="lower" width="100%" height="200"></iframe> </body> </html> 브라우저 윈도우 right parent 윈도우 child 윈도우 left upper lower 46 right 윈도우 left 윈도우 top 윈도우 parent 윈도우 child 윈도우 upper 윈도우 lower 윈도우

예제 2 -24 target 속성으로 프레임 윈도우 활용 49 ex 2 -24. html <!DOCTYPE

예제 2 -24 target 속성으로 프레임 윈도우 활용 49 ex 2 -24. html <!DOCTYPE html> <head><title>target 속성 활용</title></head> <body> <h 3>target 속성 활용</h 3> <hr> <iframe src="ex-24 -sitelist. html" name="left" width="200" height="300"> </iframe> <iframe src="http: //www. w 3 c. org" name="right" width="300" height="300"> </iframe> </body> </html> ex 2 -24 -sitelist. html <!DOCTYPE html> <head><title>사이트 리스트</title></head> <body> <h 4>사이트 리스트</h 4> <ul> <li><a href="http: //www. w 3 c. org" target="right">W 3 C</a> <li><a href="http: //www. etnews. com" target="_self">전자신문</a> <li><a href="http: //www. mk. co. kr" target="_top">매일경제신문</a> <li><a href="http: //www. w 3 c. org" target="_blank">새 창에 W 3 C</a> </ul> </body> </html> left 프레임 right 프레임

<video> 태그 51 <video> 태그 사례 � 예) 320 x 240 공간에, bear. mp

<video> 태그 51 <video> 태그 사례 � 예) 320 x 240 공간에, bear. mp 4 재생. 자동시작. 제어버튼 출력 <video src="bear. mp 4" width="320" height="240" controls autoplay></video> � 비디오 소스 별도 지정 방법 <video width="320" height="240" controls autoplay> <source src="bear. mp 4" type="video/mp 4"> 브라우저가 video 태그를 지원하지 않습니다. </video>

예제 2 -25 <video> 태그로 비디오 삽입 53 <!DOCTYPE html> <head><title>비디오 삽입</title></head> <body> <h

예제 2 -25 <video> 태그로 비디오 삽입 53 <!DOCTYPE html> <head><title>비디오 삽입</title></head> <body> <h 3>비디오 삽입</h 3> <hr> <video src=“media/bear. mp 4" width="320" height="240" controls autoplay> 브라우저가 video 태그를 지원하지 않습니다. </video> </body> </html> controls 속성에 240 픽셀 의해 생긴 콘트롤 320 픽셀

<audio> 태그 54 <audio> 태그사례 � mymusic. mp 3를 자동으로 재생 시작하고, 제어 버튼

<audio> 태그 54 <audio> 태그사례 � mymusic. mp 3를 자동으로 재생 시작하고, 제어 버튼 출력 <audio src="mymusic. mp 3" controls autoplay loop></audio> 선택 재생 가능 � mymusic. mp 3를 재생할 수 없으면, mymusic. ogg 선택 <audio controls autoplay> <source src="mymusic. mp 3" type="audio/mpeg"> <source src="mymusic. ogg" type="audio/ogg"> 브라우저가 audio 태그를 지원하지 않습니다. </audio>

<audio> 태그 55

<audio> 태그 55

예제 2 -26 <audio> 태그로 오디오 삽입 56 <!DOCTYPE html> <head> <title>오디오 삽입</title> </head>

예제 2 -26 <audio> 태그로 오디오 삽입 56 <!DOCTYPE html> <head> <title>오디오 삽입</title> </head> <body> <h 3>오디오 삽입</h 3> <hr> 페이지 로드 즉시 음악이 연주됩니다. <audio src="media/Embraceable. You. mp 3" controls autoplay loop> 브라우저가 audio 태그를 지원하지 않습니다. </audio> </body> </html>