2000년도 초기에 HTML의 열기는 상당했습니다. 모두 홈페이지를 만들고 각종 포털 사이트의 카페에 대문(메인 화면)에 HTML 코드를 활용하여 개성 있는 페이지를 만드는데 혈안이 되어있었습니다. 당시 제가 기억하기로도 웹페이 하나에 10만 원에 제작하는 업체들도 상당히 많았던 것으로 기억합니다. 배우기도 쉽고 활용하기도 쉬웠던 HTML에 대해서 오늘 알아보려고 합니다.
HTML의 탄생
HTML(하이퍼텍스트 마크업 언어)는 1991년에 팀 버너스 리(Tim Berners-Lee)에 의해 개발되었습니다. 그 당시 팀 버너스 리는 CERN(유럽 입자 물리학 연구소)에서 근무하고 있었는데, 웹의 초기 형태를 만들고자 했습니다. HTML은 하이퍼텍스트 문서를 작성하고 서로 연결할 수 있는 마크업 언어로 설계되었습니다. 초기에는 원격지에 흩어져 있는 연구원들이 쉽게 문서를 공유하고 검색할 수 있도록 하는 것이 목표였습니다. 그리고 이로써 처음으로 웹이라는 개념이 나타났습니다. 1993년, HTML 버전 1.0이 발표되었고, 이어서 버전 2.0, 3.2, 4.01 등이 출시되었습니다. HTML은 웹의 발전과 함께 지속적으로 업데이트되어 왔고, 현재는 HTML5가 가장 최신 버전으로 사용되고 있습니다. HTML은 웹 문서의 구조를 정의하고, 텍스트, 이미지, 링크 등을 표현하는 데에 사용됩니다. 또한, 다른 웹 기술과 함께 사용하여 동적이고 멀티미디어를 지원하는 웹 페이지를 구축하는 데에 필수적인 역할을 합니다. HTML은 웹의 핵심 기술 중 하나로 계속해서 발전하고 있습니다.
HTML의 활용
HTML은 웹 페이지를 만들기 위한 기본적이고 필수적인 마크업 언어로 사용됩니다. HTML을 효과적으로 활용함으로써 다양한 형태와 구조의 웹 페이지를 만들 수 있습니다. 여러 가지 방법으로 HTML을 활용할 수 있습니다.
1. 웹 페이지 구조 정의: HTML은 웹 페이지의 구조를 정의하는 데 사용됩니다. 헤딩(제목), 문단, 목록, 표, 폼 등을 통해 페이지의 레이아웃을 설계하고 구조화할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>웹 페이지 제목</title>
</head>
<body>
<h1>제목 1</h1>
<p>문단 내용...</p>
<ul>
<li>항목 1</li>
<li>항목 2</li>
</ul>
<table>
<!-- 표의 내용 -->
</table>
<form>
<!-- 폼 요소 -->
</form>
</body>
</html>
2. 하이퍼링크 생성: HTML을 사용하여 다른 웹 페이지로의 링크를 생성할 수 있습니다. <a> 태그를 사용하여 텍스트나 이미지 등을 링크로 만들 수 있습니다.
<a href="https://www.example.com">바로 가기</a>
3. 이미지 삽입: <img> 태그를 사용하여 웹 페이지에 이미지를 삽입할 수 있습니다.
<img src="image.jpg" alt="이미지 설명">
4. 멀티미디어 삽입: HTML5에서는 <audio>와 <video> 태그를 사용하여 오디오와 비디오를 웹 페이지에 삽입할 수 있습니다.
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
5. 폼 제어: <form> 태그를 사용하여 사용자 입력을 받을 수 있습니다. 텍스트 입력, 라디오 버튼, 체크박스, 드롭다운 등 다양한 폼 요소를 활용할 수 있습니다.
<form action="/submit" method="post">
<label for="username">사용자명:</label>
<input type="text" id="username" name="username">
<input type="submit" value="제출">
</form>
6. 페이지 메타데이터 설정: <head> 태그 내에 있는 <meta> 태그를 사용하여 페이지의 메타데이터를 설정할 수 있습니다. 이는 검색 엔진 최적화(SEO)에 도움이 됩니다.
<head>
<meta charset="UTF-8">
<meta name="description" content="웹 페이지 설명">
<meta name="keywords" content="키워드1, 키워드2, 키워드3">
<meta name="author" content="작성자">
</head>
이 외에도 HTML은 JavaScript와 CSS와 함께 사용되어 동적이고 시각적으로 매력적인 웹 페이지를 만드는 데에 기여합니다. JavaScript는 동적인 행동을 추가하고, CSS는 스타일링을 담당하며, 이들을 조합하여 풍부하고 사용자 친화적인 웹 경험을 만들 수 있습니다.
'IT, 컴퓨터' 카테고리의 다른 글
| PC 바이러스와 백신의 탄생 그리고 끝나지 않은 싸움 (127) | 2023.11.22 |
|---|---|
| 비쥬얼 베이직(Visual Basic)의 탄생과 쇠퇴의 이유 (117) | 2023.11.21 |
| 도스(DOS, Disk Operation System)에 대해서... (75) | 2023.11.17 |
| 허브(Hub)와 공유기(Router)의 차이점 (46) | 2023.11.16 |
| 격돌 32비트 게임의 시대 20세기말 "플레이스테이션 VS 세턴" (87) | 2023.11.15 |
