웹 프로그래밍 및 실습 (Web Programming & Practice) HTML 개요 최 미정 강원대학교 IT 대학 컴퓨터과학전공

웹 프로그래밍 및 실습 (Web Programming & Practice) HTML 개요 최 미정 강원대학교 IT대학 컴퓨터과학전공

강의 내용 HTML 개요 HTML의 개요 HTML 문서의 기본 구조 HTML의 구성요소 HTML 편집기 기본적인 HTML 태그 컬러와 그래픽 이미지 하이퍼텍스트 링크 리스트와 테이블 프레임 사운드(오디오) 및 동영상

웹 페이지 제작 단계 및 환경 HTML 개요 주제와 내용선정 어떤 내용을 담을 것인지, 어떤 단계로 제작할 것인지 결정 디자인 로고,아이콘 또는 멀티미디어 등 다양한 소재를 어떻게 꾸밀 것인지 구성 웹 페이지 구조 웹 페이지 내용을 분류/정리 후 구조적으로 구성하여 흐름도나 사이트 맵을 종이에 그려본다. 저작권 확인 자바 스크립트나 그림 등을 사용할 때, 저작권에 대한 내용에 주의 웹 페이지 등록 인터넷 서비스 제공업체인 ISP의 웹 서버에 등록 웹 페이지 홍보 검색엔진에 등록하여 모든 사용자에게 홍보

웹 페이지 제작 시 고려사항 HTML 개요 웹 페이지 로딩 시간이 10초 이하로 한다 (너무 복잡하지 않게…) 웹 페이지의 제목을 의미 있게 붙인다. 혼동을 일으키기 쉬운 링크를 만들지 않는다. 방문객이 웹사이트의 구조를 쉽게 파악할 수 있도록 구성한다. 좌우/상하로 길게 스크롤되는 문서를 만들지 않는다. 각 페이지마다 이전/상위 페이지로의 링크를 만들어 페이지간의 이동을 쉽게 한다. 사이트내의 링크는 상대 경로를 사용한다(Portable) 지나치게 애니메이션을 많이 사용해서 사용자의 눈을 피로하게 하지 않는다 특정한 환경을 가정하고 웹 페이지를 만드는 것은 좋은 자세가 아니다. 웹사이트의 내용이 계속 업데이트(update) 되어야 한다.

HTML 개요 HTML 개요 • HTML: HyperText Markup Language • WWW 상의 문서를 기술하기 위한 언어로서 플랫폼에 관계없이 사용 가능한 하이퍼텍스트 문서를 만들 수 있는 마크업(markup) 언어 • Markup 언어란? • 일반 텍스트 문서에 < >로 둘러 쌓인 약속된 태그(tag)를 붙여 줌으로써, 특수한 기능을 웹 브라우저로 하여금 인식하여 실행할 수 있도록 지시 해주는 기능을 하는 언어 • 예: <B>이것은 굵은 글씨체이다.</B> 이것은 굵은 글씨체이다.

HTML 문서의 기본 구조 (1/2) HTML 개요 HTML 문서는 일반적으로 머리말(header)과 본문(body)의 두 부분으로 나누어진다.

HTML 문서의 기본 구조 (2/2) HTML 개요 HTML 문서 예제

HTML의 구성 요소 HTML 개요 • 텍스트(text) • 웹 문서의 본문에 해당 (실제 표현하고자 하는 내용) • 사용자가 웹 문서를 읽을 때, 화면에 나타나는 텍스트 그 자체 • 태그(tag) • 텍스트에 속성/기능을 부여하기 위해문서의 중간 중간에 붙여주는 일종의 꼬리표 • 일반적으로, ‘<‘와 ‘>’로 둘러 쌓아서 표기함 (예: <html>, <table>) • 스크립트(script) • 간단한 명령어들의 집합 • 동적인 웹 문서 작성이 가능하게 함 • Javascript,Visual Basic Script 등이 있음 텍스트(내용) 태그 스크립트

태그의 속성과 종류 (1/2) HTML 개요 • HTML의 이해는 태그의 종류, 의미, 속성을 이해하는 것이다. • 태그는 속성(attribute)을 가질 수 있다. • 속성은 지정된 태그 명령에 대하여 보다 자세한 환경과 정보를 규정하여, 웹 브라우저로 하여금 보다 세밀한 기능을 수행하도록 지정하는 명령의 일부 • 태그 분류1: 복합 태그 vs. 단독 태그 • 복합 태그: 항시 쌍으로 사용되는 태그 • 복합 태그의 예: <title> ... </title>, <p> ... </p>, <html> ... </html> 등 • 단독 태그: 쌍으로 사용되지 않고, 단독으로 사용되는 태그 • 단독 태그의 예: <br>, <hr> 등

태그의 속성과 종류 (2/2) HTML 개요 • 태그 분류2: 속성을 갖는 태그 vs. 속성을 갖지 않는 태그 • 속성을 꼭 필요로 하는 태그 • <a href=“http://www.naver.com">네이버</a>로 연결 • <imgsrc=“./images/mypicture.jpg"> • 속성이 옵션으로 사용되는 태그: <hr noshade> 등 • 속성을 가지지 않는 태그: <em> ... </em> 등

태그의 특성 HTML 개요 • 대/소문자 구별이 없다. 즉, <BR>, <Br>, <br>은 모두 같은 태그로 인식 • 복합 태그들은 엇갈려서 사용할 수 없다. • 잘못 사용한 예: <big><blink> 엇갈린 예제 </big></blink> • 바르게 사용한 예: <big><blink> 올바른 예제 </blink></big> • 포함할 수 없는 태그는 포함시켜서는 안 된다. • 잘못 사용한 예: <h1><h2> 틀렸어요! </h2></h1> • 바르게 사용한 예: <h1> 옳아요! </h1> 또는 <h2> 또 옳아요! </h2> • Why? <hn> 태그는 글자 크기를 조정하는데, 포함해서 쓰면 의미가 혼동됨

스크립트(script) HTML 개요 웹 브라우저가 이해하는 간단한 명령어들의 집합 HTML 문서 내에 포함시켜 동적인 웹 문서 작성이 가능 자바 스크립트와 비쥬얼베이직 스크립트 사용가능

HTML 편집기 (1/3) HTML 개요 • 텍스트 기반 편집기 • 메모장, 아래아한글, MS 워드, editplus

HTML 편집기 (2/3) HTML 개요 텍스트 기반 편집기 (계속)

HTML 편집기 (3/3) HTML 개요 • WYSIWYG 방식 편집기 • 드림위버(매크로미디어社), 나모 웹 에디터, 프론트페이지(MS)

텍스트 기반 에디터 사용? HTML 개요 • WYSIWYG 편집기를 사용하지 않는 이유 • HTML 태그를 익힐 수 없다. (태그를 몰라도 HTML 문서 작성이 가능하기 때문) • WYSIWYG 편집기는 사용자가 원하는 모든 기능을 제공하지 않는다. • WYSIWYG으로는 보다 간결하고 이해하기 쉬운 HTML 문서를 작성하기 어렵다. • 제안하는 바는… • 여러분은 텍스트 기반 에디터(메모장, editplus)로 HTML 태그를 익히시기 바랍니다. • 태그가 익숙해졌다면, 추후에는 WYSIWYG 편집기로 HTML 문서를 만드세요. • HTML 태그를 잘 알고 있다면, WYSIWYG 편집기로 만든 문서도, 에디터로 수정하여, 보다 간결하고 보기 좋게 만들 수 있습니다.

첫 번째 HTML 문서 HTML 개요 메모장을 열고 다음과 같이 입력하고 first.html로 저장 <html> <head> <title>간단한 실습</title> </head> <body> 안녕하세요? <br> 첫 번째 실습입니다. </body> </html>

문서 구조 태그 (1/5) HTML 개요 • <html> …. </html> • HTML 문서 형식으로 작성되었음을 나타냄 • 모든 HTML 문서는 <HTML>로 시작하여 </HTML> 로 끝남 • <head> …. </head> • HTML 문서의 머리말(header) 영역 • HEAD에 사용되는 전용태그:<TITLE>, <BASE HREF="...">, <LINK>, <NEXTID>, <META>, <RANGE>, <STYLE>, <ISINDEX> • <title> …. </title> • 문서의 제목을 브라우저 화면의 타이틀 바에 표시 • 통상 <head>와 </head> 사이에 위치함 • 브라우저에서 북마크(bookmark)했을 때, 북마크 제목으로 사용됨

문서 구조 태그 (2/5) HTML 개요 <title> …. </title> 사용 예

문서 구조 태그 (3/5) HTML 개요 • <body> …. </body> • HTML 문서의 주가 되는 본문 영역 (문서의 실제 내용 부분) • <body>의 속성(attribute)

문서 구조 태그 (4/5) HTML 개요 <body>의 속성사용 예

문서 구조 태그 (5/5) HTML 개요 • : 주석 • 여기에 담긴 내용은 브라우저를 통해서는 볼 수 없음 • 여러 줄에 걸쳐서 사용할 수 없음에 주의

환경 정보 전달을 위한 태그 HTML 개요 • <base href = “… path …”> • 규정되는 HTML 문서의 기본 주소(상대 주소)를 알려준다. • 해당 HTML 문서가 읽혀질 URL을 지정해 주는데 사용 • <BASE HREF="...."> 태그를 지정하면 HTML 문서 안에 있는 모든 URL은<BASE HREF="...."> 태그에서 지정된 URL로부터 상대적인 경로를 가지게 됨

문단 설정을 위한 태그 (1/7) HTML 개요 • <p> • 단락이 시작되는 곳이나 단락이 끝나는 곳에 넣어서 단락을 구분 • 중복 사용해도 한번만 적용 • 속성: align = left |right |center <p> 태그 내부에 들어간 단락의 내용을 정해진 위치로 정렬 • <br> • Break의 약어 • 문장에서 줄 바꾸기 기능

문단 설정을 위한 태그 (2/6) HTML 개요 <p>, <br>의 사용 예제

문단 설정을 위한 태그 (3/7) HTML 개요 • <pre> • 입력한 내용 그대로를 웹 브라우저 화면에 출력 (공백유지, html 태그 무시)

문단 설정을 위한 태그 (4/7) HTML 개요 • <hr>: horizontal ruler • 웹 페이지 안에 선을 그리거나 경계선을 나타낼 때 사용 • 문단을 구분하는 가로선(수평선)으로 많이 사용 • 종료 태그가 없는 단독 태그 • <hr size = pixel width = pixel 또는 %>

문단 설정을 위한 태그 (5/7) HTML 개요 <hr> 사용 예제

문단 설정을 위한 태그 (6/7) HTML 개요 • <center> … </center> • 태그 안에 포함되는 모든 내용을 브라우저 화면의 중앙으로 정렬 • <nobr> … </nobr> • No line break의 약어 • 웹 브라우저에 의해서 임으로 줄 바꿈이 일어나지 않도록 함

문단 설정을 위한 태그 (7/7) HTML 개요 <nobr> … </nobr>의 예제

특별한 텍스트를 규정하기 위한 태그 (1/2) HTML 개요 • <blockquote> … </blockquote> • 웹 페이지에 인용한 단락을 표시할 때 사용 • 인용할 내용을 좌우에 적당한 여백을 주어 본문과 구분

특별한 텍스트를 규정하기 위한 태그 (2/2) HTML 개요 • <address> … </address> • 웹 페이지 안에서전자우편(e-mail) 주소를 표기할 때 사용

글자의 크기 지정을 위한 태그 (1/4) HTML 개요 • <Hn> … </Hn> • 주로 제목이나 머리글 글자의 크기를 지정할 때 사용 • n =1(큰글자) ∼ 6(작은글자) • 줄 바꿈 기능제공  자동적으로라인 브레이크 적용됨

글자의 크기 지정을 위한 태그 (2/4) HTML 개요 • <basefont size=“n”> • 기본 폰트 크기(기본 값이 3)를 적용 • n=1∼7

글자의 크기 지정을 위한 태그 (3/4) HTML 개요 • <font> … </font>: 폰트를 지정/변경하는 태그 • <font>의 속성 • SIZE = n (예: < font size = 5>) • 일반 HTML 문서의 폰트(글꼴)의 크기를 지정할 때 사용 • N=1∼7(default = 3) • 기본 폰트는 숫자 앞에 + 또는 -를 붙여서 폰트의 크기를 상대적으로 지정도가능 • COLOR = “color” (예: <font color=“red”>) • 폰트(글꼴)의 컬러를 지정하는데 사용 • 색깔 이름을 주거나, 컬러 코드를 줄 수 있음 (컬러 코드는 다음에 설명) • FACE = “face” (예: <font face=“굴림체”>) • 텍스트를 표시하는데 사용할 글꼴을 지정하는데 사용 • “굴림”, “돋움”, “궁서”, “바탕”

글자의 크기 지정을 위한 태그 (4/4) HTML 개요 <font> 이용 예제

문자열의 물리적 스타일 지정 태그 (1/2) HTML 개요 글자를 표현할 때, 글자체를 직접적으로 지정하여 출력 <i> … </i>글자를 이탤릭(italic)체로 지정 <b> … </b>글자를 볼드(bold)체로 지정 <u> … </u>글자를 밑줄(underline)문자로 지정 <tt> … </tt>글자를 통신문(teletype)체로 지정 (타자기체) <sup> … </sup>글자를 위 첨자(superscript)로 지정 <sub> … </sub>글자를 아래 첨자(subscript)로 지정 <s> … </s>글자를 삭제문자(strike through)체로 지정

문자열의 물리적 스타일 지정 태그 (2/2) HTML 개요

문자열의 논리적 스타일 지정 태그 (1/3) HTML 개요 글자로 표현된 문장의 내용에 따라, 글자를 특징지어 구분하여 출력 <em> … </em>문자를 강조(emphasis), 이탤릭체 <strong> … </strong>문자를강하게 표현, 볼드체 <dfn> … </dfn>정의(definition)에 해당, 이탤릭체 <cite> … </cite>책, 논문 등을 인용, 이탤릭체 <samp> … </samp>상태 메시지/예제, 고정폭 일반글씨체 <code> … </code>프로그램 코드, 고정폭 일반글씨체 <kbd> … </kbd>키보드 입력 문구, 고정폭 일반글씨체

문자열의 논리적 스타일 지정 태그 (2/3) HTML 개요 <var> … </var> 변수(variable) 이름을 표현, 이탤릭체 <au> … </au> 저자(author) 이름을 표현, 보통 글자체

문자열의 논리적 스타일 지정 태그 (3/3) HTML 개요

컬러코드와 RGB (1/4) HTML 개요 • 컬러(색깔)를 지정하는 두 가지 방법 • 컬러의 이름을 직접 지정 (예: red, black, yellow) • 컬러 코드를 이용 • RGB (Red, Green, Blue)  빛의 삼원색 • 각 원색은 0(00)~255(FF)의 256단계의 컬러를 제공 • 0은 컬러 요소가 전혀 없으며, 255는 가장 짙은 요소를 나타냄 • 예) 000000: black, FF0000: red, 00FF00: green, 0000FF: blue, FFFFFF: white • 컬러 코드 알아내기 1: 컬러 차트(color chart) 이용 • 컬러 챠트에는 다양한 컬러들의 견본과 각 컬러들의 코드가 나와 있음 • 검색 엔진을 통해 인터넷에서 쉽게 구할 수 있음

컬러코드와 RGB (2/4) HTML 개요 http://www.tbi.univie.ac.at/TBI/hex_color_chart.png

컬러코드와 RGB (3/4) HTML 개요

웹 프로그래밍 및 실습 (Web Programming & Practice) HTML 개요 최 미정 강원대학교 IT 대학 컴퓨터과학전공