1. HTML 이란? HTML 은 Hyper Text Mark Up Language 의약자로예약되어있는각종태그라는명령어를이용하여웹페이지를작성할때사용하는언어입니다. 2. HTML 의기본구조 < 태그 > 내용 </ 태그 > < 태그속성 = 변수 > 내용 </ 태그 > <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> <HTML> </HTML> HTML 은문서의시작을 </HTML> 은문서의끝을의미하며생략가능합니다. <HEAD> </HEAD> 문서의머리부분으로웹문서에대한정보가입력되는곳입니다. <TITLE> </TITLE> 문서의제목을쓰는태그입니다. 이곳의내용인브라우저상단제목표시줄에표시됩니다. <BODY> </BODY> 웹페이지의내용입니다. 이영역의내용이브라우저에표시됩니다. - bgcolor= 색이름 /#FFFFFF - background = url경로또는파일명 - text= 색이름 / #FFFFFF <exam01_01.html> <HTML> <HEAD> <TITLE> 1 장 HTML 정리 </TITLE> </HEAD> <BODY> 자바스크립트를배우기위한선행학습으로 HTML 에대해알아봅시다. </BODY> </HTML> <01_01.jpg> 1 / 6
3. HTML 태그정리 다양한 HTML 의태그를정리해봅니다. 구성을위한태그 <!-- --> 주석을삽입합니다. <BR> 줄바꿈을할때사용합니다. 종료태그는없습니다. <P> 단락을구분합니다. 종료태그는없습니다. <PRE> </PRE> 연속적인공백, 줄바꿈등을작성한대로브라우저에표시합니다. <CENTER> </CENTER> 브라우저의화면가운데에내용을정렬합니다. <HR> 수평선을그어줍니다. 종료태그는없습니다. <exam01_02.html> <html> <!? 주석문입니다. 화면에표시되지않습니다 --> *** 자바스크립트강좌에오신걸환영합니다 *** <hr> 안녕하세요? OOO 입니다.<br> 자바스크립트강좌를시작하겠습니다.<p> <pre> 자바스크립트란무엇일까요? 자바스크립트는웹문서를좀더동적으로작성할수있도록하기위해선마이크로시스템 (Sun Microsystems) 社와넷스케이프 (Netscape) 社가공동으로개발한객체지향형스크립트언어 (Object Oriented Script Language) 입니다. </pre> <01_02.jpg> 2 / 6
글자모양지정태그 <Hn> </Hn> 글자의크기를 1~6까지지정해줍니다. 1이가장큽니다. <FONT> </FONT> 글자를제어하는태그입니다. - size=n (n은 1~7까지지정해줍니다.) - color= 색이름 / #FFFFFF - face= 글꼴이름 <B> </B> 글자를진하게합니다. <I> </I> 글자를기울여서나타냅니다. <U> </U> 글자아래에밑줄을그어줍니다. <exam01_03.html> <title> HTML 태그정리 글자모양지정태그 </title> <Font size=4 color=blue face= 바탕체 >*** 자바스크립트강좌에오신걸환영합니다 *** </font><hr> <h1> 안녕하세요? OOO 입니다.</h1><br> <b><u> 자바스크립트강좌를시작하겠습니다.</u></b><p> <pre><i> 자바스크립트란무엇일까요? 자바스크립트는웹문서를좀더동적으로작성할수있도록하기위해선마이크로시스템 (Sun Microsystems) 社와넷스케이프 (Netscape) 社가공동으로개발한객체지향형스크립트언어 (Object Oriented Script Language) 입니다. </i></pre> <01_03.jpg> 3 / 6
리스트태그 <UL Type=disc circle square> 순서가없는목록을작성할때사용합니다. </UL> <OL Type=A a I i 1 Start=n> 번호를붙여목록을작성할때사용합니다. </OL> <exam01_04.html> <title> HTML 태그정리 리스트태그 </title> <ul type="square"> <li> 학습목표 <ul type="circle"> <li> 자바스크립트의역사에대해알아봅니다. <li> 자바스크립트의특징을알아봅니다. <li> 자바스크립트와자바의차이점에대해알아봅니다. <li> 자바스크립트의기본구조를알아봅니다. </ul> </ul> <ol type=1> <li> 학습목표 <ol type="a"> <li> 자바스크립트의역사에대해알아봅니다. <li> 자바스크립트의특징을알아봅니다. <li> 자바스크립트와자바의차이점에대해알아봅니다. <li> 자바스크립트의기본구조를알아봅니다. </ol> </ol> <01_04.jpg> 4 / 6
그밖의태그 <IMG SRC= 경로와파일명 > 이미지를삽입합니다. - ALT= 문자열 - ALIGN= top bottom middle - WIDTH/HEIGHT=n n% - HSPACE/VSPACE=n - BORDER=n - NAME= 이름 <A HREF= URL 또는파일명 > 문서나웹페이지등으로이동시킵니다. </A> <TABLE> <TR> <TD> </TD> <TD> </TD> </TR> </TABLE> <FRAMESET> <FRAME SRC= 파일명 NAME= > </FRAMESET> 테이블을작성해줍니다. - <TR> - <TD> - WIDTH/HEIGHT=n 또는 N% - CELLPADDING=n - VALIGN=top bottom middle - COLSPAN= 병합할행의수 - ROWSPAN= 병합할열의수 프레임을나눠줍니다. - COLS - ROWS - MARGINWIDTH=n - SCROLLING=auto yes no 행의개수를지정합니다. 데이터를입력합니다. 셀의가로, 세로길이를지정합니다. 셀안의여백을지정합니다. 내용세로정렬을지정합니다. 행으로셀을병합합니다. 열로셀을병합합니다. 세로방향으로나눕니다. 가로방향으로나눕니다. 좌우여백을지정합니다. 스크롤바의표시여부를지정합니다. <exam01_05.html> <img src="earth.jpg" alt=" 지구 " align="middle" width="100" height="100" border="3" NAME= imgearth > 세계의중심! 대한민국!!<br><br> <a href="http://www.korea.go.kr"> 대한민국공식홈페이지입니다.</a> <01_05.jpg> 5 / 6
<exam01_06.html> <table border="1" width="400" height="200"> <tr> <td valign="top" align="left">1 행 1 열 </td> <td valign="top" align="left">1 행 2 열 </td> </tr> <tr> <td valign="middle" align="center">2 행 1 열 </td> <td valign="middle" align="center">2 행 2 열 </td> </tr> <tr> <td valign="bottom" align="right">3 행 1 열 </td> <td valign="bottom" align="right">3 행 2 열 </td> </tr> </table> <01_06.jpg> <exam01_07.html> <frameset rows="50%, 50%"> <frame src="exam01_05.html"> <frame src="exam01_06.html"> </frameset> <01_07.jpg> 6 / 6