검색결과 리스트
HTML에 해당되는 글 51건
- 2011.06.25 html문서의 구조와 간단한 문서 작성하기
글
html문서의 구조와 간단한 문서 작성하기
HTML은 인터넷에서 통용되는 하나의 언어비슷한 거지요. 컴퓨터 언어로 예를 들면 C로 프로그램을 짜서 실행하면 화면에 그 프로그램이 돌아가지요. 마찬가지로 인터넷상에서 html로 프로그램(?)을 짜듯이 html코드를 적어서 실행시키면 웹브라우저에 그 내용이 표시되는 거지요. 그냥 인터넷언어라고 이해하시면 쉬울거 같네요. 그럼 오늘은 그 구조가 어떻게 되는지 한번 보도록 하지요. HTML을 작성하기 쉽도록 하는 여러가지 툴들(핫도그, 나모웹에디터등)이 있지만 우리는 간단한 것부터 시작할거니깐 메모장에서 작성하는 걸로 하겠습니다.
<HTML> : 처음시작할때는 항상 이렇게 시작합니다. 여기서부터가 html시작이라는 거를 알려주는 거
지요.
<HEAD> : head는 머리글, 즉 타이틀이 시작된다고 알려주는거지요. 웹브라우저(인터넷 익스플로러)
에게요.
<TITLE> 머리글, 즉 제목을 적어주시면 됩니다.
</HEAD> : 머리글의 끝이라는 의미죠.
<BODY> : body는 몸이라는 뜻이지요. 그러니깐 여기부터가 본문이다 하는 얘깁니다.
</BODY> : 본문이 끝났다는 얘기지요.
</HTML> : 전체 html이 끝났다는 얘깁니다. 이 뒤에 아무거나 적어도 그것은 다 무시됩니다.
그럼 간단하게 하나 만들어보도록 하지요. 화면에 "안녕하세요, 제 홈피에 오신 것을 환영합니다!"라는 구절을 출력하는 html문서를 한번 작성해 보도록 합시다.
1. 먼저 메모장을 실행합니다.
2. 메모장에 어떻게 쓰면 될까요? 일단은 다음과 같이 한번 써보세요.
그리고 다음과 같이 저장을 합니다. 꼭 모든파일로 해서 test.html처럼 뒤에 html을 붙여주셔야 합니다. 그래야 익스플로러에서 아 이게 html문서구나 하고 알아듣게 됩니다.
그런다음 탐색기에서 test.html을 더블클릭하거나 익스플로러에서 열기에서 찾아보기 해서 test.html해보세요. 그럼 다음과 같이 뜰겁니다.
열기에서...
찾아보기해서 test.html을 찾습니다.
확인을 누르면 위와 같이 나타납니다.
자, 그러면 이제 이 문서의 내용이 무슨 의미들이었는지 하나하나 살펴봅시다.
<html> - html문서라는 얘깁니다.
<head> - 제목이 여기서부터 시작된다는 거지요.
<title>첫번째로 만들어보는 html문서</title> - 문서제목, 위의 사진에서 맨위에 있지요. 그것을 적어
주는 겁니다. 여기다가 적으면 위의 그림처럼 익스플로
러 맨위에 이 문구가 들어가게 됩니다.
</head> - 제목이 끝났다는 거지요.
<body> - 본문시작
안녕하세요. 제 홈피에 오신 것을 환영합니다! - 이 글을 본문이 나타나는 페이지에 나타나게 하라는 얘
깁니다.
</body> - 본문이 끝났다는 얘깁니다.
</html> - 여기까지가 html문서라는 겁니다. 이제 끝났다는 거지요.
대충 테스트 문서를 한번 작성해 봤습니다. 어려우셨나요? 이게 어려우면 그동안 html에 대해 한번도 안 들어보신분이 되겠네요. 너무 쉽다면 html을 조금 아시는 분일테고요. 그럼 다음시간에 또 만들어 봅시다.
'HTML' 카테고리의 다른 글
| <a href></a>, 새창으로 문서이동하기 (0) | 2011.07.01 |
|---|---|
| <HR> 선그리기 (0) | 2011.06.29 |
| <B> <I> 태그 (0) | 2011.06.29 |
| <H>,<FONT SIZE> 태그 (0) | 2011.06.28 |
| <CENTER,<P>,<BR>,<P ALIGN> 태그 배우기 (2) | 2011.06.26 |
