Download
1 / 40
420 likes | 661 Views
HTML. 목차. 1. HTML 개요. 2. HTML 의 구성요소. 3. HTML 문서의 기본 구성 및 특성. 4. 메모장을 이용한 태그 사용. 5. 기본 ( 문서구조 ) 태그 사용. 6. 응용 태그 사용. HTML 개요 (1/2). HTML 언어란 ? WWW 상의 문서를 기술하기 위한 언어 플랫폼에 관계없이 사용 가능한 하이퍼텍스트 문서를 만들 수 있는 마크업 (markup) 언어 마크업 언어란 ?
E N D
목차 1. HTML 개요 2. HTML의 구성요소 3. HTML 문서의 기본 구성 및 특성 4. 메모장을 이용한 태그 사용 5. 기본(문서구조) 태그 사용 6. 응용 태그 사용
HTML 개요 (1/2) • HTML 언어란? • WWW 상의 문서를 기술하기 위한 언어 • 플랫폼에 관계없이 사용 가능한 하이퍼텍스트 문서를 만들 수 있는 마크업(markup) 언어 • 마크업 언어란? • 문서 내에서 사용자가 문서를 작성할 때 본문 이외의 추가적인 정보(폰트의 크기, 레이아웃 등)을 지정할 수 있는 언어
HTML 개요 (2/2) • HTML 언어의 특징 • 하이퍼텍스트, 하이퍼미디어 기능을 갖는 문서 제작 용이 (장점) 손쉽게 HTML로 기록된 문서를 얻을 수 있고, 이식성, 사용이 편리 (단점1) 고정된 태그만을 사용, 사용자가 태그를 정의하지 못함 (단점2) 문서 자체가 구조화되지 않아 효과적인 검색, 재사용 또는 검증이 불편
HTML의 구성요소 (1/6) HTML 문서 텍스트 (Text) 태그 (Tag) 스크립트 (Script)
텍스트(Text) HTML 문서에 포함된 텍스트는 웹 문서의 본문에 해당 즉, 사용자가 웹 문서를 읽을 때 화면에 나타나는 텍스를 말함 태그(Tag) 태그란? ‘<‘와 ‘>’기호를 사용하는 꼬리표 <tag>는 시작 태그, </tag>는 종료태그를 의미 HTML의 구성요소 (2/6)
HTML의 구성요소 (3/6) • 태그(Tag) (계속) • 태그의 속성 • 속성(attribute)은 지정된 태그 명령에 대하여 보다 자세한 환경과 정보를 규정 • 웹 브라우저로 하여금 보다 세밀한 기능을 수행토록 지정 • 속성을 가지는 태그와 속성을 가지지 않는 태그 • 속성을 꼭 필요로 하는 태그: <a href=”…”>…</a>, <img src=“…”> 등 • 속성이 옵션으로 사용되는 태그: <hr noshade> 등 • 속성을 가지지 않는 태그: <em>…</em> 등
HTML의 구성요소 (4/6) • 태그(Tag) (계속) • 태그의 종류 • 시작 태그와 종료 태그가 짝을 이루어 사용되는 태그 (복합 태그) • 단독으로 사용되는 태그 (단독 태그) • 복합 태그와 단독 태그 • 복합 태그: <title>…</title>, <p>…</p>, <html>…</html> • 단독 태그: <br>, <hr> 등
HTML의 구성요소 (5/6) • 태그(Tag) (계속) • 태그의 특성 • 대/소문자의 구별이 없다. 즉, <BR>, <Br>, <br> 등은 같은 태그로 인식 • 복합 태그들은 순서를 바꿔 사용할 수 없다.
HTML의 구성요소 (6/6) • 스크립트(Script) • HTML 문서에는 텍스트와 태그뿐만 아니라 스트립트도 포함 • 스트립트란? • 간단한 명령어들의 집합 • 일반 프로그래밍 언어에 비해 구조가 간단, 배우기 쉬움 • 컴파일과 같은 특별한 처리를 거치지 않고 텍스트 파일인 상태 그대로 실행되는 특징이 있음
HTML 문서의 기본 구성 및 특성 (1/2) • HTML 문서의 구조 • HTML 문서는 머리말(header)과 본문(body)의 두부분으로 구성 • HTML 문서의 머리말 • 문서의 헤더(header), 즉 머리말에 해당하는 영역 • 보통 문서에 대한 제목과 전반적인 정보를 담는 영역 (2) HTML 문서의 본문 • 문서의 몸체(body), 즉 본문에 해당하는 영역으로 HTML 문서의 가장 중요한 부분 • 대부분의 HTML 문서의 내용이 이 영역에 해당
HTML 문서의 기본 구성 및 특성 (2/2) • HTML 문서의 특성 • 공백(space) 문자가 연속된 경우에는 하나의 공백 문자로만 인식됨 • 엔터(enter)나 탭(tab)도 하나의 공백 문자로 인식 • 공백 문자, 엔터, 탭이 섞여서 연속된 경우에도 하나의 공백 문자로만 인식됨
메모장을 이용한 태그 사용 (1/2) • 메모장을 이용한 순서 • 윈도우 [시작] 메뉴의 [프로그램][보조프로그램][메모장]을 실행 • 메모장에 내용을 입력한다. • 작성이 완료되면 [파일][저장] 메뉴를 실행 • 원하는 폴더에 ‘Sample.html’이라는 파일이름으로 저장 • “파일형식”을 모든 파일(*.*)로 선택해야 함
메모장을 이용한 태그 사용 (2/2) • 메모장을 이용한 순서 (계속) (4) 저장이 완료되면 제목 표시줄에 저장한 파일 이름이 표시됨 (5) 저장된 HTML 문서를 브라우저를 통해서 확인해 본다. • 인터넷 브라우저를 실행한 후 [파일][열기] 메뉴를 선택하고 작성된 폴더의 ‘Sample.html’문서를 연다. (6) 실행한 결과를 확인함
기본(문서구조) 태그 (1/6) 실습해보세요 • Title 태그 예제 • <HTML>…</HTML> • HTML 문서 형식으로 작성되었음을 나타냄 • <HEAD>…</HEAD> • HTML 문서의 머리말(header) 영역을 나타냄 • <TITLE>…</TITLE> • 웹 브라우저의 타이틀 바에 표시함
기본(문서구조) 태그 (2/6) 실습해보세요 • BODY 태그 예제 • <BODY>…</BODY> • HTML 문서의 주가 되는 본문 영역을 규정 • 즉, 문서의 실제 내용 부분을 나타냄 • 속성(attribute) : bgcolor=“#색상” • 웹 페이지의 배경색을 지정 • 속성(attribute) : text=“색상” • 웹 페이지에 포함된 일반 글자의 색을 지정 (default는 검은색)
기본(문서구조) 태그 (3/6) • 속성(attribute) : bgcolor=“#색상” • 영문색 이름과 16진수 RGB 값에 대한 테이블(정보)을 인터넷을 이용하면 쉽게 알 수 있다. • RGB (RED, GREEN, BLUE) 값이 000000이면 검은색(Black) • RGB가 모두 FFFFFF은 흰색(Whilte)가 된다. • RGB가 FF0000이면 붉은 색(Red)가 됨 • <!-- 주석 --> • HTML 문서 중간중간에 주석을 삽입 • 하지만, 웹 브라우저를 통해 볼 수 없음
기본(문서구조) 태그 (4/6) 실습해보세요 • 글자의 크기 지정을 위한 태그 예제 • <bn>…<bn> • Headline 태그는 6단계의 글자 크기를 지정 • 주로 제목이나 머리글 글자의 크기를 지정할 때 사용
기본(문서구조) 태그 (5/6) 실습해보세요 • 문단 나누기 예제
기본(문서구조) 태그 (6/6) 실습해보세요 • 블릿 리스트와 번호 리스트 예제
응용 태그 (1/7) • 테이블 작성 요령 ⑴ 테이블을 작성할 땐, <table></table> 태그로 시작하여야 한다. ⑵ 테두리 생성시 border 속성을 삽입하여 테두리 넓이를 지정하면 된다. • 테두리를 없애고 싶으면 border='0'으로 지정
기본 테이블 작성 예제 실습해보세요
응용 태그 (2/7) • 테이블 위치 지정 ① 테이블 위치를 결정하기 위해여 ALIGN, VALIGN 속성을 사용 ② 이 태그들은 <TR>, <TD>, <TH> 태그에 적용 ③ ALIGN은 수평 정렬을 지정하는 속성으로 LEFT, RIGHT, CENTER 값을 가지며, 기본값은 CENTER이다. ④ VALIGN은 수직정렬을 지정하는 속성으로 TOP, MIDDLE, BOTTON, BASELINE 값을 가지며, 기본값은 MIDDLE
테이블 위치 지정 예제 실습해보세요
응용 태그 (3/7) • 테이블의 외각선 굵기 조절하기 ① 굵기 조절을 위해 BORDER, CELLSPACING, CELLPADDING 속성을 사용 ② BORDER 속성이 테두리 입체부분의 두께를 나타내는 속성 ③ CELLSPACING은 <TALBE> 태그에서 테두리 평면 부분의 두께를 나타내는 속성 ④ CELLPADDING은 <TABLE> 태그에서 칸과 칸사이의 간격을 지정해 주는 속성
테이블의 외각선 굵기 조절하기 예제 실습해보세요
응용 태그 (4/7) • 테이블의 크기와 넓이 지정하기 ① 크기와 넓이를 지정하기 위해, WIDTH와 HEIGHT 속성을 사용 ② WIDTH는 테이블의 가로 크기를 지정해 주는 속성 ③ HEIGHT는 테이블의 세로 크기를 지정해 주는 속성
테이블의 크기와 넓이 지정하기 예제 실습해보세요
응용 태그 (5/7) • 칸 나누기와 합치기 ① 칸을 나누거나 합치려면 COLSPAN, ROWSPAN 속성을 사용 ② COLSPAN은 한 칸을 지정한 열의 크기로 확장하며 기본값은 1이다. ③ ROWSPAN은 한 칸을 지정한 행의 크기로 확장하며 기본값은 1이다.
칸 나누기와 합치기 실습(1) 실습해보세요
칸 나누기와 합치기 실습(2) 실습해보세요
응용 태그 (6/7) • URL을 이용하여 링크하는 형식 ① <A HREF="URL 및 경로명“> ～ </A> - 특정 사이트로 연결 ② <A HREF="URL 및 경로명과 파일명“> ～ </A> - 사이트 내의 문서로 연결 ③<A HREF="URL 및 경로명과 파일명“TARGET="프레임 창 이름”> ～ </A> - 프레임 태그 사용할 시 특정 프레임으로 지정 ④ <A HREF="MAILTO.." OR "NEWS..."> ～ </A> - 특정 프로토콜 MAILTO, NEWS로 연결
URL을 이용하여 링크하는 형식 예제 실습해보세요
글자 태그 • <FONT> • 크기 지정: SIZE 속성 • 색 지정: COLOR 속성 • 모양 지정: • <B></B>: 굵게 • <L></L>: 이탤릭체, 기울임 • <U></U>: 밑줄 • 글꼴 지정: FACE 속성 • 간격 지정: @nbsp
<FONT> 태그 예제(1) 실습해보세요
이미지 삽입(1/3) • 이미지 넣기: <IMG> • 절대경로: http://imgnews.naver.com/image/090/2005/12/22/N2005122211041470701.jpg • 상대경로: test.html문서에서 하위 폴더인 img라는 폴더에 있는 이미지.gif라는 파일을 삽입 img/이미지.JPG 실습해보세요
이미지삽입(2/3) 실습해보세요 • 이미지 위치지정: ALIGN 속성
이미지 삽입(3/3) 실습해보세요
남은 시간에는… • HTML 태그 중 ‘프레임’에 대한 태그와 속성들을 찾아 • A4 1장~2장 분량으로 정리 • 예제 HTML문서 작성
HTML 태그로 학과소개에 대한 HTML문서 만들기 • 배경이미지나 색 삽입할 것 • 테이블 사용할 것 • 이미지 삽입할 것 • 분량은 상관없음(1페이지도 가능) • 자기의 능력을 최대한 발휘하시기 바랍니다.
