HTML.  Hyper Text Markup Language  Hyper Text : Link  Markup :  전용 브라우저 (IE, Netscape, Opera..)  프로그램 + 실행 환경 ( 실행기 )

Presentation on theme: "HTML.  Hyper Text Markup Language  Hyper Text : Link  Markup :  전용 브라우저 (IE, Netscape, Opera..)  프로그램 + 실행 환경 ( 실행기 )"— Presentation transcript:

1 HTML

2  Hyper Text Markup Language  Hyper Text : Link  Markup :  전용 브라우저 (IE, Netscape, Opera..)  프로그램 + 실행 환경 ( 실행기 )

3 HTML Editor  일반 편집 문서기 완성형 아스키 (ASCII) 방식 Notepad, Editplus, Homesite 등..  HTML 전용 에디터 WYSIWYG(What You See Is What You Get) 여러 작업을 기능화 시킨 전용 에디터 나모 웹에디터, 프론트페이지, 드림위버 등..  장, 단점

4 HTML 특징  태그는 대소문자 구분이 없다  확장자는 html 또는 htm 로 만든다  엔터, 스페이스바, 탭 (white-space) 은 허용 안 한다 → 전용 줄바꿈 요소 사용  태그의 중첩 관계를 지켜야 한다  파일명 또는 디렉토리명 ( 경로명 ) 은 영문으로 사용한다 ( 권장 )  파일명 또는 디렉토리명에 공백을 제외한다

5 HTML 구성요소  태그 (Tag) ‘ ’ 로 묶인 HTML 명령어 … 또는  요소 (Elements) 태그에 의해 정의된다 모든것을 알켜주마  속성 (Attributes) 시작 태그가 가지는 특성

6 HTML 구성요소  속성 (Attributes) 없거나 두 개 이상 기술 가능 지정된 범위의 값을 가진다..  값 (Value) 속성에 대한 값 속성명 =“ 속성값 ”, 속성명 =‘ 속성값 ’, 속성명 = 속성값

7 HTML 문서의 기본 골격 .. 문서의 시작과 끝 .. HTML 파일의 각종 정보를 담는 영역 미출력 부분.. Info 부분 .. 웹브라우저 화면에 출력되는 영역..

8 .. .. 문서의 제목을 나타내는 태그 Sample

9 Meta Tag  p46  한글폰트 지정 브라우저의 인코딩 문제 해결  keywords 지정 ‘,’ 를 제외한 256 자까지 기술 가능

10 Meta Tag  Description 지정  HTML 문서 이동 Sample  제작자 명 지정

11 스크립트 영역 

12 ..  p51  배경색 삽입하기 색상값 : 16 진수 or Well-known color Sample  배경 이미지 삽입하기 Sample – 일반 배경 이미지 Sample – 일반 배경 이미지 Sample – Animate Gif 배경 이미지 Sample – Animate Gif 배경 이미지 Sample – 가로 500pixel 이미지 Sample – 가로 500pixel 이미지 Sample – 가로 2000pixel 이미지 Sample – 가로 2000pixel 이미지 Sample – 배경 이미지 고정 Sample – 배경 이미지 고정

13 ..  링크 텍스트 색상 지정하기 link : 한 번도 방문한 적이 없는 링크 색상값 vlink : 한 번이라도 방문한 적이 있는 링크 색 상값 alink : 링크를 클릭했을 때 색상값 (Focus) Sample

14 ..  브라우저 여백 조정하기 Sample – 여백이 있는 경우 Sample – 여백이 있는 경우 Sample – 여백이 없는 경우 Sample – 여백이 없는 경우

15 주석  프로그램에 영향을 주지 않고 코드에 설명을 달기 위한 영역   Sample Sample

16 TEXT  화면에 출력되는 글자나 문단에 적용되는 태 그  문단의 크기나 형태, 글자의 크기나 색상 지 정 등의 속성 제공

17 TEXT  … (n=1..6) 주로 문장의 타이틀 제목으로 사용 두꺼운 글자로 표현 header n H1 > H2 … H5 > H6 의 적용없이 자동 줄바꿈이 된다 Sample – 태그 사용 Sample – 태그 사용 Sample - 태그 정렬 Sample - 태그 정렬

18 TEXT .. 절대 크기 : 1..7, 기본값 3 상대 크기 : 기본값을 중심으로 가감 1..7 범위내에서 적용 Sample .. color : 글자색 face : 서체

19 TEXT  문서 전체의 글자 형태 지정 Sample

20 TEXT  물리태그, 문자 장식 태그.. : 굵은 글자.. : 이태릭체.. : 타자체.. : 위첨자.. : 아래첨자.. : 밑줄.. : 취소선 Sample

21 TEXT  수평선 Horizontal Rule width : 숫자 또는 퍼센트 size : 선의 두께, pixel align : 정렬방식 (left, center, right) color : 색상 Sample

22 TEXT  문장의 줄바꿈을 적용할 때 사용 단독태그 Line Break Sample

23 TEXT .. 문단 나누는 태그 를 두번 사용한 것과 같은 효과 Paragraph align : left, center, right Sample Sample - 사용 Sample - 사용 Sample -.. 사용 Sample -.. 사용

24 TEXT .. 글자, 이미지, 표 등을 중앙에 정렬 Sample .. 단락을 나누는 태그 align : left, center, right Sample Sample -..

25 TEXT .. 코드 내용 그대로 화면에 출력 공백, 탭, 들여쓰기, 줄바꿈 등 그대로 표현 글자는 고정폭으로 출력 영역내 태그 적용 가능 preformatted text Sample

26 TEXT  non-breaking spaces 띄어 쓰기, 스페이스 항상 소문자로 기술 Sample  p75

27 TEXT .. 특정 영역내에서 스크롤되는 문자열 생성 height, width : 영역 Sample bgcolor : 영역 배경색 Sample behavior : 스크롤 형태 (Alternate, Scroll, Slide) Sample

28 TEXT .. direction : 글자의 움직이는 방향 (left, right, up, down) Sample loop : 움직일 횟수 Sample scrollaMount : 한번에 움직일 거리 Sample scrolldelay : 움직이는 속도, 밀리초 (1/1000 초 ) Sample

29 TEXT  특수 문자 출력 표현이 불가능한 문자를 표현하는 문자 특수문자 엔티티 < → < > → > & → & " → “ &apos; → ‘ Sample

30 LIST  비순차적 목록 unordered list / listed item Sample type : 불릿형태 (disc, circle, square) Sample – type 적용 Sample – type 적용

31 LIST  순차적 목록 ordered list Sample type : 번호형식 (A, a, I, i, 1) Sample – type 적용 Sample – type 적용 Sample - 일괄적용 Sample - 일괄적용

32 LIST  순차적 목록 초기값 설정 설정된 값부터 증가 시작 Sample

33 Image  이미지 출력 태그 width, height : 이미지 크기 (pixel 또는 %) Sample  border : 이미지 테두리 (n : 테두리 굵기 ) Sample  alt : 대체 텍스트 Sample Sample – 줄바꿈 도움말 Sample – 줄바꿈 도움말

34 Image  이미지 정렬 align : left, right, top, middle, bottom Sample – 가로정렬 Sample – 가로정렬 Sample – 세로정렬 Sample – 세로정렬  이미지와 텍스트 사이 간격 Sample

35 Image  이미지 옆 문자 삽입 중지 clear : left, right, all Sample  Sample

36 Sound  배경음악 loop : 반복횟수 Sample  음악, 플래시등 삽입 autostart : true,false hidden : true, false Sample  p186

37 LINK  Anchor 텍스트 또는 이미지에 링크 Sample p206  한 페이지내에서 특정 위치로 이동 Sample

38 LINK  다른 파일의 원하는 위치로 이동 Sample .. mailto: 메일주소 메일 보내기 Sample  Sample

39 TABLE  Table 사용 이유 분할된 이미지 출력 레이아웃 부분 배경 이미지, 색상 적용 ....

40 TABLE .. 기본 테이블 태그 .. table row 한 행 .. table header 표 내부 제목 ( 컬럼명 ) .. table data 표 안의 셀 실제 데이터가 들어가는 부분  Sample Sample

41 TABLE .. 표 상단의 제목 표시 align : top, bottom 태그 바로 아래 기술 Sample  width : 테이블 전체 너비, pixel 또는 % height : 테이블 높이, pixel 또는 % align : 테이블 가로 정렬, left,right,center Sample

42 TABLE  cellpadding : 내용과 cell 사이의 간격 cellspacing : cell 사이의 간격 Sample Sample – cellspacing=10 Sample – cellspacing=10 Sample – cellspacing=0,cellpaading=0 Sample – cellspacing=0,cellpaading=0

43 TABLE  테이블 외각선의 색상 지정 Sample  각 요소의 배경색 지정 Sample

44 TABLE  각 요소의 배경 이미지 (IE-TR 은 제외 ) Sample  복수의 셀 합치기 colspan : 가로의 셀들을 합칠 때 rowspan : 세로의 셀들을 합칠 때 Sample – colspan Sample – colspan Sample – colspan Sample – colspan Sample - rowspan

45 TABLE  width : 셀의 너비 height : 셀의 높이 Sample p234  cell 내부의 정렬 align : left,center,right valign : top,middle,bottom Sample

46 TABLE  cell 내부의 자동 줄바꿈 방지 Sample  문제 Question 1 – 움직이는 점선 테두리 Question 1 – 움직이는 점선 테두리 Question 2 – 테이블 테두리 깔끔하게 Question 2 – 테이블 테두리 깔끔하게 Question 3 – 서류 양식 제작

47 FRAME  웹 브라우저 화면을 분할하여 사용  분할된 각각의 영역은 독립된 윈도우처럼 사용  프레임 셋의 구조 출력 프레임 2 장 = 출력 문서 2 장 + 프레임 셋 문서 1 장 .. p245 Sample

48 FRAME  중복 프레임 Sample  프레임 고정 Sample

49 FRAME  스크롤바 제어 scrolling : auto, yes, no Sample  marginwidth : 프레임 왼쪽 여백 marginheight : 프레임 상단 여백 Sample – 여백 값 0 Sample – 여백 값 0 Sample – 여백 값 無 Sample – 여백 값 無

50 FRAME  프레임 간격 밑 테두리 설정 Sample – frameborder=“no”, border=“0” Sample – frameborder=“no”, border=“0” Sample – frameborder=“no”, border=“1” Sample – frameborder=“no”, border=“1” .. Sample

51 FRAME .. 문서내에 원하는 위치에 원하는 크기로 프레 임 생성 태그 안에 삽입 width, height, marginwidth, marginheight, frameborder, scrolling Sample

52 FORM  서버와 클라이언트간의 대화  서버로 클라이언트의 데이터 전송  여러가지 형식으로 데이터 전송 .. 모든 FORM 관련 내용은 태그 내에 포함 되어야 한다 action : 데이터가 전송될 대상 method : 데이터 전송 방식, post,get

53 FORM  텍스트 입력 상자 type : 입력 양식의 종류 name : 변수명 size : 입력창의 크기 maxlength : 입력 텍스트 최대 길이 Sample

54 FORM .. 여러줄을 입력할 수 있는 텍스트 상자 태그 사이에 내용을 삽입 Sample

55 FORM  체크박스 여러 선택 항목을 나열, 원하는 항목 체크 Sample  라디오 버튼 여러 항목 중 단일 선택 name : 같은 값 부여 Sample

56 FORM  폼의 내용을 서버로 전송 폼의 내용을 초기화 Sample  이미지 전송 버튼 Sample

57 FORM  항목.. Sample Sample – selected Sample – selected Sample – multiple Sample – multiple  첨부 파일 입력 상자 Sample  Question Question