Transcript ol - BIKE
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 질의응답