레이블이 1.HTML 이란?인 게시물을 표시합니다. 모든 게시물 표시
레이블이 1.HTML 이란?인 게시물을 표시합니다. 모든 게시물 표시

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>