웹 애플리케이션 만들기

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>

쉬어가기

소스코드

 github

댓글

댓글 본문
작성자
비밀번호
  1. 김한설
    강의 잘 봤습니다 : )
  2. son_stat
    잘 배울수 있어 감사드립니다.
  3. 히스토
    주소를 정확히 입력해주세요.

    http://localhost......명
    대화보기
    • WAlk7
      답변 감사드립니다.

      어느 순간, JavaScript를 누르면 원래는 한글 깨짐 현상이 나타났으나, 현재는 이렇게 나옵니다

      Index of /

      Page 복습 1.html
      Page 복습 2.html
      Page 복습 3.html
      Page 복습(메인).html
      Start_be of little/
      css/
      html/
      html_temporarily/


      이렇게 나오는데요.
      도움 부탁드립니다.
      대화보기
      • 히스토
        <html> 을 <html lang="ko"> 로 수정해보세요.

        HTML 속성인데요. 언어를 구체적으로 명시해서 브라우저가 인식하게끔 한답니다.

        자세한 내용은 : https://www.w3schools.com......asp
        대화보기
        • 히스토
          문자 인코딩 문제네요. 밑에 사항들을 한번 체크해보세요. ^^

          - [한글문제]
          :: <html> 태그를 <html lang="ko"> 로 수정해보세요.

          - [소스코드 인코딩 문제]
          :: 소스코드의 인코딩 방식을 UTF-8 로 새로 저장해보세요.
          :: ATOM 편집기를 사용하신다면, 오른쪽 하단에 UTF-8 설정을 해보세요.
          :: head 태그 안에 <meta charset="UTF-8"> 을 추가해보세요.

          참고자료: https://www.w3schools.com......asp
          대화보기
          • WAlk7
            # 안녕하세요.

            이번 강의 내용도 잘 보았습니다.

            헌데, 오류인듯 아닌듯한 오류가 제가 코딩을 하고, 크롬 및 인터넷 마이크로소프트 엣지 등등 으로 모두 열어보니 이런 현상이 떴습니다.


            # 원래는,

            JavaScript

            JavaScript란?
            변수외 상수
            연산자

            이리 떠야하나



            JavaScript

            JavaScript��?
            ������ ���
            ������

            이리 뜹니다.


            ##1 위 오류 내용은 JavaScript를 클릭 했을 때 설명내용이 없어지고 원래 홈화면으로 돌아와야 하는데
            홈 화면이 저 내용처럼 나오게 된 것입니다.

            ##2 코드는 모두 확인하였지만, 이상은 없었습니다.
            1.2.3 클릭하면 모두 잘 작동하였으나, JavaScript 홈 화면들은 한글깨짐 현상이 나타나네요.
          • 아나이스
            다시 한번 더 듣고 한꺼번에 댓글 올려용~
          • WAlk7
            휴! 복습해야겠어요 ㅎㅎ
          • 코알못
            어제부터 시작해서 오늘 여기까지 왔네요. 너무 재밌어요!!
          • 굿굿
            와....... 이걸 무료로 배우다니.... 감사합니다 존경합니다ㅠㅠ
          • 이종역(pandora)
            잘 보았습니다.
            감사합니다.
          • Cenfun
            잘 봤습니다.
          • 윤석환
            <meta charset='utf-8'> 넣으시면 해결될꺼에요~

            <head>
            <meta charset='utf-8'>
            </head>
          • David Jung Kim
            질문이 있습니다!. HTMㅣ 실습편 강의대로
            저도 text edit 에서 타입을 하던중 한국어로 특정단어를 타입 하고 웹서버에서 보면 한글이 깨져서 나오는 이유가 뭐고 해결책 없을까요??
          • jeeyoon
            DICTYPE "-": 이건 dic 타입으로 작성 -html "-"표준으로 작성되었다는걸 알려주는겁니다
            html이론 부분의 수업에 나옵니다 ^^
            대화보기
            • Hyojeon Kim
              잘봤습니다.
            • dong
              감사합니다!
            • 황성준
              잘봤습니다.
            • 김성훈
              본질은 언제나 중요하지만 단순하다.
            • 김윤호
              명확해지네요.
            • la brea2016
              막연하던것들을 조금씩 알아가는거같아 기분이 좋아요~. 아직도 낯선 외계어같지만~ 좋은 가르침 감사합니다~.
            • 김지민
              어느 강의를 들어도 비유하시는 것이 너무 대단해요!
              이번 강의에서는 건물을 위에서 본 측면과 옆에서 본 측면을 비교해서 말씀해주시는게 너무 기억에 남았네요!
              매번 친절하고 좋은 강의 감사합니다 :)
            • 1. 대소문자 구별이 없지만, 가독성측면에서 강조하기위해 대문자를 선호합니다.
              2. <!DOCTYPE html>은 말그대로 html문서이며, 어떠한 버전으로 작성됬다는 것을 알려주는 것입니다.
              밑에 <html>은 html태그를 의미합니다.
              3. 저장할 시 확장자명 '.html'을 넣기때문에 차이가 없을겁니다~ 저도 초보라 잘모르겠네요 ^^;
              대화보기
              • Scia
                질문이 있습니다.! 아시는 분 댓글달아주세요 >0<

                1. <!DOCTYPE html> 에 'DOCTYPE' 은 항상 대문자로 써야하나요?

                2. 코드화를 할 때, <!DOCTYPE html> 밑에 <html>은 왜 쓰는 건가요?

                3. 메모장에서 코드를 작성하고 저장할 때, 왜 파일형식을 '모든 형식' 으로 해야하나요?
                +가끔 '텍스트 형식' 으로 저장한 적이 있는데 별다른 차이를 발견하지 못했습니다.
              • Scia
                글씨 크기를 <h'숫자'> 가 몇까지 될까 궁금해서 실험 해보았습니다.!!

                <h1> ~ <h6> 까지 존재하고요.
                그 이상의 숫자는 태크 없이 쓰는 글자와 동일하게 나오더군요.

                <h4> 는 태그없는 글자의 크기가 동일하며,
                차이점은 굵게 씌여집니다.
              • Scia
                저도 이분 질문한거 궁금합니다.
                결과적으로는 차이가 없는 듯하는데 확신이 안가서요.

                'HTML 이론'에서는 " / " 를 쓰셨는데 'HTML 실습'에서는 왜 사라진 거죠??
                대화보기
                • Scia
                  좋아요 가 있었다면 눌러주고 싶을 정도로 강의를 깔끔히 정리해 주셨네요.!
                  대화보기
                  • a태그에 작성한 URL을 확인해보셔야 될것같습니다.
                    http://인데, http//라고 작성하신 것 같습니다. ' : ' 가 빠진거 같아요~
                    대화보기
                    • Byeolmaru
                      메모장으로 작성하신경우 HTML 파일을 저장할 때 인코딩방식을 ANSI에서 "UTF-8" 로 체크 후 저장하셨는지 한번 확인해보세요~
                      대화보기
                      • Mateo Hernandez Kim
                        감사합니다~
                      • 김재훈
                        퍼갑니다^^
                        대화보기
                        • 허영재
                          강의가 진행될 수록 재미가 더해갑니다.

                          시작하길 정말 잘했다고 생각합니다.

                          e-going님과 이 사이트의 관리와 컨텐츠에 기여하신 모든 분들께 감사드립니다.
                        • 김영준
                          안녕하세요?
                          <meta charset="utf-8"> 사용하면 한글이 다 깨지는데요.
                          크롬, 익스플로러 공히 그렇구요(윈도우10)
                          어떻게 해야할지;;;
                          도움 좀 부탁드려요~
                        • james
                          안녕하세요. 수고하십니다.

                          사이트완성 동영상 6:39에 있는 첫번째 링크를 걸고 새로운 파일을 htdocs에 page_html.html라고 저장했는데

                          The requested URL /�쐆ttp//localhost/page_html.html�� was not found on this server.

                          라고 뜹니다

                          조언 부탁드립니다.
                        • 솔뫼
                          다시 찬찬히 입력된 것을 살펴보니 링크주소에서 html확장자에다 숫자 1을 입력하였네요.
                          전부 수정하니까 제대로 되네요.
                          역시 초보 인정해야 겠습니다.
                        • 정말 유익하고 재밌어요 감사합니다
                        • 솔뫼
                          코딩 전혀 모르는 초보입니다.
                          html실습에서 링크하는 것을 따라서 하였는데, 처음 클릭할 때는 링크가 열렸는데, vc op를 각각 작업하고나서
                          다시 클릭히며는 not pound가 되고 주소창란에 확장자가 html이 아니고, html1 숫자가 붙어 계속 에러 상태입니다.
                          주수창에서 확장자를 다시 html로 하면 제대로 링크가 되는데, 또 리프레시하면 같은 현상이 되어 머리가 아프네요.
                          무엇을 잘못한 것인가요?
                          고수님들 댓글로 알려주시면 고맙겠습니다.
                        • 강호준
                          자격증 공부 때문에 오랜만에 듣네요 ㅠ 열심히 뒤쳐진 부분들 따라가야겠어요!
                        • 뉴뉴뉴비
                          야학 뒤늦게 시작하게 되어 열심히 뒤따라 가고 있습니다.

                          codeanywhere 사용 중인데요

                          HTML 실습 3에서 사이트 항목마다 링크 걸때

                          container 내 save as로 page_html.html page_vc.html 파일 저장하면서

                          진행하는데 preview 로 페이지 보면 연결이 안되네요.

                          codeanywhere 사용자 분들 어떻게 진행하셨나요??
                        • 아주미
                          복습하면서 공부하고 있어요
                        • 강의 감사합니다.
                          근데 목소리가 에코로 들리네요.
                        • 돼로밍
                          잘봤습니당
                        • 불개미
                          많이 뒤쳐졌지만 열심히 따라가고 있습니다^^
                        • 손은정
                          다시 복습 하려고 파일 지우고 다시 만들었는데
                          Bitmami 창에서 localhost/index.html 치면 파일을 찿을수가 없네요ㅠ.ㅠ
                          파일 저장한 이름과 다르게 localhost/html/이렇게 하면 파일이 보여요
                        • oupss
                          시간 날때마다 짬짬히 듣고 있습니다. 진도는 느리게 진행 되고 있으나 부담감 갖지 않고 수업을 즐기고 있고 피부에 닿지 않았던 프로그램을 이렇게 재미있게 배울 수 있다는 것을 느끼게 해주셔서 너무나 감사합니다^^
                        • Woody
                          안녕하세요.
                          강의 중간중간 쉬어가기라는 코너로, 학생들에게 피로감을 덜하게 해주시는 점
                          매우 감사하게 생각합니다.
                        • 명진
                          항상 쉽게 설명해 주셔서 감사합니다.
                        • 미니
                          맥 사용자입니다. 텍스트에디트 사용하고 있는데요. 기존에 저장했던 태그와 코드들을 수정하려고 파일을 열면 꺾쇄들과 태그 값이 들어있는 파일이 나오지 않고 웹서버에 있는 내용이 나와버리는데 어떻게 해야 하나요?
                        • decal
                          자막을 이용해서 눈으로만 훑어보고 있는데, 일단 끝까지 한 번 훑어보렵니다.
                        버전 관리
                        egoing
                        현재 버전
                        선택 버전
                        graphittie 자세히 보기