offfff

HTML 소개(HTML Introduction) 본문

프로그래밍

HTML 소개(HTML Introduction)

offfff 2016. 8. 20. 09:00

HTML 이란?


HTML은 웹페이지를 위한 마크업(Markup) 언어이다.


- Hyper Text Markup Language의 약자

- 마크업 언어는 마크업 태그의 집합이다

- 그래서 HTML 문서는 HTML 태그로 구성된다

- 각 HTML 태그는 각각 문서의 다른 내용을 서술한다




간단한 HTML 문서 예제


<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>


<h1>My First Heading</h1>

<p>My first paragraph.</p>


</body>

</html>


<!DOCTYPE html>는 이 문서가 html이라는 것을 정의한다.

<html>과 </html> 사이에 HTML 문서를 작성한다.

<head>와 </head> 사이이는 '문서에 대한 정보'가 들어간다.

<title>과 </title> 사이에는 '문서의 제목'을 넣는다.

<body>와 </body> 사이에는 '페이지에 표시할 내용'들이 들어간다.

<h1>과 </h1> 사이에는 '제목'이 들어간다.

<p>와 </p> 사이에는 '본문'이 들어간다.


이 예제를 브라우저에서 실행하면, 하나의 제목과 하나의 문단이 나오는 화면을 보여줄것이다.


※ 실습하는 방법

1. 메모장에 위와 같은 코드를 작성한다.

2. 작성후 저장할 때, 확장자를 '.html'로 저장. (ex. 실습1.html)

3. html파일이 저장된 경로로 가서 실행 → 웹 브라우저에 결과 출력



HTML 태그


HTML 태그는 앵글브라켓(<>)으로 둘러싸인 키워드로 구성되어있다.


<태그이름> 태그내용이 이곳에 적힌다. </태그이름>


- HTML 태그는 보통 쌍을 이룬다. (ex. <p> ... </p>)

- 한 쌍의 태그에서 첫번째 태그를 'start tag', 두번째 태그를 'end tag'라고 하는데

- 'end tag'는 시작 태그와 똑같은 태그 이름이고, 앞에 '/'가 추가 된다.

- 'start tag'는 'opening tag', 'end tag'는 'closing tag'라고 하기도 한다.




웹 브라우저


웹 브라우저(Chrome, IE, Firefox, Safari 등)는 HTML문서를 읽고 화면에 출력하는데 사용된다.

브라우저는 HTML 태그를 화면에 보여주진 않고, 태그를 사용해서 문서의 내용을 어떻게 화면에 보여줄지 결정하는 역할을 한다.

위의 예제를 브라우저에서 출력하면 아래와 같이 표시한다.

(MS Edge 브라우저에서 실행한 모습)





HTML 페이지 구조


아래의 그림은 html 페이지구조를 나타낸 것이다.

<body> 영역(그림상의 하얀 부분)만이 브라우저 화면에 출력 됨을 알 수 있다.





<!DOCTYPE> 선언


<!DOCTYPE>는 문서의 타입을 나타내고, 이것을 통해 브라우저가 화면에 웹페이지를 올바르게 출력할 수 있다.

문서에서 단 한 번, 페이지의 가장 상단, <html>태그보다 앞서 선언해야 한다.

브라우저가 화면에 올바르게 출력하기 위해서, 타입과 버전, 이 두 가지 정보를 명시해야 한다.


<!DOCTYPE html>


<!doctype HTML>


대소문자 구분을 하지 않기 때문에, 대소문자는 위 두가지를 포함해서 어떻게 쓰든 상관 없다.


<!DOCTYPE html>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


위부터 HTML5, HTML 4.01, XHTML 1.0의 <!DOCTYPE> 선언 방법이다.




HTML 버전


 버전

 년도 

 HTML 

 1991

 HTML 2.0

 1995

 HTML 3.2

 1997

 HTML 4.01

 1999

 XHTML

 2000

 HTML5

 2014





아래 링크를 참고하여 번역 및 수정함 

http://www.w3schools.com/html/

저작자표시 비영리 (새창열림)

'프로그래밍' 카테고리의 다른 글

HTML 요소(HTML Elements)  (0) 2016.08.22
HTML 기본 예제  (0) 2016.08.21
[MySQL C API] 9. 데이터베이스에 저장된 이미지 가져오기(Selecting images from MySQL database)  (0) 2016.08.19
[MySQL C API] 8. 데이터베이스에 이미지 저장하기(Inserting images into MySQL database)  (1) 2016.08.18
[MySQL C API] 7. 한 쿼리로 다중구문 수행하기(Multiple statements)  (0) 2016.08.17
'프로그래밍' Related Articles more