PowerPoint 프레젠테이션

Size: px

Start display at page:

Download "PowerPoint 프레젠테이션"

일천 나
5 years ago
Views:

1 : 학습내용 기본구조와태그다양한태그다루기 <IMG> <A> <TABLE> 태그다루기프레임나누기폼양식및재미있게활용할수있는태그

2 : 03 장. 기본구조와태그 학습내용 기본구조에디트플러스에서 문서제작해보기 에서태그사용법

3 기본구조와태그 기본구조 [ 기본구조 ] <html> <head> <title></title> </head> <body> </body> </html>

4 기본구조와태그 기본구조 [ 웹문서구조 ] 머리부 몸체부

5 기본구조와태그 기본구조 [<head> 태그사이에기록되는문서정보 ] <title> 홈페이지를대표할수있는문서제목을지정한다. <meta> 다양한속성을가지고있어다양한역할을한다. <script> 홈페이지를역동적으로변화시킨다. <style> 문서전체의레이아웃을결정하여문서에통일감을준다.

6 기본구조와태그 기본구조 [ 태그의구성요소 ] 복합태그 < 태그명 > 내용 </ 태그명 > 속성을가지는태그 < 태그명속성명 = 값 > 내용 </ 태그명 > 단독태그 < 태그명 > 사용예 여러분을 <font size=5 color=blue> 진심으로 </font> 환영합니다!

7 기본구조와태그 기본구조 [ 태그사용규칙 ] < 태그명 ></ 태그명 > 과같이여는태그와닫는태그가쌍으로사용된다. 닫을때는태그명으로만닫는다. 태그명과속성명, 속성명과속성명사이는한칸씩띄운다. 그외공백을두어서는안된다. 속성명과값은 = 부호를사용하여표시한다. 값이두단어이상일경우는 로묶어서표시한다. 속성이있는태그가있고없는태그가있다. 속성을반드시하나이상사용해야하는태그도있고생략해도되는태그가있다. 여는태그만독립적으로존재하는태그도있다. 태그를중첩해서사용할경우먼저열어준태그를나중에닫아준다.

8 기본구조와태그 기본구조 [ 태그사용예 ] <font size=5 color=blue> 환영합니다!</font><p> <b> 우리집너무 <u> 하얗고 </u> 깨끗하죠 ^^;; </b><br> <p align=center> 조금씩알찬내용들로채워가겠습니다.^^</p>

9 : 04 장. 문단, 컬러, 글꼴, 목록다루기 학습내용 문단관련태그위지윅과특수문자 <BODY> 태그로컬러문서만들기글꼴관련태그목록관련태그

10 문단, 컬러, 글꼴, 목록태그다루기 문단관련태그 <br> <p> <div> <h 숫자 > <center> <p> 태그와 <br> 태그비교 내용 1<p> 내용 2 = <p> 내용 1</p> 내용 2 = 내용 1<br><br> 내용 2

11 문단, 컬러, 글꼴, 목록태그다루기 문단관련태그 [ 내용을가운데정렬하는법 ] <center> 내용 </center> <p align=center> 내용 </p> <div align=center> 내용 <div> <h4 align=center> 내용 </h4>

12 문단, 컬러, 글꼴, 목록태그다루기 위지윅과특수문자 [ 자주사용하는특수문자 ] 문자엔티티 결과 설명 non-breaking space의약어. 공백문자하나를추가한다. < < Less than 의약어. < 를표시한다. > > Greater than의약어. > 를표시한다. & & Ampersand의약어. & 부호를표시한다. " quotation maker의약어. 를표시한다. c Copyright의약어. 저작권, 판권을표시한다. Trademark의약어. 상표를표시한다.

13 문단, 컬러, 글꼴, 목록태그다루기 위지윅과특수문자 [<pre> 태그와 <xmp> 태그 ] <pre> <xmp> 주용도눈에보이는대로출력태그를문자취급 위지윅방식 태그적용여부

14 문단, 컬러, 글꼴, 목록태그다루기 <body> 태그 [ 색상표기법 ] 문서에서색상을표현하는방식은영문의색상명, 16 진수 RGB 값 2 가지가있다. 16 진수표기법은 RGB 표기법이라고도하는데, R(red) 2 자리, G(green) 2 자리, B(blue) 2 자리총 6 자리로구성된다. RR GG BB

15 문단, 컬러, 글꼴, 목록태그다루기 <body> 태그 [RGB 컬러값 ] 칼라 영문명 16진수 칼라 영문명 16진수 Black # Green # Silver #C0C0C0 Lime #00FF00 Gray # Olive # White #FFFFFF Yellow #FFFF00 Maroon # Navy # Red #FF0000 Blue #0000FF Purple # Teal # Fuchsia #FF00FF Aqua #00FFFF

16 문단, 컬러, 글꼴, 목록태그다루기 <body> 태그 [<body> 태그의속성 ] bgcolor background text link vlink alink leftmargin topmargin oncontextmenu onselectstart bgproperties scroll

17 문단, 컬러, 글꼴, 목록태그다루기 글꼴관련태그 [<font> 태그의속성 ] color face size <basefont> 태그와비교

18 문단, 컬러, 글꼴, 목록태그다루기 글꼴관련태그 [ 물리적인글꼴의종류 ] 태그 설명 결과 <b> bold( 굵은글자 ) bold <i> italic( 이탤릭체 ) italic <u> underline( 밑줄 ) underline <strike> strike through( 취소선을표시 ) strike through <tt> typewriter text( 타이핑체 ) typewriter text <sup> superscript( 위첨자 ) superscript <sub> subscript( 아래첨자 ) subscript <big> big( 더크게 ) big <small> small( 더작게 ) small

19 문단, 컬러, 글꼴, 목록태그다루기 글꼴관련태그 [ 논리적인글꼴의종류 ] 태그설명결과 <em> emphasis( 강조할때 ) 이탤릭체로표현 emphasis <strong> strong emphasis( 강한강조 ) 굵은문자로표현 strong emphasis <code> code( 컴퓨터코드를나타낼때 ) 고정폭글자체로표현 code <samp> sample( 샘플출력할때 ) 고정폭글자체로표현 sample <kbd> <var> keyboard( 키보드의키입력을표현할때 ) 고정폭글자체로표현 variable( 변수이름을지정할때 ) 기울임체로표현 keyboard variable <cite> citation( 인용구를나타낼때 ) 기울임체로표현 citation <dfn> defining instance( 단어를정의하거나사례를들때 ) 기울임체로표현 defining instance

20 문단, 컬러, 글꼴, 목록태그다루기 글꼴관련태그 [ 글자크기를지정하는태그 ] <h숫자 > <font size= 숫자 > <big> <small> <basefont>

21 문단, 컬러, 글꼴, 목록태그다루기 글꼴관련태그 [<h 숫자 > 태그와 <font size= 숫자 > 태그 ] 비교항목 <font size= 숫자 > <h 숫자 > 기본값 <font size=3> <h4> 같은결과출력 <b> 내용 </b><p> <h4> 내용 </h4> 문단구분 빈행추가 한문단안에서글자크기다양하게설정 가능 불가능

22 문단, 컬러, 글꼴, 목록태그다루기 목록관련태그 [<ul> 태그와 <ol> 태그 ] 비교항목 <ul> <ol> 약어 unorderlist orderlist 용도순서없는목록순서있는목록 Type 속성 Dsik( ),circle ( ),square( ) 1, A( 알파벳대문자 ), a( 알파벳소문자 ), I( 로마숫자대문자 ), I( 로마숫자소문자 ) 기본값 disk 1 사용예 <ul type=square> 목록 </ul> <ol type=a> 목록 </ol>

23 : 5 장. 그림으로꾸며보는 홈페이지 학습내용 홈페이지용그림활용법그림삽입태그 <IMG> 배경그림다루기그림과문자열의어울림

24 <IMG> 태그로그림삽입하기 홈페이지용그림파일 [ 형식 ] GIF Graphic Interchange Format 의약어 256 컬러만지원하므로주로홈페이지용버튼, 메인, 문자처럼단순한그림에사용된다. JPG 1980 년, Joint Photographic Experts Group(JPEG) 에서개발 16 만컬러를지원하므로인물사진, 배경사진과같이고해상도그림에주로사용된다. PNG BMP

25 <IMG> 태그로그림삽입하기 홈페이지용그림파일 [GIF 형식의특징 ] 애니메이션 (Animated GIF) 투명그림 (Transparent GIF) 인터레이스그림 (Interaced GIF)

26 <IMG> 태그로그림삽입하기 홈페이지용그림파일 [ 이미지모음사이트 ] 홈페이지제작과관련된이미지제공 유료사이트 검색엔진을이용한이미지검색사이트

27 <IMG> 태그로그림삽입하기 그림삽입태그 <IMG> <img> 태그의속성 src alt width 배경그림과관련된 <body> 태그의속성 background bgproperties height align border hspace vspace

28 <IMG> 태그로그림삽입하기 그림삽입태그 <IMG> [ 그림깨져보일경우해결방법 ] 문서를저장하지않은경우 웹브라우저환경설정이잘못된경우 [ 도구 인터넷옵션 ] - [ 고급 ] - 멀티미디어 - 그림표시 체크 그림을인터넷에서다운로드받을때확장자를변경했거나, 확장자를생략했는데확장자가자동설정되지않았을때 코딩시잘못입력한경우 파일의경로, 오타, 대소문자구별, 특수문자 내컴퓨터에서는잘나타나는데인터넷에올리면안되는경우

29 <IMG> 태그로그림삽입하기 그림과문자열의어울림 수평정렬 left right 수직정렬 top, middle, bottom texttop absmiddle, absbottom baseline

30 <IMG> 태그로그림삽입하기 그림과문자열의어울림 [ 양쪽어울림 ] <img src=" poster.jpg" align=left> <img src=" poster.jpg" align=right> 내용

31 : 06 장. <A> 태그로 하이퍼링크설정하기 학습내용 하이퍼링크설정링크의핵심상대경로타겟 (Target) 을효과적으로설정하는법위치까지찾아주는책갈피사용하기그림에링크또는이미지맵설정하기모든종류의파일링크하기

32 <A> 태그로하이퍼링크설정하기 하이퍼링크설정 [<a> 태그의속성 ] href target name title

33 <A> 태그로하이퍼링크설정하기 하이퍼링크설정 [ 사용예 ] 1. <a href=" 네이버 </a> 2. <a href="photo.jpg"><img src= photo.gif ></a> 3. <a href="mailto:happylucy@naver.com"> </a> 4. <a href="totoro.mp3"> 영화토토로 OST</a> 5. <a href="totoro.avi"> 영화토토로예고편 </a> 6. <a href="alzip.exe"> 압축의최강자알집 </a> 7. <a href="samp.htm"> 예제 </a> <a href="samp/samp.htm"> 예제 </a> <a href="../../samp.htm"> 예제 </a> 8. <a href="#top"> 위로 </a> <a href="samp.htm#chap1"> 예제 1</a>

34 <A> 태그로하이퍼링크설정하기 하이퍼링크설정 [ 하이퍼링크가능한파일의종류 ] 웹브라우저안에서보이는파일들 htm, html, gif, jpg, txt 플러그인프로그램이자동연결되는파일들 wav, mid, mp3, asf, avi, swf, wmv 플러그인프로그램이자동연결되지않아해당프로그램을설치해야만실행가능한파일들 ra, rm, ram, mov 실행되지않고저장되는파일들 exe, zip, hwp, doc, xls, ppt, psd

35 <A> 태그로하이퍼링크설정하기 하이퍼링크설정 [<body> 태그의문자색관련속성 ] 속성 설명 기본값 text 일반문자색 black link 한번도방문하지않은링크문자색 blue vlink 한번이라도방문한링크문자색 purple alink 누르는순간에변하는링크문자색 red

36 <A> 태그로하이퍼링크설정하기 절대경로와상대경로 절대경로 <a href= > 한빛미디어도서검색 </a> 상대경로 작업폴더 <a href= samp.htm > 예제 </a> 상위폴더 <a href=../../samp.htm > 예제 </a> 하위폴더 <a href= sample/chap1/samp.htm > 예제 </a>

37 <A> 태그로하이퍼링크설정하기 대상창설정법 [target의속성 ] 예약어 4 가지 _blank _self _top _parent 사용자정의창이름 new, newwin, menu 기본대상창변경 <base target="_blank">

38 <A> 태그로하이퍼링크설정하기 책갈피 [ 책갈피설정에필요한설정 2 가지 ] 책갈피설정 찾아갈곳에 name 을설정한다. <a name="top"></a> 하이퍼링크설정 문서내의특정위치또는다른문서의특정위치로이동할수있게하이퍼링크설정한다. <a href="#top"> 위로 </a> <a href="samp1.htm#chap1"> 예제 1-1</a>

39 <A> 태그로하이퍼링크설정하기 이미지맵 이미지맵기본문법 <img src=" 그림파일의전체경로 " usemap="# 맵이름 "> <map name=" 맵이름 "> <area shape=" 맵의종류 " coords=" 좌표값 " href=" 링크될주소 " alt= 설명툴팁 > </map> 이미지맵에서제공하는맵종류로는 rect, circle, poly 세가지가있다.

40 <A> 태그로하이퍼링크설정하기 이미지맵 [ 이미지맵사용예 ] <img src="map.gif" width="540" height="336" border="0" usemap="#imagemap1"> <map name="imagemap1"> <area shape="poly" coords="384, 27, 367, 115, 408, 216, 466, 148, 490, 94, 454, 47, 413, 24" href=" tml" target="_blank" alt=" 제주도동부여행정보 "> <area shape="circle" coords="103, 158, 77" href=" tml" target="_blank" alt=" 제주도서부여행정보 "> <area shape="rect" coords="180, 189, 311, 268" href=" tml" target="_blank" alt=" 서귀포시여행정보 ">

41 : 07 장. <TABLE> 태그로 표디자인하기 학습내용 <TABLE> 태그기본사용법표를구성하는태그들의속성까지꼼꼼히살펴보기실습으로 <TABLE> 태그사용법익히기

42 <TABLE> 태그로표디자인하기 기본사용법 [ 표로구성된사이트 ]

43 <TABLE> 태그로표디자인하기 기본사용법 [ 기본구조 ] <table> <caption> 제목 </caption> <tr> <td> 셀내용 </td> </tr> </tabel>

44 <TABLE> 태그로표디자인하기 기본사용법 [2 행 2 열의표만들기 ] <table border=1 width=300> <caption>2*2 표 </caption> <tr> <td> 셀 1</td> <td> 셀 2</td> </tr> <tr> <td> 셀 3</td> <td> 셀 4</td> </tr> </table>

45 <TABLE> 태그로표디자인하기 기본태그속성 [ 테이블관련속성 ] <table> <tr> <td> <th> 태그모두에적용할수있는속성들 width height bgcolor background align <table> 태그에서만사용하는속성들 border cellspacing cellpadding bordercolorlight bordercolordark frame rules

46 <TABLE> 태그로표디자인하기 기본태그속성 [<table> 태그속성비교 ] width cellpadding cellspacing height bordercolorlight bordercolordark

47 <TABLE> 태그로표디자인하기 기본태그속성 [ 테이블관련속성 ] <tr> <td> 태그에서사용되는속성들 colspan rowspan Valign <caption> 태그에서사용하는속성 Align 가운데정렬비교 <table align=center> <tr align=center> <td align=center> <center> 테이블소스 </center> <center> 테이블제목 </center>

48 <TABLE> 태그로표디자인하기 기본태그속성 [ 셀합치기 : colspan, rowspan]

49 <TABLE> 태그로표디자인하기 사용법익히기 [ 항상브라우저의중앙에보이도록하는소스 ] <table align="center" border="0" width="100%" height="100%"> <tr> <td align="center"> <img src="house.gif" width="300" height="300"> <br><br> <font size="1" color="#cccccc"> 언제나브라우저중앙에놓여집니다. </font> </td> </tr> </table>

50 <TABLE> 태그로표디자인하기 사용법익히기 [ 사각실선테두리가생성되는소스 ] <table width=300 height=50 align=center bgcolor=skyblue cellspacing=1 cellpadding=0> <tr><td align=center> <table width=300 height=50 bgcolor=white> <tr><td align=center> </td></tr> </table> </td></tr> </table>

51 <TABLE> 태그로표디자인하기 사용법익히기 [ 선그리기 ] <hr> 태그의속성 size width align 도트이미지활용법 <tr height=1><td background="dot.gif" ></td></tr> noshade color

52 : 08 장. 프레임나누기 학습내용 프레임개요프레임관련태그원하는프레임에문서보여주기부모프레임안에자식프레임종속시키기 <IFRAME> 으로문서안에독립적인프레임창넣기

53 프레임나누기 프레임개요 [ 프레임분할예 ] 상단프레임 좌측프레임 우측프레임

54 프레임나누기 프레임개요 장점 한화면에문서여러개를동시에보여줄수있다. 문서가독립적이어서서로다른창의변화는영향을받지않는 다. 내용을체계적으로관리할수있고, 작업효율도높일수있다. 집안에서편하게정보를찾아보는것과같은안정감을준다 메뉴를찾아헤매는시간을절약해주므로쉽게원하는정보를찾아볼수있다. 단점 프레임안에서내용을보여주어야하므로답답한느낌을준다. CGI 프로그램사용시프레임때문에제한을받으므로가급적사용하지않는다.

55 프레임나누기 프레임관련태그 [ 프레임수직분할 ] 기본형식 <frameset cols=" 왼쪽창의크기, 오른쪽창의크기 "> <frame src=" 왼쪽창에표시할문서의전체경로 "> <frame src=" 오른쪽창에표시할문서의전체경로 "> </frameset> 사용예 <frameset cols="200, *"> <frame src="left.htm"> <frame src="right.htm"> </frameset>

56 프레임나누기 프레임관련태그 [ 프레임관련속성 ] <frameset> 태그의속성 cols rows border <frame> 태그의속성 src name scrolling marginwidth marginheight noresize

57 프레임나누기 원하는프레임에문서보여주기 [target 속성의예약어 ] _blank 무조건새창에띄운다. _self 기본값으로자기자신의창 ( 현재창 ) 에띄운다. _top 프레임을모두제거하고하나의창에띄운다. _parent 프레임이주종관계를이룰때종속프레임을제거하고하나의창에보여주므로프레임의형태는주 ( 상위 ) 프레임상태가된다.

58 프레임나누기 원하는프레임에문서보여주기 [ 프레임문서비교 ] 1 frame.htm frame1.htm frame2.htm

59 프레임나누기 원하는프레임에문서보여주기 [ 원하는프레임에문서보여주는법 ] 프레임문서에서보여줄프레임에사용자정의창이름 ( name ) 을설정한다. <frame src="bottom.htm" name="contents"> 링크설정된문서에서기본대상프레임을설정한다. <base target="contents">

60 프레임나누기 <IFRAME> 태그 내부프레임 (inline frame) 이라는의미. 일반프레임문서와는달리 문서내에창이단독으로삽입된다. 기본형식 <iframe src="iframe 안에보여줄문서의전체경로 " width=" 창의너비 " height=" 창의높이 "></iframe> <iframe> 태그속성 src name width height frameborder scrolling marginwidth marginheight align

61 : 09 장. 재미있게활용할수 있는태그 학습내용 <EMBED> 태그로멀티미디어홈페이지만들기 <MARQUEE> 태그로움직이는글자만들기팔방미인 <META> 태그

62 재미있게활용할수있는태그 <EMBED> 태그 [ 멀티미디어파일의종류 ] wav mid mp3 wma avi mov mpegmpg swf asf

63 재미있게활용할수있는태그 <EMBED> 태그 [ 음악파일활용법 ] 음악파일을다운로드하거나윈도우미디어플레이어로감상할수있다. <a href= song.mid > 음악파일실행및다운로드 </a> 제어상자가문서안에표시되어음악을실행, 정지하는등제어가가능하다. <embed src= song.mid > 배경음악이끝없이흐르게한다. <embed src= song.mid hidden=true loop=-1>

64 재미있게활용할수있는태그 <EMBED> 태그 [<embed> 태그의속성 ] src width height loop autostart hidden volume

65 재미있게활용할수있는태그 <MARQUEE> 태그 [<marquee> 태그의속성 ] direction( 진행방향 ) behavior( 행동방식 ) scrollamount( 스크롤속도 ) scrolldelay( 지연시간 ) loop( 반복횟수 ) bgcolor( 배경색 ) width( 너비 ) height( 높이 ) hspace( 수평여백 ) vspace( 수직여백 )

66 재미있게활용할수있는태그 <META> 태그 [<meta> 태그의 name 속성값 ] author copyright keyword description generator pragma expires reply-to title subject publisher other agent date classification

67 재미있게활용할수있는태그 <META> 태그 [<meta> 태그사용예 ] <meta name="keywords" content="html,css,javascript, 강좌, 스타일시트, 자바스크립트 "> <meta name="description" content=" 초보자를위한홈페이지학습사이트입니다., CSS, Javascript 사용법및다양한소스를제공합니다."> <meta http-equiv="content-type" content="text/html;charset=euc-kr"> <meta http-equiv="refresh" content="10;url= hanbitbook.co.kr > <meta http-equiv="refresh" content=60>

68 재미있게활용할수있는태그 <META> 태그 [ 화면전환효과 ] <meta http-equiv="page-enter" content="revealtrans(duration=3, transition=5)"> <meta http-equiv="page- exit " content="revealtrans(duration=3, transition=5)"> <meta http-equiv="page-enter" content="blendtrans(duration=3)">

69 : 10 장. 폼양식으로회원전용 공간만들기 학습내용 폼관련태그폼양식직접만들어보기회원가입절차 4단계

70 폼양식으로회원전용공간만들기 폼관련태그 [ 회원가입구현절차 ] 1. 로폼양식만들기 2. CSS로폼양식꾸미기 3. 자바스크립트로문서검증하기 4. 웹프로그램실행하기

71 폼양식으로회원전용공간만들기 폼관련태그 [ 폼관련태그 (1)] 태그명 결과 설명 <form></form> 안보임 폼양식의시작과끝 <input type=text> 한줄입력상자 <input type=password> * 로표시되는암호입력상자 <input type=raido> 라디오버튼 <input type=checkbox> 체크상자 <input type=button> 일반버튼

72 폼양식으로회원전용공간만들기 폼관련태그 [ 폼관련태그 (2)] 태그명 결과 설명 <input type=submit> 전송확인버튼 <input type=reset> 초기화버튼 <input type=image> 이미지버튼 <input type=file> 파일업로드 <input type=hidden> 안보임 숨겨진필드 <textarea></textarea> 여러줄입력상자 <select></select> 목록상자의시작과끝 <option> 목록상자에포함될항목지정

73 폼양식으로회원전용공간만들기 폼관련태그 [ 폼관련태그의속성 ] <form> 태그관련속성 name method action target <input> 태그관련속성 Size maxlength value readonly checked disabled

74 폼양식으로회원전용공간만들기 폼관련태그 [ 버튼 4가지 ] 일반버튼 <input type=button value= 국적변경 > 초기화버튼 <input type=reset value= 다시작성 > 전송버튼 <input type=submit value= 가입하기 > 이미지버튼 <input type=image src="check.gif >

75 폼양식으로회원전용공간만들기 폼관련태그 [ 폼관련태그의속성 ] <textarea> 태그관련속성 Cols Rows wrap <select> <option> 태그관련속성 selected size multiple

76 폼양식으로회원전용공간만들기 폼관련태그 [ 목록상자의예 ] <select name=phone1> <option value=1 selected>011</option> <option value=2>016</option> <option value=3>017</option> <option value=4>018</option> <option value=5>019</option> </select>

Javascript

Javascript 1. HTML 이란? HTML 은 Hyper Text Mark Up Language 의약자로예약되어있는각종태그라는명령어를이용하여웹페이지를작성할때사용하는언어입니다. 2. HTML 의기본구조 < 태그 > 내용 < 태그속성 = 변수 > 내용