HTML 문서 무작정 만들어보기

by 신큰특스 posted Apr 06, 2014
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄

설명도 좋지만 일단 한번 만들어 보겠습니다.


결과물이 있어야 재미도 있고 신도 나니까요~


먼저 HTML을 작성하려면 문서 편집기가 필요합니다.


흔히 쓰시는 메모장이나 한글, MS 워드 등 모두 가능하지만


전용 편집기를 쓰시면 더욱 편하게 작성하실 수 있습니다.


에디트플러스(EditPlus)나 드림위버(Dreamweaver), 마이크로 익스프레션 웹 등 정말 많은 편집기가 있으니


그냥 자기 취향에 맞는 자신에게 가장 맞는 편집기를 쓰시면 됩니다.


저는 개인적으로 Aptana Studio를 사용합니다.


이유가 뭐냐구요? 무료잖아요^^


여기서는 모두 가지고 계신 메모장을 이용해서 한번 만들어 보겠습니다.


먼저 메모장을 실행합니다.


그리고 해당 내용을 입력해주세요.


<!DOCTYPE html>
<html>
    <head>
        <title>테스트 페이지</title>
    </head>
      
    <body>
        <h1>테스트 페이지</h1>
        <p>이 자료는 <a href="http://www.htmlfive.co.kr">HTML5 오픈 커뮤니티</a>에서 배포합니다.</p>
    </body>
</html>



이런 형태가 되겠죠?

띄워쓰기는 보기 편하려고 하는거니 굳이 꼭 저런 식으로 맞춰주실 필요는 없습니다.

하지만 구분하기 편하고 다른 사람들이 보기에도 편하기 때문에 지금부터 익숙해지시는걸 추천합니다.

스페이스보다는 탭키로 구분하는게 편리합니다.



캡처.JPG




이제 파일 > 다른이름으로 저장 > 바탕화면에 index.html로 저장해주세요.

바탕화면으로 가보면 웹문서 아이콘의 index가 존재하고 있을겁니다.

이 파일을 더블 클릭하시거나 익스플로러 등의 웹 브라우저를 키셔서 드래그 & 드롭을 해주세요.



캡처2.JPG

이런 식으로 결과를 확인할 수 있습니다.

이 과정이 귀찮으시면 태그 연습장(http://htmlfive.co.kr/html5/xe/page_JTDY39)을 이용하셔도 좋습니다.


어렵지 않죠?

처음으로 여러분만의 웹문서를 만들어냈습니다!

이러한 웹문서가 쌓여서 웹사이트가 됩니다.



다음번에는 작성했던 문서의 구조와 각 태그의 의미를 알아보겠습니다. ^^