HTML5

* 컴퓨터 초기화 : 개인 데이터 백업 , IP 주소 메모

 

* 실습에 필요한 프로그램 설치( 원활한 실습을 위해 디렉토리를 통일할 것 )

 

* JDK 1.8 64bit 설치( http://oracle.com ) -  c:\jdk1.8 

* 환경변수 설정

- JAVA_HOME : c:\jdk1.8

- path 추가 : c:\jdk1.8\bin

 

* Eclipse EE 64bit 설치( http://eclipse.org ) : Java + JSP 실습 가능한 EE 버전으로 설치

d:\eclipse

* Eclipse workspace -  d:\work

 

* 톰캣 9.0 설치 ( http://tomcat.apache.org )

  c:\tomcat9

 

* 한글 인코딩 방식

euc-kr( ms949 )  완성형, 한글 2바이트

utf-8 조합형(초성,중성,종성을 1바이트씩), 한글 3바이트, 영문 1바이트

 

* 이클립스의 인코딩 설정을 utf-8로 변경

 

General-Workspace-Text File encoding 속성을 UTF-8로 변경

 

 

General-Editors-Text Editors-Spelling-Encoding 속성을 UTF-8로 변경

 

 

Web-CSS Files, Web-HTML Files, Web-JSP Files Encoding을 UTF-8로 변경

 

 

* HTML 템플릿 편집

Window → Preferences → Web → JSP Files → Editor →  Templates → New JSP File(html) 선택 후 → Edit 클릭

DOCTYPE을 HTML4.01에서 HTML5 형식으로 변경
변경전
http://www.w3.org/TR/html4/loose.dtd">
변경후


 

* 이클립스에서 Dynamic Web Project 생성

* Dynamic Web Project의 디렉토리 구조
src : 자바 클래스
WebContent : 웹페이지(html, jsp, javascript, css)
WebContent/WEB-INF 시스템 디렉토리(웹프로젝트의 환경설정)
WebContent/WEB-INF/web.xml : 웹프로젝트의 환경설정 파일
WebContent/WEB-INF/classes : 컴파일된 코드
WebContent/WEB-INF/lib : 외부라이브러리 전용 디렉토리

 

 

* WWW(World Wide Web) : 웹, 세계를 뒤덮는 거미줄이라는 의미

 

 

 

*  HTML(Hyper Text Markup Language) : 웹 페이지를 기술하기 위한 언어, 1990년 물리학자인 팀 버너스리가 연구팀의 문서 공유를 위하여 개발함

 

* XML( eXensible Markup Language ) : 확장가능한 마크업 언어
 

* 웹브라우저 : HTML 소스를 번역하여 화면에 출력시키는 프로그램

-인터넷 익스플로러

-구글 크롬

-파이어폭스

-사파리

-오페라

 

* 웹브라우저 사용 통계 ( http://gs.statcounter.com )



* W3C(World Wide Web Consortium) : 웹표준 기관

 

* HTML의 버전

- 1999년 HTML 4.01

- 2000년 XHTML 1.0

- 2009년 XHTML 2.0 포기

- 2012년 HTML 5

 

* 웹표준 :

- 웹프로그래밍에서 지켜야 하는 표준적인 규칙, 어떤 운영체제나 웹브라우저에서도 비교적 동일한 디자인과 기능을 구현하기 위한 목적

- 우리나라의 많은 사이트가 웹표준을 어기고 인터넷 익스플로러에서만 작동되는 비표준 기술과 액티브 X 기술을 남용하여 다른 브라우저 및 모바일 기기에서 정상적으로 이용할 수 없는 문제가 많이 발생했음

 

* Javascript ( 자바스크립트)


- Java(jsp) : compile 언어, server에서 실행
- Javascript : interpreter(인터프리터)언어, client에서 실행
- Javascript는 자료형이 없음(가변자료형)
  var a = 10;
  a = "hello";
  a = 10.5;
- jQuery ( http://jquery.com ) : 자바스크립트 라이브러리
 

 

* HTML 문서의 기본 구조

       

 

* DOCTYPE : HTML 문서의 버전을 표시함

HTML 5

 

HTML 4.01 Strict
http://www.w3.org/TR/html4/strict.dtd"> 

 

HTML 4.01 Transitional
http://www.w3.org/TR/html4/loose.dtd">

 

HTML 4.01 Frameset
http://www.w3.org/TR/html4/frameset.dtd">

 

XHTML 1.0 Strict
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

XHTML 1.0 Transitional
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

XHTML 1.0 Frameset
http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

 

* HTML 태그의 속성 : <태그  속성="값"> 

 

 

test.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>제주 이색 여행지</h1> <!-- 제목 태그 -->
<p>아일랜드 출신 임피제 신부가... </p><!--  문단태그 -->
<hr> <!-- 수평선 -->
<blockquote>  <!-- 인용문 -->
성이시돌목장은 ...
</blockquote>

</body>
</html>

 

 

 

 

Html5

 

about author

PHRASE

Level 60  머나먼나라

All is well that ends well. (끝이 좋은 것은 모두가 좋은 것이다.)

댓글 ( 4)

댓글 남기기

작성