HTML 기본구조 및 Hello World 출력하기
HTML 기본구조 및
Hello World 출력하기
ㆍ HTML의 시작 첫번째로 HTML의 기본구조와 모든 언어의
시작인 Hello World를 출력해보도록 하겠습니다.
ㆍ 이번 시간에는 메모장으로 간단하게 출력해보도록 하고
다음글에서 개발도구를 사용해서 HTML을 사용해보도록
하겠습니다.
HTML의 기본구조
HTML의 기본구조
뼈대에 대해
알아보도록 하겠습니다
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
위와 같이
html, head, title, body
4가지 정도가 기본구조입니다
조금 더 세부적으로 보자면
DTD와 <head>에서 meta요소
정도가 추가될 수 있지만
이번글에서는 4가지정도만
보도록 하겠습니다.
<html> ~ </html>
<html>는 html문서에서
가장 상위에 위치하고 있는
최상위요소 입니다.
html에서의 역할은
시작과 끝을 알려줍니다.
모든 html문서는
<html> ~ </html>
로 시작과 끝을 맺으며
head, body요소들은
html요소에 하위에
위치해있습니다
<head> ~ </head>
그냥 스펠링대로
html문서에서
머리부분의 역할을 합니다
다음요소
body도 몸통이라는
뜻이듯
head도 뜻 그대로 받아들이시면
됩니다.
html요소 바로 아래에 위치하는
요소로서
여기에는 기본적으로
두가지가 들어가는데
meta요소와 title요소입니다.
meta요소는 인코딩 charset을
표시해 줍니다
<meta charset="utf-8">
보통 이렇게 씁니다
다른 요소들과 다르게
meta요소는 끝에
</meta>가 없습니다.
다음은 title요소로
말그대로 title = 제목을 적어주는
부분입니다
여기에 적어주는 text는
이런식으로 적용됩니다.
출력하는 방법은
<title>ITPANGPANG</title>
이런식으로 간단하게
<title> ~ </title>
사이에 넣어주시면 됩니다.
위의 두가지요소를
<head> ~ <head> 사이에
넣어주시면 기본적인 셋팅은
완료됩니다.
<head>
<meta charset = "utf-8">
<title>ITPANGPANG</title>
</head>
<body> ~ </body>
다음은 html문서에서
몸통에 해당하는
<body>요소입니다
몸통이라고 말했듯이
여기부분에 실질적인
내용이 들어갑니다.
출력방법은 위의
title에서 적었던것처럼
<body> ~ </body>
사이에 적어주시면 됩니다.
여기서 적어주는 내용물은
이런식으로 웹에서
본문에 들어가게 됩니다.
위와 같이 출력하기 위해서는
아래와 같이 적어주면 됩니다.
<html>
<head>
<meta charset = "utf-8">
<title>ITPANGPANG</title>
</head>
<body>
안녕 ITPANGPANG 블로그입니다.
</body>
</html>
여기까지가 HTML의
기본적인 구조입니다
뭐 여기까지 하면
Hello World는
Text만 바꿔주면 됩니다.
마지막으로
Hello World를 출력하면서
마치도록 하겠습니다.
'웹(Web) > HTML' 카테고리의 다른 글
| Form(폼) 태그를 써보자 (1) | 2016.07.31 |
|---|---|
| HTML 표를 만들어보자 (0) | 2016.07.03 |
| HTML 리스트를 만들자(li, ul, ol) (0) | 2016.06.27 |
| HTML에서 하이퍼링크 걸기 (1) | 2016.06.19 |