기초 사항

홈페이지 제작에 있어 가장 기본이 되는 것이 HTML입니다. 요사이 좋은 툴들이 많이나와 자동적으로 작성 할 수 있고, 자동적으로 다른 문서를 HTML로 변환도 가능하게 되었습니다. 그러나 원하는 정확한 방향으로 수정하거나, 좀 수준이 올라가면 반드시 HTML을 직접 수정하여야 합니다. 또한 서버를 사용하여 데이터베이스에서 자료를 자동으로 입출력하려면 HTML을 모르고서는 할 수가 없습니다.

작성하는 수준에 따라 작성되는 서류의 상태는 다르겠지만, 기본적으로 HTML은 대단히 쉽습니다. 참고서가 무한정 많습니다. 기본적인 문장만 이해하면, 다른 홈페이지에서 흥미있는 부분을 읽어 이해 해보고, 내것에 활용하면 되지요.

기본을 배우는 데는 일주일이면 되고, 기교를 부리려면 한도 끝도 없지요.

공부하는 순서는

HTML의 기본 문법을 훑어 보십시오. 다 이해 할 필요는 없고 읽는 방법을

알면 됩니다.

예제 문장들과 그 코드들을 연관시켜보십시오. 필요할 때, 문법을 조회하면서

하십시오.

어느정도 되면 스타일쉬트(CSS)도 기본 보는 방법을 읽고 같은 방식으로 실습

합니다.

어느정도 되면 자바스크립트(Javascript)도 기본 보는 방법을 읽고 같은 방식으

로 실습합니다.

그 후 숙달되면 CGI, ASP 등으로 능력을 확장하십시오. 그래픽은 이 홈페이지

의 목표가 아닙니다.

어렵게 작성하려고 노력하지 마십시오. 로딩 시간, 브라우저간의 차이에 따른 오류 가능성, 저 버전 브라우저가 읽지 못하는 문제등을 피하기 위해서는 가급적 기초적인 문장으로 홈페이지를 만드는 것이 좋습니다.

Explorer와 Netscape 간의 적용 규격이 달라 문제점이 야기되므로, 전문 싸이트를 제외하고는 한가지에 중점을 두어 작성하는 것이 좋다고 생각 합니다.

개  요

전 세계를 통해, 다양한 언어로 수억의 인구가, 무한한 정보의 바다에서 필요한 정보를 얻고, 또 정보를 제공하고 있는 것이 현실이다. 항공권이나 호텔 예약, 물품의 광고 선전과 물품의 구입, 주식 현재가의 조회와 주문에서 결재 수단으로 발전하고 있다, 몇년 안에 각종 지불이 인터넷을 통하여 이루어 질 것이라는 것은 누구나 예상하고 있다.

언제부터 인터넷이 그렇게 중요하게 되었는가를 생각하면 놀라지 않을 수 없다. 불과 10년 전 만 해도 몇 몇 특수한 사람들 이외에는 아무도 관심을 갖지 않았었다. 반도체 기술과 전자 기술의 발달로 현재 일반이 개인용으로 사용하고 있는 PC는 20년전 대기업에서 사용하던 메인 프레임 컴퓨터의 능력을 상회하고 있다. 광통신 기술로 한 순간에 백과사전 한권의 데이터 분량를 송신 할 수 있다.

그러나 더욱 중요한 것은 전 세계를 통하여 거미줄 같이 구성된 인터넷 통신망이 어느 누구의 소유가 아니고, 참여하고 있는 모든 구성원이 그 네트워크를 구성하고 있다는 것이다. 기본적으로는 영어에서 출발하였으나 모든 인간 언어를 표현 할 수 있으며, 장애인을 위 한 음성, 점자등의 표현도 가능하게 되었다. 또 기본이 되는 HTML 문법이 간단하고 다른 컴퓨터 언어보다 익히기 쉽다는 점도 전세계를 통한 확산에 기여하였다.

이제 상업적인 중요성이 충분히 부각되었고, 그래서 많은 기술 개발 투자를 하여 더욱 빠른 발전과 보급을 지원 할 것이다. 주머니에 넣고 다니면서 무선으로 광속 통신으로 지구 반대편의 데이터 베이스에 접속하고, 대금을 지불하고, 음성으로 명령을 주거나 대화를 할 수 있게 될 날이 머지 않았다.

기술적인 면에서 앞으로의 과제들은

통신 속도의 개선 - 전화선 속도로는 앞으로 화상 정보를 통신하기에 부적합      하여, CATV 라인, 광통신 선로, 고주파 무선 통신 등이 이를 개선 할 것이다.

사용도구들의 표준 언어 적용 - Internet Explorer나 Netscape                   Communicator등 사용 도구가 WWW의 HTML 제안 규격을 따르기 않고 자체

기능을 고수하고 있어 여러가지 불편이 많으나, 다른 브라우저들이 도태 되듯      이 싸움이 끝나거나 같이 사용 할 수 있게 될 수 있을 것이다.

보안 문제 - 전자 상거래를 하는데 따른 암호의 보호 뿐 아니라 서버의 해킹

방지로 안정성을 확보해야 하는데, 세계 유수 기업들이 계속 좋은 수단을 제공

하고 있다.

등이지만 큰 문제는 없을 것이다.

6,70년대 한국에서 영어를 알아야 남보다 나을 수 있었는데, 앞으로는 인터넷을 모르면 무식한 사람이 되어 생활에 불편이 이만 저만이 아닐 것이다. 여기까지 읽었으면 그 만큼 필요성을 이해하고 흥미가 있는 것이므로 배우는데 문제가 없을 것이다.

HTML 편집기

요사이 일반적인 문서 편집기들은 HTML 문서로 변환하는 기능을 갖고 있다. 초보적인 경우에는 한글, Ms Word, Ms Excel등 편집기로 일반 분서를 변화하면 되는데, 불필요한 태그들이 많이 들어가는 것이 결점이다. 또 한 스타일쉬트, 자바스크립트 사용등 제한 요소 때문에 정교한 표현은 별도로 하여야 한다.

정교한 표현을 하려면 나모 웹에디터등 전문 프로그램을 사용하면 손쉽게 작성 할 수 있다.

돈들이지 않고 에디터를 다운로드 받아서 사용하려면 영문 Arachnophilia나 영문 HTML-Kit를 추천한다.

이들 에디터들은 자동적으로 태그를 생성한다. 따라서 생성되는 코드를 보면서 표현되는 상태와 비교하며 공부하면 쉬울 것이다.

<HTML>

이 태그는 브라우저에게 HTML 문서임을 알려준다. 파일의 확장자가 .html 또는 .htm로 파일이 HTML 문서라는 것을 알려주기 위해 반드시 file.html 또는 file.htm로 저장하여야 한다.

<HTML>

</HTML>

위의 시작태그와 종료태그로 일단 HTML 문서는 구성된다.

태그(tag) 란 ?

<...>로 쌓여있는 것들을 태그(tag)이라 하고, 시작태그(starting tag)와 종료태그(closing tag)가 있다. 그 안에는 엘레멘트(element:설명)라는 명령 내용과 애트리뷰트(attribuet:설명)라는 그 엘레멘트의 특성 및 특성 값이 들어가고, 종료태그는 시작태그에 /를 붙여 </...>로 하여 그 명령이 종료됨을 알려주는데, 대부분은 종료태그을 가지지만 종료태그가 생략 될 수 있는 것과 아주 없는 것도 있다.

브라우저에게 시작태그 <HTML>는 'HTML 문서의 시작'을 알려주고, 종료태그 </HTML>는 'HTML 문서의 끝'을 알려준다. 이것 만으로는 빈 페이지가 되므로 그 안에 내용이 들어가야 문서가 될 것이다.

<HTML> 안에 포함되는 가장 기본적인 내용은 HEAD와 BODY 엘레멘트이다.

<HEAD>

이 태그는 제목을 포함하는 HTML 문서의 머릿(HEAD) 부분임를 알려준다. 모든 HTML 문서는 <HEAD></HEAD> 태그가 필요하다. 일반적으로 HTML에서는 대소문자를 구별하지 않아 <HEAD>와 <head>는 같다.

<HTML>

<HEAD>

</HEAD>

</HTML>

HEAD 태그에 들어가는 것은 여러가지 이지만 우선 TITLE 태그를 알아보자.

<TITLE>

이 태그는 문서의 제목(TITLE)을 나타내므로 전체적인 문서의 내용을 대표 할 수 있는 주제어를 담게한다. 이 제목은 문서를 표시하는 영역에는 나타나지 않으나, 웹 브라우저 윈도의 일부(대체적으로 맨 위)에 표시되고, 문서를 대표하는 목록, 북마크, 창 등에 표시되고, 검색에서도 사용되므로 생략하지 않는 것이 좋다.

<HTML>

<HEAD>

<TITLE> 월곡동 청년(제목임) </TITLE>

</HEAD>

</HTML>

제목을 넣을 때는 함축적이고 문서의 내용을 가장 잘 표현을 할 수 있는 문구를 발췌하도록 노력하여야 한다.

페이지의 대부분은 BODY 태그 안에 들어가게 된다.

<BODY>

HTML 문서에서 문서의 본체(BODY)를 말하며 문서의 내용이 들어가는 주된 부분이다. 거의 모든 부분의 명령 엘레멘트 들이 이곳에 들어 간다. 이 <BODY> </BODY>는 <HTML> </HTML> 안에 <HEAD> </HEAD> 다음에 위치한다.

<HTML>

<HEAD>

<TITLE>월곡동 청년(문서 제목)</TITLE>

</HEAD>

<BODY>

홈페이지에 바람을(문서의 본체)

</BODY>

</HTML>

이 내용을 새창으로 보면

문서의 본체 자리에 필요한 다른 내용의 문장을 넣으면 그대로 표현된다. 이것으로 가장 보편적인 문서가 완전히 구성되는 것이다.

나중에 설명 할 특별 한 경우(예:FRAMESET 문서)을 제외하고는 이 본체(<BODY>)를 다 갖게 된다.

HTML 문서의 저장

문서가 작성되면 브라우저로 읽어 표현하기 위하여 HTML문서로 저장하여야 한다.

저장 할 때는 반드시 file.html 또는 file.htm로 저장하여야 한다. 모든 문서 편집기에는 HTML로 저장하는 선택사항(Save as)이 있으므로 예를 들어 월곡동청년.html로 저장한다.

서버에 올리기 위해서는 서버에서 직접 화일을 복사하거나, FTP로 복사하거나 서버에 올리는 프로그램을 사용하여야 한다.

HTML 문서를 열어 보려면

작성하여 저장한 문서을 열어 보려면

내컴퓨터에서 해당 홀더를 열어 그 화일을 두번 클릭하거나(기본 브라우저가 설정 되었을 때) 브라우저에서 화일 열기에서 열면 된다.

내용이 없다구요. 아직 넣지 않았지요. 아무튼 이제 여러분이 최초로 작성한 가장 기본적인 문서를 점검까지 해 봤다. 이것은 모든 웹문서가 가져야 할 최소 요구사항이며, 모든 웹문서는 반드시 가져야 할 요소만을 갖고 있는 것이다.

지금까지의 기본을 복사하면서, 이제부터 좀 더 멋있고 여러가지 기능을 갖는 문서로 발전시킬 수 있을 것이다.

<BR>

그런데 한가지 여기서 설명 할 것이 있다. 문서 편집기에서 줄바꾸기를 했는데 왜 줄이 안 바뀌는지를 알아야 한다.

HTML 문서에서는 특별한 태그(예:PRE)를 제외하고는 한개 이상의 공간을 무시하고 한개 만 있는 것으로 간주한다. 줄바꿈(CR)이나 탭(tab)도 공간과 마찬가지로 해석한다. 그래서 줄바꿈을 하라는 태그(이 BR이나 블럭타입 문단들)를 사용하여야 줄바꿈이 표현되는데, 가장 간단한 것이 <BR>이다. 물론 다른 방식으로도 줄바꿈을 할 수 있는데 후에 설명한다.

그럼 수고하세요..

다음에 또 봅시다. 그동안 주님의 은총이 댁네 가득하길 빕니다.