HTML Basic [KOR]

HTML 기본

<!DOCTYPE html>
<html>
<head>  
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>  

</body>
</html>

head 태그는 설정 담당
body 태그는 실제로 화면에 보이는 내용

글씨 형식

<p>문단 나누기</p>
<h2>표 제목</h2>
<h3>h3</h3>
<h4>h4</h4>
<i>italic 글씨체</i>
<strong>굵게</strong><br>
<span><b><i>b는 굵게, span은 구역지정</i></b></span><br>
<hr>
<hr size="5" width="200" color="red">

문단 나누기

표 제목

h3

h4

italic 글씨체
굵게
b는 굵게, span은 구역지정

목록 만들기

<ul>
	<li>kor</li>
	<li>eng</li>
</ul>
<ol>
	<li>kor</li>
	<li>eng</li>	
	<ul>
		<li>국어</li>
		<li>영어</li>
	</ul>
</ol>

국어
영어

이미지 넣기

<img src="https://kyjmath.github.io/assets/Emogi/peking university logo.png">
<br>
<img src="https://kyjmath.github.io/assets/Emogi/peking university logo.png" align="left" width="5%" title="안녕">
<br>
<img src="https://kyjmath.github.io/assets/Emogi/peking university logo.png" align="right" width="50" title="안녕">
<br>

링크달기

<a href="http://www.google.com">구글 링크</a><br>
<a href="http://www.google.com" target="_new">구글 링크 기존창</a><br>
<a href="http://www.google.com" target="_blank">구글 링크 새로운창</a><br>
<a href="http://www.google.com" target="_blank"><img src="https://kyjmath.github.io/assets/Emogi/peking university logo.png" width="100"></a><br>
<a href="mailto:kyjmath@naver.com">나에게 메일전송</a>

구글 링크
구글 링크 기존창
구글 링크 새로운창

나에게 메일전송

테이블 만들기

<table border="1">
	<tr>
		<th>번호</th><th>이름</th><th>주&nbsp;&nbsp;&nbsp;소</th>
	</tr>
	<tr>
		<th>10</th><th>홍길동</th><th>서울</th>  <!-- th는 굵은글씨 가운데 정렬 -->
	</tr>
	<tr>
		<td>20</td><td>강영진</td><th>고양</th>  <!-- td는 얇은글씨 왼쪽 정렬 -->
	<tr>
</table>

</table>

<table border="1" width="300">
	<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>

번호	이름	주 소
10	홍길동	서울
20	강영진	고양

a		b	c
d	e	f

iframe

<iframe width="500" height="300" name="tom"></iframe><br>
<a href="http://www.manbangschool.org/" target="tom">누르면 내가 다닌 고등학교 사이트 ifame으로 보기</a>

누르면 내가 다닌 고등학교 사이트 ifame으로 보기

form tag

<form action="#" method="get" name="frm1">
irum : <input type="text" name="irum1" value="tom">
<br>
<input type="submit" value="전송1">
</form><br><br>

<form action="#" method="post" name="frm2">  <!-- post를 쓰면 상단에 value가 안뜬다 -->
irum : <input type="text" name="irum2" value="james">
<br>
<input type="submit" value="전송2">
</form>

<form action="#" method="get" name="frm3">
이름 : <input type="text" name="irum3" maxlength="20" value="홍길동" readonly="readonly">  <!-- readonly 는 읽기 고정 -->
<br>
아이디 : <input type="text" name="id" placeholder="투명글씨 고정">
<br>
비밀번호 : <input type="password" name="pwd">
<br>
파일선택 : <input type="file" name="fname">
<br>
설명내용 : <textarea rows="5" cols="60" name="cont">여러줄 입력창</textarea>
<br>
<input type="submit" value="전송3">
</form>

나이 : <input type="number" name="nai">
<br>
성별 :   <!-- 한개만 선택 가능 -->
<input type="radio" name="gender" value="m" checked>남&nbsp;&nbsp;
<input type="radio" name="gender" value="f">여&nbsp;&nbsp;
<br>
학년:
<input type="radio" name="gra" value="1" checked>1&nbsp;&nbsp;
<input type="radio" name="gra" value="2">2&nbsp;&nbsp;
<input type="radio" name="gra" value="3">3
<br>
언어:  <!-- 복수 선택 가능 -->
<input type="checkbox" name="lan" value="c">c언어&nbsp;&nbsp;
<input type="checkbox" name="lan" value="java">자바&nbsp;&nbsp;
<input type="checkbox" name="lan" value="python">파이썬&nbsp;&nbsp;
<br>
지역:  <!-- 선택 박스 -->
<select name="site"> 
	<option value="c" selected="selected">시청</option>
	<option value="j">종로</option>
	<option value="k">강남</option>
</select>
<br>
숨김<input type="hidden" name="hello" value="korea">
<br>
<input type="submit" value="전송">
<input type="reset" value="취소">
<input type = "button" value="검사후 전송" onclick="javascript:alert('hi')">

나이 :
성별 : 남   여
학년: 1   2   3
언어: c언어   자바   파이썬
지역:
숨김

</body> </html>

Categories : Practice