Day: 2022 1월 18

bookmark_borderHTML 기본

Posted on

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>

HTML 스타일

<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> 태그로 테이블 만들기

<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> 태그로 프레임 만들기

<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>

<div>태그로 레이어 만들기

<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>
...

Html Layout

  • <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 태그

<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 기본 태그

<input> : 값의 입력 및 제출

<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">

<select> : 콤보박스 선택

<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> : 메모(여러줄) 입력

<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> : 버튼

<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>
02-form-sample다운로드

멀티미디어와 이미지맵

HTTPD설치와 웹 게시

  • Httpd (hypertext transfer protocol daemon)
    HTTP 서비스 제공 데몬 서버
    포트 : 80
    서버 패키지 : apache
    서버에서 웹 페이지 전송 서비스를 제공해주는 서버 프로그램
  • Httpd 설치 및 권한설정
  • Html문서를 웹에 게시