HTML 기초

인터넷의 형성과 발전

인터넷(Internet)이란? 소규모 통신망을 상호 접소가는 형태에서 점차 발전하여 전 세계의 컴퓨터가 서로 연결된 형태의 통신망입니다. 원래는 인터넷의 모태는 냉전시대 미국 국방부에서 핵전쟁에서도 살아 있는 네트워크를 연구하여 패킷교환(packet switching)방식이 회선장애에 대한 대응 능력이 강하다는 사실을 발견 UCLA와 SRI 연구소간 회선을 연결하게 되었고, 이 통신망을 ARPANET이라고 하며 현재의 인터넷입니다.

인터넷 관련 용어

1. ip 주소
   
   인터넷에 연결된 모든 컴퓨터에 부여되는 고유 식별주소를 의미합니다. 이 주소는 32비트(4byte)로 표현되며, 표기할 때에는 4개의 십진수를 점(.)으로 구분하여 표기합니다. 따라서 0.0.0.0 부터 255.255.255.255까지의 주소를 사용할 수 있습니다. 중간의 일부 번호들은 특별한 용도를 위해 예약되어 있습니다. 이를 테면 127.0.0.1은 localhost(로컬 호스트)로 자신을 가리키는 주소입니다. 한편, 모든 단말에 주소를 부여하기에는 32비트로는 부족해짐에 따라 IP의 새로운 버전인 IPv6에서는 길이를 128비트로 늘렸습니다. IPv6주소는 보통 두 자리 16진수 여덟 개를 쓰고 각각을 클론(:) 기호로 구분하여 사용합니다.
   
   

2. 도메인이름(Domain Name)
   
   숫자로 된 IP주소는 사람이 기억하기 어렵다는 단점이 있어서 1983년 Paul Mockapetris는 기억하기 쉬운 새로운 명명체계를 발표하였는데, 이를 도메인 이름(Domain Name)이라 부릅니다. 도메인 이름은 'tistory.com'과 같이 숫자가 아닌 문자로 구성되어 있으며, 3단계 구조로 되어 있습니다. 도메인 이름은 국제적 도메인이름과 국가별 도메인 이름으로 구분되는데, 국제적 도메인 이름의 경우, 1단계인 최상위 도메인에 기관의 종류가 나타나고, 2단계에서 기관명이 나타납니다. 국가별 도메인 이름의 경우, 1단계에 국가코드가 나타나며, 2단계에는 기관의 종류가, 3단계에는 기관명이 나타나는 것이 일반적입니다. 아래는 기관의 종류에 대한 명칭입니다.
   

   국제적인 도메인 : .com(상업적 기관) .net(네트워크 관리 기관) .org(비영리 기관) .edu(교육기관) .gov(정부기관) .mil(군사기관)                           .int(국제단체)  kr도메인 : .ac(대학) .co(기업) .or(비영리 기관) .go(정부 기관) .ne(Network관리기관) .re(연구소) .es(초등학교) .ms(중학교)                 .hs(고등학교) .sc(기타학교) .seoul(서울 특별시) .pe(개인)

       

3. 도메인 이름 서버(DNS, domain name server)

특정 호스트에 접속하기 위해 일일이 숫자로 된 IP주소를 기억하지 않고 도메인이름만으로 접속이 가능하도록 도메인 이름을 IP주소로 전환시켜 주는 시스템을 도메인 이름 서버라고 합니다.

4. 웹서버(Web Server)

웹 페이지 문서(HTML로 작성된 문서)를 보관하고 있다가 클라이언트(사용자 컴퓨터 또는 사용자 컴퓨터의 브라우저)로부터 요청이 오면 이를 제공해 주는 컴퓨터 프로그램 또는 이를 실행하는 컴퓨터를 말합니다. 예를 들어, 사용자가 웬 브라우저에서 URL로 'www.naver.com/index.html'라고치면, 도메인 이름이 'naver.com'인 웹서버에게 'index.html' 이라는 웹문서를 요청하게 되고, 웹서버는 'index.html' 파일을 찾아서 브라우저에게 보냅니다. 웹 서보용 프로그램으로는 UNIX 기반의 아파치, WINDOW용의 IIS, 넷스케이프의 엔터프라이즈 서버 등이 있습니다.

5. URL (Uniform Resource Locator)

URL은 웹 상에서 서비스를 제공하는 각 서버들에 있는 개별자원(HTML문서, 이미지파일 등)들의 위치를 나타내기 위한 것으로 접속해야 될 서비스의 종류, 서버의 위치(도메인 네임), 파일의 위치를 포함합니다. 일반적인 체계(syntax)는 '프로토콜://정보를 가진 컴퓨터 이름/경로명/파일명'으로 구성됩니다.

6. HTTP (HyperText Transfer Protocol)

HTTP는 웹 서버와 사용자 컴퓨터의 브라우저(클라이언트)사이에 문서를 전송하기 위해 사용되는 통신 규약(Protocol)을 말합니다. 인터넷 주소를 지정할 때 'http://www.....'와 같이 하는 것은 www로 시작되는 인터넷 주소에서 하이퍼텍스트 문서의 교환을 HTTP 통신규약으로 처리하라는 뜻입니다.

7. 하이퍼텍스트(Hypertext)

하이퍼텍스트 문서는 문서 중간에 특정 키워드를 두고 문자나 그림을 상호 유기적으로 결합하여 연결시킴으로써, 서로 다른 문서라 할지라도 하나의 문서인 거서럼 보이면서 참조하기 쉽도록 만든 문서를 의미합니다. HTML로  기술된 문서가 대표적인 하이퍼텍스트 문서입니다.

문서화 언어

컴퓨터언어는 크게 자료처리를 위한 언어와 문서화를 위한 언어로 구분됩니다. 자료처리를 위한 언어란 컴퓨터의 빠른 연산능력을 활용하기 위해 자료의 계산, 가공, 변환 등을 수행할 목적으로 만들어진 언어로 기계어, 어셈블리어, FOTRAN, COBOL, C, JAVA, 자바스크립트 등의 언어가 이에 속합니다. 문서화를 위한 언어는 컴퓨터의 저장과 검색능력을 활용하기 위한 것으로 책, 메뉴얼, 계약서 등 방대한 형태의 문서를 디지털자료로 저장할 수 있도록 이를 구조화하여 표현하는 것을 지원하는 언어입니다.

문서화 언어의 종류로는 SHML, HTML, XML 등이 있습니다.

1. SGML (Standard Generalized Markup Language)
   
   1986년 ISO(International Organization for Standardization : 국제표준화기구)에서 지정한 문서의 표현과 처리를 위한 표준의 하나입니다. 문서의 표현특성보다는 구조에 중점을 두고 만들어졌으며, 웹문서를 만드는 언어로 가장 보편적인 HTML과 차세대 인터넷표준언어로 채택된 XML은 모두 SHML에 근거하여 만들어진 것입니다.
   
   
2. HTML (Hypertext Markup Language)
   
   1989년에 CERN에 있던 팀 버너스 리가 개발한 문서화 언어로 월드와이드웹(WWW)에서 하이퍼텍스트 문서를 작성하는 데 사용되는 기본 언어입니다.
   
   
3. XML (eXtensible Markup Language)
   
   1996년 W3C(World Wide Web Consortium)에서 제안하였으며 SGML의 장점과 HTML의 장점을 수용하여 만든 언어입니다. XML 문서는 복잡한 SGML을 단순화하여 만든 문서화 언어로 SGML의 부분집합이라고도 할 수 있습니다. 문서를 구조, 스타일, 내용으로 구분하여 표현할 수 있도록 지원합니다.
   
   

HTML 기본 구조

• HTML은 태그를 문서에 부가하는 형식의 문서화 언어로, 다양한 종류의 태그로 구성됩니다. HTML표준은 W3C(World Wide Web Consortium)에서 제정하였습니다.
  
  

• 태그는 시작태그와 종료태그가 한 쌍으로 구성되는 것이 일반적이나 종료태그 없이 시작태그만 사용하는 경우도 있습니다. 시작태그는 꺾쇠괄호( < > ) 안에 태그명을 넣어서 구성하며, 종료태그는 꺾쇠괄호 안에 슬래시(/)와 함께 태그명을 넣어서 구성하는데, 시작태그와 종료태그의 모양은 다음과 같습니다.

  <태그명> .......</태크명>

• 시작태그 안에는 속성을 지정할 수 있습니다. 이 때 태그명과 속성은 공백으로 구분합니다. 또한 하나의 태그 안에 여러 개의 속성이 나타날 수 있으며 이때도 공백으로 구분하여 나타냅니다. 속성은 속성값을 가질 수 있는데, 속성값은 큰 따옴표( " ")를 사용하여 나타내는 것이 일반적입니다. 큰 따옴표는 종종 생략할 수도 있으나, URL과 같은 특정 속성값은 반드시 큰 따옴표를 사용하여야 합니다. 다음은 BODY 태그의 속성을 사용하여 문서의 배경을 노란색으로, 글자색을 빨간색으로 지정한 예입니다. 여기서 BODY는 시작태그를 나타내며, bgcolor와 text는 속성명이고 "yellow"와 "red"는 속성 값입니다.

  <Body bgcolor = "yello" text = "red">




• 태그는 대소문자를 구분하지 않습니다. 그러나 태그는 대문자로 속성은 소문자로 작성하면 문서의 가독성은 좋아집니다. 공백이나 기호를 나타내는 몇몇 특수문자의 경우 반드시 소문자를 사용해야 하는 경우도 있습니다.  
  
  
• HTML문서 편집기에서 공백과 줄바꿈을 하더라도 브라우저에서 실행된 결과를 살펴보면 무시되는것을 볼 수 있습니다. 즉 웹 브라우저에서 인식하는 것은 태그뿐이기 때문에 공백 또는 줄바꿈이 필요한 경우 이에 해당하는 태그를 적절한 부위에 사용하여야합니다.
  
  
• HTML문서는 <HTML>태그로 시작하며 </HTML>태그로 종료되어야합니다. HTML문서는 <HEAD>부문과 <BODY>부문으로 구성되는데 <HEAD>부문에는 <TITLE>태그와 같이 문서에 대한 정보를 표시하는 태그가 나타날 수 있으며, 문서의 내용과 스타일에 대한 태그는 <BODY>부문에 나타나는 것이 일반적입니다.
  
  

첫번 째 HTML

• HTML문서는 메모장이나 EditPlus같은 편집기에서 작성할 수 있습니다. 이때 저장시에 파일명은 반드시 .html .htm의 확장자를 붙여서 저장하여야합니다.
  
  
• HTML의 주석문은 <!--로 시작하여 -->로 종료합니다. 주석문은 커멘트(Comment)라고도 하며, 문서 작성자가 참고하기 위한 문장이며, 컴퓨터 실행시에는 무시가 됩니다. 즉, 주석문은 브라우저에 의해 실행되지는 않으며 문서작성자 또는 수정자에게 정보를 제공할 목적으로 사용됩니다.
  
  
• 다음 나오는 소스는 주석문을 포함하고 있는 HTML문서입니다. 이 예제를 메모장이나 Editplus와 같은 편집기에서 작성한 후 .html 또는 .htm의 확장자를 붙여서 저장 해 두고, 해당파일을 더블클릭하면 브라우저상에서 실행된 모습을 볼 수 있게 됩니다.
  
  

  <html>
      <head>
          <title>Hello HTML!</title>
      </head>
      <body>
      Hello! <BR>
      this is HTML document! <BR>
      <!-- 주석 주석 주석 주석 -->
      joosuk!
      </body>
  </html>

  결과는 다음과 같이 나옵니다.