ol - BIKE

Report
HTML 기초와 Elements
웹프로그래밍 및 웹서버구축
제2강
목차
•
•
•
•
HTML 기초
HTML Elements
HTML5
HTML5 태그 연습
HTML
•
•
•
•
Hypertext Markup Language
WWW에서 hypertext를 배포하기 위해 개발
SGML을 이용하여 개발
ASCII “Markup Language”
HTML
• 웹 페이지에 표시되는 정보의 내용과 구조를 기술
– 화면에 보이는 것과 동일하지는 않음
• <, >로 둘러싸임
• 각 태그(tag)의 이름을 element라 함
– 구문: <element> 내용 </element>
– 예: <p>이것은 문단입니다.</p>
• HTML에서 대부분의 공백문자(whitespace)는 무시됨
Mark Up
• 문서에 글과 그림, 각종 서식들이 어떻게
표현되고 여백과 들여쓰기 등의 배치를 정
의하고 어떤 모양이 될지를 정의하는 것
HTML과 XHTML
HTML
XHTML
• 느슨한 구문규칙
• 조잡한 문서가 되기 쉽다.
• 대부분의 웹브라우저와 호
환된다.
• 구문이 보다 엄격함
• 표준형식으로 명료한 문서
가됨
• 조그마한 구문오류도 허용
되지 않는다.
(X)HTML편집
• HTML 문서 생성
– 텍스트 편집기 (Textpad, Emacs, Crimson Editor)
– 소스코드 편집기 (e.g. Notepad++, WebTide)
– Authoring tools (e.g. 나모웹에디터, MS Expression Web,
Adobe Dreamwaver)
• 확장자: .html
• 홈페이지의 파일이름은 index.html이어야 함
– http://bike.snu.ac.kr/~senator
HTML 문서의 구조
• HTML 문서는 3부분으로 구성됨
1. HTML version 정보, e.g.:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "h
ttp://www.w3.org/TR/html4/strict.dtd">
HTML5의 경우: <!DOCTYPE html>
2. header section
– <head> tag
– <title>tag 문서의 제목
• 브라우전의 title바에 표시
3. Body section
– 문서의 실제 내용 수록
– <body> tag
HTML 기본구조와 태그
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
HTML 기본구조와 태그
Head
Body
Head Tag
• <title>
– 홈페이지를 대표할 수 있는 문서 제목을 지정한다.
• <meta>
– 다양한 속성을 가지고 있어 다양한 역할을 한다.
• <script>
– 홈페이지를 역동적으로 변화시킨다.
• <style>
– 문서 전체의 레이아웃을 결정하여 문서에 통일감을
준다.
TEXT MARK UP
기초 구문
• Elements는 태그(tags)로 규정됨
• Tag 형식:
– 열기 tag: <name>
– 닫기 tag: </name>
• 태그 안에 내용을 포함
– <p> Hello </p>
• 모든 태그가 내용을 갖는 것은 아니다
– <hr>, <br>
기초 구문
• 컨테이너와 내용을 합쳐 element라 함.
• 태그가 속성(attribute)를 가지는 경우 열기 태그 오른
쪽에 위치
– <img src = “c10.jpg” />
• 주석: <!-- … -->
• 브라우저는 주석, 모르는 태그, 개행(<br>), 공백
(whitespace), 탭(tab)을 무시함
기초 Text Markup
• Paragraph Elements: <p>
– 텍스트는 일반적으로 paragraph element에 들어감
<p>
안녕하세요?
</p>
– 만들어봅시다.
기초 Text Markup
• Line breaks: <br>
• Horizontal rules: <hr>
• Headings
– <h1> 부터 <h6>까지
• 1, 2, 3 은 기본 글자크기보다 큰 폰트크기를 사용
• 4 기본 크기
• 5, 6 작은 폰트 크기
• 만들어봅시다.
기초 Text Markup
• Blockquotes: <blockquote>
– 텍스트 블록을 정상적인 텍스트와 떼어 놓은 것
– 브라우저는 통상 들여쓰기를 하거나 기울여쯤
http://translate.googleusercontent.com/translate_c?hl=ko&sl=en&
tl=ko&u=http://www.w3schools.com/html5/tag_blockquote.asp&
rurl=translate.google.co.kr&twu=1&anno=2&usg=ALkJrhjH7o0_Rx
CzpjfyESAuXwrcYi-sCw
• Font Styles and Sizes (can be nested)
– Boldface: <b>
– Italics: <i>
– Smaller: <small>
기초 Text Markup
Example: The <big> sleet <big> in <big> <i>
Crete </i><br /> lies </big> completely
</big> in </big> the street
Display: The sleet in Crete
lies completely in the street
• Subscripts: <sub> Superscripts: <sup>
Example: x<sub>2</sub><sup>3</sup>
Display: x23
기초 Text Markup
• Character Entities
HTML5에서
만 이용되는
글자개체
Images
• GIF (Graphic Interchange Format)
– 8-bit color (256 가지색상)
• JPEG (Joint Photographic Experts Group)
– 24-bit colour (1600만가지 생상)
• Portable Network Graphics (PNG)
– 인터넷용
Images
• <img> 태그를 이용하여 문서에 삽입
• The alt attribute is required by HTML
– (in HTML5 can be omitted when textual desc. not available )
– Non-graphical browsers
– Browsers with images turned off
<img src = “logo.jpg"
alt = “Official HTML5 logo" />
• <img> t태그는 다른 선색 옵션을 가질 수 있음
width and height
• http://www.w3.org/html/logo/
Web에서 링크걸기
Source
Anchor
Document 1
Link
(reference)
Destination
Here is a link to document 2
Document 2
This is document 2.
Hypertext Links
• Hypertext: Web의 핵심!
• 링크는 <a> (anchor 태그)의 속성 href (hypertext
reference) 으로 지정한다.
• <a>의 내용은 문서 내의 visual link임
<a href=“target.html”>This is a link</a>
• 절대주소보다 상대주소가 관리하기 쉬움
문서내의 Targets
• target이 문서의 처음에 있지않으면 target 지점이 표
시되어야 함
• Target 표지(labels)는 여러가지 id 속성을 갖는 태그로
지정할 수 있음
<h1 id = "baskets"> Baskets </h1>
• id 에 연결은 (#)뒤에 두어야 함
– Target이 같은 문서에 있는 경우
<a href = "#baskets"> Baskets </a>
– Target이 다른 문서에 있는 경우
<a href = "myAd.html#baskets”> Baskets </a>
Image Hyperlinks
• 링크는 images를 링크로 할 수 있다.
<a href = "c210data.html“>
<img src = "smallplane.jpg"
alt = "Small picture of an airplane " >
Info on C210 </a>
Unordered Lists
• <ul> 태그를 사용
• 내용은 <li> 태그를 사용
<h3> Some Common Single-Engine Aircraft </h3>
<ul>
<li> Cessna Skyhawk </li>
<li> Beechcraft Bonanza </li>
<li> Piper Cherokee </li>
</ul>
Ordered Lists
• <ol> 태그를 사용
• 순차적으로 표시
<h3> Cessna 210 Engine Starting Instructions </h3>
<ol>
<li> Set mixture to rich </li>
<li> Set propeller to high RPM </li>
<li> Set ignition switch to "BOTH" </li>
<li> Set auxiliary fuel pump switch to
"LOW PRIME" </li>
<li> When fuel pressure reaches 2 to 2.5
PSI, push starter button </li>
</ol>
Nested Lists
• 모든 형태의 list는 모든 형태의 list에 포함될 수 있음
<ol>
<li> Single-Engine Aircraft
<ol>
<li> Tail wheel </li>
<li> Tricycle </li>
</ol> <br>
</li>
<li> Dual-Engine Aircraft
<ol>
<li> Wing-mounted engines </li>
<li> Push-pull fuselage-mounted engines </li>
</ol>
</li>
</ol>
정의(Definition) Lists
• <dl> 태그를 사용
• 정의되는 용어는 <dt> 태그를 사용
• 정의 그 자체는 <dd> 태그를 사용
<dl>
<dt>
<dd>
<dt>
<dd>
</dl>
152 </dt>
Two-place trainer </dd>
172 </dt>
Smaller four-place airplane </dd
Validation
• W3C HTML Validation Service
– http://validator.w3.org/
HTML5
HTML5 표준화 일정
• 2007년 5월 HTML5와 Web Forums 2.0 스펙
채택
• 2007년 11월 HTML5 디자인 원칙 작업 초안
• 2010년 1월 HTML5 Last Call 작업 초안
• 2010년 12월 HTML5 후보 권고안
(Recommendation)
• 2012년 1월 HTML5 제안 권고안
• 2012년 3월 HTML5 정식 권고안.
구조적 요소
Tags
태그
<!--...-->
<! DOCTYPE>
<a>
<abbr>
<address>
<area>
<article>
<aside>
<audio>
<b>
<base>
<bdo>
<blockquote>
<body>
<br>
<button>
<canvas>새
<caption>
<cite>
<code>
<col>
<colgroup>
<command>새
<datalist>새
설명
주석 정의
문서의 종류
하이퍼 링크
약어
주소
이미지 맵 안의 영역
기사
페이지의 주용 내용 이외의 내용들
소리 콘텐츠
굵은 글자
페이지의 모든 링크에 대한 기본 URL
텍스트 디스플레이의 방향
긴 인용
Body 요소
줄바꿈 하나 삽입
푸시 버튼
그래픽
테이블 캡션
인용
컴퓨터 코드 텍스트
테이블 컬럼의 속성
테이블 컬럼의 그룹
명령 단추
드롭 다운 목록
<dd>
<del>
<details>새
<dfn>
<div>
<dl>
<dt>
<em> 사용
<embed>새
<fieldset>
<figcaption>새
<figure>새
<footer>새
<form>
<h1>부터 <h6>
<head>
<header>새
<hgroup>새
<hr>
<html>
<I>
<iframe>
<img>
<input>
<ins>
정의의 대상 기술
텍스트 삭제
요소의 세부 정보
용어 정의
문서의 섹션
정의 목록
정의대상 용어
텍스트를 강조
외부 인터랙티브 콘텐츠 또는 플러그인
fieldset, 양식구성요소를 묶는 역할
그림 요소의 캡션
미디어 컨텐츠의 그룹 및 그 캡션
섹션 또는 페이지의 바닥글
양식
헤더1-6
문서에 대한 정보
섹션 또는 페이지에 대한 헤더
문서 내의 섹션에 대한 정보
수평 규칙
HTML 문서
기울임꼴 텍스트
인라인 하위 창 (프레임)
이미지
입력 필드
텍스트 삽입
Tags
<keygen>새
<kbd>
<label>
<legend>
<li>
<link>
<map>
<mark>새
<menu>
<meta>
<meter>새
<nav>새
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>새
<p>
<param>
<pre>
<progress>새
<q>
<rp>새
<rt>새
양식에서 생성된 키
키보드 텍스트
양식 컨트롤의 레이블
fieldset에 있는 제목
목록의 구성 항목
리소스 참조
이미지 맵
마크된 텍스트
메뉴 목록
메타 정보
미리 정의된 범위 내에서 척도
탐색 링크
noscript 섹션
내장된 개체
주문한 목록
옵션 그룹
드롭 다운 목록에 있는 옵션
출력의 몇 가지 유형
단락
개체에 대한 정의 매개 변수
정의 텍스트 서식이 설정된
어떤 종류의 작업의 정의 진행
정의 짧은 인용
루비 주석에서 사용한 루비 요소를 지원하지 해
당 브라우저를 표시할지 정의합니다.
정의의 설명 주석을 루비 있습니다.
<ruby>새
<s>
<samp>
<script>
<section>새
<select>
<small>
<source>새
<span>
<strong>
<style>
<sub>
<summary>새
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time>새
<title>
<tr>
<ul>
<var>
<video>새
<wbr>새
정의의 루비 주석
더 이상 올바른 정의 텍스트
정의 예제 컴퓨터 코드
정의 스크립트
섹션
정의 선택리스트
정의 작은 텍스트
정의 미디어 리소스
문서 내의 섹션
강한 텍스트
스타일 정의
아래첨자 텍스트
"detail"요소의 헤더
위첨자 텍스트
표
표의 body 정의
표의 셀
텍스트 영역
테이블 바닥글
테이블 헤더
테이블 헤더
날짜 / 시간
문서 제목
표의 행
무순서 목록
변수
비디오
가능한 라인 - line-break
태그연습
• http://html5.easyspub.co.kr/xe/ch2
질의응답

similar documents