HTML 웹 문서는 크게 머리부, 몸체부로 나눌 수 있다.
소스에서<html>, <head>와 같이 산형괄호(<>)로 묶인 것을 태그라고 한다. 이러한 태그들은 사용 용도가 정해져 있어 필요한 곳에 가져와서 사용하면 된다.
대부분의 태그는 여는 태그(<태그명>)와 닫는 태그(</태그명>)로 구성되어 적용 범위를 제한한다.
아래의 소스가 가장 기본적인 골격이다.
- <HTML><!-- HTML 문서의 시작을 알려줌-->
- <HEAD><!-- 머리부의 시작을 알려줌-->
- <TITLE> 제목이 표시됨 </TITLE>
- <HEAD>
- <BODY> <!-- 몸체부의 시작을 알려줌-->
- 가나다라 마바사 아자차카타파하
- </BODY> <!-- 몸체부의 끝을알려줌-->
- </HTML> <!-- HTML 문서의 끝을 알려줌-->
html기본틀.txt➀ <html> ... </html>
HTML문서 형식으로 작성되었음을 나타내고 문서의 시작과 끝을알려준다. 홈페이지 문서를 만들 때 제일 먼저 <html> 태그를 적고 ,가장 마지막에 </html> 태그로 닫아줘야 한다. 실행결과에는 변화를 주지 않고 주석과 같이 홈페이지의 시작과 끝을 알려줍니다.
➁ <head>...</head>
머리부임을 알려주는 태그로, <html> 태그의 실행 결과에 변화를 주지 않는다. 단, <head> 태그 사이에 문서 정보를 입력해 문서 전체를 변화시킬 수 있다. <head> 태그 사이에는 <title>, <meta>, <style>, <script> 태그 등을 삽입할 수 있다.
➂ <title>...</title>
타이틀 바에 표시할 문자를<title> 태그와 </title> 태그 사이에 입력한다. <title> 태그 사이에 입력한 내용이 브라우저 상단의 파란색 제목 표시줄에 나타난다.
➃<body>...</body>
몸체부의 시작과 끝을 알려주고 실질적으로 브라우저에 표시될 문서를 기록하는 곳이다. 홈페이지에서 보이는 대부분은 <body>태그 사이에 기록한다. 문자, 그림, 표와 같은 실제로 문서를 구성하게 될 구성 요소를 <body> 태그 사이에 입력한다.
➀ 태그란
태그는 여자들이 화장할 때 사용되는 다양한 미용 도구에 비유할 수 있다. 맨 얼굴에 각종 미용도구를 이용해 화장하듯이 흰 종이에 검은색 글자만 가득한 홈페이지 문서를 다양한 태그로 화려하게 장식할 수 있다.
즉, 태그는 문서읙 구조와 형태를 표현하는 명령어로서, 브라우저에게 화면에 나타낼 문서를 설명한다. 태그는 산형괄호(<>)안에 <head>처럼 표시해 구분한다.
HTML문서에서 사용하는 태그의 형식은 크게 세가지다.
지금은 맛보기 이고 다음 포스팅글에서 자세하게 다루겠습니다.^^
➀ 복합 태그
내용에 태그를 적용한다.
<태그명> 내용</태그명> |
<b> 글자체를 굵게 <b>
➁ 속성을 가지는 태그
내용에 태그의 속성을 적용한다.
<태그명 속성값=값> 내용 </태그명> |
<font size=2> 글자 크기를 2로 </font>
➂ 단독 태그
태그가 입력된 곳에서 태그 명령이 적용된다.
<태그명> |
<br> 줄 개행(줄바꿈) 태그
① 대부분의 태그는 <태그명>...</태그명>과 같이 여는 태그와 닫는 태그를 함께 사용한다.
② 태그명과 속성명, 속성명과 속성명 사이는 한칸씩 띄워준다. 그 외 공백을 두어서는 안된다.
③ 속성명의 값은 ‘=’ 기호를 사용하여 표시한다.
④ 값이 숫자이거나 한 단어일 경우는 큰따옴표(“ ”)를 생략할 수 있지만 값이 두 단어 이상일 경우는 반드시 “”로 묶어서 표시한다.
<font size=7 face="arial black" color=blue>어서옵쇼!</font>
⑤ 태그에는 <font>태그처럼 속성이 있는 태그와 <b> 태그처럼 속서이 없는 태그가 있다.
⑥ <font> 태그처럼 여러 속성 중 반드시 하나 이상 사용해야 하는 태그와 <p> 태그처럼 속서이 있지만 생략해도 되는 태그가 있다.
⑦ <p>,<br>태그와 같이 여는 태그만 독립적으로 존재하는 태그도 있다.
⑧ 태그를 중첩해서 사용할 경우 열어준 순서와 반대로 가장 마지막에 입력한 태그부터 닫아준다.
<태그1><태그2>내용</태그2></태그1>
- <html>
- <head>
- <title>태그사용해보기</title>
- </head>
- <body>
- <font size=2><b>HTML을 연습해 봅시다^^</b></font>
- br태그를 안쓰면 이렇게됨
- <br> br태그를 쓰면 이렇게 한칸 내려가구요^^
- </body>
- </html>
대부분의 태그는 <body>사이에 기록한다. 하지만 <head>태그 사이에 기록하는 <title>, <meta>, <script>, <style> 태그를 간략히 알아보자.
<title> 태그
홈페이지를 대표할 수 있는 문서 제목을 지정한다.
<title>문서 제목</title> |
주로 문서 내용을 나타내는 제목을 적어준다. <title> 태그에 기록되는 제목은 웹 브라우저의 타이틀 바에 표시되며, 다른 사용자가 내 홈페이지를 [즐겨찾기]에 추가할 대 등록되는 이름이기도 하다.
<meta>태그
문서 정보를 포함하는 태그로, 사이트 이동, 화면전환 효과 등 다양한 기능을 포함한다.
<meta 속성명=속성의 종류 속성명=값> |
<meta>태그는 문서가 로딩되면서 문서의 몸체부를 읽기 전에 먼저 실행되어야 하는 몇 가지 기능을 기록하는 곳이다. 홈페이지 문서의 글자크기를 제어하고, 검색엔진에서 내 홈페이지가 검색되도록 하며, 현재 페이지에서 일정한 시간이 지나면 다른 페이지로 자동으로 이동하도록 하는 등 다양한 역할을 한다.
<Style> 태그
문서 전체의 레이아웃을 결정하여 문서에 통일감을준다.
<style type="text/css"> <!-- 스타일 형식 //--> </style> |
스타일 서식은 <head> 태그 사이에 정의하거나 태그에 style 속성을 지정하여 정의하는데, 대부분 <head> 태그 사이에 정의한다.
스타일시트는 글자색, 글자체, 배경색, 문서 여백, 행간 등 다양한 서식을 제한없이 사용할 수 있고 홈페이지 문서 전체에 반영할 수 있어 홈페이지를 통일감 있고 일관성있게 한다. 스타일 시트는 문서 전체의 레이아웃을 결정하므로 <head> 태그 사이에 정의해 먼저 읽혀지도록 한다.
HTML의 기초를 공부하고 Style 태그를 공부하는것이 이해가 빠르다.
<javascript> 태그
페이지를 역동적으로 변화시킨다.
<script language="javaScript"> <!-- 스크립트 내용 //--> </script> |
자바스크립트는 HTML 문서와 함께 존재하며 정적인 홈페이지를 역동적으로 변화시킨다. 실행 시기에 따라서 <body> 태그 사이에 기록하기도 하지만 <head> 태그 사이에 정의하는 것이 보편적이다.
HTML, CSS를 기초를 공부하고 javascript를 공부하는것이 이해가 빠르다.
참조
네이버
인터넷 프로그래밍 입문
'웹프로그래밍 > html' 카테고리의 다른 글
| HTML - 이미지맵 (0) | 2013.08.20 |
|---|---|
| html-Meta(장면전환 효과) (0) | 2011.11.27 |
| HTML (0) | 2011.11.26 |
| html-form-(txt,pw) (0) | 2011.03.21 |
| HTML - FORM태그 (0) | 2011.02.11 |