HTML HTML 기초기초((Part I)Part I)cs. ysmoon/courses/2009_2.5/wi/07-1.pdf · PDF file...

Click here to load reader

  • date post

    25-Feb-2020
  • Category

    Documents

  • view

    3
  • download

    0

Embed Size (px)

Transcript of HTML HTML 기초기초((Part I)Part I)cs. ysmoon/courses/2009_2.5/wi/07-1.pdf · PDF file...

  • 1

    웹과웹과 인터넷인터넷 활용활용 및및 실습실습 (Web & Internet)(Web & Internet)

    HTML HTML 기초기초 ((Part I)Part I)

    문양세문양세 강원대학교강원대학교 ITIT대학대학 컴퓨터과학전공컴퓨터과학전공

    강의강의 내용내용 HTML 기초

    HTML의 개요

    HTML 문서의 기본 구조

    HTML의 구성요소

    HTML 편집기

    기본적인 HTML 태그

    컬러와 그래픽 이미지

    하이퍼텍스트 링크

    Web & Internet by Yang-Sae MoonPage 2

    하이퍼텍 링

    테이블

    프레임

    사운드(오디오) 및 동영상

  • 2

    HTML HTML 개요개요

    HTML: HyperText Markup Language

    WWW 상의 문서를 기술하기 위한 언어로서 플랫폼에 관계없이 사용 가

    능한 하이퍼텍스트 문서를 만들 수 있는 마크업(markup) 언어

    HTML 기초

    능한 하이퍼텍스트 문서를 만들 수 있는 마크업(markup) 언어

    Markup 언어란?

    • 일반 텍스트 문서에 < >로 둘러 쌓인 약속된 태그(tag)를 붙여 줌으로써, 특수한 기능을

    웹 브라우저로 하여금 인식하여 실행할 수 있도록 지시 해주는 기능을 하는 언어

    • 예: 이것은 굵은 글씨체이다.

    이것은 굵은 글씨체이다.

    Web & Internet by Yang-Sae MoonPage 3

    HTML HTML 문서의문서의 기본기본 구조구조 (1/2)(1/2)

    HTML 문서는 일반적으로 머리말(header)과 본문(body)의 두 부분으로

    나누어진다.

    HTML 기초

    머리말 (제목) (1) HTML 문서의 머리말 부분

    웹 페이지의 본문 (2) HTML 문서의 본문 부분

    b d

    Web & Internet by Yang-Sae MoonPage 4

  • 3

    HTML HTML 문서의문서의 기본기본 구조구조 (2/2)(2/2)

    HTML 문서 예제

    HTML 기초

    Web & Internet by Yang-Sae MoonPage 5

    강의강의 내용내용 HTML 기초

    HTML의 개요

    HTML 문서의 기본 구조

    HTML의 구성요소

    HTML 편집기

    기본적인 HTML 태그

    컬러와 그래픽 이미지

    하이퍼텍스트 링크

    Web & Internet by Yang-Sae MoonPage 6

    하이퍼텍 링

    테이블

    프레임

    사운드(오디오) 및 동영상

  • 4

    HTMLHTML의의 구성구성 요소요소

    텍스트(text)

    • 웹 문서의 본문에 해당 (실제 표현하고자 하는 내용)

    • 사용자가 웹 문서를 읽을 때, 화면에 나타나는 텍스트 그 자체

    HTML 기초

    태그(tag)

    • 텍스트에 속성/기능을 부여하기 위해 문서의 중간 중간에 붙여주는 일종의 꼬리표

    • 일반적으로, ‘’로 둘러 쌓아서 표기함 (예: , )

    스크립트(script)

    • 간단한 명령어들의 집합 텍스트(내용)

    Web & Internet by Yang-Sae MoonPage 7

    간단한 명령어들의 집합

    • 동적인 웹 문서 작성이 가능하게 함

    • Javascript, Visual Basic Script 등이 있음

    텍스트(내용)

    태그

    스크립트

    태그의태그의 속성과속성과 종류종류 (1/2)(1/2)

    태그는 속성(attribute)을 가질 수 있다.

    속성은 지정된 태그 명령에 대하여 보다 자세한 환경과 정보를 규정하여,

    웹 브라우저로 하여금 보다 세밀한 기능을 수행하도록 지정하는 명령의

    HTML 기초

    웹 브라우저로 하여금 보다 세밀한 기능을 수행하도록 지정하는 명령의

    일부

    태그 분류1: 복합 태그 vs. 단독 태그

    • 복합 태그: 항시 쌍으로 사용되는 태그

    Web & Internet by Yang-Sae MoonPage 8

    • 복합 태그의 예: ... ,

    ...

    , ... 등

    • 단독 태그: 쌍으로 사용되지 않고, 단독으로 사용되는 태그

    • 단독 태그의 예:
    , 등

  • 5

    태그의태그의 속성과속성과 종류종류 (1/2)(1/2)

    HTML의 이해는 태그의 종류, 의미, 속성을 이해하는 것이다.

    태그는 속성(attribute)을 가질 수 있다.

    속성은 지정된 태그 명령에 대하여 보다 자세한 환경과 정보를 규정하여

    HTML 기초

    속성은 지정된 태그 명령에 대하여 보다 자세한 환경과 정보를 규정하여,

    웹 브라우저로 하여금 보다 세밀한 기능을 수행하도록 지정하는 명령의

    일부

    태그 분류1: 복합 태그 vs. 단독 태그

    Web & Internet by Yang-Sae MoonPage 9

    • 복합 태그: 항시 쌍으로 사용되는 태그

    • 복합 태그의 예: ... ,

    ...

    , ... 등

    • 단독 태그: 쌍으로 사용되지 않고, 단독으로 사용되는 태그

    • 단독 태그의 예:
    , 등

    태그의태그의 속성과속성과 종류종류 (2/2)(2/2)

    태그 분류2: 속성을 갖는 태그 vs. 속성을 갖지 않는 태그

    • 속성을 꼭 필요로 하는 태그

    • 속성이 옵션으로 사용되는 태그: 등

    • 속성을 가지지 않는 태그: ... 등

    Web & Internet by Yang-Sae MoonPage 10

  • 6

    태그의태그의 특성특성

    대/소문자 구별이 없다. 즉,
    ,
    ,
    은 모두 같은 태그로 인식

    복합 태그들은 엇갈려서 사용할 수 없다.

    • 잘못 사용한 예: 엇갈린 예제

    HTML 기초

    • 잘못 사용한 예: 엇갈린 예제

    • 바르게 사용한 예: 올바른 예제

    포함할 수 없는 태그는 포함시켜서는 안 된다.

    • 세계 최대 컴퓨터 통신망 (interconnected network Internet)

    • 잘못 사용한 예: 틀렸어요!

    • 바르게 사용한 예: 옳아요! 또는 또 옳아요!

    Web & Internet by Yang-Sae MoonPage 11

    바 게 사용한 예 옳아 는 옳아

    • Why? 태그는 글자 크기를 조정하는데, 포함해서 쓰면 의미가 혼동됨

    스크립트스크립트(script)(script)

    웹 브라우저가 이해하는 간단한 명령어들의 집합

    HTML 문서 내에 포함시켜 동적인 웹 문서 작성이 가능

    자바 스크립트와 비쥬얼베이직 스크립트 사용가능

    HTML 기초

    자바 스크립트와 비쥬얼베이직 스크립트 사용가능

    Web & Internet by Yang-Sae MoonPage 12

  • 7

    강의강의 내용내용 HTML 기초

    HTML의 개요

    HTML 문서의 기본 구조

    HTML의 구성요소

    HTML 편집기

    기본적인 HTML 태그

    컬러와 그래픽 이미지

    하이퍼텍스트 링크

    Web & Internet by Yang-Sae MoonPage 13

    하이퍼텍 링

    테이블

    프레임

    사운드(오디오) 및 동영상

    HTML HTML 편집기편집기 (1/3)(1/3)

    텍스트 기반 편집기

    • 메모장, 아래아한글, MS 워드, editplus

    HTML 기초

    Web & Internet by Yang-Sae MoonPage 14

  • 8

    HTML HTML 편집기편집기 (2/3)(2/3)

    텍스트 기반 편집기 (계속)

    HTML 기초

    Web & Internet by Yang-Sae MoonPage 15

    HTML HTML 편집기편집기 (3/3)(3/3)

    WYSIWIG 방식 편집기

    • 드림위버(매크로미디어社), 나모 웹 에디터, 프론트페이지(MS)

    HTML 기초

    Web & Internet by Yang-Sae MoonPage 16

  • 9

    강의강의 내용내용 HTML 기초

    HTML의 개요

    HTML 문서의 기본 구조

    HTML의 구성요소

    HTML 편집기

    기본적인 HTML 태그

    컬러와 그래픽 이미지

    하이퍼텍스트 링크

    Web & Internet by Yang-Sae MoonPage 17

    하이퍼텍 링

    테이블

    프레임

    사운드(오디오) 및 동영상

    텍스트텍스트 기반기반 에디터에디터 사용사용??

    WYSIWIG 편집기를 사용하지 않는 이유

    • HTML 태그를 익힐 수 없다. (태그를 몰라도 HTML 문서 작성이 가능하기 때문)

    • WYSIWIG 편집기는 사용자가 원하는 모든 기능을 제공하지 않는다.

    HTML 기초

    • WYSWIG으로는 보다 간결하고 이해하기 쉬운 HTML 문서를 작성하기 어렵다.

    제안하는 바는…

    • 여러분은 텍스트 기반 에디터(메모장, editplus)로 HTML 태그를 익히시기 바랍니다.

    • 태그가 익숙해졌다면, 추후에는 WYSIWIG 편집기로 HTML 문서를 만드세요.

    Web & Internet by Yang-Sae MoonPage 18

    • HTML 태그를 잘 알고 있다면, WYSIWIG 편집기로 만든 문서도, 에디터로 수정하여, 보

    다 간결하고 보기 좋게 만들 수 있습니다.

  • 10

    첫첫 번째번째 HTML HTML 문서문서

    메모장을 열고 다음과 같이 입력하고 first.html로 저장

    HTML 기초

    head

    간단한 실습

    안녕하세요?

    첫 번째 실습입니다.

    Web & Internet by Yang-Sae MoonPage 19

    문서문서 구조구조 태그태그 (1/5)(1/5)

    ….

    • HTML 문서 형식으로 작성되었음을 나타냄

    • 모든 HTML 문서는 로 시작하여 로 끝남