HTML 글자크기, 글씨 진하게, 목록 표시, 테이블 태그, 이미지 태그 넣는 방법
SOURCE.HTML
<html>
<!--
html에서 주석은 이렇게 표시한다.
여러 줄에 걸쳐서 적을 수 있다.
주석부분은 웹 브라우저에서 무시한다.
-->
<!-- 헤더 영역
문서와 관련된 부가 정보를 정의한다.
-->
<head>
<!-- 부가적인 정보 정의 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- title태그는 문서의 제목을 표시한다. -->
<title>html연습1 </title>
</head>
<!-- 본문 영역
브라우저의 화면에 표시되는 영역
-->
<body>
<!--
<h1~h6> : 중요도에 따라서 쓰는 태그. 글씨 크기를 조절하는것이 아니다.
<p> : 다른 단락이라는 의미
<br> : 줄바꿈 -->
<h1>HTML </h1>
<h2>html의 역사 </h2>
<p>팀버너스리에 의해서 처음으로 시작되었다. 처음에는 연구논문을 공유할 목적으로 시작되었다. </p>
<p>
<strong>자바 </strong>에서는 서블릿/jsp 기술을 사용해서 다이나믹한 웹 페이지를 제작할 수 있다. <br />
특히, jsp기술은 html포맷 기반에서 개발하기 때문에 <br />훨씬 html친화적인 코드로 웹 개발이 가능 하다. <br />
자바를 이용한 웹 개발은 <a href='http://www.oracle.com'> 오라클</ a> 에서 배울 수 있다.
</p>
<h2>html의 문법 </h2>
<h3>html의 태그 </h3>
<h4>태그의 구분 </h4>
</body>
</html>
결과 화면
HTML 리스트 표현 방법
SOURCE.HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project </title>
</head>
<body>
<h1>리스트 엘리먼트 </h1>
<h2>ol태그 </h2>
<h3>이번주 개봉영화 순위 </h3>
<ol>
<li><a href="http://movie.daum.net/moviedetail/moviedetailMain.do?movieId=54361"><strong>매드맥스</strong> </a></li>
<li><a href="http://movie.daum.net/moviedetail/moviedetailMain.do?movieId=73750"> 어벤저스 </a></li>
<li>스파이 </li>
</ol>
<h3>떡볶이 만드는 방법 </h3>
<!-- 순서가 필요한 경우 ol -->
<ol type = "I">
<li>물을 끓인다. </li>
<li>떡을 넣는다. </li>
<li>각종 양념을 넣는다. </li>
<li>섞으면서 끓인다. </li>
</ol >
<h2>ul태그 </h2>
<h3>개강 예정 과목 </h3>
<!-- 순서가 필요없는 경우 ul -->
<ul style=" list-style-type square ;">
<li>아이폰 어플 개발 과정 </li>
<li>전자정부 표준 프레임워크 전문가 과정 </li>
<li>모바일 웹/앱 개발자 과정 </li>
</ul>
<!-- -->
<h3>보유중인 전자제품 </h3>
<ul>
<li>컴퓨터 </li>
<ul>
<li>데스크탑 </li>
<li>노트북 </li>
<ul>
<li>2011년 맥북 에어 </li>
<li>2013년 맥북 프로 </li>
</ul>
</ul>
<li>모바일 디바이스 </li>
<li>테블릿PC </li>
</ul>
</body>
</html>
결과화면
HTML 항목을 표현할때 사용 한다.
SOURCE.HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>정의목록 만들기 </title>
</head>
<body>
<h1>dl, dt, dd 태그 연습 </h1>
<h3>책 정보 </h3>
<!-- 항목과 그 것에 관한 설명. 많이 쓰이진 않음 -->
<dl>
<dt>제목 </dt>
<dd>오라클 sql과 pl/sql </dd>
<dt>저자 </dt>
<dd>서진수 </dd>
<dt>출판사 </dt>
<dd>생능출판사 </dd>
<dt>가격 </dt>
<dd>27,000원 </dd>
</dl>
</body>
</html>
결과화면
html 테이블(table) 기본 사용방법
SOURCE.HTML
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>테이블 만들기 </title>
</head>
<body>
<h1>table, tr, th, td 연습 </h1>
<table border="">
<tr>
<!-- tr은 행을 표시-->
<th>순위 </th>
<th>팀명 </th>
<th>승률 </th><!-- th 제목을 표시하는 셀-->
</tr>
<tr>
<td>1위 </td><!-- td는 테이블에 들어가는 값 -->
<td>롯데 자이언츠 </td>
<td>5할 </td>
</tr>
<tr>
<td>2위 </td>
<td>한화 이글스 </td>
<td>7할 </td>
</tr>
<tr>
<td>3위 </td>
<td>삼성 라이온스 </td>
<td>4할 </td>
</tr>
</table>
<h2>셀 병합 </h2>
<table border="1" style="width : 500px; ">
<tr>
<td>1 </td>
<td colspan="2"> colspan=2 2칸 병합</ td> <!-- 가로방향으로 2칸 병합하라는 뜻-->
</tr>
<tr>
<td>1 </td>
<td>1 </td>
<td>1 </td>
</tr>
<tr>
<td colspan="3"> colspan=3</ td>
</tr>
<tr>
<td colspan="2"> colspan=2</ td>
<td>1 </td>
</tr>
</table>
<table border="1">
<tr>
<td rowspan="2"> 1</ td>
<td>1 </td>
<td>1 </td>
</tr>
<tr>
<td>1 </td>
<td>1 </td>
</tr>
</table>
</body>
</html>
결과화면
HTML 테이블 병합 연습 해보기
SOURCE.HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>셀 병합연습 </title>
</head>
<body>
<h1>테이블 만들기 연습 </h1>
<table border="1" style="width : 500px; ">
<tr>
<td rowspan="2"> </ td>
<td colspan="3"> </ td>
<td colspan="2"> </ td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
결과화면
HTMLthread, tfoot, tbody, colgroup 사용방법
SOURCE.HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>테이블 만들기 </title>
<style>
tbody {
/* css 선택자
tbody의 값들을 가운데 정렬로 만드는 방법*/
text-align: center;
}
</style>
</head>
<body>
<h1>thead, tfoot, tbody, colgroup, col </h1>
<table border="1">
<!-- 너비 설정 -->
<colgroup>
<col width="100px;">
<col width="200px;">
<col width="150px;">
<col width="100px;">
</colgroup>
<thead>
<tr>
<th>번호 </th>
<th>상품명 </th>
<th>가격 </th>
<th>수량 </th>
</tr>
</thead>
<!-- 바닥글 표시-->
<tfoot>
<td colspan="2"> 합계</ td>
<td colspan="2">
4,000,000원</ td>
</tfoot >
<tbody>
<tr>
<td>1 </td>
<td>갤럭시 S6 </td>
<td>900,000 </td>
<td>2 </td>
</tr>
<tr>
<td>2 </td>
<td>아이폰 6 </td>
<td>700,000 </td>
<td>4 </td>
</tr>
<tr>
<td>3 </td>
<td>아이패드 레티나 </td>
<td>400,000 </td>
<td>6 </td>
</tr>
<tr>
<td>4 </td>
<td>갤럭시 탭S </td>
<td>600,000 </td>
<td>10 </td>
</tr>
</tbody>
</table>
</body>
</html>
결과화면
HTML 이미지 넣는 방법
SOURCE.HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>그림 표시하기 </title>
</head>
<body>
<h1>img 태그 연습 </h1>
<img src="images/after_boom.png" width="400px" height="250px;" />
<!-- 경로 표시
상대경로 표시법
- "/"로 시작하지 않는 경로
- 현재 페이지의 url에 대한 상대적인 경로다.
절대경로 표시법
- "/"로 시작하는 경로
-
-->
</body>
</html>
결과화면
HTML FORM 태그, input 태그 사용방법(체크박스, 라디오 버튼등)
SOURCE.HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>폼 만들기 </title>
</head>
<body>
<h1>form, input 태그 연습 </h1>
<form method="post" action="add.jsp">
<input type="hidden" name="jumin" value="740111-" />
<!-- type="hidden" 실제로 값은 있으나 화면에는 표시되지 않음 -->
이름 : <input type="text" name="username" value="홍길동" readonly="readonly" /><br/>
<!-- readonly 읽기만 가능, 수정이 안된다. -->
별명 : <input type="text" name="nick" value="짜룽나" disabled="disabled" />
<!-- disabled 비활성화-->
암호 : <input type="password" name="userpwd" maxlength="12" /><br/>
<!-- maxlength 입력받을 글자 수 제한 -->
성별 : <input type="radio" name="gender" checked="checked" /> 남자
<input type="radio" name="gender" />여자 <br />
<!-- name의 이름이 같기때문에 같은 그룹으로 인식하여 중복 체크가 불가
input박스의 name으로 서버에 정보가 저장된다-->
취미 : <input type="checkbox" name="hobby" value="sports" /> 운동
<input type="checkbox" name="hobby" value="game" /> 게임
<input type="checkbox" name="hobby" value="movie" /> 영화보기
<input type="checkbox" name="hobby" value="music" /> 음악<br/>
<!-- 체크박스는 중복이 허용된다. -->
파일 : <input type="file" name="attachedfile" />
<input type="submit" value="등록" /> <!-- 입력된 값들이 서버로 전달된다. -->
<input type="reset" value="취소" /> <!-- 입력된 값들을 초기화 -->
</form>
</body>
</html>
결과
HTML select, textarea 사용방법
SOURCE.HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>form 만들기 </title>
</head>
<body>
<h1>select, textarea 연습 </h1>
<form method="post" action="add.jsp">
이름 : <input type="text" name="username" /> <br />
학력 :
<select name="school">
<!-- 실제로 전달되는 값은 value 값이 전달된다. -->
<option value="E"> 초등학교</ option>
<option value="M"> 중학교</ option>
<option value="H" selected="selected">
고등학교</ option>
<!-- selected 특정 값을 미리 선택해 놓는 것-->
<option value="U"> 대학교</ option>
</select><br />
<!-- optgroup : option안에 그룹을 지어넣는 것 -->
부서 :
<select name="dept">
<optgroup label="영업팀">
<option value="s1"> 영업1팀</ option>
<option value="s2"> 영업2팀</ option>
<option value="s3"> 영업3팀</ option>
</optgroup>
<optgroup label="마케팅팀">
<option value="m1"> 마케팅1팀</ option>
<option value="m2"> 마케팅2팀</ option>
<option value="m3"> 마케팅3팀</ option>
</optgroup>
</select><br/>
메일 : <input type="text" name="email" /> @
<select name="email2" size="1">
<!-- size : 한 번에 보여주는 선택목록의 갯수 -->
<option value="hanmail.net"> hanmail.net</ option>
<option value="naver.com"> naver.com</ option>
<option value="gmail.com"> gmail.com</ option>
<option value="hotmail.com"> hotmail.com</ option>
</select><br/>
<!-- value속성에 값을 넣어 임의로 미리 값을 지정해 넣을 수 있다. -->
주소 : <input type="text" name="add" value="서대문구 북가좌동" /><br/>
<!-- textarea 여러 줄의 텍스트를 입력할 수 있다.
미리 값을 넣을 경우 value에 담는 것이 아니라 컨텐츠에 넣어야 한다.-->
메모 :
<textarea name="memo" rows="5" cols="35">
안녕 반가워
</textarea><br/>
<input type="submit" value="등록" /><!-- 반드시 submit이 있어야 한다. -->
</form>
</body>
</html>
결과
HTML 태그를 이용해 페이지 맨하단과 페이지 맨위로 이동 하는 방법
SOURCE.HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>뉴스 페이지 </title>
</head>
<body>
<p id="a">
<!-- 카페페이지를 링크설정하고 싶은 경우
html의 밑의 demo2로 이동
상위경로로 이동 후 해당 폴더를 찾아간다.
../ 한칸 위의 상위 경로-->
<h1>뉴스페이지 입니다. </h1>
<a href="../demo2/cafe.html" title="카페로 이동">카페 </a> <!-- title 풍선 도움말 -->
<a href="http://www.daum.net" target="_blank">
다음</ a> <!-- _blank 새창 열기 -->
<a href="#b"> 맨 아래로 이동 </a> <!-- id가 b인 곳으로 이동 -->
</p>
<h4>1 </h4>
<h4>1 </h4>
<h4>1 </h4>
<h4>1 </h4>
<h4>1 </h4>
<h4>1 </h4>
<h4>1 </h4>
<h4>1 </h4>
<h4>1 </h4>
<h4>1 </h4>
<h4>1 </h4>
<h4>1 </h4>
<h4>1 </h4>
<h4>1 </h4>
<h4>1 </h4>
<h4>1 </h4>
<h4>1 </h4>
<p>
</p>
<p id="b">
<a href="#a"> 맨 위로 이동</ a>
</p>
</body>
</html>
결과
