★-쇼핑몰제작운영Tip/HTML태그강의

쇼핑몰 창업과 제작을 위한 HTML 태그 강의 [01] - HTML 태그 파일 만들기

제조업닷컴 2008. 2. 20. 15:44
728x90

인터넷 쇼핑몰 창업과 제작을 위한 HTML 태그 사전 (웹2.0 웹표준 기반)

HTML (XHTML) 사전 - 웹표준과 검색엔진 최적화(SEO)를 위한 마크업 HTML

쇼핑몰 창업과 제작을 위한 HTML 태그 강의 [01] - HTML 태그 파일 만들기

HTML 태그 강의 [01] - HTML 태그 파일의 가장 기본적인 형태를 살펴봅시다. HTML 태그 파일은 크게 두 영역으로 나뉩니다. head 와 body 인데요, 우리가 웹페이지에서 사람들에게 보여주고 싶은 부분을 body 영역에 적으면 됩니다. HTML 태그 파일을 한 번 만들어 볼까요?



HTML 태그 강좌 첫 번째 시간입니다.

참고로, 강의 끝에는 항상 HTML 태그 소스 파일을 함께 올려드릴테니, HTML 태그를 일일이 손을 타이핑치지는 마세요. ^^

시간을 최대한 아껴야죠. 글을 쭈~욱 읽고 파일을 다운로드 받아서 미리 만들어진 파일에서 원하는 부분을 고쳐서 실제로 어떻게 변하는지만 확인하시면 됩니다.

자 그럼, 일단 HTML 태그 파일을 만들어볼까요?

HTML 태그 파일 만들기

일단 저번 시간에 설치한 아크로에디트를 실행하세요. 아크로에디트가 열리면 Ctrl+n 을 눌러주세요. (컨트롤키와 n 을 같이 눌러주세요.)

그럼 다음과 같이 새로운 새로운 HTML 파일이 만들어집니다.

htm_태그_01

이제 이곳에 게시판에 글을 남기듯이 HTML 태그를 타이핑하면 됩니다. 쉽죠?

HTML 태그 기본 형태 만들기

본격적인 HTML 태그는 아닌데요, HTML 문서에는 공통적인 형태가 있습니다.

htm_태그_44

HTML 태그 (명령어) 는 < 와 > 안에 적습니다. 그리고 시작은 <태그 명령어> 로 시작하고 종료는 로 합니다. 하나씩 볼까요?

htm_태그_45

- HTML 을 시작한다.

htm_태그_46

- 여기서부터 head 영역이다.

htm_태그_47

- 여기까지가 head 영역이다.

htm_태그_48

- 여기서부터 body 영역이다.

htm_태그_49

- 여기까지가 body 영역이다.

htm_태그_50

- HTML 을 종료한다.

쉽죠? 벌써 7 분의 1 을 배웠습니다..^^

참고로 실제 사람에게 보여주기 위한 내용들은 body 영역에 들어갑니다.

head 에는 사람의 눈에는 안보이는 기타 여러 가지가 들어갑니다.

HTML 태그 파일 저장하고 내용 확인하기

이제 body 영역에 "이샵가이드 짱~~!!" 이라고 적고, Ctrl+s (컨트롤키와 s 키) 를 누르면 저장하는 창이 나옵니다.

html_태그_02

그림처럼 바탕화면에서 HTML 태그 강의라는 폴더를 하나 만들어주고요. 그 폴더 안에 HTML 태그 파일을 저장하면 됩니다.

이제 바탕화면에 있는 HTML 태그 강의 폴더로 가봅시다.

html_태그_03

html 태그 파일이 하나 있네요. 더블클릭을 하면??

html_태그_04

자..이렇게 해서 HTML 태그 파일을 마음껏 만들고 사람 눈에 어떻게 보이는지도 확인하는 방법을 알아봤습니다.

이제 다음 글부터는 본격적으로 HTML 태그를 배워봅시다.

다음 글에서는 head 영역에 들어가는 title 태그와 meta 태그에 대해서 배워보도록 하죠.

HTML 소스 다운로드