태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

태그(Tag) 두번째 시간입니다. 이전 시간에는 태그와 HTML정의에 대해서 알아 보았습니다.

오늘은 HTML의 기본 구조에 대해서 알아 보도록 하겠습니다. 앞으로 진행되는 태그 명령어는 기초적인 것들이므로 구조와 형식및 명령어는 외우시길 바랍니다.

 

※ 태그를 배우실때 유의사항

1. 메모장을 준비하시고 눈으로 이해하지만 말고 꼭 따라서 여러번 연습합니다.

2. 연습하실때는 메모장에 직접 예제를 쓰면서 익히세요. 단, 태그명령어를 복사기능을 사용하지 마시고, 직접 하나씩 쳐서 연습하시기 바랍니다.

3. 태그연습용 폴더를 따로 만들어 두고 저장 하시고 실행해서 오류를 수정하면서 반복 연습을 합니다.

4. 저장하실때는 확장자를 꼭 .html로 저장하셔야 합니다.

5. 저장파일 이름을 되도록 영어로 해주셔야 합니다.(예: abc.html형식으로...스킨에 활용하실때나 홈페이지를 만드실때 한글파일은 스크립트 오류가 나므로 처음부터 영어파일로 연습을 해두셔야 편합니다.)

 

● 태그의 기본 원리 이해하기

앞으로 배우는 각 태그명령어들은 다음과 같은 속성을 가지고 실행됩니다.

<태그명령어>~내용~</태그명령어>의 공식을 꼭 지켜 주셔야 합니다.

<태그명령어></태그명령어>사이의 내용에는 또 다른 태그나 스크립트등 여러 가지 내용을 첨가 하게 됩니다.

<태그명령어>로 열고 </태그명령어>로 닫기로 마무리가 되어야 완성된 태그입니다.

1. <태그명령어> : <>안의 태그명령어로 시작 또는 열기 태그입니다.

2. </태그명령어>: </>안의 태그명령어로 끝내기 또는 닫기 태그입니다.

위 1번과 2번 사이에 내용이 들어 가며, 꼭 태그를 1번으로 시작하고 2번으로 끝내기를 하셔야 실행이 됩니다.

3. 독립태그: <br>,<p>태그는 위의 공식과 별개로 단독적으로 실행되는 태그입니다.

(예: 안녕하세요<br>,안녕하세요<p>와 같이 닫기 태그없이 단독적으로 실행되는 태그입니다.)

태그 실행 예( 아래 코드를 메모장에 쓰시고 .html로 저장하시고 실행해 보세요.)

<html>
  <head>
    <title>태그연습</title>
   </head>
       <body>태그연습을 하고 있습니다. 이곳은 내용을 쓰는 곳입니다. 실행 되었을까요? 
  </body> 
</html>

 

● HTML(문서)의 기본 구조 익히기

<html>: HTML. 문서의 시작을 명령하는 태그입니다.

<head>: HTM. 문서의 머리말 부분을 말하는 태그입니다.

<title>:HTML. 문서의 제목을 말하는 태그입니다.(실행시 문서의 제목란에 보여집니다.)

<body>: HTML. 문서의 본문에 해당되는 명령어를 실행하는 태그입니다.

※ 실행예는 위의 예를 실행하는 것과 동일하므로 본문내용을 바꿔가며 반복 연습하여 익히세요.

참고: 메모장 찾는 법과 메모장에서 html파일로  저장하는 방법

 1. 메모장을 연다.

 

메모장사용하기

컴퓨터시작 메뉴를 누르고 모든 프로그램에서 메모장을 찾는다.

※ 시작프로그램에 메모장이 자동으로 지정 되어 있지 않을 경우 아래에서 찾기 바랍니다.

2. 메모장 html파일로 저장하기.

메모장 사용하기

모든파일로 지정 한 후 .html형식으로 저장한다.

 

많이 어렵진 않으 셨죠? 태그가 알고보면 쉬운데, 처음 접하시는 분들에겐 생소할 수있습니다. 한번에 너무 많은 내용을 전부 올리면 헷갈려 하실듯하여 작은 분량으로 하나씩 올릴께요. 태그 실행이 안되시거나 문의 할게 있으시면, 메일로 파일을 첨부하여 문의 바랍니다. 곧 Q&A 게시판도 만들계획이니 불편하시더라도 메일로 문의 해주세요. 메일은 공지에 안내 되어 있습니다.

제 강좌가 맘에 드셨다면 추천과 믹시 듬뿍주고 가세요. 추천으로 강의료 대신할께요. 창작블로그에 "웹디자인과 블로그팁"을 연재 중입니다. 함께 추천 해주시면 감사할께요^^&

 

이 글이 링크되어 있는 곳:

블코채널[blogkorea]: 웹디자인과 블로그팁에 링크되어 있습니다.
레뷰 아이템[revu]: 웹디자인& 블로그 Tip에 링크되어 있습니다.

 

posted by 예스비™

이글에 관한 저작권은 예스비™에게 있으며, 무단 전제및 스크렙(퍼가기), 인용, 수정등을 불허 합니다. 이 글의 사용은 공지의 "저작권안내"에 따라 사용 하시기 바랍니다. 불편하시더라도 가급적 rss로 구독하거나 제 블로그에 직접 방문하셔서 읽으시길 바랍니다. _by 예스비™
제 글이 맘에 드셨나요? RSS구독을 하시면 무료로 배달해 드립니다.
  • 한rss로 구독하기
  • 피드버너로 구독하기
  • 구글리더로 구독하기
  • 다음뷰로 구독하기
  • .:★:. 댓글은 이웃과 소통하는 마음의 창입니다. .:★:.   

    1. Favicon of http://lowr.tistory.com BlogIcon White Rain 2009.11.20 09:30 수 정 댓 글

      예전에 알았던 것도 다시 보니 어렵다는..역시 복습의 중요성...ㅠㅠ
      특히 <br>과 <p>는 닫기 없이 단독 실행된다는 것이
      가끔 그 점이 조금 헷갈리기도 하더군요. 하다못해 닫기 기호를 넣고 집어넣도
      줄바꿈이 되니 말이죰. 그래서 그냥 막 쓰기도 하지만..

    2. Favicon of http://windlov2.tistory.com BlogIcon 돌이아빠 2009.11.20 12:15 수 정 댓 글

      이번회는 스킵~~~할께요. ㅎㅎ

      • Favicon of https://yesbe.tistory.com BlogIcon 예스비™ 2009.11.20 12:20 신고 수 정

        네~ㅎㅎ
        현재 재발행되는 html은 이전에 포스팅한 거라서~ㅋ
        재발행이 전부 완료 되면~css웹 표준 xhtml로 바로 넘어 갈거에요~ㅋ
        그때 추천 많이 많이 해주세요^^&

    3. Favicon of https://blog.jaea.net BlogIcon 재아 2009.11.20 20:51 신고 수 정 댓 글

      기본에 충실해야 !! 이 기본 구조를.. 2001년에 써본 기억이 ㅋ..

      지금이야 그냥 쓰지만. 그때 생각이 문뜩 남..

    4. Favicon of https://2proo.net BlogIcon 2proo 2009.11.20 23:50 신고 수 정 댓 글

      ㅎㅎㅎ 멋져요
      저도 아직도 깜빡깜빡 하는게 닫기 태그가 한쌍인 태그들.... ㅠㅠ
      div 열면 닫아주고 p 나 a 열면 닫아줘야 하는데
      아직도 깜빡깜빡 하고 있네요 ㅋㅋㅋ

      그나저나 다크에덴과 하프문이 많이 보이네요 ㅋㅋㅋ

    5. Favicon of http://toyvillage.net BlogIcon 라이너스 2009.11.21 06:58 수 정 댓 글

      유용한 팁입니다^^
      저도 한번씩 메모장으로 글적이긴 하는데
      역시나 전문적인 강의를 들으니 이해가 쏙쏙^^
      한동안 연간 사업계획 준비때문에
      야근의 연속이었네요. 늘 신경써주셔서
      감사하구요. 행복한 주말되세요^^

      • Favicon of https://yesbe.tistory.com BlogIcon 예스비™ 2009.11.21 08:33 신고 수 정

        ㅎㅎ;;
        제가 감사 하죠~
        저도 리뉴얼 한다고 블로그 글도 못올리고 신경 못쓸때 라이너스님께서 항상 응원해 주셨자나요~
        항상 감사하게 생각하고 있답니다^^&
        즐거운 주말되세요

    최근 댓글

    최근 트랙백

    BLOG main image
    포토샵 강좌, html/css 강좌등 어렵게만 느껴졌던 웹디자인을 초보자도 쉽게 이해 할 수 있는 튜토리얼, IT 트랜드, 블로그팁과 운영법, 디자인 시각에서 풀어 헤치는 상품 리뷰등, 디자인에 대한 재밌고 유익한 정보를 제공하는 블로그입니다. by 예스비™
    rss

    위젯

    BLOG ★ NIGHT

    Blog♥Rings

    Blog♥Rings Family Blog & Sites T-Blog Web site meta hub site

    구독리스트

  • rss
  • Add to Google Reader or Homepage
  • 블로그코리아에 블UP하기
  • Powered by FeedBurner
  • BlogRankers.com
  • Page Ranking Tool