웹 애플리케이션 만들기

HTML 실습

모델링을 HTML로 만들기

의미론적인 웹

 사이트 완성

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. Yonjung Ji
    완료. 오늘도 친절한 선생님모드..^^ 감동이에요
  3. 쿠티뉴 부상
    16.11.30 완
  4. harris
    2016.11.30 23.28
  5. 문성은
    16.11.29 완료
  6. 16.11.23 학습완료!
  7. 연재찡
    강의 너무 잘 들었씁니당! 너무 쉬운 질문이지만, 그래도 확실하게 확인하고 싶어서요!
    <a href=“http://localhost/”>JavaScript</a> 이거나
    <a href="http://localhost/index.html">JavaScript</a>랑 결국은 같은거인 셈인거네요?!

    저도 이전 이론에서 meta 뒤에 / 가 없길래 밑에 댓글로 확인해보니 img, br, meta태그는 닫지 않아도 된다고
    되어있더라구요.

    근데 여기서
    <h1><a href="http://localhost/">JavaScript</a></h1> 같은 경우는 닫혀있고,
    <li><a href="http://localhost/page_html.html">JavaScript란?</a></li> 는 또 닫혀있지 않았는데, 차이가 있는건가요? 아니면 크게 img, br, meta 처럼 닫지 않아도 상관없는 애들인가요?

    감사드려용♥
  8. cluelin
    HTML 실습 부분에서 공동공부 팝업 창이 안뜨는것 같습니다~~
  9. JustStudy
    파일이 있는 디렉토리를 확인해 보시죠.
    홈디렉토리에 있는지, 또는 홈디렉토리의 소속 경로(이런경우 경로명 기입)에 있는지 확인요.
    대화보기
    • 이현식
      JavaScript란? 에 링크를 걸어두는데에 연결이안됩니다 ㅜㅜ
      맨처음 홈페이지를 index.html로 저장하고 page_html.html파일도 저장했고
      이제 링크를 클릭하면 같은화면이 나와야하는데 not found가 뜨네요

      홈페이지를 임의로 ex_html_4.html로 바꾸고 링크를 걸었더니 그건또 됩니다
      무슨원리인가요?
    • Chang Joon Rick Kim
      11.09 완료
    • 당당비
      11.07완료
    • 배둘
      11/07완료
    • Bogwang Jung
      11.5 완료
    • 으잉
      11/4 6:39
    • yjan
      2016. 11. 04 1/4주차 완료
    • 강연지
      16.11.03
    • Sanguk An
      11.02 23.23분 완료
    • 다람쥐님
      localhost:8080 입니다 사이에 : 가 빠졌어요
      대화보기
      • 감사합니당
        대화보기
        • Dong-woo Nam
          jw // index파일을 지우고 작성한 코드로 메모장에서 다시 index로 저장하세요
          비트나미 설치할때 인덱스파일이 같이 설치되는데 그게 비트나미사이트로 연결되있어요
        • 활화산
          완료합니다
        • 실습3 에서 Java Script 대제목을 누르면 처음으로 돌아가는게 아니라
          비트나미사이트로 가는건뭐죠..ㅠㅠ흑흑
        • 2016.10.17 재밌군요!!
        • 김용운
          2016.10.14 완료
        • 안재우
          2016.10.12 완.료.
        • dawooning00@gmail.com
          161012 수강완료
        • bluegun
          20161011 수강완료. 감사합니다
        • veritas3264
          2016.10.12. 감사합니다. 많이 배웠습니다.
        • San Koh
          2016-10-11 완료했습니다.
        • 날고기는람쥐
          인터넷 부분 강좌를 듣고 생각한건데 제가 무선공유기를 쓰고있어서 그런건가요?
          대화보기
          • 이신규
            재미가 쏠쏠하네료!
          • 날고기는람쥐
            <a href="http://localhost8080/"></a>로 하니깐 잘 되긴하는데 왜 제 로컬에선 그냥 안되는지 이유가 궁금하네요.
            아시는분 또는 같은경험을 하신분은 어떻게 해결하셨나요?
            대화보기
            • 날고기는람쥐
              <a href="http://localhost/">자바스크립트란</a>
              로 링크를 주었을때 ERR_CONNECTION_REFUSED 가 뜨고
              localhost에서 연결을 거부했다는 말이 뜹니다. 어떻게 해결해야 하나요

              웹브라우저는 크롬을 썼습니다.
            • 날고기는람쥐
              class 나 id 이용해 태그들 마다의 이름을 지어줄 수 있습니다.
              대화보기
              • egoing
                부주의했나보네요 ^^.안 닫는 걸 닫는다고 큰 문제는 없습니다. 오히려 꼭 닫아야하는데 안 닫으면 큰 일이 납니다.
                대화보기
                • 고산
                  이고잉님 그럼 앞강의 html예제에서는 왜 닫으신 건가요??
                • 류엶
                  20161007완료
                • egoing
                  내용이 필요없는 몇몇 태그는 닫지 않아요.
                  img, br, meta가 그래요~
                  대화보기
                  • San Koh
                    <head>태그 안에 utf-8 적는 부분에 <meta charset="utf-8" />라고 앞의 예전 강의(예제 만들때)에서는 했었는데
                    여기서는 <meta charset="utf-8"> 이라고 뒤에 슬래시가 없네요. 무슨 차이인 건가요?
                  • Ryu Keunwon
                    10월 5일 수강완료했습니다!
                  • SUNYORK
                    크롬 웹 스토어 가시면 네이버사전 있어요~
                    대화보기
                    • Kang Seonghyeon
                      html이라는 새폴더 만드신건가요?
                      나중에 강의 보니깐 html이란 폴더를 만드신거 같던데...

                      그리고
                      C:\Bitnami\wampstack-5.6.26-2\apache2\htdocs 에 있는

                      html의 index를 메모장으로 열어서 바꾸는 건가요?
                    • k-319@naver.com
                      기존의 bitnami홈페이지로 지정된 파일을 index.html로 되어 있으실텐데 다른 이름으로 저장해두시고요.


                      기존의 파일이 어디에 있나요?
                      대화보기
                      • Kang Seonghyeon
                        http://localhost......tml 라 치면
                        bitnami 사이트로 가져요..

                        http://localhost......tml.html로 치면 정상적으로 가지고...

                        뭐가 문제죠?
                      • Kang Seonghyeon
                        첫 번째 동영상 6:29에 Javascript 영어를 드래그하자마자 한글 해석 달리는건 무슨 기능인가요?
                      • Xuperman
                        160930 완료 :D
                        고맙습니다(하트)
                      • 박용환
                        2016-09-30 완료
                      • 수강완료
                      • 송곳
                        이전 챕터 강의에서
                        <meta charset="utf-8">과 같이 문서가 어떤 방식으로 저장되어 있는지 이런 태그를 입력하지 않을경우
                        한글이 깨져서 나오는 경우가 존재한다고 설명이 있었습니다.
                        대화보기
                        버전 관리
                        egoing
                        현재 버전
                        선택 버전
                        graphittie 자세히 보기