[HTML] Extra. HTTP Status Messages(HTTP 상태 메시지)

Extra. HTTP Status Messages(HTTP 상태 메시지)

- 브라우저가 웹 서버로 부터 서비스를 요청할 때, 에러가 발생했을 때.

- 되돌려주는, HTTP 상태 메시지 리스트이다.


Extra 1. 1xx: Information(정보)



Extra 2. 2xx: Successful(성공)



Extra 3. Redirection(재지시, 재명령)



Extra 4. Client Error(클라이언트 에러)



Extra 5. Server Error(서버 에러)

[HTML] 27. HTML을 모두 배웠다. 이제 무엇을 할 것인가?

27. HTML을 모두 배웠다. 이제 무엇을 할 것인가?


27.1 HTML 요약

- 이번 학습에선 자신의 웹 사이트를 만들기 위한 HTML 사용법에 대해서 배웠다.

- HTML은 웹을 위한 국제적인 마크업 언어이다. HTML은 텍스트에 그림을 추가하고, 링크를 만들며, 폼, 프레임, 그리고 테이블 등등을 삽입, 구성해서, 브라우저에서 읽고, 나타낼 수 있는, 텍스트 파일안에 모든 것을 저장한다.

- HTML의 키는 어떤 내용을 올릴것인지를 지시하는 태그이다.


27.2 HTML을 알고 있는 지금, 다음 할 일은?

- 다음 단계는 XHTML 과 CSS를 배우는 것이다.


27.3 XHTML

- XHTML은 "새로운" HTML이다. 가장 최근 HTML recommendation은 HTML 4.01이다. 이것은 마지막 HTML 버전이다.

- HTML은 HTML의 stricter 과 cleaner 버전의 XHTML으로 교체 될 수 있다.


27.4 CSS

- CSS는 멀티 웹 페이지의 스타일과 레이아웃을 한번에 통제할 수 있다.

- 더불어 CSS는 HTML 문서의 모든 포맷팅을 제거할 수 있고, 파일에 구분하여 저장할 수 있다.

[HTML] 26. 웹 페이지 출판 준비

26. 웹 페이지 출판 준비


26.1 첫 단계 : 개인 웹 서버

- 웹 페이지를 타인에게 보이길 바란다면, 페이지를 출판해야 한다.

- 출판한다는 것은, 파일을 웹 서버에 복사해야 한다는 것이다.

- 네트웍에 연결되어 있다면, 자신의 PC를 웹 서버 처럼 사용할 수 있다.

- 만약 윈도우즈 98 사용자라면, PWS(Personal Web Server)를 이용할 수 있다.

- PWS는 윈도우즈 CD안의 PWS 폴더안에 숨겨져 있다.


26.2 Personal Web Server(PWS)

- PWS는 어떤 윈도우즈 컴퓨터를 웹 서버로 바꾼다. PWS는 설치하기 쉽고, 개발과, 웹 응용프로그램 테스팅에 이상적이다. PWS는 워크스테이션을 위해 최적화 되어 있다. 그럼에도, 완벽한 웹 서버의 모든 조건을 갖췄다. 또한 큰 형격인 IIS와 같이 Active Server Pages(ASP)를 실행시킨다.


26.3 개인 웹 서버(PWS) 설치는 어떻게 하는가:

- PWS를 설치했다면, 윈도우즈 브라우저에서 설치 확인을 할 수 있다.

- PWS를 설치하지 않았다면, 윈도우즈 CD의 PWS 디렉토리에서 PWS를 설치한다.

- 지시를 따르고, 자신의 개인 웹 서버를 활성화하고, 실행한다.

- 참고 : 마이크로소프트 윈도우즈 XP 홈 에디션은 PWS를 포함하고 있지 않다.


26.4 Internet Information Server (IIS)

- 윈도우즈 2000에는 IIS 웹 서버가 포함되어 있다. 이것은, 웹을 위한 대규모 응용프로그램을 쉽게 만들수 있게 해준다. PWS와 IIS는 ASP를 포함한다. 서버-사이드 스크립팅은 동적이고, 상호 활동적인, 웹 응용프로그램을 만들수 있게 해주는 표준이다. 또한, IIS는 윈도우즈 NT에서 이용할 수 있다.


26.5 다음 단계 : 프로페셔널 웹 서버

- PWS나 IIS 이용을 바라지 않는다면, 공개 서버에 자신의 파일을 업로드 할 수 있다.

- 대부분의 인터넷 서비스 제공자들(ISP)은 웹 페이지 호스트를 제공한다.

- 인터넷 서버 사용자라면, 인터넷 서비스 제공자에게 웹 사이트 호스트를 요청할 수 있다.

- 이것이 힘들다면, 자신의 웹 서버를 구축해야 한다.

[HTML] 25. HTML URL-인코딩 참조

25. HTML URL-인코딩 참조


- 아래는 URL-인코딩 형태(16진수 포맷)에서 ASCII 문자 참조이다.

- 16진수 값은 브라우저와 플러그-인 안에서, 비-표준 문자와 문자를 나타낼 수 있게 한다.


25.1 URL-인코딩 from % 00 to %8f




25.2 URL-인코딩 from %90 to %ff

[HTML] 24. HTML 4.0 이벤트 속성

24. HTML 4.0 이벤트 속성

- 새로운 HTML 4.0은 HTML 유저가 엘리먼트를 클릭할 때, 자바스크립트을 시작하는 것과 같은, 브라우저에서 이벤트 트리거 액션을 사용할 수 있다.

- 이벤트 행위를 정의하여 HTML 태그 안에 넣을 수 있는 속성의 리스트를 아래에 열거했다.


24.1 window 이벤트

- body와 frameset 엘리먼트에서만 유효하다.



24.2 Form 엘리먼트 이벤트

- form 엘리먼트에서만 유효하다.



24.3 Keyboard 이벤트

- base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, 그리고 title elements에서는 유효하지 않다.



24.4 Mouse 이벤트

- base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title elements에서는 유효하지 않다.

[HTML] 23. HTML 4.0 표준 속성

23. HTML 4.0 표준 속성

- HTML 태그는 속성을 가질 수 있다. 각각의 태그에 대한 특별한 속성은 각각 태그 묘사 아래에 열거되어있다. 아래에 있는 코어와 언어 속성은 모든 페이지에 대한 표준이다. (몇몇은 제외하고)

23.1 코어 속성

- base, head, html, meta, param, script, style, 그리고, title elements에서는 유효하지 않다.

23.2 언어 속성

- base, head, html, meta, param, script, style, 그리고, title elements에서는 유효하지 않다.

23.3 키보드 속성

- base, head, html, meta, param, script, style, 그리고, title elements에서는 유효하지 않다.

[HTML] 22. HTML Scripts

22. HTML Scripts


- HTML 페이지에 스크립트를 추가하므로해서, 더욱 동적이고, 상호작용적인 웹을 만들 수 있다.


22.1 HTML 페이지 속에 스크립트 넣기

- HTML 내에 스크립트는 <script> 태그로 정의된다. 스크립팅 언어를 지정하기위한 속성타입을 이용함으로써, 스트립트를 이용할 수 있다.


- 스트립트의 출력은 아래와 같다.


22.2 오래된 브라우저에서는 어떻게 다룰까

- <script> 태그를 전혀 인식하지 못하는 브라우저는 페이지 상에 텍스트와 같이 <script> 태그의 내용을 보여줄 것이다. 이렇게 브라우저를 방해하는 것들은, 코멘트 태그내에 스트립트를 넣어 숨겨야한다. 오래된 브라우저(<script> 태그를 인식하지 못하는 브라우저)는 코멘트를 무시하고, 페이상에 태그를 쓰지 않을 것이다. 새로운 브라우저를 사용하는 동안에는, 코멘트 태그에 둘러쌓여져 있을지라도, 스트립트는 실행될 것이다.



22.3 <noscript> 태그

- 코멘트 내부에 스트립트를 숨길 때, 우리는 추가적으로 <noscript> 태그를 추가할 수 있다.

- <noscript> 태그는 스트립트가 실행되지 않으면, alternate text에 정의되어 사용된다. 이 태그는 <script> 태그를 인식하는 브라우즈에서 사용된다, 그러나, 스트립트 내부에서 지원하는건 아니다. 그래서, 이러한 브라우저들은 <noscript> 태그 대신에 텍스트 내부에 나타나게 할 것이다. 그러나, <script> 태그내부에 스크립트가 지원되는 브라우저라면, <noscript> 태그는 무시될 것이다.



22.4 Script Tags

[HTML] 21. HTML Uniform Resource Locators

21. HTML Uniform Resource Locators


21.1 HTML 링크

- HTML 문서에서 다음과 같은, 링크를 클릭했을 때: Previous Page, 웹상의 장소(주소)를 가리키는 <a> 태그와 다음과 같은 href 속성값 <a href="html-20-html.html">Previous Page</a> 이 기본이다.

- 예제내에서 Previous Page 링크는 우리가 보는 웹 사이트와 관련되어 있고, 우리의 브라우저는 대조적으로 http://linuxerhan.blogspot.com/2007/10/html-20-html.html 과 같은 완전한 웹 주소 페이지에 접근한다.


21.2 Uniform Resource Locators

- Uniform Resource Locators(URL)이라고 불리우는 것은 웹상의 문서(또는 다른 데이터) 주소를 이용한다. 완전한 웹 주소는 http://linuxerhan.blogspot.com/2007/10/html-20-html.html이며, 다음 규칙을 따른다.

scheme://host.domain:port/path/filename

- scheme는 인터넷 서비스의 타입을 정의한다. 일반적인 타입은 http이다.

- domain는 google.com 처럼 인터넷 도메인 네임을 정의한다.

- host는 도메인 호스트를 정의한다. 만약 생략되어있다면, http에 대한 기본값은 www이다.

- :port는 호스트의 port number를 정의한다. 포트 넘버는 일반적으로 생략된다. http에 대한 기본 포트 넘버는 80이다.

- path는 서버의 path(하위 디렉토리)를 정의한다. 만약 패스가 생략됐다면, 그 자원(그 문서)은 웹 사이트의 루트 디렉토리에 위치해 있을 것이다.

- filename은 문서의 이름을 정의한다. 기본 파일이름은 default.asp 또는, index.html 내지는, 웹 서버의 세팅에 의존한 어떤것이 될 것이다.


21.3 URL Schemes

- 일반적인 스키마의 예

21.4 뉴스 그룹에 접근

- 다음 HTML 코드는 HTML Newsgroup와 같은 새로운 뉴스 그룹 링크를 만든다. <a href="news:alt.html">HTML Newsgroup</a>

21.5 FTP 다운

- 다음 HTML 코드는 Download WinZip와 같은 파일 다운로드 링크를 만든다. <a href="ftp://www.google.co.kr/ftp/winzip.exe>Download WinZip</a> (그냥 만든 링크이기 때문에 클릭해도 파일이 다운되지는 않을 것이다.)

21.6 메일 시스템으로 연결
- 다음 HTML 코드는 LinuxerHAN@gmail.com과 같은 메일 시스템의 링크를 만든다. <a href="mailto:LinuxerHAN@gmail.com">LinuxerHAN@gmail.com</a>

[HTML] 20. HTML 메타

20. HTML 메타


20.1 메타 요소

- 헤드 요소는 문서에 대한 일반적인 정보(메타-정보)를 포함한다고, 앞 장에서 설명했었다.

- HTML은 또한 헤드 요소 내부에 메타 요소가 포함된다. 메타 요소의 목적은 문서에 대한 메타-정보를 제공하는 것이다.

- 메타 요소의 대부분은 브라우저와 관련이 있거나, 문서의 내용을 묘사하는것 처럼 검색 엔진에 정보를 제공한다.


20.2 서치 엔진을 위한 키워드

- WWW 상의 몇몇 서치 엔진은 이름과 페이지 인덱스를 목적으로 메타 태그의 속성을 포함하여 이용한다.

- 이름과 내용 속성의 목적은 페이지의 내용을 묘사하는 것이다.

- 그러나, 다수의 웹마스터들은 보다 상위 랭킹 페이지가 되기 위해서 키워드 반복과 같은 스팸을 위한 메타 태그로 사용하곤 한다. 몇몇 서치 엔진은 그것들 모두 저지한다.


20.3 알려지지 않은 메타 속성들

- 때때로, 다음과 같은 알려지지 않은 메타 속성들을 보게 될 것이다:

- 그때, 사이트에서 유일한, 사이트의 저자를 위한, 우리에겐 전혀 필요하지 않는 그런것들은 그냥 받아들이면 된다.

[HTML] 19. HTML 헤드

19. HTML 헤드


19.1 Head 요소

- 헤드 요소는 일반적으로 정보를 포함하고, 문서에 관한 meta-information(메타정보)라고 불린다. 메타의 의미는 "information about" 이다.

- meta-data는 데이터에 관한 정보를, meta-information는 정보에 관한 정보라고 말할 수 있다.


19.2 헤드 요소 내부 정보

- 헤드 요소 내의 요소는 브라우저에서 나타나지 않는다.

- HTML 표준에 따르면, 헤드 섹션의 내부에 적법한 태그로는 <base>, <link>, <meta>, <title>, <style>, 그리고 <script>이 있다.

- 다음은 비적합한 문장이다:

- 이 경우 브라우저는 두 가지 옵션을 갖는다.

* 텍스트를 나타나게 한다. 왜냐하면, paragraph 요소 내부에 있기 때문이다.

* 텍스트를 감춘다. 왜냐하면, 헤드 요소 내부에 있기 때문이다.

- <h1> 또는 <p> 와 같은 HTML 요소를 헤드 내부에 위치시킨다면, 대부분의 브라우저는 보이게 해 준다. 그러나 이것은 비적합한 것이다.

- 우리의 에러를 브라우저가 눈감아 줘야 한다고 생각하는가? 우리는 그렇지 않다고 생각한다. 다른사람들도 그렇지 않다고 생각할 것이다.


19.3 Head Tags

[HTML] 18. HTML 스타일

18. HTML 스타일

- HTML 4.0의 모든 정형화는 HTML 문서로 바꿀 수 있고, 스타일 시트를 분리할 수 있다.


18.1 스타일은 어떻게 사용하나?

- 브라우저가 스타일 시트를 읽을 때, 그것에 따르는 문서를 정형화 시킨다. 스타일 시트를 추가하는 3가지 방법이 있다:

* External Style Sheet(외부 스타일 시트)

- 외부 스타일 시트는 다수 페이지들에 적용하기에 이상적인 방법이다. 더불어, 외부 스타일 시트는 하나의 파일을 바꿈으로써 웹 사이트 전체를 바꿀 수 있는 효과가 있다. 각각의 페이지는 <link>태그를 사용하여 연결되어 있어야 한다. <link>태그는 헤드 섹션 내부에 들어간다.


* Internal Style Sheet(내부 스타일 시트)

- 내부 스타일 시트는 유일한 스타일을 갖는 단일 문서에서 사용되는 스타일 시트이다. 내부 스타일 시트는 헤드 섹션내에 <style> 태그로 정의된다.

* Inline Styles

- 하나의 요소에 적용시키는 유일한 스타일은 인라인 스타일을 사용해야 한다.

- 인라인 스타일을 사용하는 것은, 관련이 있는 태그내에서 스타일 속성을 사용할 때이다. 스타일 속성은 어떤 CSS 속성이 포함된다. 다음 예시는 색과 단락의 왼쪽여백을 바꾸는 것이다.



18.2 Style Tags

[HTML] 17. HTML 4.0을 사용하는 이유

17. HTML 4.0을 사용하는 이유


17.1 HTML 3.2는 매우 잘못됐다.

- 원조 HTML은 문서 정형화를 위한 태그를 결코 포함하지 않을 예정이였다. HTML 태그는 다음 문서와 같이 내용을 정의하려 했다:

- <font> 같은 태그와 색 속성이 HTML 3.2 명세서에 포함된 것은 웹 개발자의 악몽의 시작이였다. 대규모 웹 사이트 개발은 시간도 많이 걸렸고, 고비용과 아주 고통스런 방법으로 단일 웹 페이지 마다 폰트와 색 정보를 추가해야 했다.


17.2 HTML 4.0

- HTML 4.0에서 모든 정형화는 HTML 문서로 부터 제거될 수 있게 되었고, 스타일 시트를 나눠어 저장하게됐다.

- 왜냐하면, HTML 4.0은 문서구조로 부터 표현을 구분하고, 필요한 부분만 가졌다: 문서 내용의 비정형화 없이, 표현 레이아웃의 모두를 통제한다.


17.3 무엇을 해야 하나?

- 가능하다면, HTML 태그 내부에 표현 속성을 사용하지 마라. 스타일을 사용하라.

- 비난 받을 태그는 사용하지 마라. 다음의 HTML 4.01 / XHTML 1.0 을 참조하라.


17.4 HTML 4.01 / XHTML 1.0

- 다음은 알파벳 순으로 정렬된 것이다.

* NN : 네스케이프에서 지원되는 태그를 가리킨다.
* IE : 인터넷 익스플로러에서 지원되는 태그를 가리킨다.
* DTD : XHTML 1.0 DTA 태그 허락을 가리킨다. S=Strict, T=Transitional, 그리고 F=Frameset




17.5 XHTML을 준비하라

- XHTML은 "새로운" HTML이다. 해야할 가장 중요한 일은 유효한 HTML 4.01 작성으로 시작해야 한다는 것이다. 또한, 소문자 태그를 사용해서 시작해야 한다. 항상 태그 요소를 닫아야 한다. </p> 없이 paragraph를 마치지 마라.

- 공식적인 HTML 4.01은 소문자 태그를 추천한다.


17.6 HTML 4.01 처럼 HTML 파일은 유효해야 한다.

- HTML 문서는 다시 Document Type Definition(DTD)에 유효해야 한다. HTML 파일이 정확히 유효하기 전에, 올바른 DTD를 파일의 첫 라인에 추가해야 한다.

- HTML 4.01 Strict DTD는 비난받지 않거나, 프레임셋안에 나타나지 않는 요소와 속성을 포함해야 한다:



- HTML 4.01 Transitional DTD는 strict DTD에 비난받는 요소와 속성까지 모두 포함한다:



- HTML 4.01 Frameset DTD는 transitional DTA에 추가적으로 프레임까지 모두 포함한다:

17.7 HTML 테스트를 위한 W3C Validator

- 아래의 박스 안에 페이지 주소를 넣어라.

ex) http://linuxerhan.blogspot.com/

[HTML] 16. Fonts

16. Fonts

- HTML에서 <font> 태그 이용을 반대한다. 장래 HTML 버전에선 <font> 태그가 제거되기 때문이다.

- 상당수의 사람들이 <font> 태그를 이용한다. 우리는 <font> 태그 사용을 피해야 한다. 대신, CSS를 사용해야 한다.


16.1 <font> 태그

- 다음 HTML 코드와 같이 사이즈와 브라우저 출력 타입을 지정할 수 있다.


16.2 폰트 속성



16.3 <font>태그는 사용하지 말아야 한다.

- <font> 태그는 HTML 최신 버전(HTML 4 and XHTML)에서 제거되었다.

- W3C(World Wide Web Consortium)는 recommendations에서 <font> 태그를 제거했다. HTML의 미래 버전에서는, 레이아웃과 HTML 요소의 속성을 나타내기 위해 스타일 시트(CSS)를 사용하게 될 것이다.

[HTML] 15. HTML Layout

15. HTML Layout

- 웹 어디에서나 HTML 열들을 이용한, 일간지 처럼 정형화된 웹 페이지를 찾을 수 있다.


15.1 HTML 레이아웃 - 테이블을 사용하여

- HTML의 공통적인 관행중 하나는 HTML 페이지의 레이아웃 정형화를 HTML 테이블을 이용한다는 것이다. - 이번 페이지는 일간지와 같은, 두 개의 열을 이용하여 정형화 한다. - 이 페이지가 보인다면, 왼쪽 열과 오른쪽 열로 구성되어 있다는 것을 알 수 있을 것이다. - 이 텍스트는 왼쪽 열이다.

- HTML <table>은 이 웹 페이지를 두개의 열 부분으로 나눠 사용한다. - 트릭은 테이블의 borders 이용하는 것이고, 약간의 여분의 cellpadding을 이용했다. - 어떻게 이 페이지에 텍스트가 추가 되었는가에 상관없이, 열 borders 내부에 텍스트가 남을 것이다.

15.2 동일한 레이아웃 - 색 추가

- HTML의 공통적인 관행중 하나는 HTML 페이지의 레이아웃 정형화를 HTML 테이블을 이용한다는 것이다. - 이번 페이지는 일간지와 같은, 두 개의 열을 이용하여 정형화 한다. - 이 페이지가 보인다면, 왼쪽 열과 오른쪽 열로 구성되어 있다는 것을 알 수 있을 것이다.

- HTML <table>은 이 웹 페이지를 두개의 열 부분으로 나눠 사용한다. - 트릭은 테이블의 borders 이용하는 것이고, 약간의 여분의 cellpadding을 이용했다. - 어떻게 이 페이지에 텍스트가 추가 되었는가에 상관없이, 열 borders 내부에 텍스트가 남을 것이다. - 이 텍스트는 오른쪽 열이다.

[HTML] 14. HTML Color Values

14. HTML Color Values

- 색은 RED, GREEN, 그리고 BLUE 빛 소스의 조합으로 표현된다.


14.1 Color Values

- HTML 컬러는 Red, Green, 그리고 Blue 컬러 값의 조합에 대한 16진수표기법(RGB)으로 정의된다.

- 하나의 빛 소스로 가장 작은 값은 0 (hex #00) 그리고, 가장 큰 값은 255(hex #FF)이다.


14.2 Turn Off the Red

- 만약 Red 빛을 완벽하게 제거한다면, 65536 가지의 Green 과 Blue (256 * 256) 의 조합이 된다.

- Green and Blue 조합

- 수직 값은 Green, 수평 값은 Blue.

14.3 Turn On the Red

- 최대값으로 Red 파라미터를 세팅하면, 여전히 65536 가지의 Green 과 Blue (256 * 256) 의 조합이 된다.

- Green and Blue 조합

- 수직 값은 Green, 수평 값은 Blue.

14.4 16 Million Different Colors

- 0에서 255의 Red, Green 그리고 Blue 값들을 조합하면 총 160만 이상의 서로 다른 색이 된다.( 256 * 256 * 256)

- 현재 대부분의 모니터는 16384 가지의 다른 색을 나타낼 수 있다.

- 아래의 컬러 테이블은, green 과 blue 빛을 zero로 설정하고, red 빛을 0 ~ 255로 바꾼 결과다.

14.5 Shades of Gray

- 그레이 컬러는 모든 빛 소스의 파워 전체와 동일한 양을 이용한다. 올바른 그레이 컬러를 쉽게 만들수 있다는 것을 보여준다. 아래의 테이블은 완성된 그레이 형태다:

[HTML] 13. HTML Colors

13. HTML Colors

- 색은 RED, GREEN, 그리고 BLUE 빛 소스의 조합으로 표현된다.


13.1 Color Values

- HTML 컬러는 Red, Green, 그리고 Blue 컬러 값의 조합에 대한 16진수표기법으로 정의된다.

- 하나의 빛 소스로 가장 작은 값은 0 (hex #00) 그리고, 가장 큰 값은 255(hex #FF)이다.

- 아래 테이블은 Red, Green, 그리고 Blue 빛 소스 조합의 결과를 보여준다.


13.2 W3C Standard Color Names

- W3C는 HTML 밸리데이터가 허가한 16가지 컬러 이름 리스트를 정했다.

- 그 컬러 이름은 : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, 그리고 yellow 이다.


13.3 Cross-browser Color Names

- 거의 150 가지의 컬러 이름을 모든 주요한 브라우저에서 지원된다.

- 아래 테이블은 모든 주요한 브라우저에서 지원되는 컬러 이름 리스트이다.


13.3 Cross-browser Color Values

- 몇 년 전, 대부분의 컴퓨터들은 단지, 256가지의 다른 컬러를 지원했다. 216가지의 웹 세이퍼 컬러 리스트는 웹표준으로 제안했었다. 그 이유는 마이크로 소프트사와 맥 운영체제는 40가지 다른 "예약된" 고정 시스템 컬러 (about 20 each). 때문이였다.

- 오늘날 대부분 컴퓨터는 백만가지 이상의 컬러를 지원하기 때문에, 이제 이러한 것들은 중요하지않다. 하지만, 선택은 자신에게 달렸다.