웹 페이지를 제작하는 실례

먼저 테이블(도표)로 페이지 앞부분에 약간의 공간을 할애했다. 한 페이지의 폭을 전체 100으로 보았을때 여유공간을 7%(적당히 지정함)를 유지했다. 여기서 border값은 도표의 테두리 굵기를 나타내는 것으로 그 값이 "0"이라함은 실제로는 도표가 존재하지만 웹에서는 보이지 않음을 의미한다. 1. 그림이나 사진을 추가하기 : img src=" "라는 명령어를 사용한다. 여기서 경로를 지정할때 만약 데이터가 자기의 계정에 있을 경우에는 'http://www.cygether.com/' 는 적어 주지 않아도 되며(상대경로), 하위폴더가 있을 경우는 그 하위폴더와 파일명만을 적어 주어도 된다. 그리고 이 이미지에 '링크'를 하고자할 경우에는 a href=" "와 함께 설정해 주면된다. alt는 그림위에 마우스를 올려 놓았을때 풍선을 띄워 안내문을 보여주는 옵션이다. 이들 그림은 도표를 만들든지 아니면 연속적으로 배열하여 무한정으로 올려 놓을 수가 있으나 한 페이지에 너무 많은 이미지파일을 배치할 경우 Loading시간이 길어지는 문제가 있으니 적절한 수량으로 페이지 분할을 해 줄 필요가 있으며, 일반 그림등의 256칼러 이하는 gif로 256이상의 Real Color는 jpg로 저장을 하는 것이 데이터량을 줄일 수 있는 방편이기도 하다. 2. 배경음악을 삽입하기 : bgsound src=" "라는 명령어를 사용한다. 여기서도 이미지와 마찬가지로 경로는 자기 계정일경우는 단축시킬 수 있으며, loop="infinite"가 없을 경우는 노래가 한번의 실행으로 종료가되며 이 옵션이 있을 경우는 끝없이 반복된다는 의미이다. 3. 폰트에 의한 링크 : [a href=" "]링크할 폰트[/a] 이러한 형식을 취하며, 링크된 폰트에 밑줄을 없애려면 <STYLE type="text/css"><!-- a:link { text-decoration: none;color:blue } a:visited { text-decoration: none;color:blue } --> </STYLE> 이 소스를 body부분에 삽입 하고, 색상은 blue부분을 적당한 색상으로 바꾸어 주면된다. 홈으로 이동 * 참 고 : 이 웹 페이지에서 보이지 않는 소스는 '소스보기'를 하여 그대로 활용을 한다. 소스를 보는 방법은 웹 페이지의 여백부분에 마우스를 위치시킨 다음, 마우스 우측 클릭/소스보기 또는 HTML문서 보기를 선택하면 텍스트문서로 소스를 볼 수 있다.