웹스터디

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. 회색간달프
    그냥 지나치던 부분을 핵심을 집어 주셔서 고맙습니다.
  2. jungho
    감사합니다 왕초보도 따라하니 실행됩니다 너무 신기해요
  3. 감자888
    안녕하세요. 저는 이번에 프로그래밍 공부 언어를 시작하게 되었는데

    한 가지 질문이 있어서 글을 남기게 되었습니다.

    WEB1 -6. 기본문법 태그 강의에서 04:16쯔음에 강사님께서 글씨 굵게를 만드는 <strong> </strong>을
    하셨는데

    저는 다른 에디터를 사용중이라서요 (저는 visual studio)를 쓰고 있습니다.

    이 부분에서 저는 빨간색 표시로 바뀌지가 않더군요.

    혹시 이 부분에 대해서 잘 설명해주 실 분 계시면 설명좀 부탁드려도 될까요 ㅠ...?
  4. ssaukuda
    정말 감사합니다~!!!
  5. beking15
    왜 폐지예정인가요?
  6. dufuqsls
    잘보고있습니다.
  7. acamaro
    듣는 쪽에 문제가 있어 동영상 강의에서 무슨 말을 하고 있는지 잘 모르겠는데 유튜브 자체 자막으로 보려고 하니 음성인식 된 자막은 이상하게 나와서 조금 곤혹적이네요. 자체 자막이 있으면 좋을 것 같습니다.
  8. 데스페라도
    맞아요..목소리가 강의내용 쏙쏙 귀에 들어오는것이 좋아요 !!! 구~~욷 ^^
  9. 다운
    목소리도 좋으시고 내용도 정말 좋습니다~
  10. soyapastor
    오~우,,,,,,,감사합니다.
    행복하세요!!
  11. JustStudy
    고맙습니다
  12. 다시시작
    좋은 강좌 진심으로 감사를 드립니다. 무슨일을 하던지 여기서 배운 지식을 저도 공유하는 것으로 하겠습니다.
  13. 효니
    감사합니다!!! 신세계네요 ㅋㅋ
  14. 이혜진
    정말 잘 듣고 있습니다^^ 감사해요!! 문과생이라 프로그래밍에 문외한인데 수업 들으며 차근차근 따라가고 있습니다^^
  15. 심심한
    감사합니다
  16. cocohodu
    시작합니다
  17. 이승훈
    시작이 반이다~!
  18. HJHx3J
    감사합니다!
  19. 잘생김
    2015-09-17
  20. kitepak
    정말 저같은 컴맹이 이렇게 보일수가...점접 흥미로와져요.
  21. 보현
    150828 html 코드를 보면 외계어를 보는 느낌이었는데 어떤 기능을 하는진 몰라도 이제 구조가 보이네요! 감사합니다!!
  22. walkt
    불꽃남자님 그렇게 사용하셔도 무방합니다.
  23. 불꽃남자
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 이렇게 하니깐 한글파일이 깨져서 보여지더라구요... 그래서 <meta charset="utf-8"> 이렇게 변경해서 해봤는데 잘 나옵니다.
    물론 이것도 egoing님이 알려주신 것이구요 ^^
    이렇게 적용해도 되는건가요 egoing님?? 초보라서 맞게 한건지 모르겠네요 ^^;;
  24. 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
          화이팅 입니다. 저도 잘 모르겠어요. 왜 하는지 헤헤
          대화보기