XHTML Basic 제 13 장 1. XHTML Basic의 개요 2. XHTML Basic 기본 문법 3. 표 만들기 4. 리스트 5. 사용자 입력 제 13 장 XHTML Basic
1. XHTML Basic의 개요 2. XHTML Basic 기본 문법 XHTML Basic: W3C가 무선기기와 기타 한정된 메모리를 갖는 기 기들을 위한 일반적인 마크업 언어 WAP 2.0 - WML을 XHTML Basic으로 대체 - XHTML Basic 마크업 내에 WML을 삽입하기 위한 확장성을 갖추고 있다. XHTML Basic 역시 XML이다. 2. XHTML Basic 기본 문법 XHTML의 기본적인 문법 구조 제 13 장 XHTML Basic
[예제 13-1] 기본적인 구성요소를 포함한 XHTML Basic 문서 <!DOCTYPE …> <html> <head> <title> … </title> </head> <body> … </body> </html> [예제 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
예제 13-1의 실행 결과 9 <body> 10 <p>XHTML Basic!</br>
헤더 태그 [예제 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
예제 13-2의 실행 결과 8 <body> 9 <h1>Level 1 헤더</h1> 17 </html> 예제 13-2의 실행 결과 제 13 장 XHTML Basic
링킹 방법 [예제 13-3] 링크를 사용한 예 ▶ ch13-3.html <a href=“연결할 파일 또는 웹문서”> 웹 페이지에서 선택할 내용 </a> [예제 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
예제 13-3의 실행 결과 제 13 장 XHTML Basic
이미지 태그 <img src=“이미지파일” weight=“그림의 가로크기” height=“그림의 세로크기” alt=“설명”> [예제 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
예제 13-4의 실행 결과 제 13 장 XHTML Basic
[예제 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
예제 13-5의 실행 결과 (d) 제 13 장 XHTML Basic
특수문자 표시: 심볼, 수학,그리스, 기타 문자, 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> < 13장의 내용 > </strong><br /> 7 <h4>1 XHTML Basic?<br/> 8 2 기본 문법<br/></h4> 9 <p> <font size="2"> · 헤더 태그<br/> 10 · 링킹 방법<br/> 11 · 이미지 태그<br/> 12 · 이미지 & 링크<br/> 13 </font> </p> 14 </body> 15 </html> 제 13 장 XHTML Basic
예제 13-6의 실행 결과 제 13 장 XHTML Basic
3. 표 만들기 <table> 구성요소 형식 <table summary=“설명문장”> <caption>테이블의 제목</caption> <th>헤더 셀의 텍스트를 bold체로 표시</th> <tr>테이블의 한 행을 정의 <td>테이터 셀을 정의</td> </tr> </table> 제 13 장 XHTML Basic
[예제 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> </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 <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
[예제 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> </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 <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
예제 13-8의 실행 결과 제 13 장 XHTML Basic
4. 리스트 <ul> 태그와 <ol> 태그의 사용 형식 // 순서 없이 나열 <ul> <li> 첫 번째 항목</li> <li> 두 번째 항목</li> … </ul> // 순서 부여 <ol> <li> 두 번째 항목<li> </ol> 제 13 장 XHTML Basic
[예제 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
예제 13-9의 실행 결과 제 13 장 XHTML Basic
5. 사용자 입력 폼 태그 <input> 태그의 속성, p. 344, 표 13-6 참조 <form method=“post” action=“formex.php”>입력 양식</form> method 속성: get, post action 속성: 양식 데이터를 처리할 페이지나 스크립트의 URL을 지정 <input> 태그의 속성, p. 344, 표 13-6 참조 <input> 태그의 type 속성 값, p. 345, 표 13-7 참조 제 13 장 XHTML Basic
[예제 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
예제 13-10의 실행 결과 제 13 장 XHTML Basic
[예제 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> 남 21 <input type="radio" name="sex" value="female">여</td> 22 </tr> 제 13 장 XHTML Basic
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="회원가입"> 41 <input type="reset" name="submit2" value="취소"> 42 </td> 43 </tr> 제 13 장 XHTML Basic
예제 13-11의 실행 결과 44 </table> 45 </form> 46 </body> 47 </html> 예제 13-11의 실행 결과 제 13 장 XHTML Basic