HTML이란?
웹페이지를 만들기 위한 언어로 웹브라우저 위에서 동작하는 언어다.
HT - HyperText, 문서와 문서가 링크로 연결되어 있다.
M - Markup, 태그로 이루어져 있다.
L - Language
태그란?
- Tag
- 태그란 정보를 정의 하는 형식
태그의 형식
<태그명 속성명1="속성값1" 속성명2="속성값2"> 컨텐츠 </태그명>
태그는 컨텐츠를 감싸서 그 정보의 성격과 의미를 정의 한다.
열리는 태그가 있으면 닫히는 태그가 있어야 한다.
닫히는 태그는 태그 명 앞에는 '/'가 붙는다.
속성은 태그의 부가적인 정보가 들어온다. 아래 예제에서 href는 속성명, http://opentutorials.org은 속성값이다. href 속성은 컨텐츠인 생활코딩이 opentutorials.org와 연결되어 있다는 것을 의미한다.
닫히는 태그가 필요 없는 태그도 있다. 이런 경우 <태그명 />의 형식을 갖는다.
- <br />
- <input type="button" value="버튼" />
문서의 구조
- HTML 문서는 파일의 확장자가 html 혹은 htm으로 끝난다.
- 최상위 태그로 <html>을 사용한다. 그 하위에 <head> 태그와 <body> 태그를 컨텐츠로 가지고 있다.
- <head> 태그는 문서를 설명하는 태그로 제목이나 키워드와 같은 정보를 담는다.
- <body> 태그에는 문서의 내용이 위치한다.
<html>
<head>
문서를 정의하는 데이터가 위치함
</head>
<body>
문서에 표시되는 컨텐츠가 위치함
</body>
</html>
참고. 메타 데이터(meta data)란 데이터를 설명하는 데이터를 의미한다. 이를테면 태그가 대표적인 메타데이터이다.
HTML 파일
HTML 코드를 파일에 저장하고 웹브라우저에서 로딩하면 웹페이지가 만들어진다. HTML 파일은 텍스트를 편집할 수 있는 에디터로 만들 수 있고, 확장자명으로 html 혹은 htm을 사용한다.
예제
example1. 아래 예제는 <a> 태그를 이용해서 링크를 만들고 <img> 태그를 이용해서 이미지를 출력하는 방법에 대한 사례다. (jsfiddle, github, ?)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> </head> <body> <img alt="생활코딩 로고" src="https://opentutorials.org/user/course/1/94.png" /> <br /> <a href="http://opentutorials.org/course/1">생활코딩</a> </body> </html>
