HTML 이해
HTML 파일은 무엇으로 만드는지,어떤 구조로 되어있는지, 구성요소가 무엇인지, 파일을 직접 만들어 보는것이 개념을 이해하는데 도움이 될것입니다. 따라서 홈페이지를 만들기 위해서 가장 기본적인 것은 HTML을 이해하는 것입니다.
HTML 언어 작성
Tag - Hyper Text 를 표현하기 위한 언어 일종의 명령어로, HTML 문서를 작성하는데 필요한 문법. 문서의 규약
Hyper Link - 하이퍼텍스트 내의 다른 요소 또는 다른 하이퍼텍스트 내의 다른 요소와 연결한 것.
Hyper Text - 문서 내의 단어나 구, 기호, 화상과 같은 요소를 말함.
HTML 기본 코드
시작태그<html> 가 있고 끝태그</html>가 있는데, 태그는 각각의 쌍을 이루고 있는 일반적인 형태.
하지만,<br>처럼 끝 태그가 없는 태그(empty element) 도 있습니다.
화면출력 ↓
|
<html></html> |
html 문서의 시작과 끝을 알립니다. |
|
<head></head> |
머리영역으로, 이영역에 들어가는 대표적인 태그로<title></title>이 있습니다. 본문에는 이내용이 표시 되지 않습니다. |
|
<title></title> |
웹 브라우져 툴바를 통해 나타내는 제목.본문에는 나오지 않습니다. ex)C:\Users\megabank.html |
|
<body></body> |
본문영역이므로, 이안에 쓰여진 내용은 모두 화면에 출력됩니다. |
Head 요소
문서의 머리 부분은 <Head >로 시작하여 </Head >로 끝나고 제목은 반드시 <Head > </Head > 요소내에 사용하여야 합니다. 제목은 웹브라우저 최상단의 제목 표시창에 나타나는데 문서의 특징을 가장 적절히 표현할 수 있는 요약되고 함축된 제목을 사용하는 것이 좋습니다. 문서의 내용을 적을 홈페이지의 몸통에 해당하는 <body> </body>요소내에 표현된 모든것들은 웹브라저 화면에 나타나게 됩니다.
Body 요소
<body></body> 요소내에는 문서의 모든 내용이 들어감. <body>태그 내에는 몇가지 속성을 사용하여 웹브라우저 화면에 보여질 텍스트의 색상과 배경그림을 작성 할 수 있습니다.
<body BGCOLOR="#f8f8ff" TEXT="#000000" LINK="#fffff0" VLINK="#8b8989" ALINK="#00ff00"> </body>
각 속성이 나타내는 것은 다음과 같습니다.
|
BGCOLOR |
배경색을 지정하는 옵션입니다. |
|
TEXT |
문서의 기본 폰트색을 지정하는 옵션입니다. |
|
LINK |
문서의 링크부분의 색을 지정하는 옵션입니다. |
|
ALINK |
문서의 링크를 클릭할 때 나타나는 색을 지정하는 옵션입니다. |
|
VLINK |
과거에 들어간적이 있는 링크의 색을 지정하는 옵션입니다. |
이 속성들과 변수는 = 부호로 연결되며 " "내에 사용하는 변수는 RGB값이며 반드시 기억해야 하는 것은 RGB값 앞에 #기호를 넣어 준다는 것입니다. TEXT의 기본값은 000000 즉 검정색이며 LINK의 기본색상은 0000FF 청색이고 VLINK의 기본값은 800080입니다. 즉 이 속성들을 사용하지 않았다면 웹브라우저상에 텍스트는 검정색으로 링크는 파란색으로 한번 방문했던 링크는 보라색으로 나타나게 되는 것입니다. 보다 정확하게 말한다면 웹브라우저의 설정값을 기본값으로 합니다.
HTML 에서는 문서 작성할때 대소문자를 구별하지 않고, <html></html>,<Html></Html>,<HTML></HTML>은 모두 동일한 결과를 보여주지만, W3C(World Wide Web Consortium)은 소문자로 작성하는 것을 권장합니다.
(W3C는 HTML, CSS, XML등 웹 문서 코드 표준을 관리하는기관)
HTML 파일은 메모장으로 간단하게 만들 수 있습니다.
HTML 문서를 만든 후 저장할 때는 .htm 또는 .html 확장자 형식으로 저장합니다. ex)megabank .htm / megabank.html
저장유형은 두가지 방법 모두 가능 하지만, 각각 서로 다른 파일로 인식합니다. 메모장을 이용하여 HTML(Hypertext Markup Language) 형식에 맞도록 태그를 작성하고,파일을 저장할때 한글을 인식 못하는 브라우저도 있으니 될수 있으면 영문으로 합니다.
저장할때 주의할 점은 파일형식에서 모든 파일을 선택한 후 저장해야 됩니다.
↓ 밑에 그림은 문서 작성하고 출력된 모습
HTML 파일은 메모장과 같은 텍스트 에디터로 만들 수 있고 나모 웹이나 드림위버와 같은 위지윅 에디터로도 만들 수 있습니다. 웹 페이지에서 화면에 대고 오른쪽 마우스 클릭하면 소스보기가 있는데 거기에서 html소스를 확인할 수도 있고. 위 작성한 html 문서를 다른 사람들에게 볼수 있도록 하려면 서버에 올려야 하는데, 도메인이나 서버계정에 FTP프로그램을 이용해서 내 컴퓨터에 있는 자료를 올릴 수 있습니다.
편집형태
텍스트 에디터는 HTML 태그를 입력하면서 편집을 해야 하는 반면에 위지윅 에디터는 웹브라우저상에서 보여지는 형태로 편집이 가능하기에 보다 직관적인 작업이 가능합니다. 그러나 결과물은 똑같습니다. HTML을 잘 모르는 분들은 위지윅 에디터가 좋다고 알려져 있는데, 오히려 초보자들이 홈페이지 제작 할때에는 텍스트 에디터가 간편하고 HTML 태그를 이해하는데 도움이 됩니다. 위지윅 에디터를 이용하면 워드프로세서로 문서작업을 하듯이 쉽게 홈페이지를 만들 수 있다고는 하지만 위지윅 에디터 자체를 익히는데 시간이 들 뿐 아니라 위지윅 에디터만으로 작업을 하면 HTML 태그를 이해하는데 더 많은 시간이 소요됩니다. HTML 태그는 홈페이지 제작에 있어서 가장 기본이 되고 필수적으로 알아야 하는 부분이므로 가능하면 텍스트 에디터를 가지고 하는게 전체적으로 더 빠른 시간에 훌륭한 홈페이지를 만들 수 있습니다.
HTML 몇가지 특징
첫째. HTML에서 태그는 대문자와 소문자의 구분는 없습니다. HTML에서는 <HTML>, <Html>, <html> 모두 같은 태그로 인식합니다.
둘째. HTML 문서는 *.htm과 *.html 파일 확장자로 만들어야만 웹브라우저상에서 볼수 있습니다. HTML 문서의 파일 확장자로는 *.htm과 *.html이 모두 쓰이지만 서로 같은 파일로 인식하지는 않습니다. 즉, test.htm과 test.html 파일은 서로 다른 파일로 인식합니다.
셋째. HTML 문서는 엔터, 스페이스바, 탭이 적용되지 않습니다. HTML 소스에서 스페이스로 공백을 주거나 아무리 엔터키로 줄바꿈을 하여도 웹페이지상 에서 확인하면 줄바꿈이 되지 않게 됩니다. 이럴경우 HTML이 공백과 줄바꿈을 인지하도록 하는 특정 기호나 해당 태그를 작성해야 합니다.
넷째. 태그는 시작태그와 종료태그로 이루어져 있습니다. HTML 문서는 시작태그와 종료태그가 쓰여진 순서대로 반드시 닫아줘야 합니다. 닫히는 순서가 지켜지지 않으면 오류가 발생하게 됩니다.
다섯째. HTML은 텍스트 파일의 속성과 특징을 기본으로 하는 텍스트 파일의 한 형태이고, 컴파일이 필요없고, 운영체제에 상관없이 작동됩니다.
여섯째. HTML은 문서의 처음부터 순차적으로 실행됩니다. 먼저 <head> 부분의 내용이 실행되고 그 다음 <body> 부분이 실행하게 됩니다. javascript , 문서의 style 등은 <head> 에서 작성하는 것이 좋습니다.
마지막으로 HTML 파일이나 디렉토리명은 영문자로 작성합니다. 그렇지 않으면 웹브라우저 상에 나타나지 않거나 내용이 깨지는 문제가 발생 할수도 있습니다.
HTML을 공부 하시면서 이런 특징을 알고 있다면, HTML을 이해하는데 조금은 도움이 될 것입니다.
010-7249-0202
