기본태그}
<html>
<head>
<title>문서의 제목이 들어가는 곳 </title>
</head>
<body>
웹 브라우저의 화면에 보여지는 내용
</body>
</html>
---------------------------------------------------------
{문자 색 넣기}
<font color=“색“>
---------------------------------------------------------------------------------------------------
의료인을 위한 인터넷 홈페이지 만들기
Making the Internet Homepage for a Physician
순천향대학병원 신경외과학교실
국문초록
인터넷을 적극적으로 이용하는 방법은 홈페이지를 만들어 국내외의 의사들과 대화하고 정보를 공유하는 것이다. 따라서 분명한 목적을 갖으면 의료인이 환자에게 진료정보를 제공하고, 동료의사들과는 교육공간 및 연구자료를 공유할 수 있는 역할을 하는 인터넷 홈페이지를 만들고, 자료를 디지털화 해서 문서로 보관하여 의료정보를 체계적으로 구축할 수 있다. 개인용 컴퓨터에 모뎀, 스캐너 등을 준비하고 위드프로세서로 HTML(Hyper Text Markup Language) 문서를 만들어 웹브라우저에서 확인한 다음 계정에 자료를 올리게 되며, 발전된 홈페이지를 구축하기 위해서는 좋은 아이디어를 구상하고, 항상 새로운 정보에 관심을 갖으며 꾸준한 업데이트를 이루어야 한다.
핵심용어: 인터넷 홈페이지, HTML, 의료정보, 아이디어
서론
의료인들에게도 인터넷이라는 용어가 매우 가깝게 다가와 있고 진료 뿐만 아니라 교육이나 연구분야에 있어서 편리하고 유용한 도구가 되고 있다. 이를 이용하는 방법은 둘로 나누어서 정보검색이나 전자우편이용을 소극적인 이용방법이라고 표현할 수 있고 반면에 인터넷 홈페이지를 만들어서 국내외의 의사들과 대화하고 정보를 공유하는 방법이 적극적인 이용방법이라고 할 수있다. 의료인들에게 인터넷상에 홈페이지를 만들고 이를 운영한다는 것은 컴퓨터 초보자로서는 그리 쉽지 않다고도 할 수 있고 굳이 홈페이지가 필요하면 전문제작업체에 의뢰해도 되는 일이다. 그러나 자신의 아이디어와 분명한 목적이 갖고 홈페이지를 제작하고 유지보수 한다면 환자진료 이외에 하나의 즐거움이 될 수 있다.
저자는 순천향대학병원 전용네트워크를 이용하여 지난 1997년 5월부터 현재까지 순천향대학병원 신경외과 홈페이지(http://hosp.sch.ac.kr/ns)를 운영하고 있으며 인터넷 Medmark의 신경외과분야(http://medmark.org/ns)를 관리하고 있다. 이에 따라 그간의 경험을 토대로 개인 홈페이지개설을 지원하는 인터넷 계정을 얻어서 의료인 개인, 임상과 그리고 의원에서 사용하기 적합한 인터넷 홈페이지를 구축하기 위한 준비과정, 기초적인 제작방법, 인터넷에 올려서 세상에 알리는 방법을 소개한다.
본론
1. 용어의 정의
WWW(World wide web)이 인터넷의 대명사처럼 인식되면서 홈페이지란 말도 무척이나 많이 듣게 되는 단어가 되었다. 홈페이지는 '특정 단체나 개인이 제공하는 WWW상의 정보가 있는 곳'으로 이해할 수 있다1). 예를 들어 '순천향대학병원 신경외과 홈페이지'라고 하면 '순천향대학병원 신경외과에서 WWW으로 제공하는 정보가 있는 곳'으로 생각하면 된다.
홈페이지라는 말과 유사한 의미로 사용하는 것이 '사이트(site)'인데 말 그대로 "위치, 장소, 부지"등을 뜻한다. 인터넷에서 사용하는 사이트라는 말은 홈페이지라는 말보다 폭 넓은 의미로 사용되는데 'FTP(File Transfer Protocol)사이트나 Web 사이트 등 인터넷으로 정보를 제공하는 어떤 곳'을 통칭하기 때문이다. 따라서 '순천향대학병원 신경외과 Web 사이트'라는 말은 '순천향대학병원 신경외과 홈페이지'와 다를 바가 없다.
한편 홈페이지나 Web 사이트가 의미상 별다른 차이가 없다면 URL(Uniform Resource Locator)이라는 말은 엄격하게는 다른 의미를 갖는다. 특정 병원이나 개인이 구축해 놓은 WWW상의 정보들을 통칭하여 홈페이지라고 불렀다면, URL은 '인터넷에 있는 정보 또는 파일이 있는 구체적인 주소'를 말한다.
2. 홈페이지 제작을 위한 준비
하드웨어로는 개인용컴퓨터, 모뎀, 비디오 및 사운드보드, 스캐너 등이 필요하다. 소프트웨어로는 웹브라우저, 에디터(editor), 이미지를 다루기 위한 그래픽 소프트웨어 등이 필요하다.
1) HTML(Hyper Text Markup Language)의 이해
홈페이지는 HTML라 불리는 언어로 만들게 되는데 이는 컴퓨터 언어의 일종으로 생각하면 된다. 즉 HTML은 WWW상에서 홈페이지 작성을 위한 일종의 약속이라고 할 수 있다. HTML을 이루는 문서의 구성은 머리말과 본문 그리고 꼬리말 등으로 나누어 마치 문서의 양식을 그대로 갖고 있다.
초보자의 경우라면 이름난 HTML에디터를 하나쯤 구해 사용하는 것도 좋은데 국내에 널리 알려진 프로그램으로는 핫도그, 핫메탈, 웹 위저드 등이 있으며 모두 PC통신을 이용해 구할 수 있다. 그러나 저자는 HTML에디터 보다 한글워드프로세서와 윈도우의 기본 프로그램 중 하나인 노트패드를 사용하고 있으며 다양한 응용력을 키우기 위해서는 저자의 방법을 추천한다.
2) 개인 홈페이지개설을 지원하는 인터넷 계정
국내에서 일반인들이 인터넷을 자유롭게 사용할 수 있는 환경이 만들어진 것은 94년 말 부터이나 개인 홈페이지를 만들 수 있는 환경이 갖추어진 것은 인터넷 서비스를 상업적으로 제공하는 회사가 많아진 최근에 들어서이다2). 현재 개인 홈페이지를 만들 수 있는 계정 서비스를 제공하는 전문회사로는 나우누리, 유니텔, 아이넷, 보라넷, 엘림넷, 코넷, 한국PC통신(하이텔), 한컴인터넷 등인데 정액제를 하는 곳이 많고 하이텔의 경우 1개월에 15,000원의 비용이 든다.
3) 무료로 홈페이지 주소를 제공하는 곳3).
무료로 홈페이지를 만들 수 있는 공간을 얻을 수 있는 곳은 표1 같고 계정을 얻기 전에 한번쯤 시도해 볼 만하다. 그러나 속도가 느리고 자주 끊기는 등 불안정할 때가 많으므로 진정으로 인터넷을 하고 싶다면 유료로 계정서비스을 제공하는 전문회사를 이용하는 것이 좋다.
표 1. 무료홈페이지 제공장소와 URL
|
무료계정 제공장소 |
URL |
특징 |
|
네띠앙 |
http://www.netian.com |
아주 쉬운 사용법을 제공한다. 계정5MB. |
|
신비로 |
http://www.shinbiro.com |
계정 4MB. 유료가입과 무료가입이 있다. |
|
엔젤파이어 |
http://www.angelfire.com |
외국 사이트로 깔끔한 인터페이스를 제공한다. 계정 5MB. |
|
포춘시티 |
http://www.fortunecity.com |
외국 사이트. 5MB를 제공한다. |
|
트라이포드 |
http://www.tripod.com |
계정 5MB. |
|
프리홈페이지 |
http://www.freehomepage.com |
외국 사이트로 계정 5MB를 제공한다. |
4) 웹 브라우저
자신이 만든 HTML문서를 등록해 홈페이지를 구축하려면 우선 제대로 만들었는지에 대한검증을 위해 웹 브라우저가 필요하다. 일부 웹 브라우저가 지원하지 않는 HTML규약을 사용할 경우 다른 브라우저를 이용할 때 어떤 결과가 나타나는지 알기 위해서는 가급적 여러 종류의 브라우저로 점검을 하는 것이 좋다.
5) 저자의 아이디어
홈페이지를 만드는데 있어서 가장 중요한 준비물은 홈페이지에 올려야 할 자료를 디지털화 해서 문서로 보관하는 것이다. 반대로 생각하면 홈페이지를 제작하게 되면 정보를 체계적으로 영구 보존할 수 있게 된다. 의료인으로서 개인 홈페이지를 만들려면 약력, 경력, 소속학회, 관심분야, 업적 등의 자신의 정보를 워드프로세서에 저장해두고 이를 HTML의 형태로 바꾸고 LINK 시키면 된다. 반면 의원, 임상과 그리고 병원의 홈페이지를 구축하기 위해서는 더욱 다양한 자료를 준비해야된다.
순천향대학병원 신경외과 홈페이지(http://hosp.sch.ac.kr/ns)의 제작목적은 과내의 모든 자료를 체계적으로 관리하고 신경계질환 환자 및 가족에게 의학 정보를 전달하며, 관심 있는 의사들과의 통신을 이루는 장을 마련하고, 전공의 및 의과대학생들에게 교육공간과 신경외과의사들에게 최근의 연구정보를 제공하며 의국동문 간에 상호 연락장소로서의 역할을 위함이었다.
첫페이지는 공통부문, 진료, 교육, 연구의 네 항으로 분류하였다. 공통부문에는 인사말, 새소식, 교실원, 동문회, Hot Link 항목으로 정했다. 진료부문에는 진료일정, 특수크리닉, 수술통계, 신경외과중환자실을 소개했고 교육부문은 증례토의, 전공의교육, 학부 및 대학원, 신경해부학 강좌, 통합강의, 해외연수 및 참관기 등을 개설하였고 연구부문에는 발표논문, 연구활동, 국내외학회발표연제 등의 내용으로 구성했다.
3. 홈페이지 제작을 위한 HTML 기본문법
HTML을 Markup Language라고 하는 것은 화면에 표시할 문자열의 앞뒤에 태그를 붙여서 그 특성을 정하는 방법을 사용하는 언어이기 때문이다. '< >'표시 안에 들어가는 것을 태그라고 하고, 브라우저가 그 태그를 식별하여 태그 사이의 내용을 태그의 특성에 따라 표시하게 된다. 태그는 거의 대부분 내용의 앞뒤에 짝으로 쓰이고 그 중 뒤쪽 태그에는 슬래시가 붙어야 한다. 물론 짝으로 쓰지 않는 태그들도 많이 있다. 그리고 태그를 쓸 때는 대소문자의 구별이 없다. HTML로 홈페이지를 만들 때 기본적인 구조는 표 2와 같다.
표 2. 홈페이지를 만들 때 기본적인 구조
|
|
전문적인 내용은 제외하고 HTML언어의 기초적인 태그를 요약하면 표 4와 같다4).
표 4. HTML언어의 기초적인 태그
|
기능 |
태그종류 |
설명 |
|
기초구조 |
, |
모든 HTML문서의 제일 앞과 제일 뒤에 사용하여 HTML문서임을 표시한다 |
|
, |
문서의 정보를 저장하는 부분 | |
|
, |
홈페이지에 담고 싶은 내용을 이 태그 사이에 넣으면 표시된다 | |
|
글자의 크기와 모양 |
|
x는 크기를 나타내는 숫자를 의미하는데, 1-6중에서 고른다. 1일 때가 제일 큰 글씨다 |
|
, |
기본크기는 3이고 와 같이 +와 -를 이용하여 상대적인 증감도 가능하다 | |
|
, |
BOLD, 글자를 두껍게 한다. | |
|
, |
ITALICS, 글자를 이탤릭체로 바꾼다. | |
|
, |
타이프라이터 형태로 문자를 바꾼다. | |
|
, |
이탤릭체를 보여주며 문장을 강조 할 때 사용한다. | |
|
문장을 구별 |
|
Paragraph의 앞글자 P를 따온 태그로 마치 리턴키를 친 것처럼 문장을 구별해준다 |
|
|
기본적인 기능은
와 같은 데 다만 다음 줄과의 사이에 생기는 여백이
보다 적다 | |
|
|
하얀 줄을 하나 중간에 만들어 준다
| |
|
|
사이에 있는 문장을 화면의 중간에 놓이게 자동으로 조절 | |
|
사이에 문장을 쓰면 화면에는 나타나지 않지만 다른 사람이 HTML문서를 쉽게 읽는 것을 도와 줄 수 있다. DOS명령어의 "REM"과 같은 매우 유용하게 쓰이는 기능이다. | ||
|
리스트 |
|
Unordered List의 약자로 별도의 순서 없이 써져 있는 순서대로 출력되고 항목들을 사이에
|
|
|
Ordered List의 약자로 순서에 따라 자동적으로 번호나옴 | |
|
홈페이지에 그림 넣기 |
|
|
|
하이퍼링크 |
원하는 html 파일의 디렉토리는 말그대로 링크하고자 하는 html 파일이 있는 디렉토리이고 쓰고 싶은 문장이라는 것은 하이퍼링크가 되어서 색깔이 바뀔 문장이다 | |
|
홈페이지에 배경넣기 |
|
BGCOLOR는 배경색을 의미한다. BACKGROUND 옵션으로 그림이 배경에 쓰이지 않는 이상 여섯 자리고 되어 만들어지는 색이 배경에 깔리게 된다. LINK하이퍼링크로 되어 있는 문자나 그림의 색을 결정하는 옵션이다. VLINK이미 한번이라도 방문한 하이퍼링크의 색을 결정하는 옵션이다. ALINK마우스가 하이퍼링크 위에서 클릭을 한 후 아직 손을 떼지 않았을 때의 색을 결정하는 옵션이다. |
색은 여섯자리로 결정되는데 앞의 두자리는 R<빨간색>의 양을 나타내는 16진수 코드이며, 가운데 두자리는 G<녹색>의 양을 나타내는 16진수 코드를 나타내고 마지막 두자리는 B<파란색>의 양을 나타내는 16진수 코드이다. 이색의 삼원색을 적당히 조절해서 섞으면 자신이 원하는 색이 나오는 것이다. 자주 사용되는 기본적인 색들은 표 5와 같다.
|
코드 |
색상 |
|
"ff0000" |
빨간색 |
|
"00ff00" |
녹색 |
|
"0000ff" |
파란색 |
|
"000000" |
검정색 |
|
"ffffff" |
하얀색 |
|
"c0c0c0" |
회색 |
표 5. 기본색상
4. 한글과 노트패드 에디터로 만드는 홈페이지
저자는 국내에 가장 많이 보급되어 있는 한글과 윈도우 응용프로그램인 Windows Commander의 에디터(F4)를 이용하여 쉽고 편리하게 HTML 문서를 작성하고 있다. 한글은 현재 3.0b 버전 이상에서만 HTML 문서 작성기능을 지원하고 있으며 다양한 꾸미기를 충분히 지원하지 못하는 점이 있으나 의료인으로서 HTML 문서를 작성하기에는 부족함이 없다. 또한 Windows Commander의 에디터(F4)에서 한글로 작성한 HTML 문서에 4항에서 설명한 HTML의 기본적인 문법을 추가하면 훌륭한 홈페이지를 만들 수 있다.
방법 예)
① 한글로 문서를 작성한다.
|
제목: 의료인을 위한 인터넷 홈페이지 만들기 날짜: 1998년 11월 22일 장소: 힐튼호텔 |
②저장시 "새이름으로 저장"으로 들어가서 HTML화일(homepage.htm)로 저장한다.
③ Windows Commander를 띄우고 에디터(F4)로 homepage.htm을 읽으면 노트패드 에디터에 한글에서 작성한 HTML문서가 올라온다
|
제목: 의료인을 위한 인터넷 홈페이지 만들기
날짜: 1998년 11월 22일
장소: 힐튼호텔 |
④ 글자크기와 모양이나 문장을 구별시켜주는 태그, 리스트를 만들어 주는 태그, 홈페이지에 그림 넣기, 하이퍼링크 만들기 태그를 추가하고 홈페이지에 배경을 넣는다. 표 6과 그림 1은 HTML의 기본문법을 이용하여 제작한 홈페이지 예제 source와 이를 웹브라우저인 Netscape Navigator로 읽었을 때 나타난 모습이다.
표 6. 홈페이지 예제 source
|
김범태순천향대학병원 신경외과
|
그림 1. 예제가 웹브라우저(Netscape Navigator) 상에서 에서 보이는 화면
5. 계정에 올리기
WS_FTP는 Windows에서 자신이 만든 홈페이지 소스(HTML)를 계정을 얻은 서버로 쉽게 올릴 수 있도록 도와주는 소프트웨어로서, 통신에서 다운로드 받아서 본인의 PC에 설치한다. 모뎀을 통하여 본인의 PC와 계정간에 연결이 되면 회사로부터 인터넷에서 홈페이지를 만들기 위한 계정을 얻으면 자신에게 할당된 공간이 생긴다. 계정에 접속 후 WS_FTP프로그램을 띄우면 왼쪽에는 local system(본인의 컴퓨터)이 있고, 오른쪽에는 remote system(계정 서버)이 있다(그림 2). 중간에 위치한 →, ←의 화살표로서 본인의 컴퓨터에서 만든 HTML을 계정에 올린다.
그림 2. WS_FTP로 계정에 접속후 나타난 왼쪽의 본인의 컴퓨터와 오른쪽의 계정 서버
결론
1) 의료인은 추구하고자 하는 목적을 갖고 기초적인 HTML 문법을 이해하면 인터넷계정을 얻어서 홈페이지를 제작하고 관리 할 수 있다.
2) 인터넷 홈페이지는 시간의 제약을 받지 않으며 환자에게는 진료정보를 제공하고, 동료의사들과는 교육공간 및 연구자료를 공유할 수 있는 도구가 된다.
3) 발전된 홈페이지를 구축하기 위해서는 좋은 아이디어를 구상하고, 항상 새로운 정보에 관심을 갖으며 꾸준한 업데이트를 이루어야 한다.
참고 문헌
1) 김경태: 홈페이지란 무었인가. PC line, 1996
2) 하이텔 홈페이지제작동호회 자료실
3) http://www.yahoo.co.kr/Computers_and_Internet/Internet/World_Wide_Web/page_creation/
4) 최문규: 멀티미디어 홈페이지 만들기. 한국컴퓨터매가진, 1997
'♧강의목록1♧ > 중독-인터넷.스마트폰.게임' 카테고리의 다른 글
| 테이블이란 무엇이며 어떻게 만드는지 알아봅시다 (0) | 2008.10.31 |
|---|---|
| ◆ 태그 용어 정리 ◆ (0) | 2008.10.24 |
| <html>홈페이지 (0) | 2008.10.24 |
| <html> (0) | 2008.10.24 |
| 플래쉬 (0) | 2008.10.14 |