자칭 컴맹, 홈맹이신 분들을 위해 글을 올립니다.
이 글의 목적은
1. 게시판에 "음악, 그림" 등을 이용하여 때깔나게 글 올리기
2. 미니 홈페이지 만들기
두 가지 입니다.

컴퓨터 버벅대는 분도 한 일주일이면 원리 정도는 마스터하지 않을까 싶구요.
모쪼록 유용하게 쓰이기를 바라며 이제 글을 시작하겠습니다.^^


인터넷에 사진과 음악 등 자신이 만든 자료를 이용하여 글을 올리거나
남이 만든 사진과 음악 등의 글을 퍼올때도
또, 그 자료를 링크 시킬 때도
"html 언어"가 어떻게 돌아가는지만 알면 쉽습니다.




▶ 첫 번째 이야기 : 익스플로어 초기화면 설정하기

여러분들 컴퓨터 <바탕화면>에 아래의 그림과 같이 <익스플로어> 아이콘이 떠 있을겁니다.




인터넷을 실행시키면, 아래 그림과 같은 각자의 컴에 지정된 초기화면이 뜨겠지요.




저는 <네이버> 사이트를 초기화면으로 잡아놨습니다.
학습을 위해 당분간은 저랑 같은 환경으로 만들어 두시는 게 좋을 거 같은데요..
<네이버> 사이트를 초기화면으로 잡는 방법은, 아래 그림과 같습니다.
그림을 보고 그대로 따라해보세요.




그 다음, 그림과 같이 <일반>이란 옵션을 누르시구요,
주소 창에다 <네이버> 사이트의 주소, "http://www.naver.com"을 쳐넣으세요.
마지막으로 "확인" 버튼만 누르시면 됩니다.






▶ 두 번째 이야기 : 익스플로어 화면의 소스보기

자, 이제 <인터넷 익스플로어>를 다시 띄워보세요.
네이버 창이 떴나요?
네이버 창이 떴다면, 아래 그림과 같이 메뉴에 보면, <보기> 옵션이 있습니다.




<보기>를 누르면, 팝업 메뉴가 뜨며 <소스> 옵션이 보일 거구요.
<소스> 옵션을 누르세요.






▶ 세 번째 이야기 : 메모장 저장하기

<네이버> 창 위에, 새로운 다른 창 하나가 뜨지요?
이 창은, <메모장>이란 프로그램입니다. ^^




위 <메모장>에서 확인하다싶이, 네이버 사이트의 초기화면은 
이렇게 이상한 문자들로 짜여져 있답니다.


"히이~~~~~~ㄱ!!! 저 복잡한 걸 다 알아야 한단 말야???"
겁먹지 마세요.
우리 컴초보자들이 알아야 할 것은, 빨간색으로 체크된 것들뿐입니다.
빨간 색으로 체크된 단어의 기본 핵심은, "html  body  /body  /html"인데요.
이런 구조로 만들어진 파일들을 html문서라고 합니다.
<인터넷 익스플로어>를 띄워서 우리눈에 보여지는 그림과 글, 음악 등은 모두
이러한 html 언어를 기본으로 합니다.
물론, 더 복잡한 함수를 요하는 언어 등은 asp, 펄, php, 자바스크립트 등 많지만..
이건 기본을 떼고 난 뒤 전문적으로 하고 싶은 분들께만 권하고 싶네요.
html 문서의 기본 골격에 들어가기 전에 우선 위 <메모장>을 저장하도록 하겠습니다.
"다른 이름으로 저장"을 누르세요.
그냥, '저장' 버튼을 눌러도 됩니다.



아래와 같이 창이 뜨겠지요.
각 컴의 환경에 따라 다르게 나타나겠지만...




<메모장>을 저장할 위치로, 역삼각형 버튼을 눌러 <바탕화면>으로 지정해놓구요.




파일 이름은 되도록이면 영문이나 숫자로 기입하시되,
그 뒤의 <확장자명>은 꼭 "html"이어야 합니다.
무슨 말이냐면, "abc.html" 흑은 "apple1.html" "a1s2.html" 등
.(마침표) 다음엔 무조건 "html"이란 영문이 와야 한다는 거죠.
.(마침표) 다음을 <확장자명>이라 일컫는데요,
이 확장자명으로 이 파일은 그림파일(jpg, bmp, cgi 등등...)이다,
음악파일(wma, wav, mp3 등...)이다, 
동영상파일(wmv, avi 등..)이다...하고 파일의 종류를 판별하게 되거든요.
<확장자명>이 "html"이라 함은 "아~~~~, 이 파일은 html 문서겠구나..."하고 알게되겠지요.
일반 워드문서의 확장자명을 떠올려보세요. 
hwp....... 세계교회사 리포트 낼 때, <한글 97>이나 <한글 2000> 이상의 프로그램으로 
작성하셨을 거예요.
전 리포트 제출할 때, 리포트 이름을 "초대교회-류춘연다니엘라.hwp"로 냈었지요.^^
아참, 그리고 중요한 거...
빨간색으로 체크된 것 중, <파일형식>은 "텍스트문서"로 지정해 두시란 거.


메모장 저장시 유의점...정리해볼까요?
1. 위치 : 바탕화면
2. 파일이름 : 1.html
3. 파일형식 : 텍스트문서




▶ 네 번째 이야기 : 메모장 불러오기

"저장" 버튼을 누른 후, <메모장> 프로그램을 닫으세요.
"1.html"이란 문서는 아래 그림과 같이 <바탕화면>에 보입니다.



"1.html" 아이콘을 마우스로 클릭해 여세요.


어.. 아까봤던 <네이버> 사이트의 초기화면이 뜹니다.
처음봤던 <네이버> 사이트의 초기화면과 지금 보게 되는 <네이버> 사이트의 초기화면은
똑같은 화면 그대로지만, 다른 점이 하나 있습니다.
파일이 위치해있는 경로....지요.
그 경로가 어떻게 다르냐구요?
아래 그림을 보세요.






똑같은 html 문서인데, 하나는 네이버 사이트 http://www.naver.com/에 있구요.
다른 하나는 내 컴퓨터 안에 있습니다.
인터넷에 있는 html 문서의 소스는 이렇게 각자의 컴퓨터에 저장할 수 있으니까
나중에 홈페이지 연구를 더 깊이 하실 분은 참고하세요.


\는 "~안에"라고 읽으시면 됩니다.
주소창에 적혀있는 C:\WINDOWS\바탕 화면\1.html    이 말은.....
C:\(C 안에) WINDOWS\(WINDOWS 안에) 바탕화면\(바탕화면 안에) 
1.html 문서가 있다는 말이 되겠지요.


<메모장>이란 프로그램은 내 컴퓨터의 어느 폴더에 위치해있는지 궁금하지 않으세요?



바탕화면 좌측 제일 하단에 보면 <시작>이란 버튼하나가 보일 거예요.
그 곳을 마우스로 누르면 위와 같은 옵션이 뜨게 되겠지요.
그림처럼 따라해 보세요.
아래와 같이 <메모장>이 뜨게 됩니다.






▶ 다섯 번째 이야기 : html문서 작성하기 - html 문서의 구조

이제 html문서가 어떻게 생겨먹은 건지 그 골격을 한 번 알아보고
html 문서 작성에 들어가 보겠습니다.
아래 그림처럼 똑같이 타자 치시기 바랍니다.



치셨나요?
이게 html문서의 기본 골격입니다.
논문으로 치자면 head와 title은 서론에 해당되구요.
body 는 본문, 마지막 "/html"은 결론이 되겠습니다.
한 번 응용해 볼까요?
아래 그림처럼 html 기본 골격 사이에다 문장을 삽입해보세요.




위 <메모장>을 저장하겠습니다.
저장하는 방법은 앞에서 이미 배웠지만,(▶ 세 번째 이야기 참조)
앞서와 다른 점은 "다른 이름으로 저장" 버튼이 아닌,
그냥, "저장" 버튼을 누른다는 것입니다.
<메모장>의 <파일>메뉴에 가서, <저장>을 누르세요.
창이 하나 뜨겠지요.
그 창에다 파일을 저장하기를
1. 위치 : 바탕화면
2. 이름 : test.html
3. 형식 : text
로 지정하고 "저장" 버튼을 누르시고 <메모장>을 닫으세요.


바탕화면에 "test.html" 아이콘이 보이지요?



마우스로 파일을 클릭하여 여세요.


쨔자잔~~~




title과 /title 사이의 글...
"홈맹 탈출~~~ 아쟈~!!!"란 문장은......
윈도우바(window bar), 즉 윈도우창의 파란부분에 들어가 있습니다.
title과 /title 사이의 글은 보통 홈페이지 제목을 붙일 때 많이 써먹지요.
음.. 우린 분명 body와 /body 사이의 글들을 쓸 때,  한 문장 한 문장 줄을 달리해서 썼건만, 
익스플로어로 보여지는 세 문장의 글들은 다닥다닥 붙어서 마치 한 문장처럼 보입니다.
<메모장>을 열어, 아래와 같이 br이란 글자를 삽입해 볼까요?




▶ 여섯 번째 이야기 : 메모장 다양하게 여는 방법

<메모장>을 여는 방법은 여러가지입니다.
1. 지금 열려있는 익스플로어창의 메뉴로 가서 <보기>를 누른 후, 다시 <소스>를 누르기
   (이 문서 제일 마지막 줄에 가면, "▶ 추신 : "이 있습니다. 참고하세요.)
2. 새로 익스플로어를 실행시킨 후, 아래 그림처럼 따라하기









그런 다음 위 1의 순서, 
익스플로어창의 메뉴로 가서 <보기>를 누른 후, 다시 <소스>를 누르기

3. 바탕화면에 있는 "test.html" 아이콘을 마우스로 더블클릭하기
그런 다음 위 1의 순서,
익스플로어창의 메뉴로 가서 <보기>를 누른 후, 다시 <소스>를 누르기


"test.html"창이 열렸나요?






▶ 일곱 번째 이야기 : html태그 - br의 사용법
 
위 <메모장> 문서에다 아래 그림처럼 br이란 문자를 삽입해보세요.




저장 후, 익스플로어로 "test.html" 문서를 엽니다.




문장 줄이 바뀌어 뜨죠?
br이란 html태그는 어떤 문장 다음에 오는 문장을 그 다음 줄로 보내주는 역할을 합니다.
br이 두 개 들어가면 문장과 문장 사이에 한 줄을 띄웁니다.
br이 세 개 들어가면 두 줄을 띄우구요.
이 번엔 "test.html"파일을 <메모장>으로 열어보세요.
(익스플로어 창에서 메뉴 중 <보기>를 선택하고, 그 다음 <소스> 누르기) 
메모장으로 "test.html" 문서가 뜨면, 
아래와 같이 문장을 삽입시키고 메모장을 저장합니다.






▶ 여덟 번째 이야기 : "새로고침" 버튼

이 번엔, 익스플로어로 "test.html"파일을 열어 확인해 보세요.
만약, 앞의 인터넷 창을 안닫고 그냥 놔둔 상태였다면,
아래 그림처럼 '새로고침' 버튼을 누르세요.



'새로고침' 버튼을 누르는 순간, 아래그림처럼 최근에 저장했던 <메모장> 파일,
"test.html"이 <익스플로어>로 보이겠지요.



이후부터는 <메모장>으로 "test.html"을 저장시켰으면,
익스플로어를 새로열지 말고, '새로고침'버튼을 눌러 확인하시면 되겠습니다.




▶ 이상 : 

헷갈리시죠?^^
컴맹이시라면, 신학 공부보다 아마 더 헷갈리고 어려우실 거예요.
하지만, 자꾸 반복 연습하시다 보면 개념이 머리에 쏘옥~ 들어온답니다.

<메모장>으로 html태그 작성하는 거...
그리고, 메모장으로 저장된 html문서를 <익스플로어>로 여는 법,
오늘 이 두가지를 배웠는데요...
다음 시간엔, <그림과 음악>을 삽입하여 우리 달님반 게시판에 글을 올리는
html태그 법에 대해 알아보도록 하겠습니다.




▶ 추신 :



프로그램을 이것저것 사용하다 보면,
위 그림처럼 바탕화면 제일 하단에 여러프로그램이 열려있게 됩니다.
빨간색으로 체크된 하단부의 아무 버튼이나 눌러보세요.
메모장 그림을 누르면 메모장 프로그램이 뜰거구요.
익스플로어 프로그램을 누르면 익스플로어가 뜨겠지요.
탐색창을 누르면 탐색창이 뜰 거구요.^^;
전 포토샵 프로그램까지 열어놨습니다.
필요없는 것들은 닫으세요.
우리는 메모장과 익스플로어를 번갈아가며 사용합니다.
메모장을 저장시킬 때마다 익스플로어를 열어 확인하는 방법은 꽤나 번거롭지요...
그럴 때는 익스플로어의 "새로고침" 버튼을 눌러(▶ 여덟 번째 이야기 : 참조)
최근 저장한 메모장의 문서를 확인해보면 된답니다.
수정할 게 있다면, 메모장을 열어(▶ 여섯 번째 이야기 : 참조) 수정하시면 되구요.