2002/3/20 Kmste@sparcs.kaist.ac.kr HTML 2002/3/20 Kmste@sparcs.kaist.ac.kr
HTML 이란? HTML은 'Hyper Text Markup Language'의 약자로 하이퍼 텍스트 형식의 파일을 브라우저에서 볼 수 있도록 하기 위한 언어입니다.HTML의 표현은 명령 부분을 '<' 와 '>' 로 묶어 나타내는데 이것을 태그(TAG)라고 합니다. 태그를 사용하여 작성한 문서가 HTML문서가 되며, 확장자는 *.htm 또는 *.html로 지정됩니다.
TAG 사용하기
HTML 시작하기 <HTML> <HEAD> <TITLE> ~ </TITLE> </HEAD> <BODY> ~ </BODY> </HTML>
HEAD Head element 문서에 관련된 정보를 표현 - title element - link element - meta element - Example - <head> <title>~</title> <meta name=“~” content=“~”/> <link rel=“stylesheet” href=“~”/> </head>
BODY <BODY bgcolor="색상값" text="색상값"> <BODY background="이미지 화일명과 그 경로">
제목글 <Hn ALIGN="left 또는 center 또는 right"> ~ </Hn> 제목의 문자열을 나타낼 때 사용하며, 자동으로 글자 속성은 진하게 되고 자동 줄 바꿈이 됩니다.
Example <html> <head> <title>Example</title> <body> <h1>Example</h1> <h2>Example</h2> <h3>Example</h3> <h4>Example</h4> <h5>Example</h5> <h6>Example</h6> </body> </html> Example
글자크기, 색, 글꼴 n=1(작은글자)~7 Example <FONT SIZE='n' COLOR='색상명' or '#RGB' FACE='글꼴'> ~ </FONT> n=1(작은글자)~7 Example <font size=“2” color=“red” face=“굴림”>Example</font>
줄바꿈,문단사이구분,수평선 <BR> : 줄바꿈 <P> : 문단과 문단사이를 구분, <P>=<BR>+한줄 <HR SIZE=픽셀, WIDTH=픽셀 or %, HEIGHT=픽셀 or %, COLOR=색상명 또는 #RGB,ALIGN='LEFT' or 'CENTER' or 'RIGHT'중 택일, NOSHADE> <NOSHADE : 선의 모양이 입체감이 없어지고 1차원으로 그려집니다.>
정렬 Type <CENTER> ~ </CENTER> <P ALIGN=정렬방법> ~ </P> : 정렬후 한줄 내림 <DIV ALIGN=정렬방법> ~ </DIV> : 정렬후 줄바꿈 하지 않음
Image <img src=“파일명” alt=“이미지 파일 설명” width=“픽셀” 또는 % height=“픽셀” 또는 % border=“픽셀” vspace=“픽셀” hspace=“픽셀”/>
링크 <A HREF="링크할 곳의 파일명"> ~ </A> <A HREF="링크할 곳의 파일명"><IMG SRC="이미지 파일명“/></A> <A HREF="http://사이트 주소"> ~ </A> <A HREF="mailto:이메일"> ~ </A>
TABLE 형식 <TABLE WIDTH="픽셀 또는 비율(%)" HEIGHT="픽셀 또는 비율(%)“ border=n> <TR> <TD>~</TD><TD>~</TD> </TR> ~ </TABLE>
LIST 1 <UL> : 번호없는 목록 <LI> : 목록항목 <UL type="disc"> <LI>항목 1 <UL type="circle"> <LI>항목 3-1 <LI>항목 3-2 </UL> <LI>항목 4 <ul type="square"> <LI>항목 4-1 </UL> </UL>
LIST – example 1 •항목 1 항목 3-1 항목 3-2 • 항목 4 항목 4-1
LIST 2 <OL> : 번호 있는 목록 <LI> : 목록항목 <LI type="1"> 아라빅 숫자 1, 2, 3, …(default) <LI type="a"> 알파벳 소문자 a, b, c, ... <LI type="A"> 알파벳 대문자 A, B, C, ... <LI type="i"> 로마 소문자 i, ii, iii, ... <LI type="I"> 로마 대문자 I, II, III, ...
흘러가는 글씨 <MARQUEE direction=방향 loop=n scrollamount=n scrolldelay=n height=n width=n bgcolor=#rgb >~</MARQUEE> scrollamount=n : scrollmount를 설정하면 n만큼 속도가 빨라진다. height=n, width=n : 글씨가 나타나는 높이와 너비를 n만큼 설정할 수 있다. scrolldelay=n : scrolldelay를 설정하면 n만큼 글씨가 나타나는 간격이 달라진다.
FORM Type <FORM action="이동위치" method="방식" enctype="형식">~</FORM> <INPUT TYPE="입력양식" NAME="이름" SIZE="크기" MAXLENGTH=최대길이 VALUE="초기값“/> 입력양식 : radio, submit, reset, text, password,. etc
SPARCS 에서 홈페이지 돌리기 텔넷으로 SPARCS 접속.(Id,passwd 입력) Public_html 디렉토리로 이동. (bash-2.05$ cd public_html) Shell에서 “vi index.html” 이라고 입력. (bash-2.05$ vi index.html) Tag 입력해서 홈페이지 만들기. Explorer 에서 http://sparcs.kaist.ac.kr/~ID/ 로 접속해서 확인!!
숙 제 Mission : 자기 소개 홈페이지 만들기 단!! SPARCS 자기 계정에 만들것. 웹 에디터를 이용하지 말것. Vi 나 vim 이용해서 만들것. Link, Image, 정렬, Table tag는 꼭 이용할것.
Reference http://trio.co.kr http://www.w3.org