HTML 기본구조 및 Hello World 출력하기

Posted by ITPangPang
2016.06.18 23:18 웹(Web)/HTML


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(폼) 태그를 써보자  (0) 2016.07.31
HTML 표를 만들어보자  (0) 2016.07.03
HTML 리스트를 만들자(li, ul, ol)  (0) 2016.06.27
HTML에서 하이퍼링크 걸기  (1) 2016.06.19
HTML 기본구조 및 Hello World 출력하기  (1) 2016.06.18
이 댓글을 비밀 댓글로
    • 2016.08.26 07:49
    비밀댓글입니다