예제모음
[예제모음_01] 잡지 기사 만들기 예제설명 실행결과 테이블과 목록 테이블을 활용하여 이미지와 텍스트를 배치해보자. 사용 이미지 : s1.jpg, s2.jpg, s3.jpg 실행결과
[예제모음_01] 소스 01 <HTML><HEAD><TITLE>예제모음2</TITLE></HEAD> 02 <BODY> 03 <TABLE cellSpacing=0 cellPadding=0 width=600 align=center border=0> 04 <TR> 05 <TD align=right width=260><IMG hspace=3 src="s1.jpg"> </TD> 06 <TD width=3 bgColor=#7b928a> </TD> 07 <TD width=327> 08 <DIV align=justify><B>☆ 꼭 실천해야 할<br> 대화의 테크닉</B> </TD></TR> 09 <TR> 10 <TD colSpan=2> <OL> 12 <LI>말을 할 때는 이성적이고 논리적인 사고를 하고 <LI>말을 시작하기 전에 먼저 3초간 요점을 가다듬고 정리할 것. 14 <LI>불만이나 푸념 또는 부정적인 말을 가급적 자제할 것.
[예제모음_01] 소스 15 <LI>목소리의 속도와 높이, 그리고 크기를 변화있게 잘 조절해서 말할 것. 16 </OL></TD> 17 <TD><IMG src="s2.jpg"> </TD></TR> 18 <TR> 19 <TD align=right colSpan=2><IMG src="s3.jpg"> </TD> 20 <TD> 21 <OL start=5> 22 <LI>간결하고 명확한 문장구사를 하도록 할 것. 23 <LI>평소에 대중 앞에 서는 연습을 자주할 것. 24 <LI>보다 넓고 깊은 안목으로 세상을 관찰하여 이야기거리를 많이 만들어 둘 것. 25 <LI>심각한 이야기에도 때로는 유머를 섞어 긴장을 없애는 여유를 가질 것. 26 </LI></OL></TD></TR> 27 </TABLE></BODY></HTML>
[예제모음_02] 음악 다운로드 사이트 만들기 예제설명 실행결과 하이퍼링크와 테이블을 이용하여 음악을 다운로드받는 페이지를 만들어보자. 사용 이미지 : love5.jpg, bullet2.gif 실행결과
[예제모음_02] 소스 01 <html><head><title>예제모음3</title></head> 02 <body text=#191970><center><h3>SG 워너비</h3> 03 <table width="700" border="0" cellspacing="0" cellpadding="0" align="center" > 04 <tr> <td rowspan="2"><img src="love5.jpg"></td> 05 <td valign="top" bgcolor="#a9a9a9”height="25"> </td> 06 </tr> 07 <tr> 08 <td valign="middle" align="left" bgcolor="#F7FAFD"> 09 <table width=350 align=center> 10 <tr><td> 11 01. 광<br><br> 12 02. 한 여름날의 꿈<br><br> 13 03. 아리랑<br> <br> 14 04. 비틀즈의 노래보다<br> <br> 15 05. TIMELESS<br><br> 16 06. 살다가<br> <br> 17 07. 내사람<br> 18
[예제모음_02] 소스 19 </td><td> 20 <a href="http://~~~~"> 링크는 사용자가 임의로 지정 19 </td><td> 20 <a href="http://~~~~"> 21 <img src=”bullet2.gif”border=0></a><br><br> 22 <a href="http://~~~~"> 23 <img src="bullet2.gif" border=0></a><br><br> 24 <a href="http://~~~~"> 25 <img src="bullet2.gif" border=0></a><br><br> 26 <a href="http://~~~~"> 27 <img src="bullet2.gif" border=0></a><br><br> 28 <a href="http://~~~~"> 29 <img src="bullet2.gif”border=0></a><br><br> 30 <a href="http://~~~~"> 31 <img src="bullet2.gif" border=0></a><br><br> 32 <a href="http://~~~~"> 33 <img src="bullet2.gif" border=0></a><br><br> 34 <br></td></tr></table> 35 </td></tr></table> 36 </body> 37 </html>
[예제모음_03] 사이트 맵 만들기 예제설명 실행결과 웹 페이지의 전체 구조를 나타내는 사이트 맵을 테이블과 목록 태그를 이용하여 작성해보자. 글자 색상 : #ff5500, 셀 음영 색상 : #f0e68c 각 행의 너비 : 200px, 셀 안 여백: 10px 1, 3행 높이 : 60px 실행결과
[예제모음_03] 소스 01 <html><head><title>예제모음4</title></head> 02 <body text=#ff5500> 03 <h3 align=center>사이트 맵</h3> 04 <table border=0 width=600 cellpadding=0 cellspacing=0 align=center> 05 <tr><td> 06 <table border="1" cellpadding="10" cellspacing="1" align="center"> 07 <tr height="60" align="center" bgcolor="#f0e68c"> 08 <th width="200">회사소개</th><th width="200">주문하기</th><th width="200">장바구니 </th> </tr> 09 <tr valign="top"> <td> <ul><li>회사 역사<li>회사 위치<li>회사 연락처</ul></td> 10 <td> <ul><li>음악 <li>영화<li>공연 </ul></td> 11 <td> <ul><li>내정보<li>장바구니담기<li>구입 목록 </ul></td> </tr> 12 <tr height="60" align="center" bgcolor="#f0e68c"> 13 <th width="200">배송확인</th><th width="200">게시판</th><th width="200">Q&A</th> </tr> 14 <tr valign="top" > <td> 15 <ul><li>배송일<li>배송업체<li>배송상태</ul></td> 16 <td> <ul><li>자유게시판<li>방명록<li>묻고답하기 </ul></td> 17 <td> <ul><li>자주하는 질문<li>매니아그룹 </ul></td> </tr> 18 </table> 19 </td></tr> </table></body></html>