Download presentation
Presentation is loading. Please wait.
1
HTML
2
홈 디렉토리 Linux에서의 홈디렉토리 Web에서의 홈디렉토리 /home/student/hknu/e학번/
/home/student/hknu/e학번/public_html
3
HTML기본 구조 HTML 문서의 기본 형식 HTML 문서는 <HTML>로시작해서 </HTML>로 끝나며
그사이에는 <HEAD>와 <BODY>영역이 있다. <BODY>영역에는 웹 문서의 실질적인 내용을 입력한다.
4
웹문서의 키워드를 찾아라 <HEAD>태그 속의 <META>태그
대부분의 검색엔진은 웹사이트의 제목, 메타 태그의 내용 본문의 100여 단어 등을 검색 Generator : 제작툴 Author : 제작자 Keywords : 검색키워드 Description : 주제
5
저장위치 > “/home/student/hknu/e학번/public_hmtl/meta.html”
실행 >
6
웹문서의 내용을 담는 <Body>태그
웹문서의 배경색 지정 <BODY bgcolor=“#FFFF00” text=“0000FF”> 이 웹문서는 … </BODY> 속성 값 설명 Bgcolor 색상 RGB값이나 색상 이름을 이용해서 배경 색상을 지정 Text 색상 RGB값이나 색상 이름을 이용해서 글자 색상을 지정 Background 파일이름 배경그림으로 사용할 파일 이름을 지정 Leftmargin 좌측여백 브라우저 좌측 여백 지정 Topmargin 상단여백 브라우저 상단 여백 지정
7
글자와 관련된 HTML기본 태그 글자 크기를 조절하는 <H> <H1>내용</H1>
8
글자를 편집하는 기본 태그 <font>
9
Font활용하여 글꼴과 글자 색상 바꾸기
10
글자 스타일을 바꾸는 태그들 태그 설명 <B>문자</B> 굵게
태그 설명 <B>문자</B> 굵게 <U>문자</U> 밑줄 <i>문자</i> 이텔릭체 <SUB>문자</SUB> 아래첨자 <SUP>문자</SUP> 위첨자 … 등등
11
문서를 깔끔하게 정리하는 테그 수평선 긋는 <HR> 속성 값 설명 Size 크기 입력한 크기 만큼의 높이
속성 값 설명 Size 크기 입력한 크기 만큼의 높이 Width 크기 입력한 크기 만큼의 넓이 Align left,right,center 정렬방식 Color 색상 선의 색상 Noshade 입체감 없는 선
12
/home/student/hknu/e학번/public_html/hr.html
13
기타 태그 <BR> <P> <Center> <PRE>
14
한눈에 볼 수 있는 목록을 만드는 태그 번호 없는 목록 <UL> 번호 있는 목록 <OL>
계층 구조 만드는<DL>
15
/home/student/hknu/e학번/public_html/ul.html
16
하이퍼 링크 <a href=‘연결할 파일 이름 또는 URL’> 링크를 걸 글자나 그림 </a>
<a href=‘ ‘ target=‘_blank’> … </a>
17
/home/student/hknu/e학번/public_html/a.html
18
Table 테이블을 구성하는 기본 태그 <table> <tr>
<td>첫 번째 줄 첫 번째 칸</td> <td>첫 번째 줄 두 번째 칸</td> <td>첫 번째 줄 세 번째 칸</td> </tr> <td>두 번째 줄 첫 번째 칸</td> <td>두 번째 줄 두 번째 칸</td> <td>두 번째 줄 세 번째 칸</td>
19
<Table>의 속성 속성 값 설명 Align left,center,right 테이블 전체의 정렬
속성 값 설명 Align left,center,right 테이블 전체의 정렬 Bgcolor 색상 테이블 전체의 배경색 Background 배경그림 테이블 전체의 배경그림 지정 Border 두께 테이블 테두리 두께 Bordercolor 색생 테이블 테두리 색상 Cellspacing 간격 셀(칸)과 셀의 간경을 픽셀단위로 Cellpadding 여백 셀(칸) 안에서 내용이 차지하는 좌우 여백 Height 크기,비율 테이블의 높이 Width 크기,비율 테이블의 폭
20
테이블을 구성하는 <TR>과 <TD> TR의 속성
속성 값 설명 align left,center,right 줄의 수평 정렬방식 bgcolor 색상 줄의 배경 색상 bordercolor 색상 줄의 테두리 색상 valign top,middle,bottom 줄의 수직정렬방식 TD의 속성 align left,center,right 칸의 수평 정렬방식 bgcolor 색상 칸의 배경 색상을 지정 background 배경그림 칸의 배경그림을 지정 bordercolor 색상 칸의 테두리색상 valign top,middle,bottom 칸의 수직 정렬방식 rowspan 줄수 줄을 합칠 때, 합치고자 하는 줄 수 colspan 칸수 칸을 합칠 때, 합치고자 하는 칸 수
21
쌍방향 커뮤니케이션을 지향하는 FORM 웹 사이트를 방문한 사람이 입력한 정보를 서버로 전달하기 위해서 <FORM>태그를 사용한다. 즉 각종 입력 양식을 <FORM> 태그 안에 사용하며, 이 태그에서 서버에 전달하는 방식이나 서버에서 가동될 프로그램 등을 지정
22
“form_01.html” <HTML> <BODY> <Form Method=Get Action="form_01.php"> sport ? <INPUT TYPE="TEXT" NAME="SPORT"><br> <INPUT Type="SUBMIT" Value=“send"> </Form> </BODY> </HTML> “form_01.php” <HTML> <BODY> input sport : <? echo "$SPORT" ?> </BODY> </HTML>
23
“form_02.html” <HTML> <BODY> <Form Method=POST Action="form_02.php"> Write Names?<br> <TEXTAREA NAME="NAMES" ROWS="10" COLS="30"> </TEXTAREA> <BR> <INPUT Type="SUBMIT" Value=“send"> </Form> </BODY> </HTML> “form_02.php” <HTML> <BODY> Name List : <? echo $NAMES; ?> </BODY> </HTML>
24
“form_03.html” “form_03.php” <HTML> <BODY>
<Form Method=POST Action="form_03.php"> bulgogi? <INPUT TYPE="checkbox" NAME="food1" VALUE=“bulgogi"><br> fish? <INPUT TYPE="checkbox" NAME="food2" VALUE=“fish"><br> samkyeobsal? <INPUT TYPE="checkbox" NAME="food3" VALUE=" samkyeobsal"><br> kimchi? <INPUT TYPE="checkbox" NAME="food4" VALUE=“kimchi"><br> <INPUT Type="SUBMIT" Value=“send"> </Form> </BODY> </HTML> <HTML> <BODY> input food : <br> <? echo " $food1 <br>"; echo " $food2 <br>"; echo " $food3 <br>"; echo " $food4 <br>"; ?> </BODY> </HTML> “form_03.php”
25
choice Country<br> <? echo " $country <br>"; ?>
“form_04.html” <HTML> <BODY> <Form Method=POST Action="form_04.php"> country ? <br> <INPUT TYPE="radio" NAME="country" VALUE=“USA">USA<BR> <INPUT TYPE="radio" NAME="country" VALUE=“French">French<BR> <INPUT TYPE="radio" NAME="country" VALUE=“Italy“>Italy<BR> <INPUT TYPE="radio" NAME="country" VALUE=“UK">UK<BR> <INPUT Type="SUBMIT" Value=“send"> </Form> </BODY> </HTML> “form_04.php” <HTML> <BODY> choice Country<br> <? echo " $country <br>"; ?> </BODY> </HTML>
26
choice Country<br> <? echo " $COUNTRY <br>"; ?>
“form_05.html” <HTML> <BODY> <Form Method=POST Action="form_05.php"> country? <br> <SELECT NAME="COUNTRY"> <Option> USA </Option> <Option> French </Option> <Option> Italy </Option> <Option> UK </Option> </Select> <INPUT Type="SUBMIT" Value=“send"> </Form> </BODY> </HTML> <HTML> <BODY> choice Country<br> <? echo " $COUNTRY <br>"; ?> </BODY> </HTML> “form_05.php”
Similar presentations
![HTML + JavaScript UIT Series [Chapter 3] HTML 을 이용한 회원 정보 입력 양식 만들기.](/40/11068626/big_thumb.jpg "HTML + JavaScript UIT Series [Chapter 3] HTML 을 이용한 회원 정보 입력 양식 만들기.>")
![UIT Series HTML + JavaScript [Chapter 1] Html을 이용한 웹 페이지 만들기.](/90/14451722/big_thumb.jpg "UIT Series HTML + JavaScript [Chapter 1] Html을 이용한 웹 페이지 만들기.>")