HTML 수업

웹의 신체

HTML 수업 웹의 신체

HTML이란?

HTML이란?

웹페이지를 만들기 위한 언어로 웹브라우저 위에서 동작하는 언어다.

HT - HyperText, 문서와 문서가 링크로 연결되어 있다.

M - Markup, 태그로 이루어져 있다.

L - Language

태그란?

  • Tag
  • 태그란 정보를 정의 하는 형식

태그의 형식

 

<태그명 속성명1="속성값1" 속성명2="속성값2"> 컨텐츠 </태그명>

태그는 컨텐츠를 감싸서 그 정보의 성격과 의미를 정의 한다.

열리는 태그가 있으면 닫히는 태그가 있어야 한다. 

닫히는 태그는 태그 명 앞에는 '/'가 붙는다.

속성은 태그의 부가적인 정보가 들어온다. 아래 예제에서 href는 속성명, http://opentutorials.org은 속성값이다. href 속성은 컨텐츠인 생활코딩이 opentutorials.org와 연결되어 있다는 것을 의미한다.

닫히는 태그가 필요 없는 태그도 있다. 이런 경우 <태그명 />의 형식을 갖는다.

  • <br />
  • <input type="button" value="버튼" />

문서의 구조

  • HTML 문서는 파일의 확장자가 html 혹은 htm으로 끝난다.
  • 최상위 태그로 <html>을 사용한다. 그 하위에 <head> 태그와 <body> 태그를 컨텐츠로 가지고 있다.
  • <head> 태그는 문서를 설명하는 태그로 제목이나 키워드와 같은 정보를 담는다.
  • <body> 태그에는 문서의 내용이 위치한다.
<html>
    <head>
        문서를 정의하는 데이터가 위치함
    </head>
    <body>
        문서에 표시되는 컨텐츠가 위치함
    </body>
</html>    
참고. 메타 데이터(meta data)란 데이터를 설명하는 데이터를 의미한다. 이를테면 태그가 대표적인 메타데이터이다.

HTML 파일

HTML 코드를 파일에 저장하고 웹브라우저에서 로딩하면 웹페이지가 만들어진다. HTML 파일은 텍스트를 편집할 수 있는 에디터로 만들 수 있고, 확장자명으로 html 혹은 htm을 사용한다.

예제

example1. 아래 예제는 <a> 태그를 이용해서 링크를 만들고 <img> 태그를 이용해서 이미지를 출력하는 방법에 대한 사례다. (jsfiddle, github, ?)

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    </head>
    <body>
        <img alt="생활코딩 로고" src="https://opentutorials.org/user/course/1/94.png" />
        <br />
        <a href="http://opentutorials.org/course/1">생활코딩</a>
    </body>
</html>

참조

댓글

댓글 본문
작성자
비밀번호
  1. acamaro
    듣는 쪽에 문제가 있어 동영상 강의에서 무슨 말을 하고 있는지 잘 모르겠는데 유튜브 자체 자막으로 보려고 하니 음성인식 된 자막은 이상하게 나와서 조금 곤혹적이네요. 자체 자막이 있으면 좋을 것 같습니다.
  2. 데스페라도
    맞아요..목소리가 강의내용 쏙쏙 귀에 들어오는것이 좋아요 !!! 구~~욷 ^^
  3. 다운
    목소리도 좋으시고 내용도 정말 좋습니다~
  4. soyapastor
    오~우,,,,,,,감사합니다.
    행복하세요!!
  5. JustStudy
    고맙습니다
  6. 다시시작
    좋은 강좌 진심으로 감사를 드립니다. 무슨일을 하던지 여기서 배운 지식을 저도 공유하는 것으로 하겠습니다.
  7. 효니
    감사합니다!!! 신세계네요 ㅋㅋ
  8. 이혜진
    정말 잘 듣고 있습니다^^ 감사해요!! 문과생이라 프로그래밍에 문외한인데 수업 들으며 차근차근 따라가고 있습니다^^
  9. 심심한
    감사합니다
  10. cocohodu
    시작합니다
  11. 이승훈
    시작이 반이다~!
  12. HJHx3J
    감사합니다!
  13. 잘생김
    2015-09-17
  14. kitepak
    정말 저같은 컴맹이 이렇게 보일수가...점접 흥미로와져요.
  15. 보현
    150828 html 코드를 보면 외계어를 보는 느낌이었는데 어떤 기능을 하는진 몰라도 이제 구조가 보이네요! 감사합니다!!
  16. walkt
    불꽃남자님 그렇게 사용하셔도 무방합니다.
  17. 불꽃남자
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 이렇게 하니깐 한글파일이 깨져서 보여지더라구요... 그래서 <meta charset="utf-8"> 이렇게 변경해서 해봤는데 잘 나옵니다.
    물론 이것도 egoing님이 알려주신 것이구요 ^^
    이렇게 적용해도 되는건가요 egoing님?? 초보라서 맞게 한건지 모르겠네요 ^^;;
  18. jade
    로고는 아무래도 주소가 변경되어서 안나오는것 같습니다.
    src="주소"
    주소 부분을
    https://s3.ap-northeast-2.amazonaws.com......png
    으로 바꿔주시면 될듯
    대화보기
    • 이고잉님
      이미지 안뜨는걸 떠나서 저는 실행조차 되질 않네요;; 맥북프로 쓰고 있는데 텍스트 에디터를 쓰면 저장할때 html 로 파일포맷 지정해서 저장한거 실행하면 top sites 만 뜨네요;; 도와주세요!!
    • 쟌지
      좋은강의 잘 봤습니다~
    • HongDae
      감사합니다!!!
    • 차근차근 가르쳐 주셔서 진짜 도움 많이 되고 있어요. 감사합니다.
    • Sung Gil Yun
      저도... 돌고 돌아 다시 왔지만 포기하지 않겠습니다.^^
      목표는 내가 만들고 싶은 앱을 만드는 거지만... 프로그래머는 솔직히.. 자신없습니다.
      저도 이고잉님 처럼 훌륭하다 생각되는 일을 하고싶어...
      열심히 할려고요!
      정말..감사합니다.^^
    • 정윤호
      good!
    • good
    • 어부바
      감사합니다.
    • 손나바나나
      완료!
    • 지금여기
      강의 잘 들었습니다.
    • YellowBall
      잘 들었습니다!
    • YellowBall
      html이란?(3/3)끝2015/4/17
    • YellowBall
      들음
    • YellowBall
      2015/4/17/HTML이란?태그란?
    • 김수빈
      HTML하면 PHP, PHP하면 CSS, CSS하면 자바스크립트.
      컴퓨터 언어 다 배워버리겠네요.
    • 엔터를 땅치면 요롷케
      감사합니다~
    • 야우
      잘보고 갑니다아아앙!!^^
    • 이쏘
      저도 같은 현상이네요 ㅜㅜ 매킨토시는 텍스트 저장할때 인코딩 설정하는 부분이 안나오는데 이거때문에 그런건가요?ㅠㅠ
      대화보기
      • 양미연
        감사합니다. 링크잘 되엇습니다~
      • Ben Kim
        404에러 나오는거 보니까 예제의 이미지 파일 링크가 어떤 이유로 존재하지 않는거 같네요.
        그건 단순히 이미지가 그 주소에 없는 것으로 학습하는데는 아무 지장 없는 부분입니다.

        그래도 예제와 똑같이 나오게 하고 싶다면..
        https://s3.ap-northeast-2.amazonaws.com......png
        이 주소로 바꿔 넣어보세요.
        대화보기
        • Mira Choi
          예제 소스 메모장에 가져다가 HTML확장자로 해서 UTF-6로 저장했는데 파일을 열고 들어가니 생코 로고가 엑박으로 떠요ㅠㅠ 왜 그런건가요?
        • 김군
          감사합니다~
        • 진국이
          안녕하세요 맥북 프로 쓰고있는 사람인데요 택스트 편집기에 위에있는 글 복사후 붙인다음 바탕화면에 html파일 저장해놨는데 로고가 안나오고 위에있는 텍스트 그대로 나오네요 이거 어떻하면 로고가 나오나요?? ㅠㅡㅠ
        • ㄱㄴㄷㄹ
          이렇게 시작하니까 시작하는 맛 나네요 ㅋㅋㅋ
          감사합니다!!
        • 서현뿌뿌
          감사합니다~
        • egoing
          화이팅 입니다. 저도 잘 모르겠어요. 왜 하는지 헤헤
          대화보기
          • 방랑기사
            웹프로그래머가 되고 싶어서 독학하려고 java책을 샀다가 도저히 안되겠어서 찾다찾다가 이고잉님 블로그까지 찾아오게 됐습니다. 제가 진짜 미쳤나 싶을 정도로 일나가서도 짬내서 공부하고 집 와서도 공부하고 하루종일 프로그래밍에만 매달리고 있네요. java공부하기 전에 javascript먼저 공부하는게 좋다고하여 java에 관한 짤막한 지식들을 뒤로하고 javascript를 공부하고 있던 중 html 먼저 선행학습을 하라고하여 중간까지 동영상 강의 듣고 다시 html 듣고 있습니다. '난 정말 삽질 했구나' 싶다가도 한편으로는 삽질했다고 생각하지 않습니다. 그 부분을 먼저 보지못한 저의 무지함이 잘못이며 이 또한 옳은길로 가는 방법이라 생각하기 때문입니다. 치열한 경쟁이 계속되는 사회에서 '왜 이런 선행을 베푸는 걸까?'라는 생각이 들면서도 좋은 강의 덕분에 열심히 공부하고 있습니다. 이 수많은 좋은 강의를 만들어주신 이고잉님께 감사드립니다. 몇년 뒤에는 멋진 프로그래머가 되어 이고잉님을 뵙기를 기대하며.. 열심히 하겠습니다.
          • egoing
            코드를 보여주시면 좋을 것 같아요~
            대화보기
            • 유림
              영상에 있는대로 따라서 메모장으로 html파일을 만들어 봤는데 로고에 엑박이 뜹니다 ㅠㅠ 추적쿠키 같은것도 다 삭제해봤는데 제대로 되질 않아서요 ㅠㅠ 좀 가르쳐 주세요ㅠㅠ


              아, 그리고 수업 너무 잘듣고 있습니다!! 이런 좋은사이트는 난생 처음이에요^^ 감사합니다~!
            • panda1218
              보안콘텐츠 표시를 하시고 보시면 됩니다.
              대화보기
              • julian
                강의 감사합니다.
              • 마이싱글
                잘 배웠습니다...
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기