2주차 1교시 웹프로그래밍 기초

2 주차 _1
교시
웹 프로그래밍 기초
행복교육원 채미혜
지난주 요약
 WWW
[ 강의교안 이용 안내 ]
– 인터넷 , 컴퓨터 , 웹 브라우저를 통해 글자 , 이미지 , 동영상 ,
• 본 강의교안의 저작권은 한빛아카데미㈜에 있습니다 .
• 이 자료를음성
무단으로
등의전제하거나
데이터를배포할 경우 저작권법 136
사용자에게 제공하거나 , 사용자와
조에 의거하여 처벌을 받을 수 있습니다
컴퓨터 .
또는 사용자 상호 간에 소통하게 해 주는 서비스

 인터넷과 웹
Page 2
지난주 요약
 서버와 클라이언트
[ 강의교안 이용 안내 ]
① 클라이언트가 웹 페이지의 주소 (URL, uniform resource locator)
• 본 강의교안의
입력 저작권은 한빛아카데미㈜에 있습니다 .
• 이 자료를 무단으로 전제하거나 배포할 경우 저작권법 136 조에 의거하여 처벌을 받을 수 있습니다 .
② 서버는 요청을 받은 데이터를 클라이언트의 컴퓨터에 전송
③ 클라이언트의 웹 브라우저는 서버가 전송한 데이터를 해석하여
화면에 표시
 HTML5 의 주요 기능
① 멀티미디어 기능
② 그래픽기능
③ 시맨틱
④ CSS3 스타일시트
⑤ 웹의 성능 극대화 및 통합
Page 3
1. HTML 문서 구조 이해하기
1. HTML 이란 ?
1.1 HTML 정의
 HTML
 HyperText Markup Language
 웹 페이지는 HTML 문서라고도 불리며 , HTML 태그들로 구성
 HTML 태그 (tag)
 HTML 태그는 이름을 꺾쇠 괄호 (<>) 로 감싸서 표현
< 태그이름 > // 시작 태그

</ 태그 이름 > // 종료 태그
 시작 태그와 종료 태그 한쌍으로 구성 됨
 시작 태그과 종료 태그와 태그 이름은 같지만 종료 태그 앞에는 슬래시 (/) 가 존재
Page 5
1. HTML 이란 ?
1.2 HTML 버전
 HTML
버전 년도 DOCTYE 및 설명
HTML 1.0 1991 팀 버나스리 (Tim Berners-Lee) 가 발표한 최초의 HTML
HTML 2.0 1995 국제 표준으로 제정된 최초의 HTM
HTML 3.2 1997 W3C 에 의해 제정된 최초의 HTML

HTML 4.01 1999 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0 2000 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML5 2010 <!DOCTYPE html>
Page 6
1. HTML 이란 ?
1.2 W3C
 W3C 는 World Wide Web Consortium 의 약자

 W3C 는 월드 와이드 웹 (WWW) 을 위한 표준을 제정하고 관리하는 중립적인 기관
 W3C 가 관리하는 대표적인 웹 표준

 HTML
 CSS
 DOM
 SVG
 XHTML
 XML
Page 7
2. 실습 환경 구축하기
2.1 HTML 문서 편집 및 실행 연습하기
HTML 문서 작성하고 실행하기

3. HTML 태그와 문서 구조
3.1 HTML 태그와 문서 구조
 HTML 의 문서 구조
 HTML : 웹 페이지를 만들 때 사용하는 가장 기본적인 웹 프로그래밍 언어
 태그 : HTML 에서 사용하는 명령어로 <> 를 이용하여 나타냄 .
HTML 문서 구조 살펴보기
<!DOCTYPE html>
<html>
<head>
<title>Wecome To My Home</title>
</head>
<body>
Hello! My name is HTML
</body>
</html>
 <!DOCTYPE html>
• HTML 문서의 버전을 알려주는 역할
• HTML5 문서임
 <html></html>
• 문서의 시작과 끝을 의미
 <body></body>
• 브라우저 실행 화면에 보이는 내용의 시작과 끝을 의미
 <head></head>
• HTML 문서에서 필요한 사항이나 특수한 기능을 설정할 때 사용
• <title>, <meta>, <link>,<style>, <script> 태그로 HTML 문서의 제목 설정 , 문자
세트 설정 , 외부파일연결 , CSS 정의 , 자바스크립트 정의 등의 역할 수행
 <title></title>
• 실행 화면 왼쪽 상단의 탭 버튼에 보이는 웹 페이지 제목을 표시
4. <meta> 태그로 문자 세트 설정하기
4.1 <meta> 태그로 문자 세트 설정하기
 <meta> 태그
 데이터를 표현하는 속성인 메타데이터를 설정할 때 사용
 HTML5 의 표준 문자 세트는 UTF-8
문자 세트를 설정하여 메시지 출력하기

5. HTML 태그의 속성
5.1 HTML 태그의 속성
 속성 (attribute)
 해당 태그를 사용할 때 필요한 세부 사항을 설정
HTML 태그의 속성 알아보기

5. HTML 태그의 속성
5.1 HTML 태그의 속성
 소스코드 살펴보기
 <a> 태그
• 텍스트나 이미지 오프젝트를 클릭하면 미리 설정한 웹 페이지로 이동하는 역할
 <a> 태그의 속성
• href : 실행 결과 화면에서 연결한 링크로 사이트 이동
• target : target_blank 로 지정하면 새 창으로 사이트를 보여줌

5. HTML 요소 구조
5.1 HTML 요소 구조
 HTML 요소 (element) 는 여러 속성을 가질 수 있으며 , 이러한 속성 (attribute)

은 해당 요소에 대한 추가적인 정보를 제공
 HTML 요소는 시작태그와 종료태그 존재
 문법
< 태그이름 속성이름 = “ 속성값“ >
 속성값 입력시 주의사항

 속성값은 소문자로 작성
 속성값은 따옴표 (“) 안에 입력
5. HTML 요소 구조
5.1 HTML 요소 구조
 속상값 입력 예
시작태그 종료태그
<p class = “para”> hello! Html </p>
태그 이름 속성명 속성값 내용

2주차 1교시 웹프로그래밍 기초

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

2주차 1교시 웹프로그래밍 기초

Uploaded by

Copyright:

Available Formats

2 주차 _1

또는 사용자 상호 간에 소통하게 해 주는 서비스

< 태그이름 > // 시작 태그

HTML 3.2 1997 W3C 에 의해 제정된 최초의 HTML

HTML5 2010 <!DOCTYPE html>

 W3C 는 World Wide Web Consortium 의 약자

HTML 문서 작성하고 실행하기

Hello! My name is HTML

문자 세트를 설정하여 메시지 출력하기

HTML 태그의 속성 알아보기

• 텍스트나 이미지 오프젝트를 클릭하면 미리 설정한 웹 페이지로 이동하는 역할

• href : 실행 결과 화면에서 연결한 링크로 사이트 이동

• target : target_blank 로 지정하면 새 창으로 사이트를 보여줌

 HTML 요소 (element) 는 여러 속성을 가질 수 있으며 , 이러한 속성 (attribute)

< 태그이름 속성이름 = “ 속성값“ >

 속성값 입력시 주의사항

<p class = “para”> hello! Html </p>

You might also like