웹 애플리케이션 만들기

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>

Sound of coding 

복습 하실 수 있게 뮤직 비디오로 예제를 만들었습니다. 멍 때리고 싶은 때 틀어놓고 보셔요~ 전체 뮤직 비디오 보러가기

쉬어가기

소스코드

 github

참고

여기까지 공부한 분들께 드리는 편지 (코딩야학 2기에게 보낸 편지)

댓글

댓글 본문
작성자
비밀번호
  1. Yong Choi
    #171211 수강완료 감사합니다!
  2. 짜몽
    20171210 감사합니다
  3. 빛보다 밝은 빛
    고맙습니다!
  4. Jinsoo Choi
    정말 감사합니다. 잘 보고 잘 배우고 있습니다.
  5. Hye-won Lee
    11/30
    여기서 오래 걸렸네요.
  6. 이근환
    2017-11-28

    수강완료하였습니다.
  7. codemaster
    차이 없습니당~
    html에서 태그에 /는 태그를 끝내겠다는 의미를 가지고 있는데. 쌍으로 <></>쓰는 태그가 있는 반면
    그냥 < />으로 끝내는 태그도 있어요. 편의성 때문에 이렇게 바뀐거 같은데..(자세히는 몰라요)
    아무튼 그런 의미로 둘다 같은거에요.
    코드짤때 태그를 끝내겠다는 무언의 약속으로 / 를 넣어주는게 좋아요.
    대화보기
    • 윤재규
      <head>
      <meta charset="utf-8" />
      </head>
      이것과
      <head>
      <meta charset="utf-8">
      </head>
      이것의 차이가 뭔지 알수있을까요?? html실습으로 넘어오면서 부터 바뀌던데 궁금해서 참을수가없네요 ㅠㅠ
    • 박인호
      11-22
      수강완료.
      본질을 잊지말자.
    • atnskynst
      11/15
    • 11/14 수강 완료
    • Jeffery
      2017.11.13 완료 아자아자 이번엔 포기하지말자
    • 김종은
      2017.11.13 완료
    • 루안
      ^b 수강완료! 11-11 !!
    • Junyoung M. Kang
      2017/11/10 수강완료
    • 2017년 11월 9일 수강완료
    • 11/9
    • 또도
      좋은 강좌 감사드립니다. 너무 쉽고 재밌어요!
    • 권석현
      좋은 강좌 감사합니다.
    • 2017/11/1 완료!!

      맥에서 텍스트 편집기로 코딩하는중인데 자꾸 코드가 그대로 출력되는 현상이 있었어요!
      그런데 그게 ""따옴표 문제였더라구요, 이고잉님께서 첫부분에서 알려주신대로 편집 > 대체> 스마트 인용을 끄면 됩니다.
      이제 잘돼서 마음이 놓여요!!다들 화이팅하세요!!
    • 세리나
      1029완료
    • 주민
      수강 완료했습니다. 요새 강의 듣는 시간이 너무 기대되고 들으면서 쉽게 이해되고 하나씩 배워간다는 사실에
      즐겁고 뿌듯합니다. 앞으로도 열심히 공부해서 완강 하도록 하겠습니다.
    • 김지원
      혹시나 mac쓰시는 분들 중에 선생님과 코드를 똑같이 쓰셨는데도 불구하고 안되시는 분들이 계실까봐 댓글 남깁니다.
      저도 같은 실수를 했거든요 ..

      먼저 '사이트에 연결할 수 없음 localhost에서 연결을 거부했습니다.'라는 메시지가 뜬다면 링크된 주소를 다시한번 봐야 합니다.

      저번 강의를 보면 선생님께서 :8080이라는 것을 생략한다고 말씀하셨는데 mac을 쓰는 유저들은 생략이 안된다고 하셨죠
      그렇기 때문에 링크에 :8080을 추가해 주어야 합니다.
      <a href="http://localhost:8080/page_html.html">Javascript란?</a>을 적어주시면 잘 작동할 겁니다.
    • 소소대담
      수강완료했습니다~
    • 루씨구씨
      제 생각에는 index1.html 이전에 주소에 http://를 생략해서 not found가 뜨는게 아닐까 싶습니다.
      대화보기
      • 루씨구씨
        하하하 즐겁네요 성공!
      • 지니
        너무 도움이 많이됩니다. 공부하면서도 궁금했던 부분들이 많이 풀리고 있어요.
      • Jeff Oh
        재밌네요. ㅎ
      • 구본혁
        수강완료했습니다.
      • MinJeong Lee
        노래 귀여워서 자꾸 듣게돼요 ㅋㅋㅋ 감사하게 봤습니다~
      • 한국조르바
        잘 따라가고 있습니다. 돌아서면 잊어버리는 나이가 됐지만 끝까지 가보려 합니다. 좋은 컨텐츠와 성의있는 강의에 감사드립니다.
      • 둠해머
        수강완료!
      • kaylee
        <a href="index1.html">

        <a href="http://index1.html/">
        로 바꾸어 보세요~!
        대화보기
        • evan.hwang
          2017.10.17 완료
        • Jeoung Myung Hyun
          강의 잘보고 있습니다.
          강의가 짧아서 너무 좋아요 ㅎㅎ
        • 마블리
          좋은 강의 감사합니다.
        • 열정을가진
          잘배웠습니다
        • 김주희
          10/01
          쉬어가기 영상까지 완료함.
        • 송성태
          링크가 됩니다.
          감사합니다!
        • Noel J Park
          강의 잘 보고 있습니다.
          저는 '약속된' index.html 말고 별도의 인덱스를 index1.html로 작성하여 해봤는데요.
          header 태그 아래, index로 돌아가기 위한 a 태그 작성을 localhost/index1.html로 하니 Not found가 떠서, localhost를 제외하고 그냥 index1.html로 입력하니 index로 잘 돌아가지거든요. 이것은 제가 규약된 index.html의 틀을 일부러 벗어나서 생기는 문제인 것 같은데... 정확한 원인이 뭘까요?

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8">
          </head>
          <body>
          <header>
          <h1><a href="index1.html">JaveScript</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>
        • 파이쏭
          9월28일

          쉬어가기까지 완료!

          좋은자료 너무 감사합니다!
        • 알파고
          9/24

          HTML 정보
          css 디자인

          server side tech는 하기 싫다.
        • 돌고래
          9/26 완료
        • whalecode
          9/26 완료
        • 김태완
          휴 9/25 완료
        • 강수경
          09/25 완료
        • 정종훈
          9/25 완료
        • 순낚
          9/24 완료
        • 여누
          9/24 완료
        • 다시시작
          완료
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기