제작하려고 하는 홈페이지의 키워드들을 선택했다면 이에 맞게 디렉토리 구조를 만들어야 합니다. 하지만 이 과정을 이해하기 위해서, 웹문서는 어떻게 만드는지 index 파일은 무엇인지 알 필요가 있습니다.
간단한 HTML 문서 만들기
웹문서는 주로 HTML(Hyper Text Markup Language)이란 간단한 마크업 언어로 작성을 합니다. 이 HTML은 메모장 프로그램을 사용해서 작성을 할 수도 있고, 또는 좀 더 편리하게 작성할 수 있게 도와주는 에디터(드림위버, 나모 웹 에디터, front page, …)를 사용할 수도 있습니다.
아래의 코드는, 웹표준에는 맞지 않지만, HTML 문서를 만드는데 가장 기본적으로 필요한 태그들로 이루어진 코드입니다. 이렇게 작성한 코드를 메모장이나 에디터에서 저장할 때 확장자를 html로 지정하면 브라우저가 HTML 태그로 만든 문서로 인식하고 화면에 출력하게 됩니다.
<html>
<head>
<title>브라우저 최상단에 나타나는 글 제목을 여기에 씁니다.</title>
</head>
<body>
<h1>글 제목 태그입니다. h1에서 h6까지 있는데 가장 큰 글 제목입니다.</h1>
<p>문단의 내용을 이 태그안에 적습니다. 줄을 바꿀 때는 <br />태그를 사용합니다.</p>
</body>
</html>
위 코드를 이용하여 메모장으로도 간단히 HTML 문서를 만들 수 있습니다. 컴퓨터 바탕화면에 오른쪽 마우스 버튼을 클릭한 후 ‘새로 만들기>텍스트 문서’를 클릭해서 바탕화면에 새 텍스트 문서를 하나 만듭니다. 그 문서를 열고 아래 코드를 복사해서 붙여넣기 한 후에 ‘다른 이름으로 저장’을 선택하고 ‘파일이름’의 확장자를 ‘txt’에서 ‘html’로 바꾸어서 저장하면 됩니다.(예: test.html) 해당 문서를 클릭해 보면 브라우저에서 어떻게 출력되는지 확인할 수 있습니다. 이 문서를 서버에 올리면 인터넷에서 다른 사람들도 볼 수 있게 됩니다. – 파일을 직접 만들지 않고 온라인에서 제공하는 태그 연습장같은 것을 사용해서 결과물을 볼 수도 있습니다.
태그는 보통 시작태그와 종료태그 쌍으로 이루어져 있고 종료태그에는 태그명 앞에 ‘</’를 붙입니다. 종료태그를 잊어버리고 안쓰는 경우가 있는데 태그가 쌍인 경우 꼭 종료태그를 사용해야 합니다. (예:<p>, </p>)
줄바꿈 태그처럼 쌍이 아닌 단독으로 사용되는 태그의 경우 태그이름 뒤에 ‘/>’를 붙여줍니다.(예: <br />)
<html> 태그는 HTML 문서의 시작을 뜻하며 문서의 끝에는 </html>을 사용합니다.
<head>와 </head>사이에 있는 태그들은 문서자체에 대한 정보들이 있으며 브라우저와 검색엔진이 참고하는 내용입니다. 브라우저 안에서 실제로 출력되는 내용은 없습니다.
<body>와 </body> 사이에는 브라우저에 출력되는 내용들(텍스트, 이미지, 링크,색상…)등의 내용들이 있습니다.
Index 파일이란?
일반적으로 규모가 크지 않은 개인 홈페이지나 웹사이트는, 하나의 큰 서버에서 일정부분을 할당 받아서 그 영역에 웹문서와 이미지를 올리고 운영하게 됩니다. 이 영역은 호스팅 업체에 따라 다른데, 일반적으로 ‘www’ 나 ‘public_html’ 또는 ‘htdocs’ 등의 이름을 가진 디렉토리로 주어집니다. 그리고 자신의 도메인 주소가 이 디렉토리로 연결이 됩니다. 따라서 디렉토리의 이름이 맘에 안든다고 해서 이름을 바꾸거나 삭제하면 안됩니다.
index 파일은 디렉토리의 대표 문서로서, 브라우저에서 어떤 디렉토리에 접속 했을 때 자동적으로 보여주는 파일입니다. 만약 디렉토리에 index 파일이 없을 경우 그 디렉토리에 있는 파일들을 리스트 형식으로 보여주거나 또는 forbidden 메세지가 뜨면서 접근이 금지됩니다.
즉, 브라우저에서 ‘http://yoursite.com/’ 이라고 입력한다면 public_html 디렉토리에 있는 index.html을 보게 되는 셈이고 브라우저에 ‘http://yoursite.com/index.html 을 입력한 것과 같은 결과가 나오게 되는 것입니다. 따라서 public_html 디렉토리에는 반드시 index 파일이 있어야 합니다. 보기는 싫겠지만, 좀전에 만든 test.html을 index.html로 바꾸고 public_html 디렉토리에 올려도 됩니다.
그리고 index 파일은 사용된 언어에 따라서 index.html, index.htm, index.php, index.shtml, index.asp 등이 사용될 수 있습니다. 만약 한 디렉토리에 두개의 인덱스 파일이 있다면 보통 html, htm, php 등의 파일 순서로 우선 순위를 가집니다.
브라우저에서 /(슬래쉬)의 의미
앞에서도 설명했지만, ‘/’는 브라우저 주소창에서
디렉토리를 의미합니다.
‘/’로 주소가 끝나면 그 디렉토리의 인덱스 파일(index.html, index.htm, index.php, …)을 불러옵니다.
주소 끝의 슬래쉬는 보통 생략하지만 의미상으로 본다면 정확한 사용법은 아닙니다. – http://yoursite.com/ ( O ), http://yoursite.com ( X ), http://yoursite.com/index.html ( O )
주소가 특정 디렉토리의 파일을 가리키고 있을 때는 ‘/’는 사용하지 않는게 알맞은 사용법입니다. – http://yoursite.com/index.html/ ( X )
marquee태그- 글자등 객체를 움직이는 효과 좌->우로 이동 <marquee>hello</marquee>
배경색지정 <marquee bgcolor=blue>hello</marquee>
상하좌우 지정이동<marquee direction=up>hello</marquee>
왕복이동<marquee behavior=alternate>hello</marquee>
이동하는 거리를 지정 숫자가 낮을수록 느림 <marquee scrollamount=1>hello</marquee>
너비와 높이 지정<marquee width=30>hello</marquee>
30높이에 위로 왕복이동<marquee direction=up height=30 behavior=alternate>hello</marquee>
이중marquee를 사용할수도 있다. 좌우로 움직이면서 상하로 움직이게 하기 <marquee direction=up scrollamount=1 behavior=alternate height=100><marquee scrollamount=2 direction=left>hello</marquee></marquee>
메타태그 - <head></head>사이에 지정 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=euc-kr">
한글 전용 페이지로 브라우저에서 한글표현이 자유롭도록 만들어주는 태그 <Meta http-equiv="Content-Type" content="text/html; charset=ks_c_5601-1987 "> 한글이 깨져 보이는 경우, 한글의 코드를 지정하면 한글이 깨져 보이는 현상을 개선할 수 있다. <META HTTP-EQUIV="refresh" CONTENT="시간설정(초); URL="이동할 URL"> 설정한 시간이 지나면 다음 페이지로 자동으로 넘어가는 태그 <META NAME="Description" CONTENT="홈페이지 소개문구"> 홈페이지 한 눈에 알수 있는 소개문구, 검색로봇에 의해 정보수집이 됨 <META NAME="Keyword" CONTENT=" 홈페이지 키워드"> 홈페이지를 알릴수 있는 각종 키워드 정보 <Meta name="Author" content="홍길동"> 페이지 작성자 정보 - 이메일(Email), 파일이름(Filename), 제작일(Author-Date), 위치(Location), 배포자(Distribution), 에디터(Generator), 분류(Classification), 저작권(Copyright) <META HTTP-EQUIV="Last-Modified" CONTENT="Mon,10 Jul 2000 18:47:14"> 최종수정일
기본태그들-
<p> 태그와 <br> 차이점은 p태그 사용시 글이 쓰여지고 그아래 한줄이 더 비워지는반면 br은 그냥 줄바꿈이다.
<b> 글씨를 굵게 <h1..6> 글씨를 굵게 <i> 글씨를 비스듬히 <U> 밑줄 <strike> 글씨 중간에 줄긋기 <sub> 아래첨자 <sup> 위첨자 <a> - 링크시 사용 현재창에서 이동<a href=http://cdral.net/>go</a> 새창띄우기<a href=http://cdral.net/ target="_blank"><img src=a.jpg border=0></a> form 태그로도 가능 <form action=http://cdral.net/ target=_blank><input type=submit value=gogo></form> 도움말 나타내기 <font size=3 title=cdral.net입니다>cdral.net</font> (글씨는 title이라면 이미지는 alt이다.)
</head> <frameset rows="100%,*" border="0"> <frame name="noframe" src="http://cdral.com/?mid=xenerboard"></frame> <noframes> <body> <p>This page uses frames. The current browser you are using does not support frames.</p> </body> </noframes> </frameset> </html>
method방식
post방식과 get방식 - 둘의 차이는 주소창을보면 ?seq=150&path=%%%이렇게 쭉 따라붙는게 get방식이다
post방식은 해당페이지 파일주소만 보이기에 보안적인 측면에서 더 좋다. 속도는 이론적으로 get방식이 빠르다
action - 입력받은 페이지를 처리하는곳을 지정한다
input type엔 text, radio, checkbox등이 있고 maxlength는 최대글자수제한 readonly는 해당 text타입에서
글을 읽을수만있다. checked는 미리체크 되있는상태이며 value값이 다음페이지로 전달되는 실제값이라 할수있다.
