[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 내부에 텍스트가 남을 것이다. - 이 텍스트는 오른쪽 열이다.

[odds and ends] 캐나다 밴쿠버 vs 한국 서울 시각표

캐나다 밴쿠버 vs 한국 서울 시각표

캐나다 밴쿠버	한국 서울
AM 01:00	PM 05:00
AM 02:00	PM 06:00
AM 03:00	PM 07:00
AM 04:00	PM 08:00
AM 05:00	PM 09:00
AM 06:00	PM 10:00
AM 07:00	PM 11:00
AM 08:00	AM 12:00
AM 09:00	AM 01:00
AM 10:00	AM 02:00
AM 11:00	AM 03:00
PM 12:00	AM 04:00
PM 01:00	AM 05:00
PM 02:00	AM 06:00
PM 03:00	AM 07:00
PM 04:00	AM 08:00
PM 05:00	AM 09:00
PM 06:00	AM 10:00
PM 07:00	AM 11:00
PM 08:00	PM 12:00
PM 09:00	PM 01:00
PM 10:00	PM 02:00
PM 11:00	PM 03:00
AM 12:00	PM 04:00

[HTML] HTML Quick List

HTML Basic Document

<html>
<head>
<title>Document name goes here</title>
</head>

<body>
Visible text goes here
</body>
</html>


Heading Elements
<h1>Largest Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>

<h6>Smallest Heading</h6>


Text Elements
<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>


Logical Styles
<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>


Physical Styles
<b>This text is bold</b>
<i>This text is italic</i>


Links, Anchors, and Image Elements
<a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a>
<a href="mailto:webmaster@example.com">Send e-mail</a>
A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>


Unordered list
<ul>
<li>First item</li>
<li>Next item</li>
</ul>


Ordered list
<ol>
<li>First item</li>
<li>Next item</li>
</ol>


Definition list
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>


Tables
<table border="1">
<tr>
<th>someheader</th>
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>


Frames
<frameset cols="25%,75%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>


Forms
<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="lastname" value="Nixon" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">

<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>

<textarea name="Comment" rows="60" cols="20"></textarea>

</form>


Entities
&lt; is the same as <
&gt; is the same as >
&#169; is the same as ©


Other Elements
<!-- This is a comment -->

<blockquote>
Text quoted from some source.
</blockquote>

<address>
Address 1<br>
Address 2<br>
City<br>
</address>

[참조 : Source : http://www.w3schools.com/html/html_quick.asp]

[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). 때문이였다.

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

[HTML] 12. HTML 배경

12. HTML 배경

- 괜찮은 배경은 웹 페이지를 정말 돋보이게 만든다.

12.1 Backgrounds

- 태그는 배경을 지정할 수 있는 두가지 속성을 가진다. 그 배경은 색 또는 이미지가 될 수 있다.

12.2 Bgcolor
- bgcolor 속성은 HTML 페이지를 위한 배경색을 지정한다. 이 속성 값은 16진수 값, RGB 값, 혹은, 색 이름이 될 수 있다.

- 위 라인 모든 배경 색은 검정이다.

12.3 Background
- 배경 속성은 HTML 페이지를 위한 배경-이미지를 지정한다. 이 속성 값은 나타내길 바라는 이미지의 URL이다. 만약 이미지가 브라우저 창보다 작다면, 브라우저 창 전체를 자신의 이미지를 반복해서 채운다.

- URL은 상대적(위 라인의 첫 번째)이거나, 절대적(위 라인의 두 번째)일 수 있다.

* Note : 이미지 배경을 사용하길 바란다면 아래 사항을 알아둬야 한다:
- 배경 이미지 로딩 시간이 얼마나 걸리나?
- 배경 이미지가 웹 페이지상의 이미지와 조화로운가?
- 배경 이미지가 웹 페이지상의 글자 색과 조화로운가?
- 배경 이미지가 웹 페이지상에서 자신을 반복해서 채웠을 때 예쁘게 보이는가?
- 배경 이미지가 텍스트 초점을 흐릿하게 하는가?

12.4 Useful Tips
- 태그 내에서, bgcolor, background, 그리고 텍스트 속성은 HTML 최근 버전(HTML 4 and XHTML)에선 반대한다. World Wide Web Consortium(W3C)에서 그것의 추천에서 이러한 속성을 제거했다.

- 대신에, 스타일 시트(CSS)를 사용해야 한다.(레이아웃과 HTML 요소의 디스플레이 속성)

[HTML] 11. HTML 이미지

11. HTML 이미지

- HTML은 문서 속에서 이미지를 나타낼 수 있다.


11.1 이미지 태그와 Src 속성

- HTML에서, 이미지는 <img> 태그로 정의되어진다.

- <img> 태그는 단지 속성만 포함한다는 것을 의미하고, 닫기 태그가 없는 엠티 태그이다.

- 페이지상에 이미지를 나타낼 땐, src 속성을 이용한다. src는 "source"의 약자이다. src 속성의 값은 페이지상에 나타내길 바라는 이미지의 URL이다.

- 이미지 사용법은 :



- URL은 이미지가 저장된 위치를 가리킨다. "http://linuxerhan.blogspot.com/" 상의 "images" 디렉토리내에 "boat.gif" 이름의 이미지 URL은 : http://linuxerhan.blogspot.com/images/boat.gif 이다.

- 브라우저는 문서내에서 이미지 태그를 발생시키는 곳에 놓는다. 만약, twho paragraphs 사이에 이미지를 두길 바란다면, 브라우저는 첫번째 paragraph를 보여주고, 이미지를, 그리고, 두번째 paragraph를 이어서 보여줄 것이다.


11.2 Alt 속성

- alt 속성은 이미지에서 "alternate text"를 말한다. alt 속성 값은 다음과 처음 정의된다:



- "alt" 속성은 그 페이지를 방문한 독자의 브라우저가 이미지를 로드하지 못했을 때 말해준다. 그 브라우저는 이미지 대신에 alternate text를 보여주게 된다. 페이지상의 각각의 이미지에 "alt"속성을 포함하는 것은 매우 좋은 습관이고, 텍스트 브라우저를 사용하는 사람들을 위해서도 유용한 것이다.


11.3 Useful Tips

- 만약 11개의 파일에 10개씩의 이미지가 포함된 HTML 파일은 정상적으로 나타난다.

- 이미지를 로딩하는데 시간이 걸리고, 그래서 이미지를 사용할 때는 주의깊게 사용해야 한다.


11.4 Image Tags

[HTML] 10. HTML 폼과 입력

10. HTML 폼과 입력

- HTML 폼은 다수의 다른 사용자 입력을 선택되어 사용된다.


10.1 Forms

- 폼은 폼 요소를 포함하는 영역이다.

- 폼 요소들은 폼 안에서, 정보 입력을 바라는 사용자를 허락하는 요소이다. (텍스트 필드, 텍스트 에어리어 필드, 드롭-다운 메뉴, 라디오 버튼, 체크박스, 등)

- 폼은 태그로 정의된다.

10.2 Input

- 폼태그에서 가장 많이 사용하는 것은 <input> 태그이다. 입력 형태는 타입 속성에 따라 분류된다. 일반적으로 많이 사용되는 입력 타입은 아래에 설명되어 있다.


10.3 Text Fields

- 텍스트 필드는 폼 내에서, 문자, 숫자 등의 타입을 사용하기 바랄 때 사용되곤 한다.

- 브라우저에선 이렇게 보인다.

- 폼 자체는 보여지지 않는다. 또한 일반적인 브라우저에서, 텍스트 필드는 20 문자 크기의 가로를 를 디폴트로 하고 있다.


10.4 Radio Buttons

- 라디오 버튼은 제한이 있는 선택에서 하나만 선택해야 될 때 많이 사용되어진다.

- 브라우저에선 이렇게 보인다.

- 단지, 하나의 옵션만 선택할 수 있다.


10.5 Checkboxes

- 체크박스는 제한이 있는 선택에서 하나 또는 그 이상의 옵션을 선택해야 될 때 사용되어진다.

- 브라우저에선 이렇게 보인다.



10.6 폼의 액션 속성과 보내기 버튼

- 사용자가 "보내기" 버튼을 클릭했을 때, 폼의 내용은 또 다른 파일로 보내진다. 폼의 액션 속성은 내용을 보내기 위한 곳의 파일 이름으로 정의된다. 그 파일은 종종, 입력을 받는 어떤 것의 액션 속성 내에서 정의되어진다.

- 브라우저에선 이렇게 보인다.

- 텍스트 필드 위에서 어떤 문자들을 타입핑하고, "보내기" 버튼을 클릭하면, 입력된 것은 "html_form_action.asp"라는 페이지로 보내진다. 그 페이지는 입력 받은 것을 우리에게 보일 것이다.


10.7 Form Tags

[HTML] 9. HTML 리스트

9. HTML 리스트

- HTML은 ordered, unordered 그리고, definition lists를 지원한다.


9.1 Unordered Lists

- unordered list는 항목들의 리스트이다. 리스트 항목들은 불릿들로 이뤄진다.(일반적으로 작은 검은색 원)

- unordered list는 <ul> 태그로 시작된다. 각각의 리스트 항목은 <li> 태그로 시작된다.

- 브라우저에선 이렇게 보인다.

- 리스트 아이템 내부에 paragraphs, line breaks, 이미지, 링크, 다른 리스트 등등을 넣을 수 있다.

9.2 Ordered Lists

- ordered list 또한 항목들의 리스트이다. 그 리스트 항목들은 숫자들로 이뤄진다.

- ordered list는 <ol> 태그로 시작된다. 각각의 리스트 항목은 <li> 태그로 시작된다.

- 브라우저에선 이렇게 보인다.

- 리스트 아이템 내부에 paragraphs, line breaks, 이미지, 링크, 다른 리스트 등등을 넣을 수 있다.

9.3 Definition Lists

- definition list는 항목의 리스트가 아니다. 이것은 항목의 리스트와 단어들의 설명이다.

- fefinition list는 <dl> 태그로 시작된다. 각각의 definition-list 단어는 <dt> 태그로 시작된다. 각각의 definition-list 정의는 <dd> 태그로 시작된다.

- 브라우저에서는 아래와 같이 보인다.

- definition-list 정의(the <dd> 태그) 내부에 paragraphs, line breaks, 이미지, 링크, 다른 리스트 등등을 넣을 수 있다.

9.4 List Tags