1 / 29

제 13 장 XHTML Basic 1. XHTML Basic 의 개요 2. XHTML Basic 기본 문법 3. 표 만들기 4. 리스트 5. 사용자 입력

제 13 장 XHTML Basic 1. XHTML Basic 의 개요 2. XHTML Basic 기본 문법 3. 표 만들기 4. 리스트 5. 사용자 입력. 1. XHTML Basic 의 개요 XHTML Basic: W3C 가 무선기기와 기타 한정된 메모리를 갖는 기 기들을 위한 일반적인 마크업 언어 WAP 2.0 - WML 을 XHTML Basic 으로 대체 - XHTML Basic 마크업 내에 WML 을 삽입하기 위한 확장성을 갖추고 있다 .

larissa-peterson
Download Presentation

제 13 장 XHTML Basic 1. XHTML Basic 의 개요 2. XHTML Basic 기본 문법 3. 표 만들기 4. 리스트 5. 사용자 입력

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 제 13 장 XHTML Basic 1. XHTML Basic의 개요 2. XHTML Basic 기본 문법 3. 표 만들기 4. 리스트 5. 사용자 입력 제 13 장 XHTML Basic

  2. 1. XHTML Basic의 개요 • XHTML Basic: W3C가 무선기기와 기타 한정된 메모리를 갖는 기 • 기들을 위한 일반적인 마크업 언어 • WAP 2.0 • - WML을 XHTML Basic으로 대체 • - XHTML Basic 마크업 내에 WML을 삽입하기 위한 확장성을 갖추고 있다. • XHTML Basic 역시 XML이다. • 2. XHTML Basic 기본 문법 • XHTML의 기본적인 문법 구조 제 13 장 XHTML Basic

  3. [예제 13-1] 기본적인 구성요소를 포함한 XHTML Basic 문서 • ▶ ch13-1.html • 1 <?xml version = "1.0"?> • 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" • 3    "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"> • 4 <html xmlns = "http://www.w3.org/1999/xhtml"> • 5    <head> • 6       <title>XHTML Basic</title> • 7    </head> • 8 제 13 장 XHTML Basic

  4. 9    <body> 10       <p>XHTML Basic!</br> 11           세계로 오신 것을 환영한다. </p> 12    </body> 13 </html> • 예제 13-1의 실행 결과 제 13 장 XHTML Basic

  5. 헤더 태그 • [예제 13-2] 헤더 태그 사용 예 • ▶ ch13-2.html • 1 <?xml version = "1.0"?> • 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" • 3     "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"> • 4 <html xmlns = "http://www.w3.org/1999/xhtml"> • 5    <head> • 6       <title>Headers 태그</title> • 7    </head> 제 13 장 XHTML Basic

  6. 8    <body> 9       <h1>Level 1 헤더</h1>   10      <h2>Level 2 헤더</h2>   11      <h3>Level 3 헤더</h3>   12      <h4>Level 4 헤더</h4>   13      <h5>Level 5 헤더</h5>   14      <h6>Level 6 헤더</h6>   15   <!-- Level 숫자가 클수록 작은 글씨 --> 16   </body> 17 </html> • 예제 13-2의 실행 결과 제 13 장 XHTML Basic

  7. 링킹 방법 • [예제 13-3] 링크를 사용한 예 • ▶ ch13-3.html • 1 <?xml version = "1.0"?> • 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" • 3     "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"> • 4 <html xmlns = "http://www.w3.org/1999/xhtml"> • 5    <head> • 6       <title>링크 태그</title> • 7    </head> • 8 9    <body align="center"> • 10       <h3>검색 엔진</h3>을 선택하세요!!<br/> • 11       <p ><a href = "http://kr.yahoo.com">야후</a><br/> • 12           <a href = "http://www.altavista.com">알타비스타</a><br/> • 13           <a href = "http://www.atfile.com">앳파일</a></p>      • 14    </body> • 15 </html> 제 13 장 XHTML Basic

  8. 예제 13-3의 실행 결과 제 13 장 XHTML Basic

  9. 이미지 태그 • [예제 13-4] 이미지 디스플레이 예 • ▶ ch13-4.html • 1 <?xml version = "1.0"?> • 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" • 3 "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"> • 4 <html xmlns = "http://www.w3.org/1999/xhtml"> • 5 <head> • 6 <title>이미지</title> • 7 </head> • 8 • 9 <body align="center"> • 10 <h3> ★ 펭귄 ★</h3> • 11 <img src="penguin.jpg" alt="펭귄그림" ></img> • 12 </body> • 13 </html> 제 13 장 XHTML Basic

  10. 예제 13-4의 실행 결과 제 13 장 XHTML Basic

  11. [예제 13-5] 이미지와 링크 예 • ▶ ch13-5.html • 1 <?xml version = "1.0"?> • 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" • 3 "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"> • 4 <html xmlns = "http://www.w3.org/1999/xhtml"> • 5 <head> • 6 <title>이미지 링크</title> • 7 </head> • 8 <body> • 9 <p align="center"><strong> 관심?</strong><br /> • 10 <a href="myp.html"> • 11 <img src="../myp.gif" height="20" width="60" alt="picture" /></a><br /> • 12 <a href="hob.html"> • 13 <img src="../hob.gif" height="20" width="60" alt="hob" /></a><br /> • 14 <a href="job.html"> • 15 <img src="../job.gif" height="20" width="60" alt="job" /></a> • 16 </p> • 17 </body> • 18 </html> 제 13 장 XHTML Basic

  12. 예제 13-5의 실행 결과 (d) 제 13 장 XHTML Basic

  13. 특수문자 표시: 심볼, 수학,그리스, 기타 문자, pp. 334~336 참조 • [예제 13-6] 특수 문자를 사용한 예 • ▶ ch13-6.html • 1 <?xml version = "1.0"?> • 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" • 3 "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"> • 4 <html xmlns = "http://www.w3.org/1999/xhtml"> • 5 <head> <title>특수문자</title> </head> • 6 <body> <strong> &lt; 13장의 내용 &gt; </strong><br /> • 7 <h4>1 XHTML Basic?<br/> • 8 2 기본 문법<br/></h4> • 9 <p> <font size="2">&nbsp; &middot; 헤더 태그<br/> • 10 &nbsp;&middot; 링킹 방법<br/> • 11 &nbsp;&middot; 이미지 태그<br/> • 12 &nbsp;&middot;이미지 &amp; 링크<br/> • 13 </font> </p> • 14 </body> • 15 </html> 제 13 장 XHTML Basic

  14. 예제 13-6의 실행 결과 제 13 장 XHTML Basic

  15. 3. 표 만들기 • <table> 구성요소 형식 제 13 장 XHTML Basic

  16. [예제 13-7] <table> 태그 사용 예 • ▶ ch13-7.html • 1 <?xml version = "1.0"?> • 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" • 3 "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"> • 4 <html xmlns = "http://www.w3.org/1999/xhtml"> • 5 <head> <title>표만들기1</title> </head> • 6 <body> • 7 <table summary="plane" border="1" bgcolor="sky" align="center"> • 8 <caption>시간표</caption> • 9 <tr> <td><strong>&nbsp;</strong></td> • 10 <td><strong>M</strong></td> <td><strong>T</strong></td> • 11 <td><strong>W</strong></td> <td><strong>T</strong></td> • 12 <td><strong>F</strong></td> </tr> • 13 <tr><td><strong>1</strong></td> • 14 <td>VB</td><td>os</td><td></td><td></td><td>VB</td> </tr> • 15 <tr><td><strong>2</strong></td> • 16 <td>VB</td><td>os</td><td></td><td>C</td><td>VB</td> </tr> 제 13 장 XHTML Basic

  17. 17 <tr><td><strong>3</strong></td> 18 <td></td><td></td><td>DB</td><td>C</td><td></td> </tr> 19 <tr><td><strong>4</strong></td> 20 <td></td><td></td><td>DB</td><td></td><td></td> </tr> 21 </table> 22 </body> 23 </html> • 예제 13-7의 실행 결과 제 13 장 XHTML Basic

  18. [예제 13-8] <table rowspan=“2” colspan="2"> 태그의 사용 예 • ▶ ch13-8.html • 1 <?xml version = "1.0"?> • 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" • 3 "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"> • 4 <html xmlns = "http://www.w3.org/1999/xhtml"> • 5 <head> <title>표만들기2</title> </head> • 6 <body> • 7 <table summary="plane" border="1" bgcolor="#ffffcc" align="center"> • 8 <caption>시간표</caption> • 9 <tr><td><strong>&nbsp;</strong></td> • 10 <td><strong>M</strong></td> <td><strong>T</strong></td> • 11 <td><strong>W</strong></td> <td><strong>T</strong></td> • 12 <td><strong>F</strong></td> • 13 </tr> • 14 <tr><td><strong>1</strong></td> • 15 <td rowspan="2">VB</td><td rowspan="2">os</td> • 16 <td rowspan="2"></td><td></td><td rowspan="2">VB</td> • 17 </tr> 제 13 장 XHTML Basic

  19. 18 <tr> 19 <td><strong>2</strong></td> 20 <td rowspan="2">C</td> 21 </tr> 22 <tr><td><strong>3</strong></td> 23 <td rowspan="2" colspan="2"></td><td rowspan="2">DB</td> 24 <td rowspan="2"></td> 25 </tr> 26 <tr><td><strong>4</strong></td> 27 <td></td> 28 </tr> 29 </table> 30 </body> 31 </html> 제 13 장 XHTML Basic

  20. 예제 13-8의 실행 결과 제 13 장 XHTML Basic

  21. 4. 리스트 • <ul> 태그와 <ol> 태그의 사용 형식 제 13 장 XHTML Basic

  22. [예제 13-9] <ul>, <ol> 태그를 사용한 예 • ch13-9.html • 1 <?xml version = "1.0"?> • 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" • 3 "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"> • 4 <html xmlns = "http://www.w3.org/1999/xhtml"> • 5 <head> <title>리스트</title> </head> • 6 <body> • 7 <p><ul> • 8 <li>실험12의 내용</li> • 9 <ol> <li>XHTML 이란</a></li> • 10 <li>XHTML 문법</li> • 11 </ol> • 12 <br/> • 13 <li>실험13의 예</li> • 14 <ol> • 15 <li><a href="http://localhost/mobile/ch13-4.html">이미지</a></li> • 16 <li><a href="http://localhost/mobile/ch13-6.html">특수문자</a></li> • 17 <li><a href="http://localhost/mobile/ch13-7.html">표만들기</a></li> • 18 </ol> • 19 </ul> </p> • 20 </body> • 21 </html> 제 13 장 XHTML Basic

  23. 예제 13-9의 실행 결과 제 13 장 XHTML Basic

  24. 5. 사용자 입력 • 폼 태그 • method 속성: get, post • action 속성: 양식 데이터를 처리할 페이지나 스크립트의 URL을 지정 • <input> 태그의 속성, p. 344, 표 13-6 참조 • <input> 태그의 type 속성 값, p. 345, 표 13-7 참조 제 13 장 XHTML Basic

  25. [예제 13-10] <form> 태그를 사용한 예 • <?xml version="1.0" encoding="EUC-KR" ?> • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Baisc 1.0//EN" • "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • <html xmlns="http://www.w3.org/1999/xhtml"> • <head> • <title>Basic XHTML 폼</title> • </head> • <body> • <h4>이름 입력?</h4> • <form action="http://www.wrox.com/Consumer/Errata/3439/post-echo.asp" • method="post"> • <input type="text" name="clientname" id="clientname" /> • <input type="submit" /> • </form> • </body> • </html> 제 13 장 XHTML Basic

  26. 예제 13-10의 실행 결과 제 13 장 XHTML Basic

  27. [예제 13-11] 폼 태그를 사용한 예 • ▶ ch13-10.html • 1 <?xml version = "1.0"?> • 2 <!doctype html public "-//w3c//dtd xhtml basic 1.0//en" • 3 "http://www.w3.org/tr/xhtml-basic/xhtml-basic10.dtd"> • 4 <html xmlns = "http://www.w3.org/1999/xhtml"> • 5 <head><title>form 사용예제</title></head> • 6 <body> • 7 <form method="post" action="formtest.php"> • 8 <input type="hidden" name="subject" value="회원가입양식"> • 9 <table width="500" border="0" cellspacing="0"> • 10 <tr><td>아이디</td> • 11 <td><input type="text" name="id" size="5" maxlength="8"></td> • 12 </tr> • 13 <tr><td>비.번</td> • 14 <td><input type="password" name="pw" size="5" maxlength="8"></td> • 15 </tr> • 16 <tr><td>이름</td> • 17 <td><input type="text" name="name" size="5"></td> • 18 </tr> • 19 <tr><td>성별</td> • 20 <td><input type="radio" name="sex" value="male" checked> 남 &nbsp; • 21 <input type="radio" name="sex" value="female">여</td> • 22 </tr> 제 13 장 XHTML Basic

  28. 23 <tr><td>직업</td> 24 <td><select name="select"> 25 <option>학생</option><option>회사원</option><option>백수</option> 26 </select> 27 </td> 28 </tr> 29 <tr><td>관심<br/>분야</td> 30 <td><input type="checkbox" name="hobby" value="travel">여행<br/> 31 <input type="checkbox" name="hobby" value="sports">스포츠<br/> 32 <input type="checkbox" name="hobby" value="movie">영화감상<br/> 33 <input type="checkbox" name="hobby" value="game">게임 34 </td> 35 </tr> 36 <tr><td>자기<br/>소개</td> 37 <td><textarea name="comment" cols="50" rows="5"></textarea></td> 38 </tr> 39 <tr align="center"><td colspan="2"> 40 <input type="submit" name="submit" value="회원가입">&nbsp;&nbsp; 41 <input type="reset" name="submit2" value="취소"> 42 </td> 43 </tr> 제 13 장 XHTML Basic

  29. 44 </table> 45 </form> 46 </body> 47 </html> • 예제 13-11의 실행 결과 제 13 장 XHTML Basic

More Related