WEB SITE 제작 순서 기 획 - 주제 설정 / 사전 조사 및 자료 수집 / 스토리 보드 작성 제 작 - 인터페이스 디자인 / 인트로 페이지 디자인 메뉴 페이지 디자인 / 이미지 작업 및 코딩 설 치 - 서버 결정과 환경설정 / 업로드 및 퍼미션 설정 / CGI 설치 [ HTML TAG ] 1. 기본 구성 < html > < head >< title >문서의 머리말< /title >< /head > < body >본문< /body > < /html > < body background="image.gif" bgcolor="#000000" text="#ffffff" link="#00ffff" vlink="#ff00ff" alink="#ffff00" topmargin="0" leftmargin="0" > background : 전체 배경 이미지 지정 bgcolor : 배경색 지정 text : 표준 텍스트 색 지정 link : 링크 부분의 색 지정 vlink : 검색한 링크 부분의 색 지정 alink : 검색중인 링크의 색 지정 topmargin: 문서 위쪽 부분의 여백 지정 leftmargin : 문서 왼쪽 부분의 여백 지정 ( 색지정은 "#aabbcc"로 구성된다. aa은 적색16진수, bb는 녹색16진수, cc는 청색16진수이다. ) 2. 텍스트 < font size="상수" > < /font > 폰트 사이즈 디폴트 값은 3 < color="색지정" > < /font > 색지정은 "#aabbcc"의 각각 RGB의 16진수 < face="폰트지정" > < /font > 폰트의 디폴트 값 (IE는 굴림체, Net는 바탕체) < p > 한줄 띠우기 (단,1번이상 중복사용 안됨) < br > 줄 바꿈 (1번 이상 중복사용이 가능하다) < pre > < /pre > 문자 표현 형식을 제거한다 < b >볼드체< /b > < i >이탤릭체< /i > < u >글자에 밑줄< /u > < h1 >현동이 바보< /h1 > < h2 >현동이 바보< /h2 > < h3 >현동이 바보< /h3 > ( 1이 가장 큰 사이즈이고, 차례대로 6이 가장 작은 사이즈다. ) 3. 이미지 삽입하기 < img src="이미지상대경로" width="가로" height="세로" border="0" alt="이미지 설명" > 4. 하이퍼 링크 정의 : 문서와 문서를 또는 개체와 개체를 연결시켜주는 것 다를 개체로의 이동 < a href="상대경로" target="_blank or 정의된 target " > 메일 보내기 링크 < a href="mailto:E-mail address" >< /a > 같은 문서 내에서의 링크 정의 < a name="name" >"경신고"< /a > 링크 < a href="#name" >"경신고"로 이동< /A > 5. 리스트 만들기 순서 있는 목록 < ol > < li type="1" > 현동이 1개 1. 현동이 1개 < li > 현동이 2개 2. 현동이 2개 < li type="A" > 현동이 3개 C. 현동이 3개 < li > 현동이 4개 D. 현동이 4개 < li type="a" > 현동이 5개 e. 현동이 5개 < li > 현동이 6개 f. 현동이 6개 < li type="i" > 현동이 7개 ⅶ. 현동이 7개 < li > 현동이 8개 ⅷ. 현동이 8개 < /ol > 순서 없는 목록 < ul > < li type="" > 현동이 1개 ●현동이 1개 < li >현동이 2개 ●현동이 2개 < li type="circle" > 현동이 3개 ○현동이 3개 < li > 현동이 4개 ○현동이 4개 < li type="square" > 현동이 5개 ■현동이 5개 < li > 현동이 6개 ■현동이 6개 < /ul > 6. 테이블 TAG < table align="" height="" width="" cellpadding="" cellspacing="" border="" > < tr > < td >< /td > < /tr > < /table > < tr >< /tr > 은 행의 구분을 그리고 < td >< /td > 는 칸 구분을 해준다. bgcolor="" 테이블 내의 설정된 곳을 컬러 처리 background="" 테이블 내의 설정된 부분에 배경이미지를 넣어 줌 align="" 우측 좌측 중앙 정렬을 시켜줌 valign="top" 상하 여백의 최상위 (top) 정령을 시켜줌 7. 프레임 설정하기 위 30% 아래 70% 의 프레임 구성! < frameset rows="30%,70%" > < frame name="위" src="상대경로" marginwidth="0" marginheight="0" scrolling="no" frameborder="no" > < /frameset > 좌측 130 우측 * 의 프레임 구성! < frameset cols="130,*" > < frame name="좌측" src="상대경로" marginwidth="0" marginheight="0" scrolling="no" frameborder="no" > < frame name="우측" src="상대경로" marginwidth="0" marginheight="0" scrolling="auto" frameborder="no" > < /frameset > 위 30 아래-좌측 120 아래-우측 * 의 프레임 구성! < frameset rows="30,*" > < frame name="위" src="상대경로" marginwidth="0" marginheight="0" scrolling="no" frameborder="no" > < frameset cols="120,*" > < frame name="아래-좌측" src="상대경로" marginwidth="0" marginheight="0" scrolling="no" frameborder="no" > < frame name="아래-우측" src="상대경로" marginwidth="0" marginheight="0" scrolling="auto" frameborder="no" > < /frameset > < /frameset > framespacing : 프레임간의 공간을 지정 marginwidth : 프레임의 좌우 여백을 지정 marginheight : 프레임의 위아래 여백을 지정 scrolling="no" : 문서가 길어져도 스크롤바가 생기지 않게 함 scrolling="auto" : 프레임내에 스크롤바가 자동으로 생김 noresize : 프레임 경계 고정 ( 일반적으로 사용자들은 프레임 경계를 원하는 위치 로 움직일 수 있다. )