인디안 보호구역
[HTML] HTML 기초 예제, HTML Element - 3강, 4강 강의노트 본문
- 문서의 머릿말을 표현하는 방법
- 단락을 구분하는 방법
- 다른 사이트로 연결하는 링크를 거는 방법
- 웹에 이미지, 그림 파일을 표현하는 방법
- HTML Headings
문서의 머릿말을 표현하는 방법으로 <h1>부터 <h6>까지 구분되어있다.
ex.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
1이 제일 크고, 6이 제일 작다.
- HTML Paragraphs
단락에 대한 태그는 p로 포현된다.
- HTML Links
링크에 대한 태그는 a로 포현된다.
ex.
<a href="http://indie-an.tistory.com">This is a link</a>
This is a link라고 쓰여진 링크를 누르면 해당 사이트로 연결된다.
- HTML Images
그림, 사진 등을 표현하는 이미지 태그는 Image의 약자인 img로 포현한다.
ex.
<img src="w3schools.jpg" alt="w3Schools.com" width="104" height="142">
src=""에서 큰따옴표 안의 부분은 화면에 보여줄 이미지의 경로와 파일 이름을 적어준다.
alt는 이미지가 표현되지 않을 경우에 사용되는 대체문구이다.
width와 height는 이미지 파일의 크기를 조절하는데,
<img src="w3schools.jpg" alt="w3schools.com">처럼 지워버리면, 원본 사이즈로 나오게 된다.
4강
- 엘리먼트란, 시작태그부터 끝태그까지이다.
ex,
<p> This is a paragraph </p>
<a href="default.html"> This is a link </a>
<p>, <a href="default.html">와 같이 앞에 있는 태그를 start tag, opening tag 라고 하며
</p>, </a>와 같이 끝내는 태그를 end tag, closing tag 라고 하며
시작태그와 끝태그 사이에 있는 내용물을 Element content라고 한다.
Start tag + Element content + End tag 이 형태를 엘리먼트라고 하는 것이다.
- HTML Element는 중첩된다.
이 말은, HTML 태그 안에 다른 태그를 포함할 수 있다는 뜻이다.
ex.
<!DOCTYPE html>
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
body태그를 열고, 그 안에 p태그를 열고 닫은 뒤, body태그가 닫히는데
만약 이걸
<body>
<p>This is my first paragraph
</body></p>
처럼 바꾸는 것은 허용되지 않는다.
시작 태그와 끝태그 안에 다른 태그를 넣어야 한다.
'Study > HTML 공부하는 인디안' 카테고리의 다른 글
| [HTML] Text Formatting - 8강 강의노트 (0) | 2016.04.28 |
|---|---|
| [HTML] HTML Paragraphs - 7강 강의노트 (0) | 2016.04.28 |
| [HTML] HTML heading - 6강 강의노트 (0) | 2016.04.28 |
| [HTML] HTML 속성 - 5강 강의노트 (0) | 2016.04.28 |
| [HTML] HTML이란? - 1강, 2강 강의노트 (0) | 2016.04.12 |
