제 13 장 xhtml basic 1. xhtml basic 의 개요 2. xhtml basic 기본 문법 3. 표 만들기...

제 13 장 XHTML Basic 1

제 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 을 삽입하기 위한 확장성을 갖추고 있다 .

• XHTML Basic 역시 XML 이다 .

2. XHTML Basic 기본 문법

• XHTML 의 기본적인 문법 구조


<!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


9 <body> 10 <p>XHTML Basic!</br> 11 세계로 오신 것을 환영한다 . </p> 12 </body> 13 </html>

• 예제 13-1 의 실행 결과

• 헤더 태그<h1> 내용 </h1> <h2> 내용 </h2> <h3> 내용 </h3> <h4> 내용 </h4> <h5> 내용 </h5> <h6> 내용 </h6> 

• [ 예제 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>

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  16 </body> 17 </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>


• 이미지 태그<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-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>



(d)


• 특수문자 표시 : 심볼 , 수학 , 그리스 , 기타 문자 , 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>


3. 표 만들기

• <table> 구성요소 형식

<table summary=“ 설명문장” > <caption> 테이블의 제목 </caption> <th> 헤더 셀의 텍스트를 bold 체로 표시 </th> <tr> 테이블의 한 행을 정의 <td> 테이터 셀을 정의 </td> </tr></table>


• [ 예제 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>


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-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>


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>


4. 리스트

• <ul> 태그와 <ol> 태그의 사용 형식

// 순서 없이 나열<ul> <li> 첫 번째 항목 </li> <li> 두 번째 항목 </li> …</ul>

// 순서 부여<ol> <li> 첫 번째 항목 </li> <li> 두 번째 항목 <li> …</ol>


• [ 예제 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>


5. 사용자 입력

• 폼 태그

<form method=“post” action=“formex.php”> 입력 양식 </form>

- method 속성 : get, post

- action 속성 : 양식 데이터를 처리할 페이지나 스크립트의 URL 을 지정

• <input> 태그의 속성 , p. 344, 표 13-6 참조• <input> 태그의 type 속성 값 , p. 345, 표 13-7 참조


• [ 예제 13-10] <form> 태그를 사용한 예

1. <?xml version="1.0" encoding="EUC-KR" ?>2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Baisc 1.0//EN"3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">4. <html xmlns="http://www.w3.org/1999/xhtml">5. <head>6. <title>Basic XHTML 폼 </title>7. </head>8. <body>9. <h4> 이름 입력 ?</h4>10. <form action="http://www.wrox.com/Consumer/Errata/3439/post-echo.asp"11. method="post">12. <input type="text" name="clientname" id="clientname" />13. <input type="submit" />14. </form>15. </body>16. </html>


• 예제 13-10 의 실행 결과


• [ 예제 13-11] 폼 태그를 사용한 예

▶ ch13-10.html1 <?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>


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>


44 </table> 45 </form> 46 </body>

47 </html>

• 예제 13-11 의 실행 결과

제 13 장 xhtml basic 1. xhtml basic 의 개요 2. xhtml basic 기본 문법 3. 표 만들기...

Documents