HTML 기초와 Elements

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. 나모웹에디터, MSExpression Web, Adobe Dreamwaver) • 확장자: .html • 홈페이지의 파일이름은 index.html이어야 함 • http://bike.snu.ac.kr/~senator

HTML 문서의 구조 • HTML 문서는 3부분으로 구성됨 • HTML version 정보, e.g.: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML5의 경우: <!DOCTYPE html> • header section • <head> tag • <title>tag 문서의 제목 • 브라우전의title바에 표시 • 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)를 가지는 경우 열기 태그 오른쪽에 위치 • <imgsrc = “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_RxCzpjfyESAuXwrcYi-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: ThesleetinCrete liescompletelyinthe 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 <imgsrc = “logo.jpg" alt = “Official HTML5 logo" /> • <img> t태그는 다른 선색 옵션을 가질 수 있음width and height • http://www.w3.org/html/logo/

Web에서 링크걸기 Source Anchor Link (reference) Document 1 Here is a link to document 2 Destination 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“> <imgsrc = "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> 152 </dt> <dd> Two-place trainer </dd> <dt> 172 </dt> <dd> Smaller four-place airplane </dd </dl>

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

태그연습 • http://html5.easyspub.co.kr/xe/ch2

질의응답

HTML 기초와 Elements