WEB 2일차 두번째) a태그

WEB/HTML 2012. 9. 13. 00:43
① 태그 소스

<?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태그 가자~!(네이버로 이동합니다)
저녁 뭐 먹지??
저녁 뭐 먹지??
저녁 뭐 먹지??
저녁 뭐 먹지??
저녁 뭐 먹지??
저녁 뭐 먹지??
저녁 뭐 먹지??
저녁 뭐 먹지??
저녁 뭐 먹지??
맨위로


저작자표시

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

WEB 2일차 첫번째) FORM태그  (0) 2012.09.13
WEB 1일차 세번째) Table태그  (0) 2012.09.13
WEB 1일차 두번째) H태그(헤더태그)와 P태그(문단태그)  (0) 2012.09.13
블로그 이미지

모데스티

,

WEB 2일차 첫번째) FORM태그

WEB/HTML 2012. 9. 13. 00:42
① 태그 소스

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


② 실행화면

폼태그




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


저작자표시

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

WEB 2일차 두번째) a태그  (0) 2012.09.13
WEB 1일차 세번째) Table태그  (0) 2012.09.13
WEB 1일차 두번째) H태그(헤더태그)와 P태그(문단태그)  (0) 2012.09.13
블로그 이미지

모데스티

,

WEB 1일차 세번째) Table태그

WEB/HTML 2012. 9. 13. 00:39
① 태그 소스

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


저작자표시

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

WEB 2일차 두번째) a태그  (0) 2012.09.13
WEB 2일차 첫번째) FORM태그  (0) 2012.09.13
WEB 1일차 두번째) H태그(헤더태그)와 P태그(문단태그)  (0) 2012.09.13
블로그 이미지

모데스티

,

공지사항

태그목록

글 보관함

달력

«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

티스토리툴바