yekang

web을 위한 언어 HTML 본문

야학

web을 위한 언어 HTML

예캉 2017. 6. 3. 03:20

HTML의 기본문법


웹브라우저에서 웹서버에게 요청

웹서버는 저장되어있는 웹페이지를 읽어 응답(html 전달)

웹브라우저에 출력된다.


Hypertext Markup Language의 약자 HTML

Hypertext = 문서와 문서가 링크로 연결되어 있다. 팀버너스리가 고안했다. HTML에서 가장 중요한 특징 *링크

링크는 HTML의 본질, HTML의 본질은 웹의 본질

Markup Language = 마크업을 이해하기 위해 TAG를 알아야함. 

ex: 안녕하세요. <strong>생활코딩</strong>입니다.

         시작(열린)태그  컨텐츠  끝(닫힌)태그

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
안녕하세요. <strong>생활코딩</strong>입니다.
</body>
</html>


HTML 문법 - 속성


a 태그 - 링크를 알려주는 태그. => 어디 링크에 연결? 속성태그를 확인.

<a href="주소">생활코딩</a>

속성명=속성값                   

위는 현재창에서 열림

새로운 창이 열리게 하려면?

<a href="http://opentutorials.org/course/1" target="_blank">생활코딩</a>입니다.

링크주소 타겟(무엇을 통해 열것인가)

타겟또한 속성 위는 속성이 2개인 태그, 구분을 위해 공백을 둔다.

_blank => 새로운 창에서 링크를 연다

_self =>현재창에서 링크를 연다(기본 동작과 일치하는 기본 값) 


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
안녕하세요. <a href="http://opentutorials.org/course/1" target="_blank">생활코딩</a>입니다.
</body>
</html>


HTML 문법 - 태그의 중첩


리스트를 사용 -> 

<li>html</li>

<li>css</li>

<li>javascript</li>


<ul>태그 => 그룹화.. 묶어주는 역할(unordered list의 준말)<-> <ol>(ordered list)


<body> => 웹페이지에서 본문에 해당되는 태그들이 있다.

<head> => 문서를 설명하는 정보들을 감싸고 있는 태그들이 있다.

utf-8방식으로 저장되어있다고 알려줌. => 안쓰면 한글이 깨질수 있음

<title>태그 올 수 있음. => 문서의 제목이 된다.

<html> 안의 태그가 html 문서이다 라는 것을 브라우저에 알려주는 역할을 한다.( body,head)


<!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>
</html>


HTML 정리


팀버너스리에 의해 만들어진 html.

체계적으로 발전시키기 위한 기구 => w3c(표준을 정의)

<!DOCTYPE html> => html 문서가 어떤 표준안에 따라서 작성된 것인지를 웹브라우저에게 알려주기 위함. 없어도 되지만 명확히 표현해 주는 것이 좋다.

html의 본질 => 어떠한 정보를 컴퓨터도,사람도 알아보기 위해 태그를 이용하여 규정하는 것.


'야학' 카테고리의 다른 글

HTML 실습(2)  (0) 2017.06.04
HTML 실습(1)  (0) 2017.06.04
프로그래밍 언어  (0) 2017.06.03
apm 제어  (0) 2017.06.03
윈도우에 웹서버 설치  (0) 2017.06.03
공유하기 링크
'야학' Related Articles more
Comments