웹 애플리케이션 만들기

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. 루씨구씨
    제 생각에는 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 완료
      • 다시시작
        완료
      • hyum
        9/22완료
      • 착한마왕
        아래 비슷한 질문이 있어는데 ㅎㅎ

        문서 인코딩이 달라서 생기는 문제인것 같습니다.

        글자가 깨지는 파일을 메모장으로 열어서 "다른 이름으로 저장" 저장 버튼 옆에 "인코딩(E)" 있습니다.
        UTF-8 로 변경 하시고 저장 하시면 될 것 같습니다.

        <meta charset="utf-8"> 이부분이 <head> 에 있는지 확인 하시면 해결이 될 것 같습니다
        대화보기
        • KAWAMI
          감사합니다~
          대화보기
          • Nyoung
            9월21일 수업완료 감사합니다.
          • jewid
            점이 붙으려면

            <html>
            <head>
            <mate char="uft-8" />
            </head>
            <body>
            <ul>
            <li>html</li>
            <li>CSS</li>
            <li>Java</li>
            </ul>
            </body>
            </html>



            순서가 붙을려면

            <html>
            <head>
            <mate char="uft-8" />
            </head>
            <body>
            <ol>
            <li>html</li>
            <li>CSS</li>
            <li>Java</li>
            </ol>
            </body>
            </html>




            <ol> <ul> 이빠진거 같습니다.
            대화보기
            • KAWAMI
              html 수업을 들으면서 실습을 하고 있는데 <li></li>를 하면 앞에 점이 붙으면서 리스트 가 된다고 하는데
              글자들은 리스트처럼 출력은 되었으나 점이 나오지 않습니다.
              제가 혹시 잘못 입력을 한건가요?

              제가 입력은 한것
              <html>
              <head>
              <mate char="uft-8" />
              </head>
              <body>
              <li>html</li>
              <li>CSS</li>
              <li>Java</li>
              </body>
              </html>
            • 9/19 수강완료!
            • 화이팅!
            • 아이노바
              지금의 할동이 정말 많은 사람에게 도움이 되고 힘이 된다는 사실을 아시고...

              지치지 않도록 건강에도 시간을 할애 할 수 있었으면 좋겠네요..

              언제나 소리없이 응원하도록 하겠습니다.

              고마워요...^^
            • kimsogic
              감사합니다.
            • 마노스
              2번째영상까지완료~
            • 주주맘마
              완료
            • palpalye
              localhost에서 연결을 거부했습니다. 라고 뜨는데요
            • 전성우
              화이팅!
            • Gimme_Gsuit
              완료.
            • 완료
            • forest
              완료
            • 홍홍
              2017.09.05 완료
            • 효근
              2017.09.04완료
            • 유상원
              2017-09-03 완료!
            • 박성진
              포트번호가 81로 지정되있어서 사이트 들어갈려면 localhost:81/index.html로 들어가야하는데요
              여기서 링크를 <a href="http://localhost:81/page_html.html>javaScript란?</a>로 했는데 웹 사이트엔 javascript라는 링크가 화면에 안나와요.
            • 김연주
              인덱스 페이지관련해서 물어 보시는분들이 있는거 같아 기본적으로 비트나미을 설치 하지는 않아지만, 아파치 기반으로 예상이 되기때문에 답변을 드립니다.
              웹서버의 httpd.conf 파일을 보시면
              처음 홈 index.html은 결국 httpd.conf의 DirectoryIndex index.html index.php 설정에서 있는걸 찾아 뿌려주는 방식 입니다. 그러니 index.html 변경하고 싶으시면 설정된 DocumentRoot에서 index.html을 찾아 변경하든지 덮어 쓰우든지 하면 됩니다. 아예 DocumentRoot 동루트을 변경해서 사용하셔도 상관 없습니다.
              예 )DocumentRoot "C:/apache2/htdocs" -> DocumentRoot "C:/test/htdocs"

              또 웹서버는 hosts 파일 기반입니다. hosts 파일의 설정된 값을 읽어서 처리하는 방식인데 localhost로 페이지가 안열리시면 windows의 hosts 파일을 찾아 설정이 되어 있는지 확인을 하셔야 합니다. 기본값 127.0.0.1 localhost로 설정이 되어 있습니다.
            • 효효
              완료
            • 김휘진
              bitnami 에서 설치를하고
              그파일그대로 http://localhost......tml 주소를 열면
              대문페이지가 원래 다운받아져있던 페이지로 가더라구요
              그 파일들을 전부삭제해도 계속 그렇게가던데
              대문페이지를 어떻게 바꿀수있는지 궁금하네요
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기