웹 애플리케이션 만들기

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. 박수민
    학습완료입니다
  2. done
  3. Jushua Ahn
    이주훈님, Bitnami wamp 또는 mamp 을 실행시키시면
    Go to Application 이라는 버튼이 맨 위에 있고
    아래아래에 Open Application Folder 이라는 버튼이 보이실 거에요
    폴더에 들어가셔서 apache2 폴더 안에 htdocs 라는 폴더를 찾으시고 더블 클릭 해서 들어가시면
    index.html이 보일겁니다 그 index.html의 내용을 전부 지우시고
    위의 예제 index.html로 바꿔 주시면 비트나미 테스트 화면이 보이시지 않을 거에요
    화이팅 : )
    대화보기
    • 백승연
      완료
      감사합니다
    • 김영진
      어제봄요
    • 김문규
      완료
      감사합니다!
    • Lim Myungcheol
      잘봤습니다.
    • Lim Myungcheol
      완료
    • 이주훈
      안녕하세요. 수업을 듣다가 잘 되지 않아서 질문드립니다.
      제일 처음 HTML 파일을 index.html로 저장을 하였는데
      localhost/index.html을 입력하면 Bitnami 문서가 계속 열려서 질문드려요.
      어떤 문제일까요? ㅠㅜ
    • 김태윤
      완료
    • Desperado
      8월1일부터 8월16일까지 완주했슴다!
    • Baekkyu Han
      HTML실습
      모델링을 HTML로 만들기
      의미론적인 웹
      Semantic web
      사이트 완성 Link 걸기
      실습4 쉬어가기
      HTML CSS JS 클라이언트에서 동작
    • GoldPenguin
      완료했습니다.
    • ㅇㅇ
      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상태로 돌아가네요... 어떻게 해야 하나요?
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기