웹 애플리케이션 만들기

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. 구관조
    document 루트에 저장한 index.html 파일을 알려고 동영상처럼 localhost/index.html를 입력했는데, 계속 404 found 에러가 나는데 어떻게 해야하나요?
  2. ksh0712
    프론트와 백엔드 둘 다 다뤄볼 수 있다는 수업구성이 제가 딱 원하던 강좌이고 설명도 알기 쉽게 해주셔서 듣기 좋아용
  3. psy1088
    감사합니다!!
  4. 정말 감사합니다. 많은 도움이 되고 있습니다.
  5. 질문 드립니다

    위에 3번째 동영상으로 NAV 기능을 배우다가 프로그램(메모장) 작성시 Localhost에 대한 이해가 잘 안되네요
    제가 다운받은 Bitnami창의 주소는 c:wBitnamiWwampstack-7.1.21 이렇게 시작해서 어떻게 NAV 기능 배우는지 어렵네요
    도와 주실 분이 있으신가요?
  6. 다양한 코드 작성 도구가 있어도 편향되지 않고,
    간단한 메모장으로도 작성할 수 있을정도로 간단한 코딩이라는 것을 강조하시는 것 같아요.
    이고잉님께서 강의하실때 좋아하시는 코드 작성 툴 써도 상관은 없는데,
    강의 듣는 사람들이 괜히 그 것 때문에 코드 작성 툴 설치하고 적응하는데 시간 걸릴 수도 있는 것을
    염려하신 것 아닐까요?
    대화보기
    • 이청블웨하스
      파일을 저장하실때 인코딩 형식을 utf-8로 하셔야 한글이 깨지지 않습니다
      대화보기
      • 근데 왜 메모장에 하는거죠?
      • 리젤린
        감사해요 잘 배워가요
      • yunho2422@gmail.com
        감사합니당.... 이런 엄청난 사이트를 만들어주시다니....... 이제 조금씩 알아가고 있습니다. 공부 많이 해서 꼭 잘할 수 있도록 노력할게요!
      • aimpact
        이번강의 하면서 네이버 소스봤는데,,, 어마무시 하더군요... ㄷㄷㄷ;;
        저는 취미수준으로 해야겠다는 ㅋㅋㅋ
        이런 강의 만들어주셔서 감사합니다. ~ 완강할게요 !!!
      • 원스팩토리
        감사합니다...이제 조금식 익숙해지고 있어요..ㅎ.ㅎ
      • <head>
        <이 부분에 문서형식이 무엇인지 써주지 않으면 한글이 깨져보일 수도 있다고 저저저저저저번 강의 때 말씀하신 것 같애요.> <meta charset="문서형식">이런식으로요
        </head>
        대화보기
        • 손영민
          웹페이지를 직접 만들어 볼 수 있다니... 정말 뿌듯하네요. 앞으로도 열심히 수강하겠습니다.
        • sung박
          진짜 소스가 종류가 몇개 없어서 괜찮은 것 같아요.~~
        • jy1234
          감사합니다.
        • 이동원
          네이버 블로그에서 a href나 embed태그 할 땐 따옴표 안 써도 아무 문제가 없긴 하더라고요
          대화보기
          • 제갈량
            <a href="웹 주소">이름</a>
            이 형식이 약속되어 있습니다.
            반드시 따움표 안에 주소가 기술되어 있어야 합니다.
            대화보기
            • 오이시대
              감사합니다
            • ㅅㅇㅅㅇ
              맥 유저인데 한글이 다 꺠져서 나오네요 ㅠㅠ 텍스트 편집기 설정다바꿔봐도 꿿쀓 이런식으로요....
              <html lang = "ko">추가도 했습니다 어떻게 해야할까요..
            • 이동원
              a herf 다음에 " " 안써도 무방하지 않나요
            • ㅁㅁ
              li*3 탭을 눌러도 왜 세 개가 안생기는지 알수잇을까요 ㅠㅠ
            • 지금 그 파일들은 본인 컴퓨터에만 있는거라서 친구들에게는 보여줄 수 없어용=ㅁ=
              대화보기
              • bernard
                비트나미 서버 다시 시작해주어야합니당
                윈도우 빼고는 재부팅 할 때마다 재시작 해줘야한다고 하셨어요~
                대화보기
                • 비슬로우
                  mac쓰고 있는데, 재부팅하고 난 이후로 만든 url을 입력하면 페이지가 안열리는데 이 경우 어떻게 해야 하나요ㅜㅜ
                • hodduck0121
                  page 파일들도 모든파일 -> .html 붙여서 html로 저장하셔야돼요.
                  대화보기
                  • 복뎅이
                    수강완료했습니다. 감사합니다.
                  • Podgor
                    그런데 왜 index.html은 파일형식을 모든파일로 저장을 하는데 나머지 page_html.html같은 파이들은 파일형식을
                    텍스트 문서로 저장을 하나요?
                  • Inaee Choi
                    1. http://localhost......tml 이런 형식은 사이트라고도 표현하나요?
                    2. http://localhost......tml 이 주소로 친구에게 보여 주고 싶은데요.
                    친구는 비트나미가 설치되어 있지 않습니다. 그럼 볼 수 없나요?
                    휴대폰으로 주소 보내서 들어가봤는데. 없는 사이트라고 나와서요..ㅎ
                  • 바라바
                    자바스크립트 링크를 누르면 "index of/" 창으로 넘어가요. 그리고 이전 폴더가나와요. 예전에는 이런적이없는데 윈도우 10으로 바꾼뒤로 이러는거같아요.
                  • 슝태
                    20180105
                  • 171230 감사합니다!
                  • 감사합니다!! ㅠㅠ
                    대화보기
                    • window10 쓰는 사람입니다. 비트나미 깔때부터 80이 안되고 8080으로 해야해서 삐걱 거렸는데 이번엔 아예 링크가 안걸어지네요
                      <a href="http://localhost:8080/page_html.html">Javascript란?</a>
                      <a href="http://localhost/page_html.html">Javascript란?</a>
                      이 두개 모두 실행해봤는데 링크가 걸리지 않습니다....이런건 어떻게 해야할까요?
                    • egoing
                      미래에서 왔습니다. ㅎㅎ
                      https://opentutorials.org......483

                      여기서 아시게 될 것입니다~
                      대화보기
                      • 12/22 감사합니다.
                        localhost/index.html 이라는 주소는 작업한 컴퓨터에서만 유효한건가요?
                        bitnami 폴더에 저장을 한다는 것을 서버를 구축했다고 이해하고
                        다른 컴퓨터에서도 localhost/index.html이라는 주소로 접속이 가능하리라 생각했는데
                        제 컴퓨터 이외에선 되지가 않네요.
                        그렇다면 bitnami를 다운로드해서 매니저로 실행시켜두는 이유가 뭔가요?
                        서버구축이 아니라면..
                      • ㅋㅋ.어제는 실수한 부분이 안보이던데.지금 보니 보이네요..근데 왜 삭제가 안될까요..^^
                        대화보기
                        • PassionOfStudy
                          17-12-18 3일차 - 1번째 강의

                          수강완료!

                          11월에 듣고 계속 미루다가 이제서야 다시 시작합니다. ㅠㅠ

                          12월 말까지 완강하도록 하겠습니다!

                          모두들 화이팅이요!
                        • 좋은 강의 감사합니다.^^
                        • Yong Choi
                          #171211 수강완료 감사합니다!
                        • 짜몽
                          20171210 감사합니다
                        • 빛보다 밝은 빛
                          고맙습니다!
                        • Jinsoo Choi
                          정말 감사합니다. 잘 보고 잘 배우고 있습니다.
                        • Hye-won Lee
                          11/30
                          여기서 오래 걸렸네요.
                        • 이근환
                          2017-11-28

                          수강완료하였습니다.
                        • codemaster
                          차이 없습니당~
                          html에서 태그에 /는 태그를 끝내겠다는 의미를 가지고 있는데. 쌍으로 <></>쓰는 태그가 있는 반면
                          그냥 < />으로 끝내는 태그도 있어요. 편의성 때문에 이렇게 바뀐거 같은데..(자세히는 몰라요)
                          아무튼 그런 의미로 둘다 같은거에요.
                          코드짤때 태그를 끝내겠다는 무언의 약속으로 / 를 넣어주는게 좋아요.
                          대화보기
                          • 윤재규
                            <head>
                            <meta charset="utf-8" />
                            </head>
                            이것과
                            <head>
                            <meta charset="utf-8">
                            </head>
                            이것의 차이가 뭔지 알수있을까요?? html실습으로 넘어오면서 부터 바뀌던데 궁금해서 참을수가없네요 ㅠㅠ
                          • 박인호
                            11-22
                            수강완료.
                            본질을 잊지말자.
                          • atnskynst
                            11/15
                          • 11/14 수강 완료
                          버전 관리
                          egoing
                          현재 버전
                          선택 버전
                          graphittie 자세히 보기