HTML이란?

웹 페이지를 만들기 위한 프로그래밍 언어

＜＞← 이 괄호를 태그라고 부른다.
　 문자를 이 태그로 둘러싸는 것으로 표제나 링크의 역할이 된다.
태그의 내용은 h1이나 a 등 여러 종류가 있다.
　 시작 태그와 종료 태그가 있지만, 종료 태그의 경우는 아래와 같이/가 필요.

예.html

<h1>h1のタグで文字を囲むと大見出しとして表示されるよ</h1>

웹에서는 이런 식으로 표시된다
↓

h 태그

웹에서 제목을 붙이고 싶을 때 사용.
h1~h6까지 종류가 있다.
h1은 가장 큰 문자로 표시되고 h6은 가장 작은 문자로 표시됩니다.

예.html

<h1>h1はこれくらいの大きさ</h1>
<h2>h2はこれくらいの大きさ</h2>
<h3>h3はこれくらいの大きさ</h3>
<h4>h4はこれくらいの大きさ</h4>
<h5>h5はこれくらいの大きさ</h5>
<h6>h6はこれくらいの大きさ</h6>

웹
↓

p 태그

단락을 나타낸다

예.html

<p>段落を表すよ</p>
ｐで囲まないと改行されないよ。
ここでは改行されてるけど
Webで表示したときに改行されてないでしょ？

웹
↓

li 태그 · ul 태그 · ol 태그

목록 만들기
반드시 ul+li 혹은 ol+li 의 세트로 사용한다
ul+li 는 리스트의 앞에 흑점이 붙는다
ol+li 는 목록 앞에 번호가 매겨진다.

예: ul 및 li 세트.html

<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>メロン</li>
</ul>

웹
↓


예: ol 및 li 세트.html

<ol>
  <li>りんご</li>
  <li>みかん</li>
  <li>メロン</li>
</ol>

웹
↓


ul 혹은 ol 로 li 를 둘러싸는 경우는 반드시 글자 내림한다.
자세한 내용은 이 페이지의 맨 아래 표제의 부모 요소와 자식 요소를 작성하십시오.

a 태그

링크 만들기

예.html

<a>GoogleへGo！</a>

웹
↓


Web상에서는 표시되고 있지만, 문자가 표시되고 있는 것만으로 Google에는 연결되지 않는다.
하지만 링크 대상 URL을 지정하지 않았습니다.
어떻게 할까 하면 ...
시작 태그에 href="URL"을 추가합니다.

예.html

<a href="https://www.google.co.jp">GoogleへGo！</a>

Google에 Go! 문자를 클릭하면 ...



제대로 Google에 연결되었습니다

img 태그

이미지 표시
로 작성
종료 태그가 없다 (문자를 둘러쌀 필요가 없기 때문에)

예.html

<img src="https://2.bp.blogspot.com/-HGO1Xeo-UCU/UV1JGezkNhI/AAAAAAAAPS4/kIa5Y9sWfZs/s400/hiyoko_baby.png">

웹
↓

요소와 속성

a 태그나 img 태그의 개시 태그에 여러가지 담겨 있지만, a 태그로 설명하면 이하와 같다.

예.html

<a href="https://www.google.co.jp">GoogleへGo！</a>

a ... 요소 이름
href ... 속성 이름
htps //w w. 오, ぇ. 이. jp "... 속성 값

href="htps //w w. 오, ぇ. 이. jp "··· 속성 이름 + 속성 값 = 속성

https://www.google.co.jp">Google에 Go!</a> ... 요소

＜a＞＜/a＞ ・・・ 태그(시작 태그와 종료 태그)

위를 a 요소, a 태그 등이라고합니다.
요소명에 요소나 태그를 붙여 부른다(그 밖에도 p태그나 p요소, img태그나 img요소 등)

요소명과 속성명의 사이는 공백을 낸다(예:속성명과 속성치의 사이에는 = 을 붙인다 (예: href="htps //w w. 오, ぇ. 이. jp ")
요소 이름은 ""로 묶습니다(예: "htps //w w. 오, ぇ. 이. jp ")

즉 ...

<要素名 属性名="属性値">

된다.

부모 요소와 자식 요소

예: ul 및 li 세트.html

<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>メロン</li>
</ul>

위와 같이 요소를 요소로 둘러싸는(ul을 li로 둘러싸는) 것을 중첩이라고 한다.
이 때 ul을 부모 요소, li를 자식 요소라고합니다.



러시아의 Matryoshka 같은 이미지.
가장 큰 matryoshka가 ul이라면
두 번째로 큰 matryoshka가 li가된다.

이 중첩 구조로 하는 경우는 반드시 들여쓰기(글자 내림)한다.
아래와 같이 들여쓰기를 하지 않으면 부모와 자식 관계를 알기 어렵다.
키보드의 Tab 키를 누르면 들여 쓰기가 가능합니다.

들여쓰기 없음.html

<ul>
<li>りんご</li>
<li>みかん</li>
<li>メロン</li>
</ul>

들여 쓰기 있음.html

<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>メロン</li>
</ul>