Web & Internet [02] HTML5 기본구조와 작성법

Presentation on theme: "Web & Internet [02] HTML5 기본구조와 작성법"— Presentation transcript:

1 Web & Internet [02] HTML5 기본구조와 작성법
2018년 09월 10일 박성진

2 HTML5 (HyperText Markup Language)
www(World Wide Web)의 웹 표준 기술, 웹 마크업 언어 웹 페이지의 뼈대를 이루고 있으며, 다양한 기능을 포함하고 있음 멀티미티어, 그래픽, 시맨틱 웹, etc. Markup 언어란? 대상이 화면에 어떻게 보일지 나타내기 위해 사용하는 문자 HTML 예제

3 CSS3 (Cascading Style Sheet)
HTML 문서를 표현하는 방법 HTML은 웹 페이지의 몸체를 구축하고 CSS로 웹 페이지를 꾸밈 CSS3 예제

4 실습 환경 구축 Sublime Text 에디터 설치 DBLab Template by Suan

5 예제1.1 HTML 기본 구조 ex1_1.html DBLab Template by Suan

6 예제1.1 HTML 기본 구조 DBLab Template by Suan

7 예제1.1 HTML 기본 구조 DBLab Template by Suan

8 예제1.1 HTML 기본 구조 HTML은 태그로 구성 됨 HTML 문서는 기본적으로 예제와 같은 구조로 이루어짐 HTML 태그
태그를 열었으면 닫아야함 HTML 문서는 기본적으로 예제와 같은 구조로 이루어짐 HTML 태그 HTML 페이지의 기본 요소 웹 페이지 동작에는 영향을 끼치지 않음 HEAD 태그 웹 페이지의 CSS, JavaScript, 메타데이터 등을 제시 Body 태그 사용자에게 실제 보여지는 부분 웹 브라우저에 HTML5 문서라고 알려줌 HTML 문서의 속성, 언어 = 한국어 주석 웹 페이지의 제목 DBLab Template by Suan

9 DBLab Template by Suan

10 예제1.2 제목 글자 태그 DBLab Template by Suan

11 예제1.3 본문 글자 태그 DBLab Template by Suan

12 예제1.4 특수문자 DBLab Template by Suan

13 예제1.5 하이퍼링크 태그 DBLab Template by Suan

14 과제2 여러분의 자기소개 웹 페이지를 만들어 보세요. 9월 17일 오전 9:10 까지 제출
적어도 이름, 학번, 전공, 자주 방문하는 웹사이트(하이퍼링크)까지 포함해주세요. 9월 17일 오전 9:10 까지 제출 Sublime Text 또는 메모장으로 사용해 과제물을 학번 및 학생이름 (예 _박성진) HTML으로 저장한 후 으로 제출 제출하시기 전에 파일을 열고 볼 수 있는지 확인해 주시기 바랍니다. 아니면, HTML 파일을 A4용지로 프린트한 뒤 제출 도움 필요하실 경우, 매주 목요일 오후 4시-5시 한빛관 408호를 방문하시거나 예약