생활코딩

Coding Everybody

코스 전체목록

닫기

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. 가넷스타
    2024/2/28 수업을 잘 따라가고 있습니다.
  2. sonsasungji
    Webn 과정이 일목요연하게 잘 정리되어 있는 전체를 보는 과정이라면 이 course는 좀 더 디테일한 부분까지 실습해볼 수 있어 저는 오히려 이 과정이 좋습니다. 감사합니다.
  3. 4Tomorrow
    최신 영상의 내용이 더 쉽네요. 그렇지만 최신 강의엔 없는? 팁과 설명이 보여서 이 강좌도 보물입니다.
  4. egoing
    이 수업은 2015년 수업으로 환경이 좀 많이 달라졌을 것 같아요.

    최신 수업은 WEB1 입니다. 이 수업보다 더 쉽게 공부할 수 있습니다.
    https://opentutorials.org......084
    대화보기
    • "http://localhost/" 를 입력하면 비트나미 페이지가 뜨고,
      코드를 다 입력 후 'JavaScript'를 클릭하면 처음 페이지로 돌아가야하는데 비트나미로 돌아갑니다
      저는 윈도우를 쓰고 메모장으로 입력하고 8080도 붙여봤는데 계속 비트나미로 가네요ㅠ
      어떻게 해야하나요?
    • 이학준
      22.09.18
    • 코딩드림
      22.09.15
    • beenbeen
      22.09.11
    • solfany
      2022.8.25 Mac 환경으로 성공
      이 후 mac으로 실행 안되시는 분 답글 남겨주시면 알려드릴게요 :)
    • 헤밍웨이
      220822 감사합니다!
    • 터병
      22.3.29. 감사합니다.
    • 물통붕붕이
      이번 수업도 완!
    • 엔더버35g
      감수성 폭발
    • 권힛치
      220106 완!
    • H4PPY
      211205
      실습 /2
    • 뀨유
      감사합니다!! 이렇게 공부할 수 있어서 정말 감사드립니다
      2021/11/21일 공부 시작 2틀째~
    • 다야
      2021/10/01
      감사합니다..
      정말 흥미도가 안떨어지게 수업도 잘 구성하시고 잘 알려주시는 것 같습니다,
    • 양재혁
      현재 codeanywhere 을 사용해서 실습하면 예전과 다르게 바뀐 모습이여서 원하는대로
      작동되지 않는 것 같습니다. 어떻게 사용하면 될 지 궁금합니다 :)
    • 김큼이
      document root란 전에 사용한 C:\Bitnami\wampstack-5.6.30-2\apache2\htdocs를 말합니다.
    • 2021/07/14
    • sowgun
      21/06/08
    • heyri
      21/06/07
    • 안제경
      배운 태그나 내용을 다 기억할 순 없지만 지금 배우고 있는 내용이 바로바로 눈에 보이니까 재미있네요
      대화보기
      • 안제경
        document root가 htdocs 파일을 말하는 건가요?
      • 초딩 개발자
        2021/05/14
      • James Hanjoo Park
        감사합니다...수고하셨습니다.
      • coding_prince
        감사합니다.
      • Hello 경
        완료입니당~
      • 웹전문가
        2012.2.13
      • 정착유목민
        과정을 진행 하면서, 봤어요의 숫자가 줄어드는 것으로 내가 조금더 나아가고 있다고 생각됩니다.
      • andy
        2021/01/23 done
      • 한번가보자
        가보자
      • 제사마
        done
      • 박재현
        20.12.23
      • 늦은나이가아님
        2020.12.11 감사합니다
      • 박병진
        2020.11.11 화이팅!
      • ohsori
        11/09 출석이요.
      • 9/29
      • 노노
        저도 맥이라 연동이 안되서 고생했는데 a태그의 localhost 뒤에 :8080 쓰셨나요? ㅜㅜ
        저는 쓰니까 해결됐어요. html파일 뿐만 아니라 4개파일 모두 링크에 8080이 붙어있어야 해요 !
        대화보기
        • 허우룩
          2020.09.08
        • 리버리버
          다시 다른이름으로 저장하니까 정상적으로 작동하네요 감사합니다.
          대화보기
          • 리버리버
            크롬 브라우저로 실습중인데 localhost/index.html 에서 index.html 날리고 localhost 라고 하면 bitanami 페이지로 연결됩니다.

            혹시나해서 윈도우 익스플로러와 엣지로 localhost 입력해보니 정상적으로 작업한 화면으로 넘어갑니다.

            이유와 해결방법좀 알려주세요.
          • 강민규
            2020 08 04 완료
          • 타케룽
            Mac book을 쓰고있는데요 어떻게 저장을 하면될까요.4개다 만들어서 저장을 해도 연동이 안 되네요 ㅜㅜ 선생님이 쓰시는개 윈도우라서 잘 모르겠어용.도와주세요!!
          • HyeonHui Jeong
            5/7
          • 산노을
            good job!
          • jo7753@naver.com
            저도 사파리로 했는데 오류가 떠서
            크롬으로 다시 해봤더니 되네요ㅠ
            그리고ㅜ 저도 텍스트파일 하나하나 열어서 일반텍스트로 변경하고
            ㅜ저장을 따로 따로 해주느라 뭔가 복잡하고 어렵게 했어요ㅠ
            맥쓰시는분이라고 해서 공감가서 댓글 달아요^^
            대화보기
            • 공부
              네 지금은 그냥 에디터로 사용중인데요,
              vs code를 사용하여 작성중인데
              링크를 누르면 "Forbidden

              You don't have permission to access this resource."
              이라는 오류가 뜹니다.
              크롬이랑 사파리에서 둘다 이런 오류로 떠요! 아예 링크가 안되는것 같아요
            • 재미있다아
              혹시 링크에 8080입력하셨나요?
              대화보기
              • 공부
                감사합니다!!
                재미있다아님이 알려주신대로 별도 저장해보았는데 파일 저장은 따로 되긴하지만 링크가 걸리지 않네용..
                뭐가 문제일까요? 알려주신대로 코드도 제대로 텍스트편집기에 저장했고
                오타났을까봐 복사해서 저장해봤는데도 링크를 누르면 "Safari가 서버에 연결할 수 없음" 이 떠요 !ㅠㅠ
                링크 자체가 작동을 안하는것같아요
                대화보기
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기