모든 저작권은 <생활코딩>의 생산자인 <egoing>님에게 있습니다.
문제시, 비공개로 전환하겠습니다.
HTML은 웹 구축에 있어서 가장 중요한 역할이다.
웹브라우저 -> 웹서버 (요청을 한다.)
웹브라우저 <- 웹서버 (웹브라우저의 요청에 대한 응답을 한다. HTML을 전달한다.)
HTML = Hypertext Markup Language의 약자이다.
- Hypertext는 무엇일까? -
문서와 문서가 링크로 연결되어 있다는 것을 뜻한다. 바로 이러한 형식의 문서를 Hypertext라고 한다.
HTML의 가장 중요한 특징은 Hypertext 곧 Link이다.
문서와 문서가 그물망처럼 연결되어 있는 것이다.
링크는 HTML의 본질
HTML의 본질은 웹의 본질
- Markup Language는 무엇일까? -
HTML은 사람 + 웹브라우저도 알아들을 수 있는 언어이다.
Markup Language의 개념을 이해하기에 앞서 TAG의 개념을 알아야한다.
옷의 TAG는 옷의 자세한 정보를 설명한다.
원산지
치수
세탁방법 등
HTML의 TAG도 옷의 TAG와 같다.
ex) 안녕하세요, 생활코딩입니다. 를 알려주고자 한다.
생활코딩에 강조표시가 되어있는데 이를 html로 작성하고자 한다면
안녕하세요. <strong>생활코딩</strong>입니다.
여기서 <strong>은 시작태그 </strong>은 끝 태그이다.
그리고 생활코딩은 컨텐츠라고 부른다.
Textedit를 키고 위의 코딩을 친다음 htdocs 디렉토리에 exhtml1.html로 저장해보자.
확장자: html, 인코딩: UTF-8, 파일형식: 모든파일
- HTML 속성 -
html의 a 태그 = 단어가 한 글자로 이루어져 있다.
html의 여러 태그 중에서 한 글자이면서 알파벳의 순서상 첫번째인 a 를 사용하는 태그가 있다면 매우 중요한 태그이다.
a는 링크를 나타낸다.
ex) <a>생활코딩</a>
웹브라우저는 이걸보고 저 생활코딩이라는 글자가 어딘가에 링크가 걸려져있다는 것을 알 수 있다.
위의 예제는 한가지 빠진 것이 있다. 바로 링크가 '어디에' 걸려져있는지 포함하고 있지 않다는 것이다.
ex 2) <a href="http://opentutorials.org/course/1">생활코딩</a>
href="(속성)"
위의 빨강색으로 칠해진 부분이 더해지면 비로서 생활코딩이 가르키는 링크가 포함된다.
href = 약속이며 " "안의 값은 바뀔 수 있다.
ex 3) <a href="http://opentutorials.org/course/1" target="_blank">생활코딩</a>
새로운 창에 http://opentutorials.org/course/1를 띄운다.
여기서 붉은 부분은 새로운 속성이 된다.
html에서 새로운 속성을 구분할때는 띄어쓰기를 하면된다.
target="_self" 는 현재창에서 링크를 여는 것이다.
- HTML 문법 - 태그의 중첩 -
List를 활용할 때는 어떤 태그를 사용하는가?
ex) <li>html</li>
<li>css</li>
<li>Javascript</li>
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> </head> <body> <ol> <li>html</li> <li>css</li> <li>JavaScript</li> </ol> <ul> <li>최진혁</li> <li>최유빈</li> <li>한이람</li> </ul> </body>
|
ul == unordered list (순서가 없는 리스트)
ol == ordered list (순서가 있는 리스트, 숫자가 자동으로 붙는다.)
html 태그들을 또 다른 태그들로 묶어서 브라우저에게 알려줄 수 있다.
- <body> </body>의 의미 -
화면에 표시되는 내용
html의 본문에 해당하는 태그다.
body태그 안쪽에 list태그가 존재해야한다.
- <head> </head>의 의미 -
문서의 정보에 대한 내용
ex) <meta charset="utf-8" />
이 문서가 utf-8 문자코드로 작성되어있다는 것을 웹브라우저에게 알려준다.
ex)<title>생활코딩</title>
url문서의 이름을 설정하는 것이다.
- <html> </html>의 의미 -
body와 head 태그를 감싸는 것
html 태그 안에 있는 모든 것들이 html 태그이다 라는 것을 웹브라우저에게 알려준다.
- HTML 정리 -
w3c = WWW Consortium = HTML에 관한 전반적인 관장
w3c Members = Samsung, MS, Apple, Google, + @
- <!DOCTYPE html> 의미 -
없어도 코드는 작동한다.
하지만 작성한 코드가 제대로 작동하기 위해서는
작성 코드가 어떠한 기준으로 작성되었는지 정확히 알려줄 필요가 있다.
html에는 다양한 표준안이 존재한다.
ex) HTML 5, HTML4.01 Strict, + @
- Tag Reference -
HTML을 빽빽이 공부할 필요는 없다. 다만, 어떠한 태그를 어떻게 활용해야할지는 지속적으로 검색&활용해서 사용할 줄 알아야한다.
http://dev.w3.org/html5/html-author/
http://opentutorials.org/course/1058
- HTML의 본질 -
HTML의 본질은 '정보'에 있다.
사람과 컴퓨터 둘 다 이해할 수 있는 정보를 정의하는 것
그리고 정보를 쉽고 빠르게 알아볼 수 있도록 그래픽적 요소로 분가 시킨 방법이 바로 CSS이다.
HTML = 정보
댓글