홈 페이지 제작에 필요한 자료들을 점차적으로 올리겠습니다.

홈 페이지 제작에 대한 궁금한 점이 있으시면 메일을.....
 

html문서 작성시 유의점

1.html(hyper text markup language)문서에서는 대소문자를 구분하지 않으며, 문서를 저장할때는 확장자 html, htm모두가 가능하다. 그러나 만약 같은 파일명을 가진 문서중에서 이 두형식의 문서가 같이 존재한다면 html이 htm에 우선적으로 반응을 한다. 그러므로 파일형식을 지정할때는 html로 할 것인지 아니면htm으로 할것인지를 먼저 결정을 해야 한다. 나중에 이를 혼용하여 사용하다가 다른 페이지로의 링크를 할때 확장자를 잘 못 지정하여 페이지 연결이 되지 않는 예가 많기 때문이다.

2.문서 작성시 문서나 그림, 배경음악, 그외 여타 데이터의 파일명(확장자 포함)은 부득이한 경우가 아니면 영문소문자와 숫자와의 조합으로/8자 이하로 작성을 한다.(예;music01.htm, gayo11.mid, sajin33.jpg) 이는 웹서핑을 하는 접속자가 자기의 컴퓨터의 설정환경에 따라 해당 페이지나 일부가 전혀 반응을 하지 않을수가 있으며 특히 한글 파일명일 경우에는 외국의 서퍼들은 한글지원 OS가 아니고는 볼 수가 없을 것이다. 인터넷이 전세계를 연결하는 매체라는 걸 염두에 둔다면 더욱 신경을 쓰야 할것이다.
* 참고 ; 익스플로러에서 한글파일을 볼 수 있게하는 옵션 - 익스플로러 메뉴바에서 도구-인터넷 옵션-고급-웹보기-URL을 항상 UTF-8로 보냄 부분을 언체크.

 

html문서의 기본 구성

<html> <head> <title>페이지의 제목</title> </head> <body> 웹페이지에 들어갈 내용을 넣는 공간. </body> </html>


텍스트 문서(TXT), NOTEPAD, 아래한글, 오피스등 어떠한 문서편집기에서라도 상기와 같이 기본구성문서를 작성한 뒤 저장을 할때 확장자를 htm(l)로 해주기만 하면 간단한 하나의 웹문서가 완성된다. 웹문서에 나타날 사항은 웹브라우즈(익스플로러)의 최상단 좌측에 '페이지의 제목'이라는 제목이 보이고 내용은 '웹페이지에 들어갈 내용을 넣는 공간.'이라는 폰트가 나타나는 문서가 완성되는 것이다.

* 참고 ; 이곳의 모든 문서중에서 [..]는 <..>로 수정을 해주어야한다.

왜냐하면 이 문서를 <..>로 표기할 경우 html문서로 인식되어 body부분의 내용만 웹페이지상에 나타나기때문이다.

여기서 각 명령어들, 예를들어[html]은 html문서를 연다는 의미이고 [/html]은 html문서를 닫는다는 의미를 내포한다. 그리고 한 명령어가 열리고나서 중간에 위치하는 언어들은 닫힐때까지 계속해서 그 명령어의 영향을 받게된다. 그러므로 항상 명령어의 위치 선정에 유의를 할 필요가 있다.

 

명령어 모음

* hn(Heading) : n=1~6까지의 숫자로 표기. 글자의 크기를 설정함. 숫자가 클수록 글자가 작아지며 기본값은 h4임.(font의 'size'로 대체 사용 하기도 한다.)

* p(Paragraph) : 줄바꿈과 동시에 줄을 띤것 같은 효과

* br(Break Line) : 줄바꿈 효과, 시작태그 하나만으로 사용한다

* pre(Preformatted Text) : 여백이나 줄간격을 고정시키는 역할

* xmp : pre기능과 아울러 이 명령어 사이의 태그를 텍스트처럼 기능을 마비시킨다.

* font : 글자를 정의. color/face/size [font face="궁서체" color="blue" size="4"]김주능 홈페이지[/font]라고 지정했을 경우의 예;김주능 홈페이지

* center/left/right : 문장이나 그림등을 정열한다.

* <!- ... -> : 설명문

* vlink : 한번 클릭한 링크폰트의 색상 지정

* alink : 클릭 하고있는 동안의 링크폰트의 색상 지정

* blockquote : 인용구, 출력 결과가 문장의 앞/뒤로 들여쓰기 형태로 표현됨

* bgcolor : 배경색

* bgsound/embed : 배경음악. [bgsound src="경로와 파일명"] 배경음악은 wav와 mid를 지원

* a href : 다른 페이지와의 연결(link) [a href="경로와 파일명"]다음페이지로[/a]

* img src : image를 정의함. [img src=" 경로와 파일명"]

 

색상코드

#000000:검정색

#FF0000:빨간색

#00FF00:초록색

#FFFF00:노란색

#0000FF:파란색

#00FFFF:하늘색

#AAFF00:연두색

#FF00FF:보라색

#FFFBF0:크림색

#FFFFFF:하얀색

* 참조 ; 기타 색상표는 여기(click)로 가셔서 아래의 색상테이블을 선택하고 중간의 'body bgcolor'를 참조하세요.

 

기 타

특수문자 ;

*   &   - &amp;(&#38;)
*   <   - &lt;(&#60;)
*   >   - &gt;(&#62;)
* 공백 - &nbsp;(&#160;)
*   ©   - &copy;(&#169;)
*   ®   - &reg;(&#174;)

문단 Tag

* letter-spacing : [p style="letter-spacing:5px"]5픽셀 글자 간격[/p]
* line-hight : [p style="line-hight:5px"]5픽셀 또는 비율로 줄간격 지정[/p]
* margin-left/right : [p style="margin-left:5%"]비율로 여백 지정[/p]
* text-intent : [p style="text-intent:px/pt/%"]지정치만큼 들여 쓰기[/p]