java 시작 d-day 2

728x90

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
 
 </head>
<body>
 개행 : br (줄바꾸기)<br/>
 이미지 삽입 : img <img src="img1.jpg" width="100" height="100">
      </img>
 문단 : p (자동개행기능,한줄띄기)<br/>
 <p>여기는 문단테그1</p>
 <p>여기는 문단테그2</p>
 문단 : div (자동개행기능) <br/>
 <div>여기는 div 문단테그1</div>
 <div>여기는 div 문단테그2</div>
 글꼴 : font (비권장테그)<br/>
 <font color="red">여기는 빨간색</font><br/>
 <font color="blue">여기는 파란색</font><br/>
 제목 : h1 ~ h6 (자동개행,한줄띄기) <br/>
 <h1>여기는 h1</h1>
 <h2>여기는 h2</h2>
 <h3>여기는 h3</h3>
 <h4>여기는 h4</h4>
 <h5>여기는 h5</h5>
 <h6>여기는 h6</h6>
 공백 : &nbsp; <br/>
 첫번째단어  &nbsp; &nbsp; &nbsp; &nbsp;두번째 단어<br/>
 보이는 그대로 웹브라우져에 출력하기 : pre <br/>
 <pre>
 나는 자유로워! <b>굵은 글씨</b>
       내맘대로야 .... ㅋㅋ
           부럽지???
 </pre>
 링크걸기 : a <br/>
 <a href="http://www.naver.com">네이버로가기>
 <a href="http://www.daum.net">daum 으로가기</a>
 <a href="http://www.naver.com"> src="naver.gif"></img></a>


</body>





</html>

-------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

 <body>
 iframe 테스트 <br/>
 iframe 은 다른 페이지를 삽입하고자 할때 사용<br/>
 <iframe src="http://www.daum.net"
 width="800" height="800" frameborder="1"> (폭 ,높이, 테두리) 자동으로 스크롤바가 생긴다.
 </iframe>
 </body>




</html>

---------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

 <body bgcolor = "yellow">
  iframeTest<br/>
  <p>
  <!-- 링크된 페이지가 target 에 설정된 곳(iframe)에 보여진다. -->
  <a href = "test1.html" target = "frm">test1.html<a/>
  <a href = "http://www.daum.net" target = "_blank">daum</a>(_blank 새창을 열어서 여기에 보여라)
  <a href = "http://www.hanbitedu.co.kr" target = "_self">한빛</a>(_self 자기자신의 페이지에 이 전체를 보여라)

  </p>
  <iframe src="http://www.naver.com" width = "500" height= "400" name = "frm"></iframe> (frm에 test1.html이 보인다)

 </body>
</html>

---------------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

 <body>
 <table border = "1" width = "300">
 <tr>
  <td>번호</td>
  <td>이름</td>
 </tr>
 <tr>
  <td>1</td>
  <td>홍모씨</td>
 </tr>
 <tr>
  <td>2</td>
  <td>김모씨</td>
 </tr>
 </table>
 </body>

</html>

<tr> 행을 나타내는 태그

<td> 열을 나타내는 태그

-------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

 <body>
  <div>
 <h3>셀합치기</h3>
 열 (column)을 합칠때는 colspan 을 사용하고, 행을 합칠때는
 rowspan 을 사용한다.
  </div>
  <table border = "1" width = "300">
 <tr>
  <td colspan = "2" align = "center"> 하나 </td>
 </tr>
 <tr>
  <td>둘</td>
  <td>셋</td>
 </tr>
  </table>
 </body>
</html>

colspan = 2 는 column을 두개로 한다는 것이기 때문에 하나로 되는것이다.

align = "center"는 글자를 가운데에 정렬하라는 것이다.

----------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

 <body>
  <table border = "1" width = "400">
 <tr>
  <td rowspan = "2">하나</td>
  <td>둘</td>
 </tr>
 <tr>
  <td>셋</td>
 </tr>

  </table>
 </body>
</html>

<td rowspan = "2">는 열을 두개로 합한다는 뜻이다.

------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

 <body>
  <table border = "2" width = "400">
 <tr>
  <td>하나</td>
  <td>둘</td>
 </tr>
 <tr>
  <td colspan = "2" align = "center">셋</td>
 </tr>
 </table>
 </body>
</html>

두번째 줄을 봐꾸어 본 예제 인데

이렇게 테이블 테그를 자꾸 해보는 이유는

이것이 그만큼 중요하다는 얘기다.

--------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

 <body>
  <h3>폼테그 익히기</h3>
  <!-- 폼테그: 폼으로 둘러싸인 요소값들이 sumbit 버튼이 눌려지면
  서버로 전송된다.
  action 속성에는 서버주소가 들어간다.-->
  <form action = "server1.jsp"> submit 버튼을 눌렀을때 전송되어질 곳의 주소이다.
  아이디 <input type = "text" name = "id"/><br/>
  비밀번호 <input type = "text" name = "pwd"/><br/>

"text"를 !!"password"를 입력하면 패스워드가 별표로 보인다.!!
  성별 <br/><!-- radio는 반듯이 name 속성이 있어야 그룹으로
  묶인다. 그룹으로 묶여야 항목이 하나만 선택된다. -->
  <input type = "radio" value = "남" name = "gender"/>남
  <input type = "radio" value = "여" name = "gender"/>여
  <br/>
  <input type = "submit" value = "전송"/> value값의 이름은 곧 버튼의 이름이다.
  <input type = "reset" vlaue = "취소"/>

  </form>
 </body>
</html>

서버에 아이디,비밀번호,성별을 보낸다.

서버는 구별을 해야 한다.

아이디는 "id"

비밀번호는 "pwd"

성별은 "gender"

라고 이름을 붙인것을 서버는 구별할 수 있다.

input의 type설정으로 인해서 각 속성이 달라진다.

------------------------------------------------------------------------------

취미<br/>
   배열로 들어간다. checkbox의 특징이다.
  <input type = "checkbox" value = "여행" name = "hobby"/>여행
  <input type = "checkbox" value = "음악" name = "hobby"/>음악
  <input type = "checkbox" value = "낚시" name = "hobby"/>낚시
  <input type = "checkbox" value = "영화" name = "hobby"/>영화
  <br/>
  직업<br/>
  <select name = "job"> select 는 누르면 펴져서 선택할 수 있는 그런 옵션을 제공한다.
   <option value = "학생">학생</option>
   <option value = "공무원">공무원</option>
   <option value = "군인">군인</option>
   <option value = "주부">주부</option>
   <option value = "실업자">실업자</option>
   <option value = "기타">기타</option>
  </select>
  <br/>
  기타하고싶은 말
  <textarea name = "etc" rows = "7" cols = "60">
여기에는 여러줄의 사연을 적으실 수 있어요. 이 내용을 지우고 자신의 사연을 적으세요. 영역의 크기도 한번 바꿔 보시구요.
</textarea>

get방식은 보안이 않좋다. 주소에 그대로 아이디와 패스워드가 보인다.

<form method = "post" action = ""> 이렇게 간단하게 "get"방식에서 "post"방식으로 변환할 수 있다.

----------------------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <!-- 여기는 주석입니다. html은 이렇게 했지만-->
  <script type = "text/javascript">
 alert("방문을 환영합니다!");//자바스크립트내에서는 이렇게 달수 있습니다.

  </script>
</head>

 <body>
 
  안녕하세요!<br/>
  저의 첫번째 홈페이지 입니다.<br/>

 </body>
</html>

-----------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 <script type = "text/javascript">
 function showMsg() {
 alert("방문을 환영합니다.!");
 }
 function test() {
 alert("또 눌렀네요??");
 }

 </script>
 </head>

 <body>
  <input type = "button" value = "여기를 눌러요" onclick = "showMsg()"/> (호출을해줘야 한다 스크립트에서
  <input type = "button" value = "여기를 또 눌러요" onclick = "test()"/> (그래야 실행된다.)
 </body>
</html>

--------------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 <script type = "text/javascript">
 /*
  [변수]
  -임의의 값을 저장하기 위한 이름지어진 저장공간
  -만드는 방법 : var 변수명 = 저장값 ;

 */

 function test1() {
 var inputName = ""; //입력된 문자열을 저장하기 위한 변수
 //prompt("메세지","기본문자열"); ==>입력창을 띄우는 함수
 inputName = prompt("당신의 이름을 입력하세요","홍길동");
 alert("당신의 이름은"+inputName+"이군요");
 }
 </script>
 </head>

 <body>
  <input type = "button" value = "push" onclick = "test1()"/><br/>
 </body>
</html>

728x90

저작자표시 비영리 변경금지

'낙서장 > JAVA' 카테고리의 다른 글

java 기초 d-day 6 (0)	2021.08.08
java 시작 d-day 5 (0)	2021.08.08
java 시작 d-day 4 (0)	2021.08.08
java 시작 d-day 3 (0)	2021.08.08
자바 시작 (0)	2021.08.08

뭉치의 히스토리

java 시작 d-day 2

'낙서장 > JAVA' 카테고리의 다른 글

댓글

티스토리툴바

티스토리툴바

java 시작 d-day 2

'낙서장 > JAVA' 카테고리의 다른 글

관련글

댓글

티스토리툴바

티스토리툴바