..PAGE:1HTML(Hyper Text Markup Language)과목명 : HCI(XML)학 과 :학 번 :이 름 :교수님 :제출일 :..PAGE:2HTML이란 무엇인가?▶ ASCII 문자로 되어 있는 일반 텍스트 형태로 여러 플랫폼에무관하게 WWW문서의다양한 요소들을 정의할 수 있도록 고안된 것이며, 웹이라는 문서 기반 구조에서 문서들을 기술하는데사용되는 언어이다. 이러한 HTML은 국제 표준 ISO 8879 :1986SGML(Standard Genrlized Markup Language)의 응용프로그램으로 정의되어 있다.▶ 이 HTML로 만들어진 문서는 텍스트, 그린파일, 음향 등을정의 할 수 있도록 되어있는데, 이런 것을 정의할 때는 태그(Tag)라고 불리는 특별할 형식을 사용한다...PAGE:3요소와 속성▶ html 문서에서 중요한 것들이 바로 요소와 속성인데 예를통해서쉽게 알아보면…ex> HTML 용어에 대해서위에서 ‘요소’는HTML 용어에 대해서 전체를 의미‘태그’는 을 의미하고,‘요소 이름’은 H1 이며구성요소에 대한 ‘속성’은 align=“center” 이며‘요소내용’은 HTML용어에 대해서 가 된다...PAGE:4HTML페이지의 기초내용▶ HTML 문서에 반드시 필요한 요소를 살펴보면 ~ ~ ~ ~ 가 있는데 이 요소들은 HTML 문서라면반드시 들어가야 하는 요소들이다...PAGE:5HTML페이지의 기초내용 (cont.)▶ 배경색을 지정하는 방법 ~ HTML 문서 전체를 지정된 색상으로 나타낸다.▶ 배경 그림을 설정하는 방법 ~ HTML 문서 배경에 지정된 그림 파일을 표시한다.▶ 링크 설정에 의한 문자 색을 설정하는 방법 ~ HTML 문서에서 링크와 관련된 문자 색을 설정한다...PAGE:6HTML페이지의 기초내용 (cont.)▶ 검색 엔진이 HTML 문서를 검색할 때 사용하는 것은 HTML 문서의 키워드이다. 그러므로 개인 홈페이지를 만든 후 반드시 키워드를 입력해야 자신의 홈페이지가 다른 사람에게 검색된다.다음은 키워드나 개의 문단 정렬 - ..PAGE:12링크 & 목록▶ 다른 HTML 문서나 웹 사이트를 링크 시키는 방법 ~ 문자열이나 그림을 다른 HTML 문서나 웹 사이트로 링크 시킨다.▶ 현재 HTML 문서의 지정된 위치로 링크 시키는 방법 ~ 링크가 되는 지점 지정 ~ 링크를 거는 지점 지정하나의 HTML 문서가 너무 길어서 한 화면에 모두 표시되지않는 경우, 같은 HTML 문서의 특정한 위치에 이름을 붙여두고그 곳으로 링크를 시켜서 이동시킬 수 있다. 링크 대상이 되는위치에 이름을 붙일 때는 name 속성을 이름이 붙여진 위치로이동할 때는 href 속성으로 링크할 곳을 지정할 수 있다...PAGE:13링크 & 목록(cont.)▶ 링크로 연결된 HTML 문서를 새 창에서 불러오기 ~ target 속성은 프레임이 있는 HTML 문서에서 사용하면 지정된프레임에서 링크된 HTML 문서가 열리지만 프레임이 없는HTML 문서라도 새 창을 열기 위한 방법으로 사용할 수 있다.▶ 링크로 전자메일 보내기 ~ 문자열을 링크로 설정할 때 URL을 입력하는 부분에 ‘mailto:’와 전자 메일 주소를 입력하면 사용자가 지정된 주소로 전자메일을 보낼 수가 있다...PAGE:14테이블(TABLE)▶ 표(table)의 기본 형식 ~ 표 전체 ~ 가로 1열 ~ 제목용 셀 ~ 데이터용 셀▶ 표(table)의 크기를 지정 ~ 표 전체의 폭과 높이를 지정한다. 대 부분의 웹 브라우저는 height 속성을 지원하여 표의 전체높이를 설정할 수 있는데, HTML 4.0에서는TABLE 태그에 이 속성이 정의되어 있지 않다. 그러나 표의 셀을 나타내는 태그와 태그에서는 height 속성을 이용할 수 있으므로셀의 높이를 지정하려면 태그나 태그를 이용하면 된다...PAGE:15테이블(TABLE) (cont.)▶ 표(table) 외곽선과 여백을 지정하는 방법 ~ ~ ~ 태그의 border 속성은 표 전체의 상하 좌우 외곽선 굵기를설정한다. Border 속성 값을 0으로 지정하면 외곽선이 나타g속성은 셀 안의 간격을 설정한다.▶ 셀 구분선의 형식을 지정하는 방법 ~ none 없다. rows 가로열 경계선 cols 세로열 경계선group THEAD , TBODY … all 모든 경계선..PAGE:16테이블(TABLE) (cont.)▶ 표(table)의 배경색을 지정하는 방법 ~ 표 전체 배경 ~ 가로 한 열 배경 ~ 표 제목 셀 배경 ~ 데이터용 셀 배경표의 각 요소에 bgcolor 속성을 사용하면 배경색을 설정할 수 있다.▶ 셀을 각 방향으로 합치는 방법 ~ ~ ~ ~ ‘rowspan’ 과 ‘colspan’ 속성으로 지정한 방향으로 셀을 합칠 수 있다...PAGE:17테이블(TABLE) (cont.)▶ 가로 방향의 셀을 그룹화 하기 ~ 표의 머리말 부분 ~ 표의 꼬리말 부분 ~ 표의 본문 부분표의 가로 방향을 머리말 , 본문 , 꼬리말 세부분으로 나누어서그룹화하는 경우에 이 태그를 사용한다.▶ 세로 방향의 셀을 그룹화 하기 ~ ~표의 세로 방향을 그룹화 할 경우에 사용하며 을사용하면 여러 개의 세로 열의 속성을 한꺼번에 적용할 수 있다...PAGE:18그림과 멀티미디어▶ 그림을 삽입하는 방법URL 그림 파일이 있는 위치와 파일 이름너비 그림 파일의 너비(픽셀 또는 %)높이 그림 파일의 높이(픽셀 또는 %)대체용 설명 그림 파일 대신 표시할 텍스트▶ 그림의 경계선을 설정하는 방법그림 외곽에 나타나는 경계선의 굵기를 설정한다. 일반적인웹 브라우저에서는 그림에 링크가 설정되어 있을 때만 경계선이나타나는데 border 속성을 사용하면 링크가 연결되어 있지 않아도 경계선을 나타나게 할 수 있다...PAGE:19그림과 멀티미디어(cont.)▶ 그림을 두 단계로 표시하는 방법URL1 최종적으로 나타날 그림 파일의 URLURL2 처음에 나타날 저해상도 그림 파일의 URL그림 파일의 용량이 큰 경우에는 인터넷에서 그림을 불러오는시간이 많이 소요된다. 따라서 사용자 입장에서 완전한 그림이로드되기 전에 미리 그림을 볼 수 있도록 하는 태그이다...특정 부분에 링크를 연결하는 것이다. 이미지 맵을만들기 위해서는 먼저 을 이용하여 그림이 이미지 맵임을 선언하고 이름을 부여한 다음 에서는 이미지 맵 안에서 실제로 링크할영역과 링크 될 문서를 지정하고 의 usemap 속성에서 이미지 맵이름 앞에 ‘#’를 붙여서 지정하면 완성되다.▶ 다양한 형식의 데이터를 배치하는 방법 ~ 이 태그를 이용하여 그림, 동영상, Java Applet, Plugin 데이터 등을HTML 문서에 삽입할 수 있다...PAGE:21그림과 멀티미디어(cont.)▶ 플러그 인을 이용한 데이터를 삽입하는 방법 ~ URL 플러그 인 데이터가 있는 URL너비 플러그 인 데이터의 너비(픽셀)높이 플러그 인 데이터의 높이(픽셀)는 HTML 문서 자체에서 사용할 수 없는 데이터를 플러그 인기능을 사용하여 HTML 문서에 표시하고자 할 때 사용한다.플러그 인 기능은 이것을 만든 각각의 회사에서 정의하는 것이므로별도로 특정한 제한은 없다.에는 플러그 인 기능을 사용할 수 없는 웹 브라우저인 경우에 표시하고 싶은 내용을 입력하며 플러그 인 기능을 사용할 수 있는웹 브라우저에서는 ~ 안의 내용이 나타나지 않는다...PAGE:22그림과 멀티미디어(cont.)▶ 자바 애플릿을 삽입하는 방법~ ~ 은 자바 애플릿을 HTML 문서에 삽입할 때 사용하는태그이다. ~ 범위에는 자바 애플릿을사용할 수 없는 웹 브라우저인 경우에 표시할 내용을 입력하며 태그를 이용하여 자바 애플릿의 파라미터 값을 설정한다...PAGE:23입력 폼▶ 입력 양식을 만드는 방법 ~ URL 양식을 송신해서 처리할 프로그램이 있는 URLHTTP 방법 데이터 송신 방법(get , post 방식)MIME 방식 내용을 송신할 때 MIME 타입프레임 이름 송신 결과를 표시할 창 또는 프레임 이름▶ 메일로 보내는 양식을 만드는 방법 ~ ..PAGE:24입력 폼(cont.)▶ 한 줄을 입력할 수 있는 글 상자를 만드는 방법이름 입력 필드 이름기본 문자 글 상자에 미리 입력되어 있는 문자너비 입력 필드의 글 상자를 만드는 태그이고 name 속성으로 지정한 이름은 양식 내용을 수신했을 때 데이터를 가려내기위해 사용된다...PAGE:25입력 폼(cont.)▶ 여러 줄을 입력할 수 있는 글 상자를 만드는 방법 ~ ~ 이름 입력 필드 이름행수 입력 필드 행 수너비 입력 필드 너비(문자 수)줄 바꾸기 방법 off(줄 바꿈 없음) , soft(줄 바꿈 나타남)hard(줄 바꿈 송신)여러 줄을 입력할 수 있는 글 상자를 만들 때 사용한다. ~ 사이에 입력된 내용은 여러 줄 글상자에미리 입력된 상태로 나타난다...PAGE:26입력 폼(cont.)▶ 암호 글 상자를 만드는 방법이름 입력 필드 이름기본 문자 글 상자에 미리 입력되어 있는 문자너비 입력 필드의 너비(문자 수)최대 문자 수 글 상자에 입력할 수 있는 최대 문자 수암호 입력에 사용되는 한 줄 글 상자를 만들 때 사용하며 암호글 상자로 설정되면 입력되는 모든 문자는 ‘*’로 나타난다.name 속성에서 지정되어 있는 이름은 입력 폼 내용을 수신했을때, 데이터를 가려내기 위해 사용되는 것이다...PAGE:27입력 폼(cont.)▶ 전송 단추, 내용 취소 단추를 만드는 방법 전송버튼 내용 취소 버튼label 버튼 위에 표시되는 문자이름 버튼 이름양식에 사용되는 단추는 일반적으로 전송단추와 내용 취소 단추가같이 사용된다.전송 단추는 양식에 입력된 내용을 송신하는 기능을 담당하며 내용취소 단추는 양식 전체의 입력필드를 초기화시킨다. 단추의 value 속성을 사용하면 단추의 레이블을 바꿀 수있으며 레이블을 지정하지 않으면 웹 브라우저의 기본 레이블로나타난다. Name 속성에서 지정한 이름은 각각 다른 기능을 하는여러 개의 단추를 위치 위치할 경우 수신자측에서 식별하기 위한것이다...PAGE:28입력 폼(cont.)▶ 라디오 단추를 만드는 방법이름 라디오 단추 이름전송 문자 선택된 결과로 송신될 문자checked 미리 선택된 상태로 할 경우 지정라디오 단추를 만들 때 사용한다. 라디오 단추는 여려 개의 선택항목 중에서 한 개만을 있어야