하이퍼텍스트 마크업 언어는 WWW의 하우스 언어이자 법정 언어입니다. 이 언어의 첫 번째 버전은 1992년에 출판되었습니다. 그 이후로 HTML은 수많은 수정을 거쳐 현재 버전 5에 이르렀습니다. (버전 5는 아직 공식적으로 표준으로 채택되지는 않았지만 현재 브라우저에서는 이미 상당히 잘 지원되고 있습니다).
HTML은 콘텐츠를 구조화하는 데 사용할 수 있는 소위 마크업 언어입니다. 스타일시트는 콘텐츠의 서식을 지정하는 역할을 합니다. 아래에서 자세히 알아보세요.
HTML의 추가 개발은 월드와이드웹 컨소시엄 (줄여서 W3C)이 담당합니다.
웹 분야의 최신 개발 동향을 파악하려면 W3C 웹사이트를 정기적으로 확인해야 합니다.
HTML을 다룰 때 한 가지 중요한 질문은 어떤 버전을 사용해야 하는가입니다. 아시다시피 HTML과 같은 언어는 지속적으로 업데이트되고 있습니다. 새로운 요소가 추가되고 오래된 요소가 제거됩니다.
다음은 HTML의 가장 중요한 언어 버전과 이정표입니다:
- HTML(1992년 11월): 이것이 첫 번째 버전이었습니다. 여기서는 텍스트 문서에만 초점을 맞추었습니다.
- HTML 2.0(1995년 11월): 이제 이미지와 양식을 위한 요소도 추가되었습니다.
- HTML 4.0(1997년 12월): 스타일시트, 프레임, 스크립트가 도입되었습니다.
- XHTML 1.0(2000년 1월): XML을 사용하여 HTML 4.0을 재구성한 것입니다.
- HTML5(2009년 4월): 아직 작업 초안이므로 아직 채택된 표준은 아닙니다.
다음 튜토리얼에서는 HTML5에 초점을 맞출 것입니다. HTML5가 마침내 HTML 세계에 혁명을 일으킬 것이기 때문입니다. 실제로 이 새로운 사양에는 흥미로운 혁신이 많이 포함되어 있습니다. 예를 들어 훨씬 더 편리한 양식, 진행률 표시기, 문자 요소 및 개선된 문서 구조 등이 여기에 포함됩니다. 또한 새로운 표준에서는 플러그인 없이도 웹사이트에 동영상을 삽입할 수 있으며 드래그 앤 드롭 인터페이스가 있습니다.
HTML5에 대한 첫 번째 제안은 2004년에 웹 하이퍼텍스트 애플리케이션 기술 워킹 그룹(WHATWG)에서 웹 애플리케이션 1.0이라는 이름으로 발표되었습니다.
HTML5는 아직 공식 표준으로 발표되지는 않았지만 브라우저 제조업체는 이미 수많은 HTML5 기능을 자사 제품에 통합했습니다. WHATWG는 Apple, Mozilla, Opera를 비롯한 브라우저 제조업체들의 연합체이기 때문에 이는 놀라운 일이 아닙니다. WHATWG는 W3C(월드와이드웹 컨소시엄)의 웹 표준 개발 부진에 대한 직접적인 대응으로 설립되었습니다.
이 시점에서 브라우저 제조업체가 자체 HTML 표준을 개발하게 된 동기가 무엇인지 궁금할 수 있습니다. 결국 HTML의 개발은 이전에는 W3C의 손에 달려 있었습니다. 브라우저 제조업체의 관점에서 볼 때, 문제는 W3C가 HTML 4.01을 특별한 수정 없이 XHTML 1로 변환하면서 시작되었습니다. 원래 W3C는 XML 기반 웹을 향한 첫 단계로 XHTML 1을 확립하고자 했습니다. XHTML 2는 개발의 마지막 단계가 될 예정이었습니다. 브라우저 제조업체를 괴롭힌 것은 바로 W3C가 XML에 집중하는 것이었습니다. 그들의 눈에는 XML 접근 방식이 비실용적이며 사용자의 실제 요구를 반영하지 못한다고 생각했기 때문입니다. (물론 W3C는 다르게 보고 있습니다).
2007년부터 W3C와 WHATWG는 HTML5 사양을 공동으로 개발하거나 작업해 왔습니다. HTML5에 대한 최신 개발 동향은 http://www.w3.org/TR/html5/ 에서 확인할 수 있습니다.
다음 튜토리얼에서는 HTML5에 초점을 맞출 예정입니다.
서식 지정용 CSS
Word 또는 기타 워드 프로세싱 프로그램에서 문서 서식 파일을 사용해 본 적이 있을 것입니다. 예를 들어 줄을 선택할 때 스타일 시트를 선택할 수 있습니다.
그러면 이 스타일 시트의 문서 템플릿에서 선택한 서식에 따라 제목이 표시됩니다. 문서 서식 파일을 변경하면 제목의 모양도 변경됩니다.
Word와 HTML은 어떤 관련이 있나요? HTML 문서용 스타일 시트도 있습니다. 이러한 템플릿은 CSS(Cascading Stylesheets)를 사용하여 정의할 수 있습니다. 예를 들어 CSS를 사용하면 기본 제목(h1)의 크기를 22픽셀로 지정하고 녹색 Arial 글꼴로 표시하도록 지정할 수 있습니다.
스타일시트를 사용하면 구조와 레이아웃을 엄격하게 분리할 수 있습니다. HTML은 문서를 구조화하는 데 사용됩니다. 그러나 요소의 최종적인 모양은 CSS로 결정됩니다.
필요한 것
다음 튜토리얼에서는 HTML과 CSS에 대해 단계별로 알아볼 것입니다. 덧붙여, HTML과 CSS를 기반으로 웹사이트를 직접 만드는 데 복잡한 소프트웨어가 필요하지 않습니다. 가장 간단한 경우 - Windows에서 작업하는 경우 - 표준 편집기를 사용할 수 있습니다.
특별히 편리하지는 않지만 시작하기에 충분합니다. 그러나 좀 더 편리한 것을 선호한다면 "진짜" HTML 편집기를 찾아야 합니다. 고전적인 편집기 중 하나는 물론 Dreamweaver입니다.
하지만 이 편집기는 무료가 아닙니다.
반면, 단계5(http://www.phase5.info/)는 개인 사용자에게는 무료입니다. 따라서 개인 용도로 편집기를 사용하려는 경우 이 도구는 훌륭하고 무료입니다.
편집기 외에도 웹사이트를 테스트하려면 가장 중요한 브라우저도 설치되어 있어야 합니다. 사실 브라우저는 때때로 HTML과 CSS를 아주 다르게 해석합니다. 이를 염두에 두고 여러 브라우저에서 페이지를 광범위하게 테스트하는 것은 필수입니다. 최소한 인터넷 익스플로러, 구글 크롬, 모질라 파이어폭스는 설치되어 있어야 합니다. Opera 브라우저와 태블릿/스마트폰에서도 사이트를 테스트하는 것이 이상적입니다.
