Java

html과 jsp 맛보기

걷는 청년 2024. 7. 24. 11:55

 

 

html의 기초와 틀 만들기

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
하이루 환영 ㅋ<br>
Tag : 문서의 구조와 형태를 표현하는 명령어로 <> 안에 적는다.<br>
<!-- html 주석 -->
Tag 출력 형태에 따른 2가지 그룹<br>

1) block 방식 : 페이지 나누기가 실행 : p, h, div ...<br>
<p>문단 나누기</p>
<h2>표제용</h2>
<div>블럭(영역) 확보용</div>
기타 여러 태그가 있다.
<hr>

2) inline 방식 : 같은 행에 연속 출력 : b, i, span ...<br>
<b>페이지</b>
<i>작성을 위한</i>
<strong>여러가지</strong>
<span>태그들의</span>
기능을 확인한다.
<br>
영역확보 태그 div와 span 비교<br>
<span style="background-color: yellow">구역 확보</span>
<span style="background-color: cyan">행의 일부 영역만 확보</span>
<br>
<div style="background-color: silver">행 전체 영역을 확보</div>
<hr size="10" color="0034ff" width="100">
<div><b>태그 안에 태그 작성</b><b><i>태그 안에 태그 작성</i></b></div>
2<sup>3</sup>H<sub>2</sub>O
<br>
<pre>
적어		준
	대로		그대로
표		현	됨
</pre>
<br>
특수 기호 사용 : &nbsp;특수&nbsp;&nbsp;&nbsp;기호&nbsp;&nbsp;사용 &quot; &lt; &gt; &amp;
<br>
목록 만들기
<ul>
	<li>김밥</li>
	<li>주먹밥</li>
</ul>

<ol>
	<li>김밥</li>
	<li>주먹밥</li>
</ol>

<menu>
	<li>김밥</li>
	<li>주먹밥</li>
</menu>

<ul>
	<li>종속 태그</li>
	<li>하드웨어
		<ol>
			<li>컴퓨터</li>
			<li>마우스</li>
		</ol>
	</li>
</ul>

</body>
</html>

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
이미지 출력<br>
<img title="그림" src="images/pic.jpg" width="200" height="200">
<br>
<img src="https://t1.daumcdn.net/daumtop_deco/images/pctop/2023/logo_daum.png">
<br>
<embed src="images/tetris.swf" autostart="true">
<br>
a 태그 : 하이퍼 링크 가능<br>
<a href="test1.html">test1 문서</a>보기<br>
<a href="https://127.0.0.1:80/test1.html" target="_self">test1 문서(_self)</a>보기<br>
<a href="test1.html" target="_new">test1 문서(_new)</a>보기<br>
<a href="test1.html" target="_blank">test1 문서(_blank)</a>보기<br>
<a href="https://www.naver.com">네이버 출발</a><br>
<a href="https://www.naver.com" target="_new">네이버 출발(_new)</a><br>

<a href="test1.html">
	<img title="연습" src="images/pic.jpg" width="200" height="200">
</a>
<a href="files/book1.xlsx">엑셀문서</a>
<a href="files/code.txt">텍스트문서</a>
<a href="files/Hello.txt">텍스트문서</a>

<a href="mailto:pykwon@hanmail.net">pykwon에게 메일 전송</a>
<hr>
<a href="META-INF/aaa.html">META-INF 폴더 내 파일</a><br><!-- 못감 META-INF, WEB-INF는 외부에서 호출할 수 없는 영역임 -->
<a href="WEB-INF/bbb.html">WEB-INF 폴더 내 파일</a><br><!-- 중요한 파일 넣는 영역 -->

<a href="kbs/a.html">kbs 폴더 내 파일</a><br>
<a href="/wpro1/kbs/a.html">kbs 폴더 내 파일</a><br>

<a href="/kbs/a.html">kbs 폴더 내 파일</a><br><!-- /를 쓰면 현재 content의 root -->
<a href="kbs/sbs/b.html">sbs 폴더 내 파일</a><br>
<a href="kbs/sbs/tvn\c.html">tvn 폴더 내 파일</a><br>
<a href="mbc/c.html">mbc 폴더 내 파일</a><br>

<pre>
.
.
.
.
.
.
.
</pre>

</body>
</html>

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
table 태그 연습<br>
<table border="1">
<thead>
	<tr>
		<th>제목1</th><th>제목2</th><th>제목3</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>내용1임을 알림</td><td>내용2</td><td>내용3</td>
	</tr>
	<tr>
		<td>내용4</td><td>내용5</td><td>&nbsp;</td>
	</tr>
</tbody>
</table>
<br>
<table border="2" bgcolor="yellow" style="background-image: url('images/snow.png')">
	<caption>상품자료</caption>
	<tr bgcolor="red">
		<td bgcolor="silver"><b>상품명</b></td>
		<td>수량</td>
		<td>단가</td>
	</tr>
	<tr>
		<td>컴퓨터</td>
		<td align="center">2</td>
		<td><img src="images/pic.jpg" width="300"></td>
	</tr>
	<tr>
		<td>a</td>
		<td>
			<table border="3">
			<tr>
				<td><a href="https://www.daum.net">daum</a></td>
				<td>나</td>
			</tr>
			</table>
		</td>
		<td></td>
	</tr>
</table>
<br> <!-- 행 병합 row span, 열 병합 col span -->
<table border="1" width="200">
<tr>
	<td colspan="2">a</td>
	<td>b</td>
	<td rowspan="2">c</td>
</tr>
<tr>
	<td>d</td>
	<td>e</td>
	<td>f</td>
	
</tr>
</table>
<table border="1" width="300" style="padding: 5px">
<tr>
	<td rowspan="2">1</td>
	<td colspan="2">2</td>
	<td rowspan="2">3</td>
</tr>
<tr>
	<td colspan="2">4</td>
</tr>
<tr>
	<td>5</td>
	<td>6</td>
	<td>7</td>
	<td rowspan="2">8</td>
</tr>
<tr>
	<td>9</td>
	<td colspan="2">10</td>
</tr>
</table>
<br><br>
한 화면에서 여러 개의 html 문서를 보고자 할 경우 iframe을 사용한다
<iframe src="test1.html" name="star" width="99%" height="300"></iframe>
<br>
<a href="test2.html" target="star">test2 보기(iframe에서)</a>
<p/>
이미지 맵 : 이미지를 여러 영역으로 지정해 각 영역마다 link를 걸 수 있다.
<br>
<img src="images/snow.png" width="150" usemap="#snow"/>
<map name="snow">
	<area shape="rect" coords="0,0,50,50" href="https://www.naver.com">
	<area shape="rect" coords="50,100,100,200" href="https://www.w3.org">
</map>

</body>
</html>

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="홍길동">
<meta name="subject/title" content="연습용 홈피">
<meta name="date" content="2024-05-13">

<!-- 검색 로봇에 의해 검색을 당할 자료를 적음 -->
<meta name="keyword" content="html 정보 설명">
<meta name="description" content="홈페이지 작성 정보">
<!-- 
<meta http-equiv="refresh" content="3; url='test1.html'">
 -->
<title>Insert title here</title>
</head>
<body>
form tag : 사용자와 정보를 소통할 수 있는(상호작용이 가능한) 태그
<hr>
<h2>개인정보 입력창</h2>
<form action="#" name="frm" method="get">
1. 이름 : <input type="text" id="ir" name="irum" size="10" maxlength="10" value="tom"><br>

2. 아이디 : <input type="text" name="id"><br>

3. 비번 : <input type="password" name="pwd" value="123"><br>

4. 사진로딩 : <input type="file" name="fname"><br>

5. 자기소개 : <textarea rows="5" cols="60" name="my"></textarea><br>

6. 성별 : 
<input type="radio" name="gender" values="m">남자&nbsp;&nbsp;&nbsp;
<input type="radio" name="gender" values="f" checked="checked">여자
<br>

7. 스포츠 : <input type="checkbox" name="sports" value="축구">축구&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="sports" value="야구">야구&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="sports" value="농구">농구<br>

8. 교통수단 : <select name="tr" multiple="multiple"><!-- size="1" -->
<option value="도보">도보
<option value="버스">버스
<option value="지하철">지하철
</select><br>

9. 숨김 : <input type="hidden" name="hello" value="hi"><br><br>

<input type="submit" value="전 송">

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

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>* 게시판 글 쓰기 *</h2>
<form action="border.jsp" name="frm" method="get">
<table border="1">
<tr>
		<td>이름 : </td>
		<td><input type="text" name="writer"></td>
	</tr>
	<tr>
		<td>제목 : </td>
		<td><input type="text" name="subject" placeholder="제목을 주세요"></td>
	</tr>
	<tr>
		<td>나이 : </td>
		<td><input type="number" name="age"></td>
	</tr>
	<tr>
		<td>이메일 : </td>
		<td><input type="text" name="email"></td>
	</tr>
	<tr>
		<td>글내용 : </td>
		<td><textarea rows="10" cols="50" name="content"></textarea></td>
	</tr>
	<tr>
		<td colspan="2" align="center">
		<input type="submit" value="전송">
		<input type="reset" value="취소"></td>
	</tr>
</table>
</form>

</body>
</html>

 

 

 

 

jsp 맛보기

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
//자바 영역
String irum = request.getParameter("writer");
String jemok = request.getParameter("subject");
String nai = request.getParameter("age");
String mail = request.getParameter("email");
String content = request.getParameter("content");

System.out.println(irum + " " + jemok + " " + nai + " " + content);


 %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- html 영역 -->
작성 이름은 <%=irum %> <br>
제목은 <%=jemok %><br>
졸리다 <%=nai %><br>
메일은~ <%=mail %><br>
이야아아아 <%=content %>

</body>
</html>

 

'Java' 카테고리의 다른 글

mvc 패턴  (0) 2024.07.30
Servlet과 Cookie  (0) 2024.07.30
웹 서버 만들기 기초  (1) 2024.07.24
네트워크, URL, 서버  (0) 2024.07.24
Stream, 람다식 DB 연동 활용  (1) 2024.07.24

'Java'의 다른글

  • 현재글html과 jsp 맛보기

관련글

티스토리툴바