웹프로그래밍/실습
HTML) form, frame, css
by LaTale
2016. 9. 30.
실습문제 1) <form> 태그와 <table> 태그를 사용하여 회원가입 화면을 작성하시오.
<실행 화면> 접기
접기
<소스 파일> 접기
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71 <HTML>
<HEAD>
<TITLE> 실습과제1 </TITLE>
</HEAD>
<BODY>
<font size = "6" ><b><CENTER> 회원가입</CENTER></b></font>
<br><br>
<hr size = "5" color = "red" >
<br><br>
<form>
<TABLE border = "1" >
<TR>
<TD><CENTER> 아이디</CENTER></TD>
<td colspan = "3" >
<INPUT TYPE= "text" NAME= "id" size = 16 >
<font color = "red" size = "2" > *(4~16자)</font>
</td>
</TR>
<TR>
<TD><CENTER> 비밀번호</CENTER></TD>
<TD>
<INPUT TYPE= "text" NAME= "pwd" size = 16 >
<font color = "red" size = "2" > *(4~16자)</font>
</TD>
<TD><CENTER> 성명</CENTER></TD>
<TD>
<INPUT TYPE= "text" NAME= "name" >
</TD>
</TR>
<TR>
<TD><CENTER> 성별</CENTER></TD>
<TD>
<CENTER>
<INPUT TYPE= "radio" NAME= "r1" value = "m" > 남자
<INPUT TYPE= "radio" NAME= "r1" value = "f" > 여자
</CENTER>
</TD>
<TD><CENTER> 취미</CENTER></TD>
<TD>
<CENTER>
<INPUT TYPE= "checkbox" NAME= "c1" value = "a" > 여행
<INPUT TYPE= "checkbox" NAME= "c2" value = "b" > 잠자기
</CENTER>
</TD>
</TR>
<TR>
<TD><CENTER> H.P</CENTER></TD>
<TD colspan = "3" >
<INPUT TYPE= "text" NAME= "hp1" size = 3 > -
<INPUT TYPE= "text" NAME= "hp2" size = 3 > -
<INPUT TYPE= "text" NAME= "hp3" size = 3 >
</TD>
</TR>
<TR>
<TD><CENTER> 자기소개</CENTER></TD>
<TD colspan = "3" >
<TEXTAREA NAME= "i" ROWS= "20" COLS= "70" ></TEXTAREA>
</TD>
</TR>
<TR>
<TD colspan = "4" >
<CENTER>
<INPUT TYPE= "submit" value = "확인" >
<INPUT TYPE= "reset" value = "취소" >
</CENTER>
</TD>
</TR>
</TABLE>
</form>
</BODY>
</HTML>
접기
<다운로드>
실습문제 2) 폼과 입력 태그를 이용하여 다음과 같이 출력되는 HTML문서를 작성하시오. (직업: 학생, 군인, 공무원, 회사원, 자영업)
<실행 화면> 접기
접기
<소스 파일> 접기
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54 <HTML>
<HEAD>
<TITLE> 실습과제3 </TITLE>
</HEAD>
<BODY>
<font size = "6" > <U><CENTER> 실습 3</CENTER></U> </font>
<br>
<form>
<div> 1. 성별 <br>
남 : <INPUT TYPE= "radio" NAME= "r1" value = "m" >
여 : <INPUT TYPE= "radio" NAME= "r1" value = "f" >
</div>
<br>
<div> 2. 나이 <br>
<INPUT TYPE= "text" NAME= "age" size = "5" > 세
</div>
<br>
<div> 3. 직업 <br>
<SELECT NAME= "job" >
<OPTION VALUE= "1" SELECTED > 학생
<OPTION VALUE= "2" > 군인
<OPTION VALUE= "3" > 공무원
<OPTION VALUE= "4" > 회사원
<OPTION VALUE= "5" > 자영업
</SELECT>
</div>
<br>
<div> 4. 취미(중복선택가능) <br>
<INPUT TYPE= "checkbox" NAME= "c1" value = "a" > 수영
<INPUT TYPE= "checkbox" NAME= "c2" value = "b" > 스키
<INPUT TYPE= "checkbox" NAME= "c3" value = "c" > 인라인
<INPUT TYPE= "checkbox" NAME= "c4" value = "d" > 볼링
<INPUT TYPE= "checkbox" NAME= "c5" value = "e" > 기타(etc)
</div>
<br>
<div> 5. 하고 싶은 말씀을 적어주세요. <br>
<TEXTAREA NAME= "q" ROWS= "5" COLS= "30" > 150자 이내로 적어주세요.</TEXTAREA>
</div>
<br>
<div> 6. 첨부할 파일이 있으면 보내주세요. <br>
<INPUT TYPE = "file" NAME = "f1" >
</div>
<br>
<INPUT TYPE= "submit" value = "보내기" >
<INPUT TYPE= "reset" value = "취소" >
</form>
</BODY>
</HTML>
접기
<다운로드> - 익스는 다르게 나올 수 있음.
실습문제 3) Frame을 사용하여 자신의 홈페이지를 만들고 각 메뉴에 맞는 내용을 <font>, <img>, <a> 태그를 사용하여 만들어 보시오.
<실행 화면> 접기
접기
<소스 파일> 접기
[#M_<소스_메인>|접기|
1
2
3
4
5
6
7
8
9 <HTML>
<HEAD>
<TITLE> 실습과제 2 </TITLE>
</HEAD>
<FRAMESET cols = "200, *" >
<FRAME SRC= "4.3_left.html" NAME= "left" >
<FRAME SRC= "4.3_right.html" NAME= "right" >
</FRAMESET>
</HTML>
접기 <소스_left> 접기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 <HTML>
<HEAD>
<TITLE> 실습과제 2 </TITLE>
</HEAD>
<BODY>
<font size = "5" > <CENTER> 메뉴</CENTER> <font>
<br><br>
<font><CENTER><A HREF= "4.3_right.html" target = "right" > HOME</A></CENTER></font>
<br>
<font><CENTER><A HREF= "4.3_in.html" target = "right" > 나의 소개</A></CENTER></font>
<br>
<font><CENTER><A HREF= "4.3_img.html" target = "right" > 나의 사진</A></CENTER></font>
<br>
<font><CENTER><A HREF= "4.3_fa.html" target = "right" > 나의 즐겨찾기</A></CENTER></font>
</BODY>
</HTML>
접기 <소스_right> 접기
1
2
3
4
5
6
7
8
9
10
11
12
13 <HTML>
<HEAD>
<TITLE> 실습과제 2 </TITLE>
</HEAD>
<BODY>
<font size = "6" ><CENTER> 저의 홈페이지에 오신 것을 환영합니다</CENTER></font>
<br><br><br><br>
<font size = "3" ><CENTER> 메뉴를 선택하여 저의 홈페이지를 구경하세요~</CENTER></font>
<br><br>
<CENTER><IMG SRC= "logo.jpg" WIDTH= "300" HEIGHT= "100" BORDER= "0" ></CENTER>
</BODY>
</HTML>
접기 <소스_소개> 접기
1
2
3
4
5
6
7 <html>
<body>
<center><h1> 나의 소개 </h1>
123456789
</center>
</body>
</html>
접기 <소스_사진> 접기
1
2
3
4
5
6
7 <html>
<body>
<center><h1> 나의 사진 </h1>
<img src = "Chrysanthemum.jpg" >
</center>
</body>
</html>
접기 <소스_즐겨찾기> 접기
1
2
3
4
5
6
7 <html>
<body>
<center><h1> 나의 즐겨찾기 </h1>
<A HREF= "http://www.naver.com" > 즐겨찾기</A>
</center>
</body>
</html>
접기 _M#]
<다운로드> - 프레임때문에 파일이 여러개인데 접기 안에 접기가 들어가져서 다행이다..
실습문제 4) 실행 결과가 다음 화면과 같은 HTML 문서를 작성하시오. (외부 스타일 시트 사용)
<실행 화면> 접기
접기
<소스 파일> 접기
[#M_|접기|
1
2
3
4
5
6
7
8
9
10
11
12
13 <html>
<head>
<title> CSS </title>
<link rel = "stylesheet" type = "text/css" href = "sheet.css" >
</head>
<body>
<h1> 안녕하세요. CSS를 함께 알아가 봅시다~~</h1>
<br>
<h2> 외부 스타일 시트를 이용하여 html을 작성해 봅시다~~</h2>
<br>
<h3> 외부 스타일 시트는 다양한 스타일을 만들어 적용시킬 수 있습니다</h3>
</body>
</html>
접기 <CSS파일> 접기
1
2
3 h1 {background-color : yellow ; color : blue ; font-style :italic }
h2 {background-color : black ; color : white }
h3 {background-color : #FF80FF ; color : red }
접기 _M#]
<다운로드>
하이라이터에서 = 앞 공백을 없애니 색 칸이 사라짐.
HTML을 3주만에 끝내다니.. 했던 것들이라 어렵진 않지만 이래도 되나 모르겠다.
4.1.html
4.3.zip
sheet.css
