Embed Size (px)
Citation preview
HTML5 기본구조와작성법
강의소개
HTML5, CSS, Java Script를 배우고 간단하게 홈페이지 구축
담당 조교: 조원형
– 한빛관 409호
– https://cs.kangwon.ac.kr/~whcho
과제 제출
– 파일 형식: 소스 코드, 결과 화면(Chrome)을 zip 형식으로 전송
ex) [웹인]HW#1_2017XXXXX_홍길동.zip
성적
– 중간고사: 30%, 기말고사: 30%, 실습: 20%, 출석: 20%(이론+실습)
22017-03-10
HTML5(HyperText Markup Language)
WWW(World Wide Web)의 웹 표준 기술, 웹 마크업 언어
웹 페이지의 뼈대를 이루고 있으며, 다양한 기능을 포함하고 있음
– 멀티미디어, 그래픽, 시맨틱 웹, etc.
Markup 언어란?
– 대상이 화면에 어떻게 보일지 나타내기 위해 사용하는 문자
HTML 예제
32017-03-10
CSS3(Cascading Style Sheet)
HTML 문서를 표현하는 방법
HTML은 웹 페이지의 몸체를 구축하고 CSS로 웹 페이지를 꾸밈
CSS3 예제
42017-03-10
CSS 적용전 CSS 적용후
JavaScript
HTML 페이지의 사용자 반응을 처리
HTML의 정적인 페이지를 동적으로 수행하게 함
웹 브라우저 내부에서 주로 사용하며, 외부 프로그램에서도 접근 가능
52017-03-10
Practice1-1 HTML 기본구조
72017-03-10
Practice1-1 HTML 기본구조
82017-03-10
HTML은 태그로 구성 됨
– <html> </html>과 같이 태그로 둘러 쌓임
태그를 열었으면 닫아야함
HTML 문서는 기본적으로 예제와 같은 구조로
이루어짐
HTML 태그
– HTML 페이지의 기본 요소
– 웹 페이지 동작에는 영향을 끼치지 않음
HEAD 태그
– 웹 페이지의 CSS, JavaScript, 메타데이터 등을 제
시
Body 태그
– 사용자에게 실제 보여지는 부분
웹브라우저에 HTML5 문서라고알려줌
HTML 문서의속성, 언어 = 한국어
웹페이지의제목
주석
Practice1-2 제목글자태그
92017-03-10
HTML5는 6가지 제목 글자 태그를 지원
– <h1> <h6> 순으로 크기가 작아짐
Practice1-3 본문글자태그
102017-03-10
Practice1-4 특수문자
112017-03-10
Practice1-5 하이퍼링크태그
122017-03-10
감사합니다
