HTML Tutorial
HTML TAG LIST
Html 기본 태그
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">
<a href="https://www.w3schools.com">
<img border="0" alt="W3Schools" src="logo_w3s.gif" width="100" height="100">
</a>
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
<b>This text is bold</b>
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
<p>Unordered HTML List</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<p>Ordered HTML List</p>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Table, Iframe, Layer 만들기
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
...
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
...
<header> – Defines a header for a document or a section<nav> – Defines a set of navigation links<section> – Defines a section in a document<article> – Defines an independent, self-contained content<aside> – Defines content aside from the content (like a sidebar)<footer> – Defines a footer for a document or a section<details> – Defines additional details that the user can open and close on demand<summary> – Defines a heading for the <details> element
Form 태그 설문양식 만들기
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Form 기본 태그
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
<input type="submit" value="Submit">
</form>
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<textarea id="w3review" name="w3review" rows="4" cols="50">
At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.
</textarea>
<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction() {
document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>
HTML5에 추가된 form 태그와 속성
<input type="color">
<input type="file">
<input type="number" min="1" max="5">
설문조사 페이지 실습
<!DOCTYPE html>
<html> <body>
<h2>설문조사</h2>
<form>
이름 : <input type="text"><br>
비밀번호 : <input type="password"><br>
학년을 선택하세요<br>
<div>
<input type="radio">1학년<br>
<input type="radio">2학년<br>
<input type="radio">3학년<br>
<input type="radio">4학년<br>
</div>
<br>
담당자에게 하고 싶은 말을 쓰세요.<br>
<textarea></textarea>
<input type="submit">
<input type="reset">
</form>
</body> </html>
멀티미디어와 이미지맵
HTTPD설치와 웹 게시
- Httpd (hypertext transfer protocol daemon)
HTTP 서비스 제공 데몬 서버
포트 : 80
서버 패키지 : apache
서버에서 웹 페이지 전송 서비스를 제공해주는 서버 프로그램
- Httpd 설치 및 권한설정
- Html문서를 웹에 게시
