웹 애플리케이션 만들기

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. MinJeong Lee
    노래 귀여워서 자꾸 듣게돼요 ㅋㅋㅋ 감사하게 봤습니다~
  3. 한국조르바
    잘 따라가고 있습니다. 돌아서면 잊어버리는 나이가 됐지만 끝까지 가보려 합니다. 좋은 컨텐츠와 성의있는 강의에 감사드립니다.
  4. 둠해머
    수강완료!
  5. 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>
          • XTRA
            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 주소를 열면
            대문페이지가 원래 다운받아져있던 페이지로 가더라구요
            그 파일들을 전부삭제해도 계속 그렇게가던데
            대문페이지를 어떻게 바꿀수있는지 궁금하네요
          • SanFrancisco
            점점 어려워지는군요. 그렇지만 흥미로워요 ^^
          • pash15xk
            완료
          • 럭키가이
            localhost/ooo.html이라고하면 웹이 안열리고 htdocs에서 저장파일을 더블클릭해야만 웹사이트가 열리는데 어떻게해야 localhost로 검색해야 열리게될까요
          • 학습 완료했습니다. 유익한 강의 정말 감사드립니다.
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기