1. 기본 형식
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TITLE</title>
</head>
<body>
</body>
</html>
2. <h> 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <!-- 웹페이지에 추가 정보 전달 -->
<title>HTML5 Basic</title>
</head>
<body>
<h1> Hello World..!</h1>
<h2> Hello World..!</h2>
<h3> Hello World..!</h3>
<h4> Hello World..!</h4>
<h5> Hello World..!</h5>
<h6> Hello World..!</h6>
<!--
h는 6개 까지 있음
<h7> Hello World..!</h7>
<h8> Hello World..!</h8>
<h9> Hello World..!</h9>
<h10> Hello World..!</h10>
-->
</body>
</html>
3. css 파일 링크
//temp.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <!-- 웹페이지에 추가 정보 전달 -->
<title>HTML5 Basic</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<h1> Hello World..!</h1>
<h2> Hello World..!</h2>
<h3> Hello World..!</h3>
<h4> Hello World..!</h4>
<h5> Hello World..!</h5>
<h6> Hello World..!</h6>
<!--
h는 6개 까지 있음
<h7> Hello World..!</h7>
<h8> Hello World..!</h8>
<h9> Hello World..!</h9>
<h10> Hello World..!</h10>
-->
</body>
</html>
//style.css
h1 {
color :white;
background: black;
}
4. 태그
<h1>~<h6>
공백
< <
> >
& &
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <!-- 웹페이지에 추가 정보 전달 -->
<title>HTML5 Basic</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<h1>홍차</h1>
<br />
<h2>정의</h2>
<p>홍차는 백차, 녹차, 우롱차보다 더 많이 발효된 차의 일종이다. 동양에서는 찻물의 빛이 붉기 때문에 홍차라고 부르지만, 서양에서는 찻잎의 색깔때문에 'black tea'라고 부른다.</p>
<br />
<h2>등급</h2>
<p> 홍차는 여러가지로 등급이 매겨진다. 일반적으로 찻잎의 모양에 따른 등급과 가공 상태에 따른 등급을 조합하여 표시한다. </p>
<p>- 브로큰 페코</p>
<p>- 브로큰 페코 수숑</p>
<p>- 브로큰 오렌지 페코 패닝</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <!-- 웹페이지에 추가 정보 전달 -->
<title>HTML5 Basic</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<a href="http://hanb.co.kr">한빛 미디어 </a><br />
<a href="http://naver.com">네이버</a><br/>
<a href="http://daum.net">다음</a><br />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <!-- 웹페이지에 추가 정보 전달 -->
<title>HTML5 Basic</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<a href="http://hanb.co.kr">한빛 미디어 </a><br />
<a href="http://naver.com">네이버</a><br/>
<a href="http://daum.net">다음</a><br />
<a href="#alpha"> Alpha </a>
<a href="#beta"> Beta </a>
<a href="#gamma"> Gamma </a>
<hr />
<h1 id="alpha"> Alpha </h1>
<p>Alpha<br>Alpha<br>Alpha<br>Alpha<br>Alpha<br>Alpha<br>Alpha<br>Alpha<br>Alpha<br>Alpha<br></p>
<h1 id="beta">Beta</h1>
<p>Beta<br>Beta<br>Beta<br>Beta<br>Beta<br>Beta<br>Beta<br>Beta<br>Beta<br>Beta<br></p>
<h1 id="gamma">Gamma</h1>
<p>gamma<br>gamma<br>gamma<br>gamma<br>gamma<br>gamma<br>gamma<br>gamma<br>gamma<br>gamma<br></p>
</body>
</html>
윗첨자 아랫첨자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <!-- 웹페이지에 추가 정보 전달 -->
<title>HTML5 + CSS3 Text</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<h1><b>Lorem ipsum dolor sit amet</b></h1>
<h1><i>Lorem ipsum dolor sit amet</i></h1>
<h1><small>Lorem ipsum dolor sit amet</small></h1>
<h1>Lorem ipsum dolor <sub> sit amet </sub></h1>
<h1>Lorem ipsum dolor <sub> sit amet </sub></h1>
<h1><ins> Lorem ipsum dolor sit amet </ins></h1>
<h1><del> Lorem ipsum dolor sit amet </del></h1>
<hr />
<b>Lorem ipsum dolor sit amet</b><br/>
<i>Lorem ipsum dolor sit amet</i><br/>
<small>Lorem ipsum dolor sit amet</small><br/>
Lorem ipsum dolor <sub> sit amet </sub><br/>
Lorem ipsum dolor <sup> sit amet </sup><br/>
<ins> Lorem ipsum dolor sit amet </ins><br/>
<del> Lorem ipsum dolor sit amet </del><br/>
</body>
</html>
글머리 기호 목록 만들기
테이블 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <!-- 웹페이지에 추가 정보 전달 -->
<title>HTML5 + CSS3 Text</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<table border = "1">
<thead>
<tr>
<th></th>
<th> 월 </th>
<th> 화 </th>
<th> 수 </th>
<th> 목 </th>
<th> 금 </th>
</tr>
</thead>
<tbody>
<tr>
<td>1교시</td>
<td> 영어 </td>
<td> 국어 </td>
<td> 과학 </td>
<td> 미술 </td>
<td> 기술 </td>
</tr>
<tr>
<td>2교시</td>
<td> 도덕 </td>
<td> 체육 </td>
<td> 영어 </td>
<td> 수학 </td>
<td> 사회 </td>
</tr>
</tbody>
</table>
</body>
</html>
테이블태그 셀병합
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <!-- 웹페이지에 추가 정보 전달 -->
<title>HTML5 + CSS3 Text</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<table border = "1">
<tr>
<th colspan="6">한국의 차</th>
</tr>
<tr>
<th rowspan="6">뿌리차</th><td> 인삼차 </td>
<th rowspan="9">과일차</td><td> 수정과 </td>
<th rowspan="5">잎차</td><td> 뽕잎차 </td>
</tr>
<tr>
<td>당귀차</td><td>유자차</td><td>감잎차</td>
</tr>
<tr>
<td>생강차</td><td>구기자차</td><td>솔잎차</td>
</tr>
<tr>
<td>칡차</td><td>대추차</td><td>국화차</td>
</tr>
<tr>
<td>둥굴레차</td><td>오미자차</td><td>이슬차</td>
</tr>
<tr>
<td>마차</td><td>매실차</td><th rowspan="4">기타</th><td>두충차</td>
</tr>
<tr>
<th rowspan="3">곡물차</th>
<td>보리차</td><td>모과차</td><td>영지버섯차</td>
</tr>
<tr>
<td>옥수수차</td><td>산수유차</td><td>귤강차</td>
</tr>
<tr>
<td>현미차</td><td>탱자차</td><td>쌍화차</td>
</tr>
</table>
</body>
</html>
'이전것 > 개발' 카테고리의 다른 글
| HTML5 (3) 로그인 폼 (0) | 2016.07.05 |
|---|---|
| HTML5 (2) (0) | 2016.07.05 |
| module (2) (0) | 2016.05.09 |
| module (0) | 2016.05.02 |
| open | read (0) | 2016.04.11 |