1. 컴퓨터 상식/★ HTML

HTML이란

행복유통 2009. 4. 18. 16:00

 

HTML(Hyper Text Markup Language)이란

 

1.  HTML의 특징

  • HTML은 인터넷상의 모든 공간에서 사용됩니다.
  • 홈페이지, 쇼핑몰, 오픈마켓 창업, 카페 메인화면 디자인, 게시판의 재미있는 게시물, 예쁜 이메일, 고객 홍보 메일도 제작 가능합니다.
  • HTML은 인터넷 익스플로러와 같은 브라우저에서 확인할 수 있습니다.

2.   HTML의 등장이유

  • 인터넷이 등장하면서 HTML이 각광을 받고 있습니다.
  • 기존에 사용하던 언어나 문서의 체계가 특정 시스템에 국한 된 것이 많기 때문에 윈도우즈 환경하에서 제작된 프로그램이 다른 운영 체제에서는 작동이 안되는 경우도 있습니다.
  • 인터넷의 특징은 전 세계에 퍼져 있는 사용자들이 어떤 시스템으로도 접속이 가능해야 하고, 어떤 운영체제 환경에서도 접속이 가능해야 하는 것이 특징인데  특정 시스템에서만 동작되고 확인된다면 안되죠. 그래서 기존의 언어나 문서의 체계로는 이를 극복하지 못하기 때문에 새로운 언어의 등장이 필요했던 것입니다. 그게 바로 HTML입니다.

3.   HTML 작성하고 저장할 때 주의 사항

  • 여는 태그(starting tag)로 시작해 닫는 태그(closing tag)로 이루어집니다.
  • 소문자를 사용하면 버젼과 상관이 사용합니다.
  • 들여쓰기로 작성하여 구조 이해와 교정이 쉽도록 합니다.
  •  태그를 중복 사용할 경우 순서를 지켜야 합니다.
  • 파일 확장자는 htm이나 html을 사용하지만 이름이 같을 경우 다른 파일로 인식하며 index파일의 경우 대부분의 웹 사이트에서는 html을 우선으로 실행합니다.
  • 페이지들이 서로 연결되어 있으므로 파일명은 네이밍률에 의거해 제작하는 것이 좋으며 제작중에 가급적 파일명을 바꾸지 않습니다.

    4.  HTML 문서 보기

    • 제작한 HTML문서를 다른 사람이 보려면 이미지와 모든 문서가 인터넷 서버에 올라가 있어야 합니다.
    • 독특한 글꼴로 문서를 작성해도 다른 사람 시스템에 그 글꼴이 없다면 기본글꼴로 보입니다.

    5.  HTML 문서를 만들기 위한 프로그램

    • 메모장 : 텍스트 편집기를 이용하여 작성하고 파일 이름은 *.html로 저장합니다.
    • Editplus : 윈도우용 문서 편집기로서, HTML 편집기, PHP 편집기, 자바 편집기, Hex 뷰어 기능을 지원하고, 메모장을 대신할 뿐 아니라 웹 문서나 프로그램 개발을 쉽게 할 수 있도록 도와 주는 많은 기능들을 지원합니다. HTML 문서의 내용을 확인해 볼 수 있는 내장 브라우저와, 작성한 문서를 FTP 서버로 업로드할 수 있는 FTP 기능을 지원합니다.
    • Adobe Dreamweaver : 드림위버 Code 편집창이나 [Window] - [Code Inspector]에서 HTML 소스를 직접 입력하여 홈페이지를 만들 수 있습니다. 드림위버에서 HTML 소스를 입력할 때는 Code Hints 기능이 있어서 속성의 목록이 나타나면 클릭으로 선택하여 코드를 작성할 수 있습니다. 

    6.  HTML의 구성요소

       HTML은 3가지의 구성요소를 갖고 있으며 반드시 필요한 요소는

       텍스트, 태그이며, 스크립트는 반드시 있어야 할 요소는 아닙니다.

       ① 텍스트 : 정보를 기록하는 것입니다.  

    • 기록한 내용이 거의 그대로 화면에 나타납니다.
    • 입력을 할 때 특별한 형식을 가지지 않습니다.
    • 한 줄로 길게 입력하더라도 대부분 자동적으로 화면의 오른쪽에 다다르면 다음 줄로 옮겨지게 됩니다.
    • 원칙적으로는 여러 줄에 입력되더라도 한 줄로 처리됩니다. 즉, 단락의 구분을 하지 못한다는 것입니다. 물론 이런 것을 처리하기 위해 태그필요합니다.

       ② 태그 : HTML의 기본 형식으로 "이제부터 어떤 명령이 시작됩

           니다"라는 시작부분과 "이제 그 명령이 끝났습니다"라고 하는

           종료부분을 알려주는 HTML의 명령 체제라 할 수 있습니다.

    • 태그와 태그 사이에 있는 모든 것이 바로 태그가 지시하는 명령을 실행하는 내용이라 할 수 있습니다.
    • 태그는 텍스트와 반대로 실제 화면에 나타나지는 않습니다.
    • 태그는 일반 텍스트와는 달리 "<" 기호와 ">"기호 사이에 그 내용이 입력되며 대부분의 태그는 "시작태그"와 "종료태그"로 구성됩니다.
    • 종료태그는 시작태그와 내용은 동일하나 그 앞에 "/"기호가 하나 더 붙게 됩니다
    • 예 : 웹 브라우저의 제목표시줄에 "다음블러그"라고 표시됩니다.   <TITLE>   ------- 시작태그                                              다음블러그  ----- 텍스트                                            </TITLE>  ------- 종료태그  명령을 받을 내용은 여러 줄로 입력해도 관계가 없으며 태그와 명령을 받을 내용이 반드시 줄을 바꾸어야 할 필요는 없습니다.
    • 입력상의 형식에는 아무런 구애를 받지 않습니다.
    • "시작태그"만 있고 "종료태그"는 없는 것도 있습니다.
    • HTML은 대/소문자 구분을 하지 않습니다.
       ③ 스크립트 : 간단한 명령을 집합으로 HTML언어가 아닌 다른

          형식의 언어입니다.

    • 다른 프로그래밍 언어와 거의 유사한 형식을 가지고 있습니다.
    • 정적인 홈페이지를 동적인 홈페이지로 변화시키는 역할입니다.

    7.   HTML의 기본 구조

     

     

     HTML의 기본 구조  기본 구조의 의미
     <html>  <html> ... html 문서를 시작합니다.
       <head>  브라우저에는 보이지는 않지만 CSS나 JavaScript, META 태그가 사용되는 html 문서의 기본 정보입니다.
         <title>  웹 브라우저의 제목 표시줄에 나타나는 문서의 제목입니다.
          </title>  <title> ... </title>이 문서의 제목입니다.
       </head>  <head> ... </head>이 문서의 기본 정보 영역입니다.
      <body>  <body>문서의 본문입니다.
      </body>  <body> ... </body>이 문서의 본문 영역입니다.
     </html>   </html> ... html 문서를 마칩니다.