▣ HTML 문서 작성
이번 시간는 실제로 HTML문서를 만들어 보는 연습을 해 보겠습니다.
그럼 HTML문서를 어디에서 어떻게 만들 것인가? 하는 의문이 생깁니다.
HTML문서를 만드는 에디터(편집기)로 나모 웹 에디터나 드림웨버 등
여러가지가 있으나 모두 프로그램을 구입하여 컴퓨터에 설치를 하여야
사용할 수 있고, 시험용(트라이얼) 버전을 사용하는 것도 시간적인
한계가 있다. 또한 아래 한글이나 워드패드 등의 텍스트 편집기도
프로그램을 구입하여 컴퓨터에 설치를 하여야 사용할 수 있어서
여기에서는 윈도우즈에 기본으로 포함되어 있고 비교적 호환이
잘되는 메모장을 사용하여 만드는 방법에 대하여 알아보고자 한다.
1. 메모장을 열자
컴퓨터를 켜면 바탕화면에 기본 아이콘과 사용자가 만들어 놓은
단축 아이콘들이 보이는데 컴퓨터 화면의 왼쪽 아래을 보면“시작”
이라는 글자가 크게 보입니다. "시작"을 마우스로 클릭하면
"모든 프로 그램”이 나타나고 그 곳에 마우스를 가져가면 여러가지가
나타나는데 위쪽 부분에 있는“보조프로그램“에 다시 마우스를
가져가서 나타나는 메뉴 중에서 "메모장"을 차례대로 찾아가 클릭한다
(윈도우스 98는 시작 - 프로그램 - 보조프로그램 - 메모장 순입니다)
그러면 조그만 네모 상자가 나타나는데 이것이 메모장입니다.
맨 위쪽 파란 줄에 보면 하얀 글씨로 [제목 없음 - 메모장]이렇게
표시되어 있는데 이것을 "제목 표시줄" 이라고 합니다.
그 밑에 왼쪽에서부터 파일(F), 편집(E), 서식(O), 보기(V),
도움말(H) 이렇게 5개의 메뉴가 보이고 그 아래 하얀 빈칸 맨 위
좌측에 커서가 깜박이고 있는 것이 보일 것입니다.
이 곳에서 우리는 HTML문서를 만들 것입니다.
2. HTML의 기본 구조와 의미에 대하여 알아보자.
기본 구조와 의미는 다음과 같으며 태그 입력시 줄을 바꾸어 쓰거나
한 줄로 써도 상관없지만 시작태그와 종료태그를 빠지지 않게 입력하기
위해서는 작성자 본인이 한 눈에 알아보기 쉽게 작성할 필요가 있다.
그래야 작성후 오류가 생기더라도 쉽게 찾아서 정정할 수 있기 때문이다.
<html> ---- html문서의 시작을 알리는 시작태그
<head> --- html 문서의 헤드 시작태그
<title> ---- html 문서의 제목 시작태그
</title> ----- html 문서의 제목 종료태그
</head> ------- html 문서의 헤드 종료 태그
<body> --- 본문서의 시작을 알리는 태그이다.
</body> --- 본문의 종료 테그이다
</html> ----- html문서의 끝을 알리는 종료 태그이다.
위에서 HTML의 기본구조와 의미에 대하여 알아보았다.
좀더 이해를 돕기 위하여 설명을 하자면,
▶ html의 기본형식
html 작성하기 위해서 기본적으로 들어가야할 태그들이 바로
html, head, title, body의 4가지 입니다.
시작태그와 종료태그가 한 쌍으로 구성되어 있으며 순서대로
써야 합니다. 종료태그는 시작태그 앞에 슬래시(/) 기호만
입력하면 된다는 것 알죠? 바로 이것들이 HTML의 기본태그입니다.
▶ <html>,</html>
우리가 지금 뭘 배우고 있죠? html이잖아요!
따라서 html문서를 메모장에다가 작성할 때 '이 문서는 html로
쓰여지고 있다'고 알려줘야합니다. 바로 그런 역할을
<html>태그가 담당합니다. <html>태그란
"지금부터 html문서를 시작하겠노라~"라는 뜻이죠.
이것은 가장 기본적인 태그로 문서에 가장먼저 적어줘야겠지요?
또, 가장 나중에 종료시켜줘야 하겠지요.
왜냐하면 문서가 끝날 때까지 효력을 발휘해야 하니까요.
위 내용을 잘 보시면 <html>태그는 가장먼저 쓰여서
가장 나중에 </html>로 종료된게 보이죠?
▶ <head>,</head>
헤드태그는 말그대로 문서의 머릿말을 담당합니다.
따라서 문서의 대략적인 특성이나 정보는 <head>와 </head>
사이에 채우는거죠. <head>태그의 영역안에는 보는 바와같이
<title>태그가 들어갑니다.
그리고 <META>태그라는 것이 들어갈때도 있는데 이건 뒤에서 다룹니다.
▶<title>,</title>
타이틀, 말그대로 문서의 제목을 담당하는 태그입니다.
하나의 문서를 요약시킬만한 제목을 넣는 태그이므로 타이틀태그는
<head>태그안에 넣는답니다. 문서의 제목은 <title>과
</title>사이에 넣어주면 되는 것이죠. "연습"이라는 제목을
넣었습니다. 그렇다면 저 문서를 실행시켰을때 제목은 어디에
보여지게 될까요? 제목은 맨 위의 "제목 표시줄"에 파란색 바탕에
하얀색 글씨로 나타납니다.
▶<body>,</body>
BODY란 '몸'이란 뜻이죠? HTML에서도 <body>태그는 그 문서의
주내용(몸체부분)이 실리는 부분을 담당한답니다.
즉, <body>태그란 "지금부터 본격적인 내용을 시작하겠다"라는 뜻입니다.
그 본격적인 내용은 <body>와 </body>안에 쓰면 됩니다.
"나는 할 수 있다"라는 내용을 넣었습니다.
그렇다면 저 문서를 실행시켰을때 내용은 어디에 보여지게 될까요?
바로 가장 잘보이는 웹브라우져의 화면에 나타나게 됩니다.
<body>태그안의 내용을 어떻게 꾸미느냐에따라 화면이 달라지겠지요?
따라서 뒤에 배울 모든 태그들은 화면을 담당하는 <body>태그안에서
쓰여지게 됩니다. <FONT>태그나 <MARQUEE>태그, <IMAGE>태그
등 할 것 없이 모두 <body>태그안에서 작성해줘야 하는것이죠.
▶ 기본 구조(틀)를 숙지하자!
지금까지 배운 4가지 태그들이 작성되는 위치,
즉 html문서의 기본구조(틀)를 알아두어야 합니다.
<html>은 문서의 처음과 끝에,
<head>는 <html>밑에,
<title>은 <head>사이에,
<body>는 <head>가 끝나고 작성하면 됩니다.
<html>
<head>
<title>문서의 제목</title>
</head>
<body>
삽입할 내용
</body>
</html>
이런 구조를 꼭 기억하시기 바라며, 태그는
<body>
내용
</body> 와 같이 줄을 바꿔쓰거나
<body>내용</body>와 같이
한 줄로 붙여쓰거나 똑 같다는 것도 알아두세요.
3. 무작정 따라하기
메모장을 열어서 다음과 같이 입력한다
<html><head><title>연습하기</title></head>
<body>안녕하세요?
HTML 문서 작성 연습입니다.
</body>
</html>
① 위와 같이 입력하고
(또는 위의 8줄을 드래그 복사하여 메모장에 붙여넣기 하고)
② 왼쪽 상단의 메뉴에서 “파일” - “저장”
(또는 다른이름으로 저장)을 차례대로 클릭하면
“다른이름으로 저장” 창이 뜨는데
③ 위쪽의“저장위치"에서 내문서나 바탕화면 등 저장할 위치를
선택하고(여기에서는 찾기 쉽게 “바탕화면“을 선택)하고
아래쪽에서“파일이름” *.txt라고 된 곳에 저장할 이름을 쓰고
난 후 점(.)을 찍고 htm 이라고 쓴다 (여기에서는 『연습.htm』)
(매우 중요한데 초보자들이 이 곳에서 틀리기 쉬움)
- 반드시 이름뒤에 점 찍고 영문 소문자로 htm 한다 - 강조, 재강조
"파일형식"에서 텍스트 문서(*.txt)라고 된 곳
옆의 V(체크)표시를 클릭하여“모든 파일“을 선택한다
④ 그리고 마지막으로“저장”버튼을 클릭한다
이렇게 한후 바탕화면에 보면 영어로 크게 e 표시 밑에
"연습.htm"이라는 파일이 보이는데 이것을 더블클릭하면
맨 위의 제목 표시줄에 "연습하기-Microsoft Internet
Explorer"이 표시되고 아래의 본문에 "안녕하세요?
HTML 문서 작성 연습입니다." 이렇게 나타납니다.
위에서 설명한대로 나타나면 HTML문서 작성 성공입니다.
성공한 사람은 만세 3창(만세! 만세! 만세! ) ㅎㅎㅎ
너무 밋밋하고 썰렁합니까? 그래도 일단은 성공입니다.
처음부터 너무 많은 것을 배우려고 생각하지 말고 차근 차근
연습 하다 보면 자기도 모르는 사이 고수가 되어있을 것입니다.
그런데 여기에서 의문이 하나 생겨야 할텐데, 없으면 그냥
넘어가죠. 아! 질문 있다고요? 그렇죠?
메모장에서 입력할때에는
안녕하세요?
HTML 문서 작성 연습입니다.
하고 엔터를 치고 두 줄로 입력을 했는데
왜 한 줄로 표시되어 나타나는가 이말이지요?
그 이유는 HTML문서는 줄을 바꾸거나 2타 이상
사이 띄우기를 하려면 엔터나 스페이스 바를 여러번 눌러도 않되고
태그나 특수문자를 입력해야 한다고 했습니다.
줄 바꾸는 방법은
- 화면상이나 아래 한글에서는 엔터를 치면 줄이
바뀌어지나 HTML문서에서는 엔터 대신에 <br>이라는 태그를
입력하면 컴퓨터가 알아서 줄을 바꾸어줍니다.
줄 간격을 넓게하려면 <br><br> 이렇게 두 번 하면 됨
또는 여러 번하면 할수록 당연히 줄 간격이 많이 떨어지겠지요?
(<br><br> 이렇게 두 번 하는 것하고 같은 것이
<p>태그로 문단을 구분하는 태그입니다)
즉 줄 바꾸기 하는 태그는 <br>이라는 것을 알아두세요.
안녕하세요? 뒤에 <br>을 입력합니다
그러면 두줄로 표시되어 나타납니다.
그리고 입력한 내용을 수정 하려면 어떻게 하지요?
다시 써야 하나 이것 참 막막하네.
그러나 걱정 없습니다.
메모장에서 파일 - 저장을 차례로 클릭하고
html문서에서 새로고침 아이콘을 클릭하면 됩니다.
메모장이 닫힌 상태에서 입력한 내용을 보려면
"연습.htm " 파일을 클릭하여 파일 화면이 열린 상태에서
상단의 메뉴에서 “보기”를 클릭 하여 저 아래 쪽에 있는
"소스"라는 곳을 클릭하면 메모장이 열립니다.
<html>
<head>
<title>연습하기</title>
</head>
<body>안녕하세요?
HTML 문서 작성 연습입니다.
</body>
</html>
이렇게 앞에서 입력했던 내용이 그대로 나타납니다
(수정하거나 내용을 더 삽입하려면 한글 부분에 내용을 쓰고
메뉴바에서"파일"-"저장" 하고 웹문서에서 작성한
문서를 닫고 다시 더블 클릭하거나 메뉴바에서 보기 아래쪽에
있는 개집(?) 같은 곳의 왼쪽에 있는 화살표가 상하로 표시된
“새로 고침”아이콘을 클릭하면 내용이 수정되어짐)
이와 같이 해서 기초 강좌가 끝났습니다! ^^