PowerPoint 프레젠테이션
Download
Report
Transcript PowerPoint 프레젠테이션
10장 웹 페이지 제작
Understanding of Multimedia
HTML의 개요
• HTML(Hyper Text Markup Language)
• 인터넷 서비스의 하나인 월드 와이드 웹을 통해 볼 수 있
는 문서를 만들 때 사용하는 프로그램 언어의 하나
• 하이퍼텍스트를 작성하고자 개발되었으며 인터넷에서
웹을 통해 접근되는 대부분의 웹 페이지들은 HTML로 작
성됨
• 아스키 코드로 구성된 일반적인 텍스트로 구성되어있음
• 컴파일러가 필요하지 않음
• 웹 브라우저에서 해석할 수 있기 때문에 사용하기가 쉬
움
• 문서 내의 글자 크기, 글자 색, 글자 모양, 그래픽, 하이퍼
링크 등을 정의하는 명령어로서 홈페이지를 만드는데 사
용
• HTML에서 사용하는 명령어는 태그라고 하며 태그는 시
작과 끝을 표시하는 2개의 쌍으로 이루어짐
HTML의 개요
• HTML 문서
• 그 문서가 HTML 문서임을 나타내려고 문서의 첫 부분에
<HTML>이라는 태그로 시작하여 제일 끝 부분에
</HTML>의 태그로 끝냄
• HEAD
• 그 HTML 문서의 정보를 가진 부분
• TITLE 태그가 들어가는데 HTML 문서의 제목을 나타내는
것으로 웹 브라우저의 타이틀 바에 그 문자열이 들어감
• BODY
• 그 문서 중에서 실제로 웹 브라우저에 보이는 부분
• 간단한 HTML문서의 작성 [교재 310-311 참고]
HTML의 개요
• 하이퍼링크(Hyperlink)
• 하이퍼텍스트 문서 내의 하나의 단어나 구, 기호, 이미지
와 같은 요소와 그 문서 내의 다른 요소 또는 다른 하이퍼
텍스트 문서 내의 다른 요소 사이를 연결하는 것
• 사용자는 하이퍼텍스트 문서 내의 밑줄 쳐진 요소나 문
서 내의 나머지 부분과 다른 색으로 표시된 요소를 클릭
함으로써 하이퍼링크를 실행할 수 있음
• 간단한 하이퍼링크 작성 [교재 312-313 참고]
웹 페이지의 제작
• 태그
• HTML은 여러 개의 태그로 구성되어 있음
• <>의 괄호로 둘러싸이고 <>안에 있는 단어는 웹 브라우
저에 나타나는 텍스트가 아니라 HTML의 명령어로 해석
됨
• 시작은 <명령어>, 끝은 </명령어>의 형태로 만듦
• 대소문자를 구분하지 않기 때문에 사용자가 편리한 대로
작성하면 됨
• <HEAD>, </HEAD> 태그 내에는 그 HTML 문서의 정보
를 가지고 있으며 <TITLE>, </TITLE>과 같이 웹 브라우
저의 타이틀 바에 그 문서의 제목을 나타낼 수 있는 태그
들이 들어갈 수 있음
웹 페이지의 제작
• 태그
• <BODY>, </BODY> 태그
• 그 문서의 본문이 들어가게 되는데 배경 이미지, 배경 색,
글자 색, 링크 색을 RGB 코드 값을 사용하여 지정할 수 있
음
• 바탕화면으로 보일 그림 파일의 URL을 지정하는
BACKGROUND
• 바탕화면의 색상을 지정하는 BGCOLOR
• 텍스트의 색상을 표현하는 TEXT
• 하이퍼링크의 색상을 표현하는 LINK
• 하이퍼링크를 마우스로 클릭할 때의 색상을 표현하는
ALINK
• 이미 방문한 링크의 색상을 지정하는 VLINK
웹 페이지의 제작
• 태그
• <BODY>, </BODY> 태그 내의 문서를 편집하기 위한 태
그
• Heading 태그
• 글자 크기를 지정하는 태그로서 보통 제목의 글자의 크기를
지정할 때 사용
• <BR>
• HTML의 문서가 엔터나 탭을 적용하지 않기 때문에 이 태그를
사용하여 줄 바꿈을 해야 함
• <P>
• 문단을 나누는 태그
• 특수문자
• “&”로 시작되는 구문이며 대소문자를 구분하고 “&”로 시작하
여 “;”으로 끝남
• <HR>
• 이 태그는 수평선을 넣는 태그
웹 페이지의 제작
• 태그
• <BODY>, </BODY> 태그 내의 문서를 편집하기 위한 태
그
• <CENTER>
• 문단의 정렬 상태를 중앙으로 해주는 태그
• <FONT>
• 문자의 크기와 색상을 조절하는 태그로서 문자의 색상을 지정
하는 COLOR, 글꼴의 유형을 지정하는 FACE, 문자의 크기를
지정하는 SIZE를 사용하여 문자의 크기와 색상을 조절할 수
있음
• 각종 태그를 사용해 보기 [교재 315-317 참고]
웹 페이지의 제작
• 링크
• 웹 서비스의 장점은 하이퍼텍스트를 이용하여 인터넷 상
의 연관된 정보를 연결함으로써 사용자가 쉽게 정보를
찾을 수 있다는 것
• HTML 문서에서 링크를 위한 태그는 <A>
• 하이퍼텍스트 연결로 이동하고자 하는 곳의 URL을 지정
하는 HREF
• 문서의 특정 위치를 지정하는 NAME
• 연결되는 내용이 보일 윈도우의 이름인 TARGET
• 문서 내의 특정 위치에 연결 [교재 318-320 참고]
웹 페이지와 이미지
• 웹 페이지와 이미지
• 웹 페이지에서 사용할 수 있는 이미지 포맷은 크게 GIF와
JPEG임
• 일반적으로는 크기가 작은 버튼 같은 것은 GIF 포맷을 사
용하고, 나머지 사진과 같은 것들에는 JPEG 포맷을 사용
• HTML 문서에 이미지를 삽입하려면 <IMG> 태그를 사용
• 웹 페이지에 이미지를 사용해 보기 [교재 321-322 참고]
• 웹 페이지에 이미지와 배경 이미지를 사용해 보기 [교재
323-324 참고]
웹 페이지와 애니메이션
• 웹 페이지에 동적인 애니메이션을 추가하는 방법
• 애니메이션 GIF를 사용
• 간단하게 애니메이션을 만들 수 있고 용량도 작아서 매우
많이 사용됨
• <IMG> 태그를 사용하여 웹 페이지에 삽입할 수 있음
• 플래시를 사용
• 벡터 방식의 애니메이션이기 때문에 파일의 크기가 작고,
사용자와 상호작용까지 하기 때문에 최근 매우 많이 사용됨
• <EMBED> 태그를 사용하여 웹 페이지에 삽입할 수 있음
• 자바 애플리케이션인 자바 애플릿을 사용
• 상호작용과 인터페이스를 제공할 수 있기 때문에 여러 분야
에서 많이 활용되고 있음
• <APPLET> 태그를 사용하여 웹 페이지에 삽입할 수 있음
웹 페이지와 애니메이션
• 웹 페이지에서 애니메이션 활용의 예
웹 페이지와 비디오 및 사운드
• 웹 페이지와 비디오 및 사운드
• 웹 페이지에서 비디오와 사운드를 사용하여 사용자로 하
여금 보고 듣게 한다면 정보 전달력은 매우 향상됨
• 스트리밍 기술을 이용하여 재생
• 사운드는 WAV파일이나 RealAudio, MIDI 파일 등을 지원
• 비디오는 AVI, RealAudio, QuickTime, MPEG 등을 지원
• 사운드를 제공하는 웹 페이지
웹 페이지와 비디오 및 사운드
• 웹 페이지와 비디오 및 사운드
• 비디오를 제공하는 웹 페이지
• 웹 페이지에 비디오를 사용하는 HTML 작성해 보기 [교재
327-328 참고]