웹 애플리케이션 만들기

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. 이청블웨하스
    파일을 저장하실때 인코딩 형식을 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 수강 완료
                        • Jeffery
                          2017.11.13 완료 아자아자 이번엔 포기하지말자
                        • 김종은
                          2017.11.13 완료
                        • 루안
                          ^b 수강완료! 11-11 !!
                        • Junyoung M. Kang
                          2017/11/10 수강완료
                        • 2017년 11월 9일 수강완료
                        • 11/9
                        버전 관리
                        egoing
                        현재 버전
                        선택 버전
                        graphittie 자세히 보기