웹 애플리케이션 만들기

HTML 실습

모델링을 HTML로 만들기

의미론적인 웹

 사이트 완성

실습환경으로 codeanywhere를 이용하고 계신 분은 링크가 작동하지 않는 문제가 있을 수 있습니다. 다음 영상을 참고하시면 문제를 해결할 수 있습니다. https://youtu.be/A67-fpyujzQ

index.html

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
</head>
<body>
	<header>
		<h1><a href="http://localhost/">JavaScript</a></h1>
	</header>
	<nav>
		<ol>
  		<li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
  		<li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
  		<li><a href="http://localhost/page_op.html">연산자</a></li>              
		</ol>
	</nav>
</body>
</html>
만약 포트 번호가 8080이라면 (접속 할 때 localhost:8080으로 접속한다면) 링크를 아래와 같이 작성하셔야 합니다. 
  		<li><a href="http://localhost:8080/page_html.html">JavaScript란?</a></li>
  		<li><a href="http://localhost:8080/page_vc.html">변수와 상수</a></li>
  		<li><a href="http://localhost:8080/page_op.html">연산자</a></li>  

page_html.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <header>
    <h1><a href="http://localhost/">JavaScript</a></h1>
  </header>
  <nav>
    <ol>
      <li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
      <li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
      <li><a href="http://localhost/page_op.html">연산자</a></li>
    </ol>
  </nav>
  <article>
    <h2>JavaScript란?</h2>
    JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
  </article>
</body>
</html>

page_vc.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <header>
    <h1><a href="http://localhost/">JavaScript</a></h1>
  </header>
  <nav>
    <ol>
      <li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
      <li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
      <li><a href="http://localhost/page_op.html">연산자</a></li>
    </ol>
  </nav>
  <article>
    <h2>변수와 상수</h2>
    변수는 바뀔 수 있는 값이고, 상수는 바뀌지 않는 값입니다.
  </article>
</body>
</html>

page_op.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <header>
    <h1><a href="http://localhost/">JavaScript</a></h1>
  </header>
  <nav>
    <ol>
      <li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
      <li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
      <li><a href="http://localhost/page_op.html">연산자</a></li>
    </ol>
  </nav>
  <article>
    <h2>연산자</h2>
    계산을 할 때 사용되는 것입니다.
  </article>
</body>
</html>

쉬어가기

소스코드

 github

댓글

댓글 본문
작성자
비밀번호
  1. 아나이스
    다시 한번 더 듣고 한꺼번에 댓글 올려용~
  2. 휴! 복습해야겠어요 ㅎㅎ
  3. 코알못
    어제부터 시작해서 오늘 여기까지 왔네요. 너무 재밌어요!!
  4. 굿굿
    와....... 이걸 무료로 배우다니.... 감사합니다 존경합니다ㅠㅠ
  5. 이종역(pandora)
    잘 보았습니다.
    감사합니다.
  6. Cenfun
    잘 봤습니다.
  7. 윤석환
    <meta charset='utf-8'> 넣으시면 해결될꺼에요~

    <head>
    <meta charset='utf-8'>
    </head>
  8. David Jung Kim
    질문이 있습니다!. HTMㅣ 실습편 강의대로
    저도 text edit 에서 타입을 하던중 한국어로 특정단어를 타입 하고 웹서버에서 보면 한글이 깨져서 나오는 이유가 뭐고 해결책 없을까요??
  9. jeeyoon
    DICTYPE "-": 이건 dic 타입으로 작성 -html "-"표준으로 작성되었다는걸 알려주는겁니다
    html이론 부분의 수업에 나옵니다 ^^
    대화보기
    • Hyojeon Kim
      잘봤습니다.
    • dong
      감사합니다!
    • 황성준
      잘봤습니다.
    • 김성훈
      본질은 언제나 중요하지만 단순하다.
    • 김윤호
      명확해지네요.
    • la brea2016
      막연하던것들을 조금씩 알아가는거같아 기분이 좋아요~. 아직도 낯선 외계어같지만~ 좋은 가르침 감사합니다~.
    • 김지민
      어느 강의를 들어도 비유하시는 것이 너무 대단해요!
      이번 강의에서는 건물을 위에서 본 측면과 옆에서 본 측면을 비교해서 말씀해주시는게 너무 기억에 남았네요!
      매번 친절하고 좋은 강의 감사합니다 :)
    • 1. 대소문자 구별이 없지만, 가독성측면에서 강조하기위해 대문자를 선호합니다.
      2. <!DOCTYPE html>은 말그대로 html문서이며, 어떠한 버전으로 작성됬다는 것을 알려주는 것입니다.
      밑에 <html>은 html태그를 의미합니다.
      3. 저장할 시 확장자명 '.html'을 넣기때문에 차이가 없을겁니다~ 저도 초보라 잘모르겠네요 ^^;
      대화보기
      • Scia
        질문이 있습니다.! 아시는 분 댓글달아주세요 >0<

        1. <!DOCTYPE html> 에 'DOCTYPE' 은 항상 대문자로 써야하나요?

        2. 코드화를 할 때, <!DOCTYPE html> 밑에 <html>은 왜 쓰는 건가요?

        3. 메모장에서 코드를 작성하고 저장할 때, 왜 파일형식을 '모든 형식' 으로 해야하나요?
        +가끔 '텍스트 형식' 으로 저장한 적이 있는데 별다른 차이를 발견하지 못했습니다.
      • Scia
        글씨 크기를 <h'숫자'> 가 몇까지 될까 궁금해서 실험 해보았습니다.!!

        <h1> ~ <h6> 까지 존재하고요.
        그 이상의 숫자는 태크 없이 쓰는 글자와 동일하게 나오더군요.

        <h4> 는 태그없는 글자의 크기가 동일하며,
        차이점은 굵게 씌여집니다.
      • Scia
        저도 이분 질문한거 궁금합니다.
        결과적으로는 차이가 없는 듯하는데 확신이 안가서요.

        'HTML 이론'에서는 " / " 를 쓰셨는데 'HTML 실습'에서는 왜 사라진 거죠??
        대화보기
        • Scia
          좋아요 가 있었다면 눌러주고 싶을 정도로 강의를 깔끔히 정리해 주셨네요.!
          대화보기
          • a태그에 작성한 URL을 확인해보셔야 될것같습니다.
            http://인데, http//라고 작성하신 것 같습니다. ' : ' 가 빠진거 같아요~
            대화보기
            • Byeolmaru
              메모장으로 작성하신경우 HTML 파일을 저장할 때 인코딩방식을 ANSI에서 "UTF-8" 로 체크 후 저장하셨는지 한번 확인해보세요~
              대화보기
              • Mateo Hernandez Kim
                감사합니다~
              • 김재훈
                퍼갑니다^^
                대화보기
                • 허영재
                  강의가 진행될 수록 재미가 더해갑니다.

                  시작하길 정말 잘했다고 생각합니다.

                  e-going님과 이 사이트의 관리와 컨텐츠에 기여하신 모든 분들께 감사드립니다.
                • 김영준
                  안녕하세요?
                  <meta charset="utf-8"> 사용하면 한글이 다 깨지는데요.
                  크롬, 익스플로러 공히 그렇구요(윈도우10)
                  어떻게 해야할지;;;
                  도움 좀 부탁드려요~
                • james
                  안녕하세요. 수고하십니다.

                  사이트완성 동영상 6:39에 있는 첫번째 링크를 걸고 새로운 파일을 htdocs에 page_html.html라고 저장했는데

                  The requested URL /�쐆ttp//localhost/page_html.html�� was not found on this server.

                  라고 뜹니다

                  조언 부탁드립니다.
                • 솔뫼
                  다시 찬찬히 입력된 것을 살펴보니 링크주소에서 html확장자에다 숫자 1을 입력하였네요.
                  전부 수정하니까 제대로 되네요.
                  역시 초보 인정해야 겠습니다.
                • 정말 유익하고 재밌어요 감사합니다
                • 솔뫼
                  코딩 전혀 모르는 초보입니다.
                  html실습에서 링크하는 것을 따라서 하였는데, 처음 클릭할 때는 링크가 열렸는데, vc op를 각각 작업하고나서
                  다시 클릭히며는 not pound가 되고 주소창란에 확장자가 html이 아니고, html1 숫자가 붙어 계속 에러 상태입니다.
                  주수창에서 확장자를 다시 html로 하면 제대로 링크가 되는데, 또 리프레시하면 같은 현상이 되어 머리가 아프네요.
                  무엇을 잘못한 것인가요?
                  고수님들 댓글로 알려주시면 고맙겠습니다.
                • 강호준
                  자격증 공부 때문에 오랜만에 듣네요 ㅠ 열심히 뒤쳐진 부분들 따라가야겠어요!
                • 뉴뉴뉴비
                  야학 뒤늦게 시작하게 되어 열심히 뒤따라 가고 있습니다.

                  codeanywhere 사용 중인데요

                  HTML 실습 3에서 사이트 항목마다 링크 걸때

                  container 내 save as로 page_html.html page_vc.html 파일 저장하면서

                  진행하는데 preview 로 페이지 보면 연결이 안되네요.

                  codeanywhere 사용자 분들 어떻게 진행하셨나요??
                • 아주미
                  복습하면서 공부하고 있어요
                • 강의 감사합니다.
                  근데 목소리가 에코로 들리네요.
                • 돼로밍
                  잘봤습니당
                • 불개미
                  많이 뒤쳐졌지만 열심히 따라가고 있습니다^^
                • 손은정
                  다시 복습 하려고 파일 지우고 다시 만들었는데
                  Bitmami 창에서 localhost/index.html 치면 파일을 찿을수가 없네요ㅠ.ㅠ
                  파일 저장한 이름과 다르게 localhost/html/이렇게 하면 파일이 보여요
                • oupss
                  시간 날때마다 짬짬히 듣고 있습니다. 진도는 느리게 진행 되고 있으나 부담감 갖지 않고 수업을 즐기고 있고 피부에 닿지 않았던 프로그램을 이렇게 재미있게 배울 수 있다는 것을 느끼게 해주셔서 너무나 감사합니다^^
                • Woody
                  안녕하세요.
                  강의 중간중간 쉬어가기라는 코너로, 학생들에게 피로감을 덜하게 해주시는 점
                  매우 감사하게 생각합니다.
                • 명진
                  항상 쉽게 설명해 주셔서 감사합니다.
                • 미니
                  맥 사용자입니다. 텍스트에디트 사용하고 있는데요. 기존에 저장했던 태그와 코드들을 수정하려고 파일을 열면 꺾쇄들과 태그 값이 들어있는 파일이 나오지 않고 웹서버에 있는 내용이 나와버리는데 어떻게 해야 하나요?
                • decal
                  자막을 이용해서 눈으로만 훑어보고 있는데, 일단 끝까지 한 번 훑어보렵니다.
                • Penjuin
                  이것저것 하다보니 이제야 세번째 진도를 나갔네요
                  감사합니다
                • dclasol
                  항상 말씀 해주신것에 모든일에 대입이 가능합니다 작은것부터 시작 이라는것도, 여러가지 절망감들이 누적되면서 계단형으로 발전된다는 것 등 ,, 전공은 음악이지만 정말 와닿네요 좋은 말씀 항상 해주셔서 감사합니다 매주 보고 열심히 하고 있어요
                • aosodo
                  감사합니다.
                • 권경은
                  개념들을 하나하나 너무나 잘 설명해주셔서 기본을 다지는데 정말 좋은 것 같습니다. 귀한 강의 감사드립니다.
                • 권광범
                  간단한 듯 하면서도 여러 시행착오를 겪게 되네요...
                  하지만 그 과정에서도 배우는 것이 많습니다.
                  좋은 강의 감사합니다~
                • JUNY
                  index.html 파일을 새로 저장하거나, 덮어쓰기를 하려고 하면 권한 없다고 나오는 데 이건 왜 그런가요??
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기