Download presentation
Presentation is loading. Please wait.
1
Chapter01 HTML 시작하기
2
Contents 1. HTML이란 무엇일까 2. HTML 문서 작성을 위한 준비 3. HTML 기본 구조 Chapter01
3
HTML 정의 HTML (HyperText Markup Language)
Chapter01 HTML (HyperText Markup Language) HyperText Markup Language의 약자로 월드와이드웹(World Wide Web)에서 사용하는 마크업(Markup) 언어 인터넷 망에서 사용하는 웹페이지 구조를 표현을 위한 언어 HTML 시작하기
4
마크업 (Markup) 언어 마크업 (Markup) 언어 어떠한 문서 안의 정보가 어떻게 구조화되었는가를 지정하는 언어
Chapter01 마크업 (Markup) 언어 어떠한 문서 안의 정보가 어떻게 구조화되었는가를 지정하는 언어 문서에 포함된 문장, 표, 그림 등과 같은 내용에 대한 정보를 말하는 것이 아니라 이들이 어떻게 배치되고 어떠한 크기와 모양 등을 가지고 있는가 등의 정보를 의미 기본적으로 문서의 구조 형식을 태그(Tag)를 사용하여 지정 HTML 시작하기
5
웹 브라우저 HTML문서 보기 [메뉴]-[보기]-[소스] [그림 1-1] [소스]메뉴 선택 [그림 1-2] HTML 문서
Chapter01 [메뉴]-[보기]-[소스] [그림 1-1] [소스]메뉴 선택 [그림 1-2] HTML 문서 HTML 시작하기
![웹 브라우저 HTML문서 보기 [메뉴]-[보기]-[소스] [그림 1-1] [소스]메뉴 선택 [그림 1-2] HTML 문서](http://slidesplayer.org/slide/17098500/98/images/5/%EC%9B%B9+%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80+HTML%EB%AC%B8%EC%84%9C+%EB%B3%B4%EA%B8%B0+%5B%EB%A9%94%EB%89%B4%5D-%5B%EB%B3%B4%EA%B8%B0%5D-%5B%EC%86%8C%EC%8A%A4%5D+%5B%EA%B7%B8%EB%A6%BC+1-1%5D+%5B%EC%86%8C%EC%8A%A4%5D%EB%A9%94%EB%89%B4+%EC%84%A0%ED%83%9D+%5B%EA%B7%B8%EB%A6%BC+1-2%5D+HTML+%EB%AC%B8%EC%84%9C.jpg "Chapter01. [메뉴]-[보기]-[소스] [그림 1-1] [소스]메뉴 선택. [그림 1-2] HTML 문서. HTML 시작하기.")
6
HTML의 역사 (1/2) Chapter01 Tim Berners-Lee가 개발하였으며 NCSA에서 개발한 Mosaic브라우저에 의해 보편화되기 시작 HTML2.0 IETF(Internet Engineering Task Force)에 의하여 개발 HTML 2.0이 표준으로 정해진 이후에 각 웹 브라우저는 서로의 경쟁으로 인하여 각자가 개발한 태그를 삽입 Hyper Text 기능위주로 되어 있음 HTML 시작하기
7
HTML의 역사 (2/2) HTML 3.2 ~ HTML 4.0 HTML 4.01
Chapter01 HTML 3.2 ~ HTML 4.0 1997년에 발표되었으며 1998년 4월에 4.0버전을 발표 Natscape와 Explorer 가 나오면서 웹 브라우저는 급속도로 발전 HTML 4.01 HTML 4.01 버전은 1999년에 발표하였는데 2000년 이후에는 XML과 합쳐져서 XHTML 1.0이 등장하였음 HTML 시작하기
8
W3C W3C (World Wide Web Consortium)
Chapter01 W3C (World Wide Web Consortium) 월드 와이드 웹을 위한 표준을 개발하고 가이드라인을 개발하는 조직 [그림 1-3] W3C 홈페이지 HTML 시작하기
9
HTML의 특징 (1/2) 웹 문서의 표준으로 지정 마크업 언어
Chapter01 웹 문서의 표준으로 지정 웹 표준은 W3C에서 정하는 것으로 웹에서 표준적으로 사용하는 기술을 총칭하는 말 마크업 언어 용량이 작아 서버와 클라이언트 사이에 문서를 상당히 빠르게 전달 할 수 있음 [그림 1-4] HTML 서비스 구성과 흐름 HTML 시작하기
10
HTML의 특징 (2/2) ASCII 코드로 구성된 일반적인 텍스트 파일 컴퓨터 시스템이나 운영체제에 독립적
Chapter01 ASCII 코드로 구성된 일반적인 텍스트 파일 특별한 프로그램이 아닌 메모장 같은 에디터로도 충분히 HTML 문서를 작성할 수 있음 컴퓨터 시스템이나 운영체제에 독립적 어떤 시스템이나, 운영체제든지, 어떤 브라우저에서도 쉽게 볼 수 있음 HTML 시작하기
11
텍스트 에디터 텍스트 에디터 HTML 문서 작성에는 특별한 전용 편집기를 필요로 하지 않음
Chapter01 텍스트 에디터 HTML 문서 작성에는 특별한 전용 편집기를 필요로 하지 않음 나모나 드림위버 같은 프로그램으로 쉽게 HTML을 작성할 수 있으나, Windows 운영체제에 기본적으로 설치되는 메모장만으로도 충분히 HTML 문서를 작성할 수 있음 HTML 시작하기
12
UltraEdit-32 UltraEdit-32 http://www.ultraedit.com
Chapter01 UltraEdit-32 [그림 1-5] UltraEdit-32 홈페이지 [그림 1-6] UltraEdit-32 HTML 시작하기
13
EditPlus EditPlus http://www.editplus.com/kr [그림 1-7] EditPlus 홈페이지
Chapter01 EditPlus [그림 1-7] EditPlus 홈페이지 [그림 1-8] EditPlus HTML 시작하기
![EditPlus EditPlus [그림 1-7] EditPlus 홈페이지](http://slidesplayer.org/slide/17098500/98/images/13/EditPlus+EditPlus+++%5B%EA%B7%B8%EB%A6%BC+1-7%5D+EditPlus+%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80.jpg "Chapter01. EditPlus. [그림 1-7] EditPlus 홈페이지. [그림 1-8] EditPlus. HTML 시작하기.")
14
AcroEdit AcroEdit http://www.acrosoft.pe.kr [그림 1-9] AcroEdit 홈페이지
Chapter01 AcroEdit [그림 1-9] AcroEdit 홈페이지 [그림 1-10] AcroEdit HTML 시작하기
![AcroEdit AcroEdit [그림 1-9] AcroEdit 홈페이지](http://slidesplayer.org/slide/17098500/98/images/14/AcroEdit+AcroEdit+++%5B%EA%B7%B8%EB%A6%BC+1-9%5D+AcroEdit+%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80.jpg "Chapter01. AcroEdit. [그림 1-9] AcroEdit 홈페이지. [그림 1-10] AcroEdit. HTML 시작하기.")
15
웹 브라우저 (1/3) 익스플로러(Explorer) Microsoft에서 개발한 브라우저로 Windows 95 이상에서 운용
Chapter01 익스플로러(Explorer) Microsoft에서 개발한 브라우저로 Windows 95 이상에서 운용 다양한 멀티미디어 환경을 브라우저에서 실행하도록 하여주는 ActiveX 기술을 지원 [그림 1-11] 익스플로러 홈페이지 HTML 시작하기
16
웹 브라우저 (2/3) 파이어폭스(FireFox)
Chapter01 파이어폭스(FireFox) 모질라프로젝트라는 공개되어 있는 소스를 네티즌과 함께 향상시켜 발표한 브라우저 속도가 상당히 빠르며 보안 및 사용자 프라이버시에 강함 [그림 1-12] 파이어폭스 홈페이지 HTML 시작하기
17
웹 브라우저 (3/3) Chapter01 오페라(Opera) 방대한 단축키를 지원하며 작은 용량과 빠른 속도로 인하여 저사양의 PC에서도 원활하게 구동 [그림 1-13] 오페라 홈페이지 HTML 시작하기
![웹 브라우저 (3/3) Chapter01. 오페라(Opera) 방대한 단축키를 지원하며 작은 용량과 빠른 속도로 인하여 저사양의 PC에서도 원활하게 구동. [그림 1-13] 오페라 홈페이지.](http://slidesplayer.org/slide/17098500/98/images/17/%EC%9B%B9+%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80+%283%2F3%29+Chapter01.+%EC%98%A4%ED%8E%98%EB%9D%BC%28Opera%29+%EB%B0%A9%EB%8C%80%ED%95%9C+%EB%8B%A8%EC%B6%95%ED%82%A4%EB%A5%BC+%EC%A7%80%EC%9B%90%ED%95%98%EB%A9%B0+%EC%9E%91%EC%9D%80+%EC%9A%A9%EB%9F%89%EA%B3%BC+%EB%B9%A0%EB%A5%B8+%EC%86%8D%EB%8F%84%EB%A1%9C+%EC%9D%B8%ED%95%98%EC%97%AC+%EC%A0%80%EC%82%AC%EC%96%91%EC%9D%98+PC%EC%97%90%EC%84%9C%EB%8F%84+%EC%9B%90%ED%99%9C%ED%95%98%EA%B2%8C+%EA%B5%AC%EB%8F%99.+%5B%EA%B7%B8%EB%A6%BC+1-13%5D+%EC%98%A4%ED%8E%98%EB%9D%BC+%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80..jpg "HTML 시작하기.")
18
HTML 문서 만들기 (1/10) 메모장을 열어 HTML 문서 작성 [그림 1-14] HTMLDoc 실행결과 Chapter01
![HTML 문서 만들기 (1/10) 메모장을 열어 HTML 문서 작성 [그림 1-14] HTMLDoc 실행결과 Chapter01](http://slidesplayer.org/slide/17098500/98/images/18/HTML+%EB%AC%B8%EC%84%9C+%EB%A7%8C%EB%93%A4%EA%B8%B0+%281%2F10%29+%EB%A9%94%EB%AA%A8%EC%9E%A5%EC%9D%84+%EC%97%B4%EC%96%B4+HTML+%EB%AC%B8%EC%84%9C+%EC%9E%91%EC%84%B1+%5B%EA%B7%B8%EB%A6%BC+1-14%5D+HTMLDoc+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+Chapter01.jpg "HTML 문서 만들기 (1/10) 메모장을 열어 HTML 문서 작성 [그림 1-14] HTMLDoc 실행결과 Chapter01")
19
HTML 문서 만들기 (2/10) [파일]-[다른 이름으로 저장] 메뉴 클릭 [그림 1-15] HTML 작성 Chapter01
![HTML 문서 만들기 (2/10) [파일]-[다른 이름으로 저장] 메뉴 클릭 [그림 1-15] HTML 작성 Chapter01](http://slidesplayer.org/slide/17098500/98/images/19/HTML+%EB%AC%B8%EC%84%9C+%EB%A7%8C%EB%93%A4%EA%B8%B0+%282%2F10%29+%5B%ED%8C%8C%EC%9D%BC%5D-%5B%EB%8B%A4%EB%A5%B8+%EC%9D%B4%EB%A6%84%EC%9C%BC%EB%A1%9C+%EC%A0%80%EC%9E%A5%5D+%EB%A9%94%EB%89%B4+%ED%81%B4%EB%A6%AD+%5B%EA%B7%B8%EB%A6%BC+1-15%5D+HTML+%EC%9E%91%EC%84%B1+Chapter01.jpg "HTML 문서 만들기 (2/10) [파일]-[다른 이름으로 저장] 메뉴 클릭 [그림 1-15] HTML 작성 Chapter01")
20
HTML 문서 만들기 (3/10) 파일이름 부분에 파일이름을 입력하고 확장명은 .html이나 .htm으로 입력
Chapter01 파일이름 부분에 파일이름을 입력하고 확장명은 .html이나 .htm으로 입력 [그림 1-17] 저장하기 HTML 시작하기
21
HTML 문서 만들기 (4/10) 웹 브라우저 아이콘으로 저장된 문서를 확인 할 수 있음 [그림 1-18] 저장된 문서
Chapter01 웹 브라우저 아이콘으로 저장된 문서를 확인 할 수 있음 [그림 1-18] 저장된 문서 HTML 시작하기
![HTML 문서 만들기 (4/10) 웹 브라우저 아이콘으로 저장된 문서를 확인 할 수 있음 [그림 1-18] 저장된 문서](http://slidesplayer.org/slide/17098500/98/images/21/HTML+%EB%AC%B8%EC%84%9C+%EB%A7%8C%EB%93%A4%EA%B8%B0+%284%2F10%29+%EC%9B%B9+%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80+%EC%95%84%EC%9D%B4%EC%BD%98%EC%9C%BC%EB%A1%9C+%EC%A0%80%EC%9E%A5%EB%90%9C+%EB%AC%B8%EC%84%9C%EB%A5%BC+%ED%99%95%EC%9D%B8+%ED%95%A0+%EC%88%98+%EC%9E%88%EC%9D%8C+%5B%EA%B7%B8%EB%A6%BC+1-18%5D+%EC%A0%80%EC%9E%A5%EB%90%9C+%EB%AC%B8%EC%84%9C.jpg "Chapter01. 웹 브라우저 아이콘으로 저장된 문서를 확인 할 수 있음. [그림 1-18] 저장된 문서. HTML 시작하기.")
22
HTML 문서 만들기 (5/10) 웹 브라우저를 실행하여 [파일]-[열기] 메뉴를 클릭 [그림 1-19] [열기] 메뉴
Chapter01 웹 브라우저를 실행하여 [파일]-[열기] 메뉴를 클릭 [그림 1-19] [열기] 메뉴 HTML 시작하기
![HTML 문서 만들기 (5/10) 웹 브라우저를 실행하여 [파일]-[열기] 메뉴를 클릭 [그림 1-19] [열기] 메뉴](http://slidesplayer.org/slide/17098500/98/images/22/HTML+%EB%AC%B8%EC%84%9C+%EB%A7%8C%EB%93%A4%EA%B8%B0+%285%2F10%29+%EC%9B%B9+%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EB%A5%BC+%EC%8B%A4%ED%96%89%ED%95%98%EC%97%AC+%5B%ED%8C%8C%EC%9D%BC%5D-%5B%EC%97%B4%EA%B8%B0%5D+%EB%A9%94%EB%89%B4%EB%A5%BC+%ED%81%B4%EB%A6%AD+%5B%EA%B7%B8%EB%A6%BC+1-19%5D+%5B%EC%97%B4%EA%B8%B0%5D+%EB%A9%94%EB%89%B4.jpg "Chapter01. 웹 브라우저를 실행하여 [파일]-[열기] 메뉴를 클릭. [그림 1-19] [열기] 메뉴. HTML 시작하기.")
23
HTML 문서 만들기 (6/10) 열기 대화상자가 생성되면 [찾아보기] 버튼을 클릭 [그림 1-20] 열기 대화상자
Chapter01 열기 대화상자가 생성되면 [찾아보기] 버튼을 클릭 [그림 1-20] 열기 대화상자 HTML 시작하기
![HTML 문서 만들기 (6/10) 열기 대화상자가 생성되면 [찾아보기] 버튼을 클릭 [그림 1-20] 열기 대화상자](http://slidesplayer.org/slide/17098500/98/images/23/HTML+%EB%AC%B8%EC%84%9C+%EB%A7%8C%EB%93%A4%EA%B8%B0+%286%2F10%29+%EC%97%B4%EA%B8%B0+%EB%8C%80%ED%99%94%EC%83%81%EC%9E%90%EA%B0%80+%EC%83%9D%EC%84%B1%EB%90%98%EB%A9%B4+%5B%EC%B0%BE%EC%95%84%EB%B3%B4%EA%B8%B0%5D+%EB%B2%84%ED%8A%BC%EC%9D%84+%ED%81%B4%EB%A6%AD+%5B%EA%B7%B8%EB%A6%BC+1-20%5D+%EC%97%B4%EA%B8%B0+%EB%8C%80%ED%99%94%EC%83%81%EC%9E%90.jpg "Chapter01. 열기 대화상자가 생성되면 [찾아보기] 버튼을 클릭. [그림 1-20] 열기 대화상자. HTML 시작하기.")
24
HTML 문서 만들기 (7/10) 저장했던 문서의 경로를 찾아 해당 문서를 선택한 후 [열기] 버튼을 클릭
Chapter01 저장했던 문서의 경로를 찾아 해당 문서를 선택한 후 [열기] 버튼을 클릭 [그림 1-21] 찾아보기 대화상자 HTML 시작하기
![HTML 문서 만들기 (7/10) 저장했던 문서의 경로를 찾아 해당 문서를 선택한 후 [열기] 버튼을 클릭](http://slidesplayer.org/slide/17098500/98/images/24/HTML+%EB%AC%B8%EC%84%9C+%EB%A7%8C%EB%93%A4%EA%B8%B0+%287%2F10%29+%EC%A0%80%EC%9E%A5%ED%96%88%EB%8D%98+%EB%AC%B8%EC%84%9C%EC%9D%98+%EA%B2%BD%EB%A1%9C%EB%A5%BC+%EC%B0%BE%EC%95%84+%ED%95%B4%EB%8B%B9+%EB%AC%B8%EC%84%9C%EB%A5%BC+%EC%84%A0%ED%83%9D%ED%95%9C+%ED%9B%84+%5B%EC%97%B4%EA%B8%B0%5D+%EB%B2%84%ED%8A%BC%EC%9D%84+%ED%81%B4%EB%A6%AD.jpg "Chapter01. 저장했던 문서의 경로를 찾아 해당 문서를 선택한 후 [열기] 버튼을 클릭. [그림 1-21] 찾아보기 대화상자. HTML 시작하기.")
25
HTML 문서 만들기 (8/10) 열기 대화상자에 선택한 문서의 경로가 입력되면 [확인] 버튼을 클릭
Chapter01 열기 대화상자에 선택한 문서의 경로가 입력되면 [확인] 버튼을 클릭 [그림 1-22] 문서의 경로 확인 HTML 시작하기
![HTML 문서 만들기 (8/10) 열기 대화상자에 선택한 문서의 경로가 입력되면 [확인] 버튼을 클릭](http://slidesplayer.org/slide/17098500/98/images/25/HTML+%EB%AC%B8%EC%84%9C+%EB%A7%8C%EB%93%A4%EA%B8%B0+%288%2F10%29+%EC%97%B4%EA%B8%B0+%EB%8C%80%ED%99%94%EC%83%81%EC%9E%90%EC%97%90+%EC%84%A0%ED%83%9D%ED%95%9C+%EB%AC%B8%EC%84%9C%EC%9D%98+%EA%B2%BD%EB%A1%9C%EA%B0%80+%EC%9E%85%EB%A0%A5%EB%90%98%EB%A9%B4+%5B%ED%99%95%EC%9D%B8%5D+%EB%B2%84%ED%8A%BC%EC%9D%84+%ED%81%B4%EB%A6%AD.jpg "Chapter01. 열기 대화상자에 선택한 문서의 경로가 입력되면 [확인] 버튼을 클릭. [그림 1-22] 문서의 경로 확인. HTML 시작하기.")
26
HTML 문서 만들기 (9/10) 웹 브라우저로 실행된 HTML 문서를 확인 할 수 있음 [그림 1-23] 실행 결과
Chapter01 웹 브라우저로 실행된 HTML 문서를 확인 할 수 있음 [그림 1-23] 실행 결과 HTML 시작하기
![HTML 문서 만들기 (9/10) 웹 브라우저로 실행된 HTML 문서를 확인 할 수 있음 [그림 1-23] 실행 결과](http://slidesplayer.org/slide/17098500/98/images/26/HTML+%EB%AC%B8%EC%84%9C+%EB%A7%8C%EB%93%A4%EA%B8%B0+%289%2F10%29+%EC%9B%B9+%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EB%A1%9C+%EC%8B%A4%ED%96%89%EB%90%9C+HTML+%EB%AC%B8%EC%84%9C%EB%A5%BC+%ED%99%95%EC%9D%B8+%ED%95%A0+%EC%88%98+%EC%9E%88%EC%9D%8C+%5B%EA%B7%B8%EB%A6%BC+1-23%5D+%EC%8B%A4%ED%96%89+%EA%B2%B0%EA%B3%BC.jpg "Chapter01. 웹 브라우저로 실행된 HTML 문서를 확인 할 수 있음. [그림 1-23] 실행 결과. HTML 시작하기.")
27
HTML 문서 만들기 (10/10) Chapter01 웹 브라우저에서 [보기]-[소스] 메뉴를 선택하여 보면 해당 웹 페이지의 내용을 확인해 볼 수 있음 [그림 1-24] 문서 확인 HTML 시작하기
![HTML 문서 만들기 (10/10) Chapter01. 웹 브라우저에서 [보기]-[소스] 메뉴를 선택하여 보면 해당 웹 페이지의 내용을 확인해 볼 수 있음. [그림 1-24] 문서 확인.](http://slidesplayer.org/slide/17098500/98/images/27/HTML+%EB%AC%B8%EC%84%9C+%EB%A7%8C%EB%93%A4%EA%B8%B0+%2810%2F10%29+Chapter01.+%EC%9B%B9+%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90%EC%84%9C+%5B%EB%B3%B4%EA%B8%B0%5D-%5B%EC%86%8C%EC%8A%A4%5D+%EB%A9%94%EB%89%B4%EB%A5%BC+%EC%84%A0%ED%83%9D%ED%95%98%EC%97%AC+%EB%B3%B4%EB%A9%B4+%ED%95%B4%EB%8B%B9+%EC%9B%B9+%ED%8E%98%EC%9D%B4%EC%A7%80%EC%9D%98+%EB%82%B4%EC%9A%A9%EC%9D%84+%ED%99%95%EC%9D%B8%ED%95%B4+%EB%B3%BC+%EC%88%98+%EC%9E%88%EC%9D%8C.+%5B%EA%B7%B8%EB%A6%BC+1-24%5D+%EB%AC%B8%EC%84%9C+%ED%99%95%EC%9D%B8..jpg "HTML 시작하기.")
28
HTML 구성요소 Chapter01 HTML 시작하기
29
HTML 기본구조 HTML 문서 작성 메모장(텍스트 에디터)을 열어 HTML 코드를 작성
Chapter01 HTML 문서 작성 메모장(텍스트 에디터)을 열어 HTML 코드를 작성 확장명 .html 이나 .htm으로 저장 브라우저를 사용하여 해당 문서를 오픈 HTML 시작하기
30
프로그램 1-1 Chapter01 [그림 1-25] HTMLStart의 실행결과 HTML 시작하기
![프로그램 1-1 Chapter01 [그림 1-25] HTMLStart의 실행결과 HTML 시작하기](http://slidesplayer.org/slide/17098500/98/images/30/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+1-1+Chapter01+%5B%EA%B7%B8%EB%A6%BC+1-25%5D+HTMLStart%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0.jpg "프로그램 1-1 Chapter01 [그림 1-25] HTMLStart의 실행결과 HTML 시작하기")
Similar presentations
![1/55 4.2 편집 기능 사용하기 – 실습 1 글자 모양을 바꾸고 싶은 곳을 블록 설정 [ 글자 모양 ] 대화 상자에서 [ 글꼴 ] ‘ 궁서체 ’, [ 글자 색 ] ‘ 토마토색 ’ 으로 선택 → [ 설정 ] 클릭 → 글자 모양 변경.](/40/11034426/big_thumb.jpg "1/55 4.2 편집 기능 사용하기 – 실습 1 글자 모양을 바꾸고 싶은 곳을 블록 설정 [ 글자 모양 ] 대화 상자에서 [ 글꼴 ] ‘ 궁서체 ’, [ 글자 색 ] ‘ 토마토색 ’ 으로 선택 → [ 설정 ] 클릭 → 글자 모양 변경.>")
