1. HTML - 수업소개
2. HTML - 기술소개
3. HTML - 기본문법 1
4. HTML - 기본문법 2
5. HTML - 하이퍼텍스트와 속성
6. HTML - 맥에서 텍스트 에디트 주의사항
7. HTML - 태그의 중첩과 목록
8. HTML - 문서의 구조
9. HTML - DOCTYPE
10. HTML - 웹사이트 만들기
11. HTML - 개발도구
12. HTML - 변천사와 통계
13. HTML - 단락 : p태그
<예제> p.html
<html>
<head><meta charset="utf-8"></head>
<body>
<p>HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Along with CSS, and JavaScript, HTML is a cornerstone technology, used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.[1] Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language.</p>
<p>HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.</p>
<p>The language is written in the form of HTML elements consisting of tags enclosed in angle brackets . Browsers do not display the HTML tags and scripts, but use them to interpret the content of the page.</p>
</body>
</html>
14. HTML - 줄바꿈 : br
<예제> br.html
<html>
<head><meta charset="utf-8"></head>
<body>
HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Along with CSS, and JavaScript, HTML is a cornerstone technology, used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.[1] Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language.<br><br><br>
HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.<br><br><br>
The language is written in the form of HTML elements consisting of tags enclosed in angle brackets. Browsers do not display the HTML tags and scripts, but use them to interpret the content of the page<br><br><br>
</body>
</html>15. HTML - 이미지 : img
<예제> img.html
<html>
<body>
<img src="img.jpg" height="300" alt="산 이미지" title="산 이미지">
</body>
</html>16. HTML - 표1 : 기본
<예제> table1.html
<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
<tr>
<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>
17. HTML - 표2 : 구조
<예제> table2.html
<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
<thead>
<tr>
<th>이름</th> <th>성별</th> <th>주소</th> <th>회비</th>
</tr>
</thead>
<tbody>
<tr>
<td>최진혁</td> <td>남</td> <td >청주</td> <td>1000</td>
</tr>
<tr>
<td>최유빈</td> <td>여</td> <td>청주</td> <td>500</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>합계</td> <td></td> <td></td> <td>1500</td>
</tr>
</tfoot>
</table>
</body>
</html>18. HTML - 표3 : 병합
<예제> table3.html
<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
<thead>
<tr>
<th>이름</th> <th>성별</th> <th>주소</th> <th>회비</th>
</tr>
</thead>
<tbody>
<tr>
<td>최진혁</td> <td>남</td> <td rowspan="2">청주</td> <td>1000</td>
</tr>
<tr>
<td>최유빈</td> <td>여</td> <td>500</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">합계</td> <td>1500</td>
</tr>
</tfoot>
</table>
</body>
</html>19. HTML - form 기본
<예제> form.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/login.php">
<p>아이디 : <input type="text" name="id"></p>
<p>비밀번호 : <input type="password" name="pwd"></p>
<p>주소 : <input type="text" name="address"></p>
<input type="submit">
</form>
</body>
</html>20. HTML - form : 문자입력
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="">
<p>text : <input type="text" name="id" value="default value"></p>
<p>password : <input type="password" name="pwd" value="default value"></p>
<p>textarea :
<textarea cols="50" rows="2">default value</textarea>
</p>
</form>
</body>
</html>21. HTML - form : dropdown list
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/color.php">
<h1>색상</h1>
<select name="color">
<option value="red">붉은색</option>
<option value="black">검은색</option>
<option value="blue">파란색</option>
</select>
<h1>색상2 (다중선택)</h1>
<select name="color2" multiple>
<option value="red">붉은색</option>
<option value="black">검은색</option>
<option value="blue">파란색</option>
</select>
<input type="submit">
</form>
</body>
</html>22. HTML - form : radio, checkbox
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/order.php">
<p>
<h1>색상(단일선택)</h1>
붉은색 : <input type="radio" name="color" value="red">
검은색 : <input type="radio" name="color" value="black" checked>
파란색 : <input type="radio" name="color" value="blue">
</p>
<p>
<h1>사이즈(다중선택)</h1>
95 : <input type="checkbox" name="size" value="95">
100 : <input type="checkbox" name="size" value="100" checked>
105 : <input type="checkbox" name="size" value="105" checked>
</p>
<input type="submit">
</form>
</body>
</html>23. HTML - form : button
<html>
<head><meta charset="utf-8"></head>
<body>
<form action="http://localhost/form.php">
<input type="text">
<input type="submit" value="전송">
<input type="button" value="버튼" onclick="alert('hello world')">
<input type="reset">
</form>
</body>
</html>24. HTML - form : hidden
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/hidden.php">
<input type="text" name="id">
<input type="hidden" name="hide" value="egoing">
<input type="submit">
</form>
</body>
</html>25. HTML - form : label
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/hidden.php">
<input type="text" name="id">
<input type="hidden" name="hide" value="egoing">
<input type="submit">
</form>
</body>
</html>26. HTML - form : method
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/method.php" method="post">
<input type="text" name="id">
<input type="password" name="pwd">
<input type="submit">
</form>
</body>
</html>27. HTML - form : 파일 업로드
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="profile">
<input type="submit">
</form>
</body>
</html>28. HTML - form : 정보로서 HTML
29. HTML - font
30. HTML - meta 태그
31. HTML - 의미론적인 태그
32. HTML - 검색엔진최적화 1
33. HTML - 검색엔진최적화 2
34. HTML - 검색엔진최적화 3
35. HTML - 검색엔진최적화 4 : 링크
36. HTML - 검색엔진최적화 5 : 이미지와 제목
37. HTML - 검색엔진최적화 6 : robotstxt & sitemap
38. HTML - 검색엔진최적화 7 : 페이지랭크
39. HTML - 웹 개발자 도구
40. HTML - 모바일 지원
41. HTML - HTML5의 새로운 제출 양식 1
42. HTML - HTML5의 새로운 제출 양식 2
43. HTML - html form 3 : 새로운속성들
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="login.php" autocomplete="on">
<input type="text" name="id" placeholder="id를 입력해주세요." autofocus>
<input type="password" name="password" autocomplete="off" placeholder="비밀번호를 입력해주세요.">
<input type="submit">
</form>
</body>
</html>44. HTML - html form 4 : 입력 값 체크
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="register.php">
<input type="text" name="id" placeholder="아이디를 입력" required pattern="[a-zA-Z].+[0-9]">
<input type="email" name="email" placeholder="이메일 입력">
<input type="submit">
</form>
</body>
</html>
Leyn(레인)