이전에 언급했듯이 웹 페이지는 HTML이라는 언어로 되어 있습니다. HTML은 웹 서버와 웹 브라우저가 대화를 할 때 사용하는 언어이며, 웹 페이지의 구조를 정의하는 언어입니다. 그러면 HTML을 배우는 첫 단계는 직접 HTML 파일을 만들어 보는 것으로 시작하겠습니다.
1. HTML 파일 만들기
HTML파일을 만들기 위해서는 텍스트 에디터 프로그램이 필요합니다. 대표적인 텍스트 에디터 프로그램은 메모장입니다. 메모장을 실행시킵니다.
이제 다음과 같은 내용을 타이핑해 넣습니다.
<head>
<title>연습 1</title>
</head>
<body>
<h1>Hello, World!! </h1>
<p>
안녕하십니까 <br />
지금부터 HTML을 배워보도록 하겠습니다.<br />
</p>
</body>
</html>
[파일] ->[저장] 이나 [Ctrl] + S 를 눌러서 저장을 하도록 합니다.
저장을 할 때 이름뒤에 “.html”을 붙입니다. 이렇게 하면 HTML 파일로 저장이 되어서 웹 브라우저가 읽을 수 있게 됩니다.
그럼 저장한 경로에 가서 html 파일을 실행합니다. 그러면 여러분이 아까 작성했던 페이지가 웹 브라우저 상에 뜨게 됩니다.
그러면 HTML 파일의 내용과 웹 브라우저가 해석한 모습을 대조하며 각각 어떤 역할을 하는지 알아 보도록 하겠습니다.
2. HTML 페이지의 구조
1> 태그
Html 파일은 우선 태그들로 이루어져 있습니다. 태그는 ‘<’로 열어서 이름을 사용한 다음 ‘>’로 닫아 주는 형식을 말합니다. 아까 작성한 html 파일에서 <html>, <body> 등이 태그에 해당합니다. 태그는 화면에 직접적으로 출력되지는 않지만 출력되는 내용들의 특성을 명시합니다. 예를 들면, <h1>태그는 제목을 나타내는 태그입니다. <h1>태그로 둘러 쌓여 있는 “Hello, World!!”라는 말이 다른 부분보다 좀 더 크고 굵게 나타나는 것을 볼 수 있습니다.
html이 웹 페이지의 구조를 나타내는 역할을 한다는 말은 웹 페이지를 제작 할 때 이 태그들을 모아서 조립하는 방식을 쓰게 됩니다.
2> HTML의 구조
html은 <html>태그로 열어서 </html>태그로 닫게 됩니다. 기본 골격은 다음과 같습니다.
<head>태그와 </head>태그 사이에는 웹 페이지의 제목이나 스타일, 스크립트 등의 정의를 씁니다. <style>태그와 </style>태그 사이에는 html을 꾸밀 수 있는 css의 내용이 들어가게 됩니다. <script>와 </script> 사이에는 html을 동적으로 구성하고 싶을 때, javascript와 같은 스크립트의 정의가 들어가게 됩니다. <title>과 </title> 사이에는 웹 페이지의 제목이 들어갑니다.
<body>와 </body> 사이에는 웹 페이지의 실질적인 내용이 들어가게 됩니다.
