2016년 1월 8일 금요일

HTML Editors

출처 - http://www.w3schools.com/HTML/html_editors.asp
이 글은 위 사이트 글의 해석입니다.

HTML Editors

Write HTML Using Notepad or TextEdit

(텍스트에디터 or 메모장을 이용해 HTML을 써라)

HTML은 전문적인 HTML 편집기를 사용해 편집할 수 있다.

 - Microsoft WebMatrix
 - Sublime Text

하지만, HTML을 배우기 위해서 우리는 메모장(PC)이나 TextEdit(Mac)을 추천한다.

우리는 HTML을 배우는 좋은 방법은 간단한 텍스트 에디터를 사용하는 것이라고 믿는다.

밑의 4 단계를 따라해 메모장을 활용한 당신의 첫 번째 웹페이지를 만들어 보자.

Step 1: Open Notepad

(1 단계 : 메모장을 펴자)

컴퓨터 내에 있는 메모장 프로그램을 열자.

Step 2: Write Some HTML

(2 단계 : HTML을 쓰자)

Step 3: Save the HTML Page

(3 단계 : 저장해라)

당신의 컴퓨터에 작성한 메모장 파일을 저장하라.

파일 > 다른 이름으로 저장 

을 누르고

파일의 이름을 "index.html" 혹은 html, htm으로 끝나는 이름으로 한다.

UTF-8은 HTML파일의 코드화(encoding, 인코딩)를 위해 선호되어진다.

ANSI 인코딩은 미국과 서유럽 문자만을 다룬다.

(그림 3)
(그림 4)

Step 4: View HTML Page in Your Browser

(4 단계 : 브라우저에서 HTML 페이지를 봐라)

브라우저를 사용해 저장된 HTML파일을 열어라.

결과는 아래와 같다.
(그림 5)

HTML Introduction

출처 - http://www.w3schools.com/HTML
이 글은 위 사이트 글의 해석입니다.

HTML Introduction

what is HTML

- 마크업 언어
- 마크업 언어란 웹페이지를 만들기 위한 언어

- 네이버 지식인 : 
1.  마크업 언어란  HTML(Hyper Text Markup Language) 처럼 마크로 시작해서 마크로 끝나는 언어를 말합니다.
즉 사용하는 태그(Tag)가
< 태그> 
</태그>
이런식으로 구성 되는 언어를 말합니다.

2. HTML - Hyper Text Markup Language .

하이퍼 텍스트 마크업 언어(HTML) 은 웹 페이지를 위한 언어 입니다.

인터넷 브라우저(익스플로러 , 크롬 ,사파리, 오페라 등등) 으로 네이버(http://www.naver.com) 를 열으면 보이는 페이지가 있을 겁니다.

그페이지를 만드는 언어가 HTML , CSS ,javascript 인거죠.

깊이 들어가면 더많은 언어가 있지만, HTML은 사용자 눈으로 볼수있는 화면을 제작하는 언어입니다.

- HTML은 Hyper Text Markup Language라는 뜻이다.
- 마크업 언어는 마크업 태그의 셋트이다.
- HTML문서는 HTML 태그로 만들어진다.
- 각각의 HTML 태그는 다른 문서 컨텐츠를 의미한다.

예를 들면..

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>

<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
</html>

라는 문서를 위에서 부터 찬찬히 읽어보자.

● DOCTYPE html 선언은 문서타입이 html이 될 것이라는 뜻이다.
● <html>와 </html>사이의 텍스트는 HTML문서라는 뜻이다.
● <head>와 </head>사이의 텍스트는 문서에 관한 정보를 규정한다.
● <title>과 </title>사이의 텍스트는 문서의 제목을 규정한다.
● <body>와 </body>사이의 텍스트는 보이는 페이지의 컨텐츠를 만든다.
● <h1>과 </h1>사이의 텍스트는 제목을 만든다.
● <p>와 </p>사이의 텍스트는 단락을 만든다.

이 것들을 사용하면, 웹 브라우저는 제목과 단락이있는 문서를 보여준다.

HtmlTag


HTML 태그는 각진 괄호에 싸인 키워드이다.

ex) <tagname>content</tagname>

● HTML 태그는 일바적으로 <p></p>와 같이 한쌍으로 사용된다.
● 한쌍의 태그에서 첫번째 태그는 start tag이고, 두번째 태그는 end tag이다.
● end tag는 start tag앞에 슬래쉬가 붙어있는 형태이다.

Web Browsers


웹 브라우저(크롬, IE, 파이어폭스, 사파리)의 목적은 HTML 문서를 읽고 그것을 display하는 것이다. 

브라우저는 HTML 태그는 보여주지 않고
태그들을 사용해 문서를 어떻게 보여줄지 정한다.

그림1)

HTML Page Structure


밑에 그림은 HTML 페이지 구조를 이미지화 한 것이다.

그림2)

the <!DOCTYPE> Declaration


<!DOCTYPE>선언은 브라우저가 웹 페이지를 정확히 그려내는것을 돕는다.

밑에 다른 종류의 문서 타입들이 있다.

문서를 정확하게 그려내기 위해, 브라우저는 타입과 버전을 알아야 한다.

DOCTYPE 선언은 대, 소문자를 구별하지 않는다. 모든 문자를 받아들인다.




Common Declarations


HTML5
    <!DOCTYPE html>

HTML 4.01
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitaional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML 1.0
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


HTML Versions


웹 초기에서 부터, 다양한 버전의 HTML이 있어왔다.

1991 HTML
1995 HTML 2.0
1997 HTML 3.2
1999 HTML 4.01
2000 XHTML
2014 HTML5