2016년 12월 28일 수요일

1.HTML 이란?

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> 태그에는 문서의 내용이 위치한다.
1
2
3
4
5
6
7
8
<html>
<head>
문서를 정의하는 데이터가 위치함
</head>
<body>
문서에 표시되는 컨텐츠가 위치함
</body>
</html>
참고. 메타 데이터(meta data)란 데이터를 설명하는 데이터를 의미한다. 이를테면 태그가 대표적인 메타데이터이다.

HTML 파일

HTML 코드를 파일에 저장하고 웹브라우저에 서 로딩하면 웹페이지가 만들어진다. HTML 파일은 텍스트를 편집할 수 있는 에디터로 만들 수 있고, 확장자명으로 html 혹은 htm을 사용한다.

예제

example1. 아래 예제는 <a> 태그를 이용해서 링크를 만들고 <img> 태그를 이용해서 이미지를 출력하는 방법에 대한 사례다. (jsfiddlegithub?)
1
2
3
4
5
6
7
8
9
10
11
<!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>

댓글 없음:

댓글 쓰기