1 / 105

3. HYML

Reference http://ee.tamu.edu/~skjo/ibook/Index.html http://www.sandia.gov/sci_compute/html_ref.html http://www.iworld.net/Inetizen/Han-HTMLPrimer/ World Wide Web 이렇게 시작하세요 . ( 이 창수 교수 ) 가자 Web 의 세계로 Buidling World Wide Web. 3. HYML. 3. HTML. 한국항공대학교 사회교육원. 과정 : 홈페이지 제작 과정

ganit
Télécharger la présentation

3. HYML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Reference http://ee.tamu.edu/~skjo/ibook/Index.html http://www.sandia.gov/sci_compute/html_ref.html http://www.iworld.net/Inetizen/Han-HTMLPrimer/ World Wide Web 이렇게 시작하세요. (이 창수 교수) 가자 Web의 세계로 Buidling World Wide Web ... 3. HYML

  2. 3. HTML 한국항공대학교 사회교육원 과정 : 홈페이지 제작 과정 강사 : 황종하, 이종근

  3. 3.1 World Wide Web의 배경 및 동작원리 3.2 몇가지 상식들 3.3 HTML 문서 작성 3.4 HTML 문서작성(보충설명) 3.5 Imagemap 3.6 Frame 3.7 Pretty Homepage (보충자료) 3. HTML(강의계획)

  4. 인터넷을 이용한 정보교환 초기에는 ftp를 이용한 화일의 교환 및 e-mail이 주를 이루었다. 인터넷의 확산에 따라 정보의 체계적인 탐색 방법이 필요하게 되었다. archie 화일의 저장위치를 파악하는 방법 gopher 계층적 접근방식에 의해 주로 문서정보를 찾아가는 방법 wais 문서에 대한 인덱스를 기초로 정보를 찾는 방법 최근에는 사용에 편리한 통합 서비스 환경 즉, WWW이 탄생하게 되었다. WWW은 1993년 Mosaic의 보급과 함께 급격히 확산되어, 이전의 서비스들을 대체하거나 통합하고 있다. 3.1 World Wide Web의 배경 및 동작원리

  5. WWW의 동작원리 1. URL에서 접속할 호스트의 Domain Name 주소를 읽는다. 2. DNS (Domain Name Service)를 통해 IP 주소를 찾아낸다. 3. 접속 방법(프로토콜: URL)에 따라 상대편 서버에 연결을 맺는다. 4. 클라이언트는 서버에게 URL에 지정되어 자료(문서)를 요청. 5. 서버는 해당 문서를 보내고 클라이언트는 수신한다. 6. 클라이언트는 수신한 자료를 화면에 보여준다. NCSA의 Mosaic은 모든 자료를 전부 수신한 후에 화면에 출력한다. Netscape는 수신한 자료를 화면에 출력한다. 3.1 World Wide Web의 배경 및 동작원리

  6. HTML(Hypertext Markup Language) an evolving language which is used to construct documents which can be viewed by World Wide Web browsers SGML(Standard Generalized Markup Language) Markup Language의 사용에 대한 표준안. DTD (Document Type Definition) SGML을 사용하여 쓰여진 Markup Language의 내역. 3.2 몇 가지 상식들 (1/2)

  7. HTML (Hyper Text Markup Language) 문서 HTML 문서는 아스키(ASCII)라고 알려진 일반 텍스트 양식의 문서. 일반적인 텍스트 편집기(Emacs, vi : Unix, BBEdit : Mac, Notepad : Windows)로 작성할 수 있다. HTML 편집기 참고자료 : http://sdg.ncsa.uiuc.edu/~mag/work/HTMLEditors/ Shareware 중에는 HotDog (Sausage Software) 가 가장 좋다고 알려짐. Homepage: http://www.sausage.com/ Supports Netscape extensions and HTML 3 elements. 조금만 익숙해지만, HTML 편집기의 사용이 오히려 불편해짐. 3.2 몇가지 상식들 (2/2)

  8. HTML 문서의 구조 기본구조 = 머리글(head) + 몸체(body) 머리글 : 문서의 title에 해당된다. 몸체 : 문서의 내용이 들어간다. 기본 구조 <html> <head> </head> <body> </body> </html> 주의 일반적으로 tag들은 쌍(pair)을 이루고 있다. 3.3 HTML 문서 작성

  9. 문서 형식 및 실습 1. 제목 및 본문 2. 헤딩 : <h1>, <h2>, <h3>, <h4>, <h5>, <h6> 3. 기초 양식 : 줄바꿈 <br>, 문단바꿈 <p>, 그 외 <pre>, <blockquote> 4. 문자 출력 양식 : 출력 형태 및 문자 크기 5. 수평선 및 중앙정렬 : <hr> <center> 6. link (anchor) 3.3 HTML 문서 작성

  10. HTML 문서 작성 연습 1 (본문 내용 넣기) <html> <head> <title> 정도령의 Cyber-Cafe </title> </head> <body> 어서오세요... 안녕하세요? 여러분의 방문을 진심으로 환영합니다. 여기는 정도령의 카페에요. 편안한 음악과 따뜻한 차를 즐겨 주세요. </body> </html> 3.3.1 제목 및 본문

  11. HTML 문서 작성 연습 2 <html> <head> <title> 정도령의 Cyberhome 방문을 환영합니다. </title> </head> <body> <h1> 안녕하세요? 큰 제목입니다. </h1> <h2> h는 헤딩의 약자입니다. </h2> <h3> 문자의 크기가 다르게 보이지요? </h3> <h4> 적절한 크기의 헤딩을 사용해야겠지요? </h4> <h5> 강조할 부분이나 단락의 단위에 </h5> <h6> 유의 하세요! </h6> </body> </html> 3.3.2 Heading

  12. HTML 문서 작성 연습 3 <html> <head> <title> 정도령의 Cyber-Cafe </title> </head> <body> <h3> 어서오세요... </h3> 안녕하세요? <br> 여러분의 방문을 진심으로 환영합니다.<br> 여기는 정도령의 카페에요. <br> 편안한 음악과 따뜻한 차를 즐겨 주세요. <br> </body> </html> 3.3.3 Line Break

  13. HTML 문서 작성 연습 4 (<pre>, <blockquote>을 넣어보자.) <pre> </pre> 에디터로 입력한 space, EOL, tab 등의 효과를 보고자 할 때 <blockquote> </blockquote> 특정 블럭의 문장들이 인용되었음을 표시할 때 사용. (앞의 예제 2에서) <body> <h3> 어서오세요... </h3> <pre> 안녕하세요? 여러분의 방문을 진심으로 환영합니다. 여기는 정도령의 카페에요. 편안한 음악과 따뜻한 차를 즐겨 주세요. </pre> </body> 3.3.4 Preformatted Text (1/2)

  14. Preformatted Text를 조금 더 공부해보면, 3.3.4 Preformatted Text (2/2) 차수 국어 영어 수학<BR> --------------------------- <BR> 1차 A A B <BR> 2차 B A A <BR> 3차 A A A <BR> --------------------------- <BR> <PRE> 차수 국어 영어 수학 --------------------------- 1차 A A B 2차 B A A 3차 A A A --------------------------- </PRE> • 위의 두가지 방법에 의해 작성된 HTML 문서는 어떤 차이가 있을까 ?

  15. HTML Link 만들기 <A HREF=filename>단어</A> filename부분에는 URL, 그림, HTML 문서등을 지정할 수 있다. (단어)는 밑줄과 함께 화면에 나타난다. User가 Click하면 해당 file을 읽어들이거나, 이동하게 된다. <A HREF="http://iefal.snu.ac.kr:8080/~wait4u/> 정도령 </A> HTML 문서내부에서의 위치 지정 <A NAME="Target1">타겟 1</A> <A HREF="#Target1">여기를 선택하면 타겟 1로 갑니다</A> 3.3.5 LINK (1/4)

  16. LINK의 설정 (상대경로와 절대경로) 상대경로 현재의 화일이 있는 위치를 기준으로 Link의 위치를 기술한다. 예1) <A HREF="gif/chung.gif"> 정도령의 초상화 </A> 예2) <A HREF=“hotlink.html”> Hot Link </A> 상대경로를 사용할 때 얻는 장점 1.문서 전체를 다른 위치로 옮기려 할 때에 훨씬 더 편리합니다. (상대 경로이름은 계속해서 유효할 것입니다) 2.서버에 접속할 때에 훨씬 더 효과적입니다. 3.타이핑이 줄어듭니다. 절대경로 Link의 위치와 프로토콜을 정확하게 기술한다. 예) <A HREF=“http://iefal.snu.ac.kr/~wait4u/gif/chung.gif”> 정도령의 초상화 </A> 3.3.5 LINK (2/4)

  17. URL 표기방법 양식 : service://host.domain-name/path/filename service : http, gopher, ftp, news 등 얻고자하는 filename을 적는다. (host computer를 적는 것은 option) HTML 문서의 link 지정에 활용하거나, browser의 open에 사용한다. 표기 예 : http://bora.dacom.co.kr/bora/expl/index.html ftp://ftp.dacom.co.kr/pub/ gopher://gopher.dacom.co.kr/ news://news.dacom.co.kr/han.* E-mail Client를 부르는 양식 mailto:wait4u@ultra.snu.ac.kr 3.3.5 LINK (3/4)

  18. URL을 Link에 포함한 양식의 예제 <A HREF=http://bora.dacom.co.kr/bora/news/index.html>새소식</A> <A HREF=ftp://ftp.dacom.co.kr/pub/>데이콤 ftp 서비스</A> <A HREF=gopher://gopher.dacom.co.kr/>데이콤 gopher 서비스</A> <A HREF=news://news.dacom.co.kr/han.*>데이콤 han news group</A> <A HREF=./blues.gif>백그라운드 그림</A> <A HREF=mailto:help@bora.dacom.co.kr>help@bora.dacom.co.kr</A> 3.3.5 LINK (4/4)

  19. List 자료를 체계적으로 정리하여 보여줄 때 사용한다. List에는 3가지 종류가 있다. Unorderd List <UL> </UL> Definition List <DL> </DL> Orderded List <OL> </OL> 3.3.6 List

  20. HTML 목록만들기 무순서 리스트 (<UL>, <LI>) <body> <h3> 정도령 카페 메뉴 </h3> <ul> <li> 커피 (자판기에 가서 뽑아 드세요.) <li> 피자 (피자는 오늘 안 팝니다.) <li> 맥주 (카프리, 밀러, 오비 라거 등등) </ul> </body> 3.3.6 List - Unordered List <UL>

  21. HTML 목록만들기 Definition List (<dl> <dt>) + 참고 <dd> 체계적인 목록 정리에 사용한다. <body> <h3> 정도령 카페 메뉴 </h3> <dl> <dt> 커피 <dd> 담배와 블랙커피 (환상적은 죽음의 칵테일) <dt> 피자 <dd> 참나무 숯불에 구은 얇은 팬 피자 <dt> 맥주 <dd> 친구들과 잡담을 나누는 장소에 한 병쯤 좋지요? </dl> </body> 3.3.6 List - Definition List

  22. HTML 목록만들기 순서 List (<ol> <li>) 순번을 붙여가면서 정리하는데 사용한다. <body> <h3> 정도령 카페에 입장하시면 ? </h3> <ol> <li> 출석을 부를때쯤 나타난다. <li> 숙제를 걷기 전에, 빨리 베낀다. <li> 간신히 베낀 후에는 쉬는 시간을 기다린다. <li> 살그머니 가방을 싸서 뒤로 튄다. <li> 친구들로부터 퀴즈를 보았다는 이야기를 전해듣는다. </ol> </body> 3.3.6 List - Ordered List

  23. HTML 문서내의 글자 속성 (Physical & Logical) Physical Style 굵은체 <b>문자열</b> 이탤릭 <i>문자열</i> 밑줄 <u>문자열</u> 타자체 폰트 <tt>문자열</tt> Logical Stype 강조 <em>문자열</em> 강한 강조 <strong>문자열</strong> 컴퓨터 코드 <code>문자열</code> 샘플 출력 <samp>문자열</samp> 키보드 키 <kbd>문자열</kbd> 인용 <cite>문자열</cite> 변수정의 <var>문자열</var> 변수표시 <dfn>문자열</dfn> 3.3.7 Font (1/2)

  24. 문자 크기를 강제로 조절하려면, <FONT SIZE=1> 제일 작은 폰트 </FONT> <FONT SIZE=2> 작은 것이 아름답다. </FONT> <FONT SIZE=3> 기본 폰트 크기는 3입니다. </FONT> <FONT SIZE=4> 적당히 큰 것이 좋은 법이여 </FONT> <FONT SIZE=5> 이 정도 크기면 강조효과가 충분하지요. </FONT> <FONT SIZE=6> 큰 사람이 좋다. </FONT> <FONT SIZE=7> 가장 큰 폰트 </FONT> 3.3.7 Font (2/2)

  25. 수평선 (HR) : <HR align=좌우중앙 width=백분율 size=정수> 중앙(center), 좌(left), 우(right) 중의 하나를 선택한다 (영문). width : 화면의 넓이를 기준(100%)으로 크기를 정한다 (1%-100%). size : 수평선의 세로너비를 정한다. 기본값 : <hr align=center width=100% size=2> 연습 (HR) width : <HR width=30%>, <HR width=70%>, <HR width=100%> 정렬 : <HR align=left width=30%>, <HR align=right width=30%> 굵기 : <HR width=30%>, <HR width=30% size=1> <HR width=70% size=5>, <HR width=100% size=20> 3.3.8 수평선(HR)

  26. Image File 삽입 <img align=[top|middle|bottom|left|right] width=[pixels|percentage] height=[pixels|percentage] border=pixels vspace=pixels hspace=pixels src=URL alt=text> 3.3.9 Image (1/2)

  27. <img> tag의 field 설명 align에서 top, middle, bottom은 이미지 주위에 단어가 올때 그것의 위치를 결정해 주고, left, right은 그림을 좌측에 혹은 우측에 위치하도록 합니다. width와 height은 그림의 크기를 가변적으로 조정할 수 있도록 하며, 실제 크기보다 크게 할때는 해상도가 떨어집니다. border는 그림주위에 경계선을 얼마나 두껍게 그을 것인가를 결정하며 vspace와 hspace는 그림 상하, 좌우로 공간을 얼마나 띄울 것인가 결정합니다. src는 그림화일의 위치를 지정하며 alt는 그림을 읽을 수 없는 웹브라우져내에서 그림대신 나타나는 글자를 지정합니다. 3.3.9 Image (2/2)

  28. 문서의 배경 <BODY background=imagefile bgcolor=color text=color link=color vlink=color> background 지정한 그림화일을 이용하여 배경을 만듭니다. bgcolor 배경색을 결정합니다. text 글자색을 결정합니다. link LINK가 있는 글자 혹은 그림주위(border)의 색상을 결정. vlink 이미 방문한 link의 색상을 결정합니다. 색상표현(RGB) ff0000 : 붉은 색 00ff00 : 녹색 0000ff : 파란 색 00000 : 검은 색 ffffff : 흰색 3.3.10 Background (1/2)

  29. 배경 설정 연습 배경색 bgcolor=ff0000 : 빨간색으로 지정 bgcolor=00ff00 : 초록색으로 지정 bgcolor=0000ff : 파란색으로 지정 글자와 링크 색상 text=0000ff link=ff0000 vlink=00ff00 문자는 파란색, 링크는 빨간색, 방문한 링크는 초록색 link=ff0000 vlink=00ff00 문자는 검은색, 링크는 빨간색, 방문한 링크는 초록색 link=ff0000 문자는 검은색, 링크는 빨간색, 방문한 링크는 짙은 청색 link=ffc000 vlink=00ff00 문자는 검은색, 링크는 금색, 방문한 링크는 초록색 3.3.10 Background (2/2)

  30. 표(Table) 만들기 기본 양식 <table border=pixels> [<tr>[<td>내용</td>]+</tr>]+ </table> tr (표의 행을 나타낸다.) rowspan =rows td (표의 열을 나타낸다.) colspan =columns align =[left|center|right] valign =[top|middle|bottom] 3.3.11 Table (1/6)

  31. 표 만들기 연습 (1/4) <table border=1> <tr><td> A(1,1)</td><td> B(1,2)</td></tr> <tr><td> C(2,1)</td><td> D(2,2)</td></tr> </table> 표 만들기 연습(2/4) colspan은 가로방향(행)의 칸을 합치는 기능을 합니다. <table border=2> <tr><td colspan=2> A(1,1) B(1,2) </tr> <tr><td> C(2,1)</td><td> D(2,2)</td></tr> </table> 3.3.11 Table (2/6)

  32. 표 만들기 연습 (3/4) rowspan은 세로방향(열)으로 칸을 합치는 기능을 합니다. <table border=2> <tr><td rowspan=2> A(1,1) C(2,1)</td> <td> B(1,2)</td></tr> <tr><td> D(2,2)</td></tr> </table> 3.3.11 Table (3/6)

  33. 문제 1 3.3.11 Table (4/6) • 문제 2 • 문제 3 (숙제) • File name : schedule.htm • 내용 : • 1. 주간 계획 • 2. 하루 계획 • 3. 월간 계획 • 4. 년간 계획 • 중 하나를 선택하여 작성. A A B C B C D D E

  34. 문제 1 (답) <table border=1> <tr><td colspan=2> A </td></tr> <tr><td> B </td><td rowspan=2> C </td></tr> <tr><td> D </td></tr> </table> 문제 2 (답) <table border=1> <tr><td colspan=3> A </td></tr> <tr><td colspan=2> B </td><td rowspan=2> C </td></tr> <tr><td> D </td><td> E </td></tr> </table> 3.3.11 Table (5/6)

  35. Table에 들어가는 내용을 강조하고 싶을 때 (<th>) <table border=1> <tr><th colspan=2> A </th></tr> <tr><td> B </td><td rowspan=2> C </td></tr> <tr><td> D </td></tr> </table> Table에 들어가는 내용을 강조하고 싶을 때 <th> <table border=1> <tr><th colspan=3> A </th></tr> <tr><th colspan=2> B </th><td rowspan=2> C </td></tr> <tr><td> D </td><td> E </td></tr> </table> 3.3.11 Table (6/6)

  36. 주석문 삽입 및 특수 문자 주석문 표현 : <!-- 주석 내용 --> Browser를 통해 화일을 볼 때에는 출력되지 않음. 주로 HTML 문서 작성에 대한 설명을 넣음. 예) <!-- 이글은 Browser를 통해 보이지 않습니다.--> 특수문자 : < &lt; > &gt; & &amp; “ &quot; 3.3.12 Comment & Special Character

  37. 목차 3.4.1 Image 3.4.2 Table 3.4.3 Color 3.4.4 HR & FONT 3.4.5 FORM 3.4 HTML 문서작성(보충설명)

  38. Image Align (bottom | middle | top | left | right) 연습 1) 옆의 그림은 <img align=bottom src= ““> 밑으로 정렬한 것입니다. 2) 옆의 그림은 <img align=middle src= ““> 중앙으로 정렬한 것입니다. 3) 옆의 그림은 <img align=top src=““> 위로 정렬한 것입니다. 4) 옆의 그림은 <img align=left src=““> 왼쪽으로 정렬한 것입니다. 5) 옆의 그림은 <img align=right src=““> 오른쪽으로 정렬한 것입니다. 3.4.1 Image 정렬

  39. Image Size 표준크기 : <img src=““> pixel 단위의 크기 조정 : <img src=““ width= > <img src=““ height= > <img src=““ width= height= > 3.4.1 Image 크기

  40. Image Border, Vspace, Hspace 표준출력 : <img src=““> 테두리 : <img border=1 src=““> <img border=10 src=““> 참고) Image File을 Linker로 이용할 때의 Border Size 여백 <img vspace=10 src=““> <img hspace=10 src=““> <img vspace=10 hspace=10 src=““> 3.4.1 Image 여백조절

  41. 다음의 표를 HTML의 Table Tag를 이용하여 작성하여 보자. 학과목 평균 국어 영어 수학 왕서방 100 100 100 100 누렁이 90 100 80 90 평균 95 3.4.2 Table 1학년 1반 성적표

  42. (답) <TABLE WIDTH=400 BORDER=1> <CAPTION> 1학년 1반 성적표 </CAPTION> <TR><TH ROWSPAN=2> <TH COLSPAN=3> 학과목 <TH ROWSPAN=2>평균 <TR><TH>국어<TH>영어<TH>수학 <TR ALIGN=RIGHT><TH ALIGN=LEFT>왕서방 <TD>100<TD>100<TD>100<TD>100 <TR ALIGN=RIGHT><TH ALIGN=LEFT>누렁이 <TD>90<TD>100<TD>80<TD>90 <TR><TH ALIGN=LEFT>총평균<TD ALIGN=RIGHT COLSPAN=4>95 </TABLE> 3.4.2 Table

  43. red #ff0000 green #00ff00 blue #0000ff dark olive green #4f4f2f aquamarine #70db93 baker’s chocolate #5c3317 blue violet #9f5f9f dim grey #545454 light steel blue #8f8fbd medium seagreen #426f42 rich blue #5959ab cyan #00ffff 3.4.3 Color (General Format)

  44. Netscape 에서는 아래의 색상에 대하여 #RRGGBB를 사용하지 않고, 직접 색상을 정의할 수 있다. Black Navy Silver Blue Maroon Purple Red Fuchsia Green Teal Lime Aqua Olive Gray Yellow White 3.4.3 Color (Netscape)

  45. FONT 이것은 <FONT COLOR=“#FF0000”> 빨간색 글자 </FONT> 입니다. 이것은 <FONT COLOR=BLUE> 파란색 글자 </FONT> 입니다. <FONT SIZE=2 COLOR=YELLOW> 조금 큰 노란색 글자 </FONT> 입니다. <FONT SIZE=-1 COLOR=RED> 작은 빨간색 글자 </FONT> 입니다. 3.4.3 Color의 활용 (Font)

  46. FONT의 크기 및 색상 조절 FONT의 크기는 상대적으로 조절된다. 따라서, + 값은 주위의 FONT에 비하여 크게 나타내고자 할 때에, - 값은 주위의 FONT에 비하여 작게 나타내고자 할 때에 사용한다. HR noshade Option HR은 수평선을 그을 때 사용한다. 두께 및 길이의 조정외에도 shading에 대한 Option이 있다. noshade option은 width 및 height option과 함께 사용할 수 있다. 연습 : <HR noshade> <HR width=75% size=3 noshade> 3.4.4 Font & HR

  47. Form의 사용 기본형식 <FORM ACTION="..." METHOD="..."> ... </FORM> ACTION : URL을 적도록 되어 있다. FORM의 작성 후, Submit이 이루어지면 위의 URL로 이동된다. (일반적으로 CGI 프로그램을 지정하여 실행시킨다.) METHOD : GET과 POST의 2 종류가 있다. 파라미터를 CGI 프로그램에 패스하는 방법을 표시하는 것이다. POST : Standard Input을 통해 파라미터를 넘겨준다. GET : QUERY_STRING이라는 환경변수를 통해 넘겨준다. 3.4.5 Form (기초편)

  48. <INPUT NAME="..." TYPE="..." > NAME : 데이타 입력 필드의 이름. TYPE : 데이타 입력의 방법. TEXT : 사용자로부터 Text 입력을 받는다. PASSWORD : 패스워드 입력을 받는다. (*로 표시된다.) RADIO : Radio Button 형식의 입력을 받는다. CHECKBOX : Check Box 형식의 입력을 받는다. SUBMIT : 입력된 값을 Server에게 넘길 때 사용한다. RESET : 입력되던 값을 지울 때 사용한다. HIDDEN : 화면에 보이지 않는 필드이다. 프로그래머에 의해서 사용되는 필드이다(parameter passing). 3.4.5 Form

  49. 간단한 Submit Button <FORM ACTION=“WELCOME.HTML”> <INPUT TYPE=SUBMIT VALUE=처음으로> </FORM> 몇개를 모아서 구성하면 (현재가 CH_2.HTML이라고 하면), <TABLE> <TR> <TD> <FORM ACTION=“CONTENT.HTML”> <INPUT TYPE=SUBMIT VALUE=목차> </FORM> </TD> <TD> <FORM ACTION=“CH_1.HTML”> <INPUT TYPE=SUBMIT VALUE=복습> </FORM> </TD> <TD> <FORM ACTION=“CH_3.HTML”> <INPUT TYPE=SUBMIT VALUE=예습> </FORM> </TD> </TR> </TABLE> 3.4.5 Form (Submit Button)

  50. <INPUT NAME="이 필드의 이름 " TYPE= "TEXT | PASSWORD " SIZE=입력받는 BOX의 크기 MAXLENGTH=입력받는 데이타 크기의 상한 VALUE="처음에 나타나는 값"> 간단한 예) <FORM> <INPUT NAME=“SNPUIE” TYPE=“TEXT” SIZE=10 MAXLENGTH=50 VALUE=“난 몰라”> </FORM> 3.4.5 Form (Text & Password)

More Related