1. HTML 이란 ?

Hyper Text Language

1) 웹(Web) : World wide Web 에서 사용하는 마크업 언어 인터넷 상에서 사용되는 웹페이즈의 정보를 표현하기 위한 언어

2) 하이퍼텍스트 :

  • 다른 텍스트에 대한 참조(“링크”)를 가진 텍스트 단위들과 이것들을 결합시킨 구성
  • 사용자가 연상하는 순서에 따라 관련 있는 쪽으로 이동하여 정보를 얻도록 조직화된 시스템

HTML의 특징

  • W3C에 의한 웹 문서의 표준 : 수정/관리 용이 , 웹 접근성 향상, 브라우저 등의 호환성 확보
  • 마크업 언어 : 파일 용량이 작아 클라이언트 - 서버 간의 빠른 문서 전달 가능
  • 일반적인 텍스트 파일 : 별도의 전용 프로그램이 아닌 간단한 편집기로도 작성 가능
  • 컴퓨터 시스템과 운영체제에 독립적 :

HTML의 단점

  • 웹 문서의 내용(외양) 표현에 집중 : 문서 내용의 의미 정보를 표현하는 데 한계
  • 구조화된 정보의 표현과 검색의 어려움 : 정보의 구조화 및 데이터 간의 연관성 표현의 어려움
  • 사용 가능한 태그가 정해져 있음 -> 제한적인 태그 : 사용의 편의성 , 하지만 융통성 및 확장성의 결여
  • 문서의 유효성 검증과 제약조건 정의의 어려움 : 내용이 구조화되지 않아 정확성 검증이 어려움

W3C, WHATWG

  • 1) W3C.org : 웹의 장기적인 성장을 보장하기 위한 공개 표준을 개발하는 국제적인 커뮤니티 -> 웹에 대한 표준과 기술의 연구 개발 총괄

권고안 추진 단계 : 노트 -> 초안 -> 후보 권고안 -> 제안 권고안 -> 권고안

  • 2)Whatwog.org : 웹을 통해 애플리케이션을 작성하고 전개할 수 있는 새로운 기술 개발을 위해 만든 공개 커뮤니티

HTML 서비스의 구성 및 처리 과정

2. HTML 문서 작성 기초

1) HTML 문서의 기본 구조

(1) html … /html : 브라우저에게 HTML 문서의 시작과 끝을 알려주기 위한 것 (2) head … /head : 문서의 각종 정보와 문서 자체에 대한 설명을 포함

  • 브라우저를 통해 화면에 표시되지 않음
  • title, style , link , script, meta , base 태그
   <body> ... </body>  // 브라우저 화면에 실제로 출력해서 보여주려는 모든 내용을 포함 

    <title> ... </title> 
    // 웹브라우저 상단(탭)에 HTML 문서의 제목을 표시할 때 사용 (즐겨찾기 제목으로도 사용) 

   <Link> ... </Link> // 별도 파일로 작성된 CSS 스타일을 웹 문서에 적용할 때 사용
   ex) <link rel="stylesheet" href="파일명.css">

   <meta> 
   ex <meta name="description" content="문서 설명">
  • 웹 문서의 문자 인코딩 방식으로 문서에 대한 간략한 설명, 문서의 키워드 , 저작자 등 다양한 정보표현한다.

헤드 부분에 들어가는 내용

CSS와 자바스크립트 삽입 HTML 5 기준

* CSS
<style>스타일 지정</style>

* JavaScript
<script>자바스크립트 코드</script>

4. 마크업(MarkUp)

1) 마크업 Mark + Up 합성어

  • “태그” Tag 문서의 구조와 내용 등에 추가적인 정보를 부여하기 위해 문서 내에 삽입되는 일열의 문자 또는 기호
  • 마크업 언어 : 태그 문서의 구조와 내용 등에 추가적인 정보를 부여하기 위해 문서 내에 삽입되는 일련의 문자 또는 기호
  • 문서의 구성 및 마크업의 분류 : 문서 안에 내용(문서의 실제 본문 내용) , 구조(문서의 구성 정보 : 제목,장,절 등) ,스타일(문서의 표현(스타일)정보

2) 기술적 마크업 언어(SGML)

(1) Standard Generalized Markup Language

  • 이기종 장치 및 시스템에 독립적으로 전자 텍스트를 표현할 수 있는 국제 표준 마크업 언어(ISO 8879)

(2) GML(1960 후반)의 영향 :

  • 문서의 구성 요소의 시각적인 표현에 대한 고려 배제 -> 문서 구조 정의와 내용 작성에 집중

(3) 매우 강력한 표현력 -> 문법과 구성이 복잡

  • 언어의 습득과 응용 시스템 구현의 어려움
  • 특수 분야(군사, 우주, 항공 등)에 제한적으로 사용한다.

3) 기술적 마크업 언어(SGML)

(1) eXtensible Markup Language

(2) 사용자에 의한 임의의 태그 정의가 가능

  • 확장성 -> 사용 목적과 용도에 맞는 문서 작성이 가능

(3) HTML과 달리 문서의 논리적 구조를 정의하는 언어

  • 문서 내용이 어떤 구조로 조직화되어 있는 지에 대한 정보를 태그로 표현하여 내용의 용이한 이해 와 명확한 전달 가능