본문 바로가기
html

HTML 기초(태그 작성법, 저장 방법, 대소문자 구별, 서버에 올리는 방법)

by 지구별에 2014. 2. 20.

 

 

HTML 기초(태그 작성법, 저장 방법, 대소문자 구별, 서버에 올리는 방법)

 

 

오늘부터 HTML 언어 작성 방법에 대해 조금씩 정리해 보도록하겠습니다...

 

 

준비 도구 : 메모장(wordpad, notepad, TextEdit  등)

 

 

 

 

HTML 기본 코드

 

HTML 기본 코드는 아래와 같습니다.

 

 

 

<html>

  <head>

    <title>

    </title>

  </head>

  <body>

  </body>

</html>

 

 

 

 

위에 나온 각 태그의 위치에 주의해 주세요. 이 태그의 위치는 변함이 없습니다.

<body>와 <head>가 바뀌거나 하지 않습니다~

 

 

시작 태그 <html> 가 있고  끝 태그가 </html>있는데,

 

일반적으로 태그는 이렇게 각각 쌍을 이루고 있는 형태입니다.

 

하지만 <br>처럼 끝태그가 없는 태그(empty element)도 있음

 

 

<html> </html>은 html 문서의 시작과 끝을 알립니다.

 

<head></head>은 머리 영역으로, 본문에는 이 내용이 표시되지 않아요.

 

                        이 영역에 들어가는 대표적인 태그로 <title> </title>이 있습니다.

 

<title> </title>은 본문에는 나오지 않지만 브라우저 툴바에 나타내는 제목 

 

<body> </body>는 본문 영역입니다. 이 안에 쓰는 내용은 모두 화면에 나옵니다.

 

 

 

 

 

 

 

HTML 저장 방법

 

HTML 문서를 작성 후 저장 할 때는

 

확장자 .htm 또는 .html로 저장하는데요

 

예) main.htm / main.html

 

저장 유형은 두 방식 가능하지만, 각각 서로 다른 파일로 인식합니다.

 

저장 할 때는 영문으로 하는 게 좋습니다.. 한글을 인식하지 못하는 브라우저도 있으므로...

 

파일형식은 '유니코드 텍스트 문서'나 'All type'을 선택하여 저장합니다.

 

 

 

 

HTML 문서를 작성할 때 대소문자 구별을 할까?

 

 

HTML에서는 대소문자를 구별하진 않습니다....

 

따라서, 아래는 모두 동일한 결과를 보여줍니다..

 

<HEAD> </HEAD>, <head></head> <Head>  </Head>

 

하지만,  W3C(World Wide Web Consortium )은 소문자로 작성하는 것을 권장합니다.

 

*W3C는 HTML, CSS, XML등 웹 문서 코드 표준을 관리하는 기관.

 

 

main.htm 으로 저장한 문서를 열면, 인터넷 브라우저를 통해 열립니다.

 

만일 아까 작성한 코드를 다시 보고자 한다면, 메모장을 열어 다시 열어야되겠지요.

 

하지만  웹 페이지에서 마우스 오른쪽을 눌러서 <소스 보기>를 누르면 html 소스를 볼 수 있어요.

 

 

 

 

 

내 홈페이지를 서버에 올리는 방법

 

(네이버 블로그, 다음 블로그, 티스토리를 운영하고 있다면, 이 과정은 그냥 넘어가셔도 됨)

 

 

위에서 처럼 main.htm으로 작성한 후 연 화면은 나 혼자만 볼 수 있는 페이지입니다.

 

다른 사람들이 내가 작성한 웹페이지를 볼 수 있도록 하려면, 이 파일을 모두 서버에 올려야 합니다.

 

 

필요한 것 : 서버 계정(또는 도메인), FTP 프로그램

 

내 컴퓨터에 있는 자료를 서버에 올리려면, 파일 전송 프로그램 FTP (File Transfer Protocol)을 이용하는데요

 

대표적인 무료 ftp 프로그램으로는 파일질라(FileZilla)가 있어요.

 

그 외 무료 FTP 프로그램은 여기에서 다운 받으시고요~

 

 

해외 무료 도메인 사이트 http://www.000webhost.com/

국내 무료 도메인 사이트 http://dothome.co.kr/

 

 

 

 

 

HTML 기초 (markup, 브라우저 종류/ XHTML, XML, HTML5, DHTML 차이)

 

[HTML, CSS 기초] class, id 선택자

 

[html/css기초] span, div

 

[html기초]  , br, pre, p 태그

 

[html기초] &nbsp;  , br, pre, p 태그 

반응형

댓글