css: 문서의 디자인 :웹디자이너
javascript: 문서의 기능 :프로그래머
웹디자이너: 포토샵 디자인: psd
css + javascript : 웹퍼블리셔
프로그램: 과학 (용어 정의)
html 파일을 공유하려면 서버를 깔아주어야 함
>파일공유 - ftp
>html파일 공유 - web서버
c:\Apache24
>html 공개를 위한 웹서버 프로그램
>웹서버 실행
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div align="center">
<table width="800" height="500" border="1" cellpadding="10" cellspacing="0">
<tr>
<td height="100" colspan="2" align="center">header</td>
</tr>
<tr>
<td width="100" valign="top">
<table border="1"> <!--테이블 안에 테이블을 넣는 것 가능 -->
<tr>
<td>메뉴1</td>
</tr>
<tr>
<td>메뉴1</td>
</tr>
<tr>
<td>메뉴1</td>
</tr>
</table>
</td>
<td>내용</td>
</tr>
<tr>
<td height="100" colspan="2" align="center">footer</td>
</tr>
</table>
</div>
</body>
</html>
<!--
목록
순서가 있는 목록
순서가 없는 목록
사전식 목록
-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<dl>
<dt>Coffee</dt>
<dd> -black hot drink</dd>
<dt>Milk</dt>
<dd>white hot drink</dd>
</dl>
<ul>
<li>Coffee</li>
<li>
<ul>
<li>black tea</li>
<li>white tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>
<ol>
<li>black tea</li>
<li>white tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
</body>
</html>
<!--
iframe
frame이 도태되고 그것을 모태로 생김
브라우저 안에 새로운 창을 생성
-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<table width="1024" height="400" border="1" cellspacing="0">
<tr>
<td width="150">
<ul>
<li><a href="http://m.naver.com" target="child">네이버</a></li>
<li><a href="http://m.daum.net" target="child">다음</a></li>
</ul>
</td>
<td>
<iframe name="child" src="http://m.naver.com" width="600" height="800"></iframe>
</td>
</tr>
</table>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<!--한줄 입력도구-->
<input type="text"><br/><br/>
<input type="text" size="100"><br/><br/>
<input type="text" size="100" maxlength="20"><br/><br/>
<input type="text" size="100" maxlength="20" value="초기값"><br/><br/>
<input type="text" size="100" maxlength="20" value="초기값" readonly><br/><br/>
<input type="password" size="100" maxlength="20"><br/><br/>
<!--다중선택-->
<input type="checkbox">사과<br/>
<input type="checkbox" checked>수박<br/>
<input type="checkbox">딸기<br/><br/>
<!--단일선택-->
<input type="radio" name="r">사과<br/>
<input type="radio" name="r" checked>수박<br/>
<input type="radio" name="r">딸기<br/><br/>
<!--단일, 다중 선택-->
<select>
<option>사과</option>
<option selected>수박</option>
<option>딸기</option>
</select><br/><br/>
<!--다중선택 (shift, ctrl)-->
<select size="3" multiple>
<option>사과</option>
<option selected>수박</option>
<option>딸기</option>
</select><br/><br/>
<!--여러줄 입력도구-->
<textarea></textarea><br/>
<textarea rows="5" cols="50"></textarea><br/>
<textarea rows="5" cols="50">초기값</textarea><br/>
<!--파일 입력-->
<input type="file"><br/><br/>
<!--숨김 입력-->
<input type="hidden" value="데이터"><br/><br/>
</form>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!--
전송방식
get : url에 데이터가 같이 보내지는 형식
post : 데이터가 숨겨서 보내지는 형식
-->
<form action="test.jsp" METHOD="get">
<input type="text" name="id"><br/><br/>
<input type="password" name="pwd"><br/><br/>
<input type="submit">
</form>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
네이버 검색 <br/>
<a href="https://search.naver.com/search.naver?where=nexearch&query=starwars&sm=top_hty&fbm=1&ie=utf8">스타워즈</a><br/>
<a href="https://search.naver.com/search.naver?where=nexearch&query=startrek&sm=top_hty&fbm=1&ie=utf8">스타트랙</a><br/><br/>
다음 검색 <br/>
<a href="http://search.daum.net/search?w=tot&DA=YZR&t__nil_searchbox=btn&sug=&sugo=&sq=&o=&q=starwars&tltm=1">스타워즈</a><br/>
<a href="http://search.daum.net/search?w=tot&DA=YZR&t__nil_searchbox=btn&sug=&sugo=&sq=&o=&q=startrek&tltm=1">스타트랙</a><br/><br/>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!--검색어 변수화 하기-->
네이버 검색 <br/>
<form action="https://search.naver.com/search.naver" method="get"> <!-- action 공간에서 값을 받음 -->
<input type="hidden" name="where" value="nexearch"> <!-- action공간으로 넘겨줄 숨겨진 데이터 값을 설정-->
<input type="hidden" name="sm" value="top_hty">
<input type="hidden" name="fbm" value="1">
<input type="hidden" name="ie" value="utf8">
검색어:
<input type="text" name="query" size="20" maxlength="20"> <!--입력창 생성-->
<input type="submit" value="검색"> <!--보내기 버튼 생성-->
</form>
다음 검색 <br/>
<form action="http://search.daum.net/search" method="get">
<input type="hidden" name="w" value="tot">
<input type="hidden" name="DA" value="YZR">
<input type="hidden" name="t__nil_searchbox" value="btn">
<input type="hidden" name="sug" value="">
<input type="hidden" name="sugo" value="">
<input type="hidden" name="sq" value="">
<input type="hidden" name="o" value="">
<input type="hidden" name="tltm" value="1">
검색어:
<input type="text" name="q" size="20" maxlength="20">
<input type="submit" value="검색">
</form>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!--모바일용 화면에 기본적인 입력값 :글자크기가 모바일에 맞게 커짐-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<!--
전송방식
get : url에 데이터가 같이 보내지는 형식
: url에 "?"가 붙음
: 1024byte 용량 제한
: link할 때 주로 사용됨
post : 데이터가 숨겨서 보내지는 형식
: 용량 제한 없음
: 파일 전송할 때 주로 사용 됨
-->
<form action="test.jsp" METHOD="post">
<!--
post 형식은 url에 아무것도 나타나지 않음
암호화 되는 것은 아님 >>개발자도구 f12>>네트워크>>시작버튼>>post보내기>>요청본문>>요청값 볼 수 있음
-->
<input type="text" name="id"><br/><br/>
<input type="password" name="pwd"><br/><br/>
<input type="submit" value="내용 전송">
<input type="reset" value="내용 지우기"><br><br> <!--내용 초기화-->
<input type="button" value="버튼 모양"><br> <!--버튼모양만 있음 기능 없음 나중에 javascript와 연동-->
<input type="image" src="../images/image.png"><br> <!--이미지를 클릭하면 submit과 동일한 역할을 한다-->
<button>버튼모양</button><br> <!--submit 기능 있는 버튼-->
</form>
</body>
</html>
<!doctype html>
<html>
<head>
<!--다른 곳에서 링크를 걸 때 문서의 제목-->
<title>html 문서의 제목</title>
<meta charset="utf-8">
<!--모바일용 화면에 기본적인 입력값 :글자크기가 모바일에 맞게 커짐-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<style type="text/css">
/* css 정의 됨 */
</style>
<script type="text/javascript">
//자바 스크립트 정의 됨
</script>
</head>
<body>
<form action="test.jsp" METHOD="post">
<input type="text" name="id"><br/><br/>
<input type="password" name="pwd"><br/><br/>
<input type="submit" value="내용 전송">
<input type="reset" value="내용 지우기"><br><br>
<input type="button" value="버튼 모양"><br>
<input type="image" src="../images/image.png"><br>
<button>버튼모양</button><br>
</form>
</body>
</html>
댓글 없음:
댓글 쓰기