① 태그 소스

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />

<title>a태그</title>

</head>

<body>

        <!-- anchor : -->

        <a name="top"></a>

        <!-- href 페이지 내의 링크와 다른 사이트로의 링크가 가능하다.. -->

        <a href="http://www.naver.com">가자~!</a> <br />

        저녁 먹지??<br />

        저녁 먹지??<br />

        저녁 먹지??<br />

        저녁 먹지??<br />

        저녁 먹지??<br />

        저녁 먹지??<br />

        저녁 먹지??<br />

        저녁 먹지??<br />

        저녁 먹지??<br />

        <a href="#top">맨위로</a>

</body>

</html>


② 실행화면

a태그 가자~!(네이버로 이동합니다)
저녁 뭐 먹지??
저녁 뭐 먹지??
저녁 뭐 먹지??
저녁 뭐 먹지??
저녁 뭐 먹지??
저녁 뭐 먹지??
저녁 뭐 먹지??
저녁 뭐 먹지??
저녁 뭐 먹지??
맨위로


블로그 이미지

모데스티

,
① 태그 소스

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />

<title>폼태그</title>

</head>

<body>

        <!-- form action : submit 가게될 주소 -->

        <!--

               form 방식

               get방식은 주소창에 입력한 값이 보여지지만

               post방식은 주소창에 값이 보이지않지만 입력을 확인하는 텍스트 박스가 나온다.

        -->

        <form action="http://@localhost:port/hp" method="post">

               <!-- input타입이 텍스트인경우 일반 텍스트로 입력받는다. -->

               <label for="userid">유저아이디</label>

               <input type="text" name="userid" id="userid" /> <br/>

              

               <!-- password 경우 입력한 값이 보이지 않는다. -->

               <label for="pass">비밀번호</label>

               <input type="password" name="pass" id="pass" /> <br/>

              

               <!-- select option 한가지를 선택하도록 한다. -->

               <label for="job">직업</label>

               <select name="job" id="job">

                       <option>개발자</option>

                       <option>프로그래머</option>

                       <option>자영업자</option>

               </select> <br />

              

               <!-- radio 여러개 선택이 불가능하다. -->

               <label for="gender">성별</label>

               <input type="radio" name="gender" value ="m" />

               <input type="radio" name="gender" value ="f" />   <br />

                <label for="hobby">취미</label>

               

                <!-- checkbox 여러개 선택이 가능하다. -->

                <input type ="checkbox" name="hobby" value="reading" /> 독서

                <input type ="checkbox" name="hobby" value="drama" /> 드라마보기

                <input type ="checkbox" name="hobby" value="soccer" /> 축구 <br />

                <input type ="checkbox" name="hobby" value="movie" /> 영화보기

                <input type ="checkbox" name="hobby" value="basket" /> 농구

                <input type ="checkbox" name="hobby" value="game" /> 게임 <br />

               

                <!-- 입력한 값을 리셋한다. -->

                <input type="reset" value="리셋" />

               

                <!-- 입력한 값을 제출한다. -->

                <input type="submit" value="완료" />

        </form>

</body>

</html>


② 실행화면

폼태그





독서 드라마보기 축구
영화보기 농구 게임


블로그 이미지

모데스티

,
① 태그 소스

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />

<title>테이블</title>

</head>

<body>

        <!-- 테이블은 메인페이지에서 사용금지 -->

        <!-- 1. 느리기 때문에 -->

        <!-- 2. 테이블의 구동방식 : 다른 태그들이 자리를 잡은 후에 테이블이 자리를 밀어내고 

  만들어진다. -->

        <table border="1" align = "center" width="500"> <!-- border : attribute -->

               <tr> <!-- Table row : -->

                       <td colspan="2">1 1</td>

                       <td rowspan="2">1 2</td>

               </tr>

               <tr> <!-- Table row : -->

                       <td>2 1</td>

                       <td>2 2</td>

               </tr>

        </table>

        <br />

        <br />

        <br />

        <table border="5" align = "center" width ="200">

               <tr> <!-- 테이블 헤더 -->

                       <th>구분</th>

                       <th>1</th>

                       <th>2</th>

                       <th>3</th>

                       <th>4</th>

               </tr>

               <tr align = "center" valign="top">

                       <th>1</th>

                       <td rowspan="3" >a1</td>

                       <td colspan="3" >a2</td>

               </tr>

               <tr align = "center" valign="top">

                       <th>2</th>

                       <td rowspan="2" >b1</td>

                       <td colspan="2" >b2</td>

               </tr>

               <tr align = "center" valign="top">

                       <th>3</th>

                       <td >c1</td>

                       <td rowspan="2" >c2</td>

               </tr >

               <tr align = "center" valign="top">

                       <th>3</th>

                       <td colspan="2">d1</td>

                       <td>d2</td>

               </tr >

        </table>

</body>

</html>


② 실행화면

테이블

1행 1열 1행 2열
2행 1열 2행 2열



구분 1열 2열 3열 4열
1행 a1 a2
2행 b1 b2
3행 c1 c2
3행 d1 d2


블로그 이미지

모데스티

,
① 태그 소스

<?xml version="1.0" encoding="EUC-KR" ?> <!-- xhtml 항상 문장으로 시작 -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />

       <!-- content type : MIME type >> text형태를 html 분석하여 보여준다. EUC-KR>> 한국어만 가능-->

<title>내꺼다!</title> <!-- 탭에 표시되는 이름 -->

</head>

<body>

       <!-- Tag <h1>(태그 열기) </h1>(태그 닫기) : Markup Language -->

       <!-- 웹표준검사 : http://vaildator.w3.org -->

       <h1>안녕 세상아~~!!!</h1>

       <p>

             <!-- 문단태그 -->

             본문   &nbsp;&nbsp;&nbsp;&nbsp;영역

             <!-- html에서는 띄어쓰기를 여러번 해도 하나로 인식하므로 &nbsp; 쓴다. -->

             <!-- &  ctrl + space : 특수문자  -->

             &lt;본문      &nbsp;&nbsp;&nbsp;&nbsp;영역&gt;     

       </p>

       <p>

             두번째 <br /> <!-- html에서 줄을 바꾸고 싶을 경우 <br /> 쓴다. -->

              본문<br />

              <b>원조 굵게!(b태그는 이제 안씀)</b><br />

              <strong>굵게!(strong css 교체하는 것이 가능)</strong><br />

              <i>원조 이탤릭(기울임꼴)(i태그도 이제 안씀)</i><br />

              <em>이탤릭(기울임꼴)(em css 교체하는 것이 가능)</em><br />

              <strong>font태그도 사용금지</strong>

       </p>

       <p>

    <a href="http://validator.w3.org/check?uri=referer"><img

      src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>

       </p>

</body>

</html>

② 실행화면

내꺼다!

안녕 세상아~~!!!

본문     영역 <본문     영역>

두번째
본문
원조 굵게!(b태그는 이제 안씀)
굵게!(strong은 css로 교체하는 것이 가능)
원조 이탤릭(기울임꼴)(i태그도 이제 안씀)
이탤릭(기울임꼴)(em도 css로 교체하는 것이 가능)
font태그도 사용금지

Valid XHTML 1.0 Transitional


'WEB > HTML' 카테고리의 다른 글

WEB 2일차 두번째) a태그  (0) 2012.09.13
WEB 2일차 첫번째) FORM태그  (0) 2012.09.13
WEB 1일차 세번째) Table태그  (0) 2012.09.13
블로그 이미지

모데스티

,