웹 애플리케이션 만들기

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. Desperado
    8월1일부터 8월16일까지 완주했슴다!
  2. Baekkyu Han
    HTML실습
    모델링을 HTML로 만들기
    의미론적인 웹
    Semantic web
    사이트 완성 Link 걸기
    실습4 쉬어가기
    HTML CSS JS 클라이언트에서 동작
  3. GoldPenguin
    완료했습니다.
  4. ㅇㅇ
    index.html 이 전에는 bitnami페이지여서 바뀌기 전일거에요 덮어쓰기를 하던 지워서 다시 만들던 새로 작성해주면 바뀔겁니다
    대화보기
    • 구름
      감사합니다
    • 정상희
      제목 링크로 넘어가게 하면 웹페이지 주소가
      http://localhost......“
      바뀌면서 Not Found가 뜨네요.
      아무리 봐도 코드 똑같이 따라했는데 ㅜ_ㅜ
      nav쪽도 모두 클릭하면 웹주소창에 저렇게 뜨네요. ;;;
    • Hyung Youl Jeon
      뮤직비디오(?) 까지 잘 봤습니다!!
    • 감사합니다
    • Cooldaddy
      잘 마쳤습니다.. 늦더라도 꾸준히 따라 가고 있네요
    • Jongseong Lee
      localhost만 쳤을때 내가 만든 index.html이 안나온다면 웹서버를 껏다키면 됨
    • 이환길
      완료!
    • 딕킨스
      완료!
    • 랩돌이
      출첵!
    • markerss2
      완료!
    • HYSong
      <meta charset="utf-8"> 이게 언어관련 태그 아닌가요? 이 태그를 쓰면 웹페이지 생성했을때 한글 지원이 안돼요... 없애면 한글이 나오는데ㅠㅠ
    • 유정엽
      수강완료!
    • Michael
      완료!
    • Grace
      Server Side Tech가 Back End Development 와 같은 의미인가요?
    • 두부
      완료
    • choish0423
      port번호를 8080으로 등록하고 강사님처럼 localhost 치실때 localhost:8080이라고 입력했는데
      index를 먼저 찾아야한다는 말과 달리 bitnami 페이지가 뜨네요... 왜 JavaScript를 만든창이 안뜨구 bitnami창이 뜨는 거죠?
    • 김지영
      웹의 구조를 잘 알게 되고 있어요! 진짜 잘 가르쳐주시네요 감사합니다
    • FirstSubject
      it's a good day to learn codes
    • David Kim
      Done!
    • 심주흔
      잘 학습했습니다 감사합니다
    • 착한마왕
      도움이 됐다니 다행입니다. ^^
      대화보기
      • Injun Choi
        점점 흥미있어지네요! 감사합니다
      • Molang
        글자가 깨져서 난감했는데 보고 수정했습니다. 감사합니다~^^
        대화보기
        • DONE
        • Kim SeungChan
          첫번째 들을때는 와닿지가 않고 진도가 좀처럼 나아가질 않았는데,
          두번째 들으니깐 좀 더 명확하게 이해가 가고, 생각보다 어렵지 않게 느껴지네요.
          감사합니다ㅎㅎ
        • 김민재
          좋아요!
        • yoon88
          완료
        • 저도 그랬는데 그냥 그파일 지워버리고 위에서 나온 인덱스 파일추가시켰습니다. 그리고 인덱스 파일 UTF-8, 모든파일로 설정했더니 됬습니다
          대화보기
          • Gilbert Paeng
            Bitnami에서 Apache Web Server 를 누르시고 Configure 하시면 port 번호 확인하실 수 있어요~

            예를들어 81이면
            <a href="http://localhost:81/page_html.html"> 으로 한 번 해보세요
            대화보기
            • 창개구리
              완료
            • bbollonge
              완료!
            • 윤수빈
              sound of coding 뮤직비디오에 사용된 노래 제목이 뭔가요? ㅎㅎ 너무 좋아요 ㅋㅋㅋㅋ
            • cwhz
              <a href="http://localhost/page_html.html">
              에서, localhost:포트번호 를 넣어보시면 될 것 같네요.
              보통은 80번이나 81, 8080 이 셋중에 하나일 겁니다.
              대화보기
              • plm1929
                봤습니다.^^
              • Jung Ik
                굿!
              • zkdhf
                위 동영상 따라하기 할때 a href가 안되네요..
                index.html에서 <li><a href="http://localhost/page_html.html">JavaScript란?</a></li>를 클릭하면 에러페이지가 뜨는데, 그 page_html.html은 별도로 띄우면 잘 뜹니다.
                하이퍼링크가 안먹히는 것 같아요. 비트나미를 확인해보면 아파치 웹서버가 stoped되어있는데 재실행해도 stoped상태로 돌아가네요... 어떻게 해야 하나요?
              • charl
                완료
              • 완료~ ^^ 재밌네요 ㅎㅎ
              • hunter10
                완료
              • 정세희
                완료
              • ehdudz1
                C:\Bitnami\wampstack-5.6.31-0\apache2\htdocs 에 저장하시면 됩니다.
                대화보기
                • sdffl100
                  저도 local/index 하면 홈페이지에 안뜨네요 문서 루트를 어디에 저장해야하나요 ??
                • 망고k
                  감사합니다
                • egoing
                  뒤에 인터넷 파트에서 배웁니다~
                  대화보기
                  • 야규
                    안녕하세요 강의 잘 보고있습니다.
                    한가지 질문이 있습니다.
                    이후에 계속 강의를 듣다보면 나오게 될 내용일지 모르겠지만
                    지금까지 메모장으로 만든 간단한 웹을 제 지인에게 보여주고 싶습니다. 어찌됬는 제 PC에 웹서버를 만든거니깐요.
                    제 IP를 상대방에게 알려주면 그 사람이 제가 만든 웹사이트를 사용할 수 있게 할 수 있는 방법이 있을까요??
                    그냥 간단하게 생각해서 제 IP로 웹브라우저에 입력해 보았는데 접속이 되어 다른PC에서 될줄알았는데 접속이 안된다고 하더라구요...
                    (http://IP주소......tml 을 들어가면 될줄 알았습니다만 ㅠㅠ 제 피씨에서만 되더라구요 ㅠㅠ)
                    개발 환경은 윈도우10이고 카페에서 공용와이파이로 접속해서 진행했습니다.
                    지금 단계에서 이런 부분이 가능하다면 더더욱 흥미가 붙을것 같습니다!!!
                    감사합니다!
                  • 임영선
                    강의 잘들었습니다! 어렵지 않게 단계적으로 나가서 술술 나가지네요.
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기