[HTML무엇일까] HTML5, 에디터, 기본구조 알아봅시다

HTML은 무엇인가?


HTML(Hyper Text Markup Language) 은 웹페이지를 기술하기 위한 언어이다.

HTML은 마크업언어의 일종입니다. 마크업언어는 텍스트에 태그를 붙여서 텍스트가 문서의 어디에 해당하는지를 기술한것입니다.


<title> Web Programming </title>


HTML 요소

<title> : 시작태그

</title> : 종료태그


HTML의 역사


팀벅


HTML팀 버너스리에 의하여 개발되었다. 팀버너스리는 물리학자로서 CERN에서 일하고 있었다.

팀 버너스리는 CERN의 연구자들이 문서를 공유할 수 있는 ENQUIRE라는 시스템을 제안하고 프로토타입을 개발하였다.

이것은 최초의 인터넷 기반의 하이퍼텍스트 시스템이었다. 1990년에 HTML을 정의 하였고 브라우저를 작성하였으며

서버 소프트웨어까지 개발하였다. 최초의 html요소는 18개 였으며 sgml의 영향을 받았다고한다.



HTML5


HTML의 새로운 표준어.

완전한 CSS3지원

비디오와 오디오 지원

2D/3D 그래픽 지원

로컬 저장소 지원

로컬 SQL 데이터베이스 지원

웹 어플리케이션 지원


등등 특징이 있다고 하네요.




써엄



HTML 편집기를 알아봅시다.


HTML문서의 편집을 도와주는 기능을 가지고 있는 몇 가지의 편리한 에디터가 있습니다. 3가지 에디터를 소개해리도록하겠습니다!



1. UltraEdit

111



UltraEdit는 과거부터 사용해오던 유명한 텍스트 편집 프로그램이다. 45일간 무료로 사용할수 있는 쉐어웨어입니다.

윈도우에 기본적으로 내장되어 있는 노트패드를 대치할수 있는 프로그램으로

파일 크기 무제한, 10만 단어 맞춤법 검사, 16진수 편집 능력, 프로그래머를 위한 구문 강조 설정, 열 편집 등 많은 기능을 제공한다.

특히, UltraEdit는 크기가 큰 파일을 적은 메모리 용량으로 처리하는 데 강점을 보입니다.@




2. EditPlus

22222

EditPlus도 텍스트 문서 편집 유틸리티입니다. 특히 HTML, 편집 시 태그를 다른 색으로 표시하는 기능이 있고 자바,C/C++.Perl등

여러 가지 언어를 지원합니다. 특히 브라우저를 따로 실행시키지 않고도 HTML문서를 내장 브라우저로 간편하게 확인해 볼수있습니다.




3. Visual Studio 2012 Express for Web


마이크로소프트가 무료로 제공하는 Visual Studio 2012 Express for Web을 사용해보자. 


333333


Visual Studio 2012 Express for Web을 사용하면 HTML의 입력을 도와주고, 웹 브라우저를 선택하여 자동으로 실행할수있습니다.





HTML문서의 기본 구조


HTML 문서의 구조를 간단하게 알아보도록 합시다. 

모든 HTML문서는 <html>로 시작하여 </html>로 끝납니다.


444444444


<!DOCTYPE>

- <!DOCTYPE>은 브라우저가 올바르게 웹 페이지를 표시할 수 있도록 돕습니다. 각버전에 따라서 <!DOCTYPE>선언이 달라진다고 하네요.


<html>

- html문서는 <html> 과 </html>로 둘러싸인다. 브라우저에게 이파일의 내용이 HTML이라고 선언하는것입니다.


<head>

- 헤드는 <head>와</head>태그로 구성됩니다. 웹페이지에 대한 정보를 저장하고 있는 곳입니다.


<body>

- 웹페이지의 모든 내용이 여기에 표시됩니다. 브라우저 안에 표시되는 부분!



이렇게 소스를입력하고 웹페이지를 열어보게되면


5555555


이런식으로 웹페이지가 생성된답니다 .




HTML문서를 작성하실때 주의사항!


- 태그 이름은 대소문자를 구별하지않는다 ( <head> = <HEAD> )

- 하나의 요소 안에 다른 요소가 포함될수 있습니다. ( <html> 요소 안에 <head>요소가 포함된것을 볼수있다. )

- 시작 태그와 종료 태그 사이의 연속된 공백은 하나의 공백으로 취급합니다.




이상 HTML의 기초에 대해 알아보았습니다. 다음포스팅에도 알찬 내용준비해서 오도록하겠습니다 .감사합니다 

댓글(4)

Designed by JB FACTORY