웹프로그래밍소개 류관희 충북대학교
강사소개 충북대학교소프트웨어학과 khyoo@chungbuk.ac.kr 컴퓨터그래픽스및콘텐츠연구실 http://cgac.chungbuk.ac.kr
강의교재 한번에배우는 HTML5+ 자바스크립트, 지닌마이어 ( 김지원옮김 ), 한빛미디어, 2011
HyperText 1965, Nelson HyperCard 1987 Apple 4
World Wide Web 1990, CERN Tim Berners-Lee Information Management: A Proposal Tim Berners-Lee, CERN March 1989, May 1990 5
Mosaic Web Browser 1993, Marc Andreessen & Eric Bina NCSA, Univ. of Illinois 6
1994, http://www.w3c.org WWW Consortium 7
Web Browsers 1 st Stage Netscape 1994~1997 1.0~4.8 1998 오픈소스발표 v4.0 2000 Mozilla 기반 2007 AOL v7.0 Microsoft 1995 v1.0 ~ 1997 v4.0 1999 v5.0, 2001 v6.0 2008 v7.0, 2009 v8.0, 2010 v9.0 치열한경쟁 비표준태그 크로스브라우징 반독점금지법, 2000 미대법원 8
1996 Opera, Norway 2002 Mozilla (2007 Netscape 9.0) 2004 Firefox (Phoenix, Firebird) 2003 Safari 2008 Chrome Web Browsers 2 nd Stage 9
Development of Web 10
HTML5 History HTML
HTML versions 1991, HTML 1.0 (Berners-Lee) 1995, HTML 2.0 (IETF) 1997, HTML 3.2 (W3C) 1997, HTML 4.0 (W3C) 1999, HTML 4.01 (W3C) 2000, XHTML 1.0 (W3C)??, XHTML 2.0 Xform, Xframe, DOM 대신 XML event, RDFa, 일부요소추가 12
Why new HTML? Fail of XHTML2 Developer Productivity Browser Compatibility Rich Web functions: Flex, Silverlight, AIR Now, Web is a Platform Web on Everything 13
Web Platform is Accelerating 14
Key Developer Challenges 15
WHATWG WHAT Working Group Web Hypertext Application Technology Open Community, 2004 W3C는유료회원에게만개방 Developing Web Form 2.0, Web Application 1.0 16
New Activities on W3C, 2005 Web Application Format WG Web Form 2.0, Widget, etc. Web API WG XMLHttpRequest, DOM3, File Upload, etc. HTML WG created, 2007 600+ invited experts, open mailing-list 17
HTML 의발전역사 18
Standard & Web Development HTML5 Standard Service Model
HTML Events Source: http://channy.creation.net 20
W3C Standards (in draft) http://www.w3.org/tr/html5/ 21
HTML (HyperText Markup Language) <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>html5</title> </head> <body> <header> <h4>html5 Introduction</h4> </header> <div id="container"> <nav> <h3>nav</h3> <a href="http://www.google.com">google</a> <a href="http://www.facebook.com">facebook</a> </nav> <section> <article> <header> <h1>article Header</h1> </header> <p>we have...</p> <p>for example...</p> <footer> <h2>article Footer</h2> </footer> </article> </section> <footer> <h2>footer</h2> </footer> </div> </body> </html> 22
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>html5</title> <link rel="stylesheet" href="html5.css"> </head> <body> body { background-color:#6698ff; /* sky blue */ font-family:geneva,arial,helvetica,sans-serif; margin: 0px auto; max-width:900px; border:solid; border-color:#ffffff; } header { background-color:#f88017; /* dark orange */ display:block; color:#ffffff; /* white */ text-align:center; } CSS (Cascading Style Sheet) header h2 { color:#b1fb17; /* green yellow */ } nav { display:block; width:25%; float:left; } 23
Javascript <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>html5</title> <link rel="stylesheet" href="html5.css"> <script type="text/javascript"> function mhandler() { document.getelementbyid("para1").innerhtml = "Most Americans began this week not knowing who Joseph Kony was. That's not surprising: most Americans begin every week not knowing a lot of things, especially about a part of the world as obscured from their vision as Uganda, the country where Kony and his Lord's Resistance Army (LRA) commenced a brutal insurgency in the 1980s that lingers to this day."; } </script> </head> <body> <section> <p id="para1" onmouseover="mhandler()">we have...</p> <p>for example...</p> <footer> <h2>footer</h2> </footer> </div> </body> </html> 24
HTML + CSS + Javascript (+ Ajax) Document Structure + Contents HTML A fast and concise JavaScript Library jquery CSS Appearance Javascript Functionality Ajax Dynamic User Interfaces 25
A Rough History of Web Standards 91-92 93-94 95-96 97-98 99-00 01-02 03-04 05-06 07-08 09-10 11-12 13-14 HTML 1 HTML 2 HTML 4 XHTML1. 0 HTML 5 CSS 1 CSS 2 Web 2.0 CSS3 JavaScript 1.0/1.1 JavaScript 1.2, DOM JavaScript 1.3, DOM 2 JavaScript 1.5 Ajax, JavaScript 1.6 JavaScript 1.7 JavaScrip t1.8 DOM3 W3C WHATWG 1999 년 HTML4.01 권고, 이후 XHTML 에주력 2004 년워크숍에서 HTML 새로운표준화를바라는브라우저제작사의제안을배척 (XHTML2 에주력 ) 2004 년애플, 모질라, 오페라등브라우저제작사들자체표준화단체결성 (WHATWG) 2007 년 HTML5 제정에협력할것을표명 2008 년 HTML5 가 W3C 의초안으로공개 2009-10 HTML5 사양최종심사청구 2009-07 XHTML2 WG 활동을중지하고 HTML5 표준화작업진행 사양의업데이트를진행중 26
What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. HTML5 is still a work in progress. However, most modern browsers have much HTML5 support. HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML. 27
HTML5 Development Rules The following rules for HTML5 were established: New features should be based on HTML, CSS, DOM, and JavaScript Reduce the need for external plugins (like Flash) More markup to replace scripting HTML5 should be device independent Browser Support HTML5 is not yet an official standard, and no browsers have full HTML5 support. But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions. 28
[HTML 문법기술방법 ] - MIME 타입 : text/html HTML5 퀵스타트 - HTML5 파일확장자 :.html 또는.htm - HTML5 파일의시작부분에 DOCTYPE 선언 : <!DOCTYPE html> - 첫태그인 <html> 태그는다음과같이 : <html lang="en"> : <html lang= kr"> - 문자인코딩지정방법 : <meta charset= UTF-8 > [lang 속성 ] - 문서의언어정보제공. - 주로검색엔진에서활용 - 음성장치 (speech synthesizers) 에서도활용 - 속성값참조사이트 http://ko.wikipedia.org/wiki/iso_639 29
[HTML 문법기술방법 ] - HTML 문법상세몇가지.. HTML5 퀵스타트 1) 종료태그를기술해서는안되는요소 : meta, area, base, br, col, command, embed, hr, img, input, keygen, link, param, source - 틀린예 ) <meta charset= UTF-8 ></meta> - 맞는예 ) <meta charset= UTF-8 > <meta charset= UTF-8 /> 30
[HTML 문법기술방법 ] - HTML 문법상세몇가지.. 2) 속성에관해 HTML5 퀵스타트 - 속성값에인용부호생략가능 - true/false 값을가지는속성속성값생략가능 - 값이 false 인경우는속성지정자체를하지않음. <input id="age" type="number" disabled> <input id=age type=number disabled="true"> <input id=age type=number disabled="disabled"> <input id="age" type="number"> 31
[HTML 문법기술방법 ] - HTML 을이용한마크업예 HTML5 퀵스타트 <!DOCTYPE html> <html lang="kr"> <head> <title> 문서의제목입니다.</title> <meta charset="utf-8"> <style type="text/css">h1 {font-size: 2em;}</style> </head> <body> <h1>html 을이용한마크업예제 </h1> <p> 단락 1</p> <input id="age" type="number"> </body> </html> 32
[HTML5 에서없어진요소 ] HTML5 퀵스타트 - 주로화면표현과관련된요소 - big, blink, marquee, frame관련요소, applet 등 - 후방호환성을위해브라우저에서는제대로표시 - 가능한사용하지않도록주의 [HTML5 문서검증 ] - http://html5.validator.nu [HTML5 Outliner] - http://gsnedders.html5.org/outliner 33
Block element vs. Inline element All HTML elements are naturally displayed in one of the following ways: Block takes up the full width available, with a new line before and after (display:block;) Inline takes up only as much width as it needs, and does not force new lines (display:inline;) Not displayed Some tags, like <meta /> and <style> are not visible (display:none;) 34
Block Element vs. Inline Element Block Elements <div> Your general-purpose box <h1>... <h6> All headings <p> Paragraph <ul>, <ol>, <dl> Lists (unordered, ordered and definition) <li>, <dt>, <dd> List items, definition list terms, and definition list definitions <table> Tables <pre> Indicates a block of preformatted code <form> An input form <blockquote> Like an indented paragraph, meant for quoting passages of text 35
Block Element vs. Inline Element Inline Elements <span> Your all-purpose inline element <a> Anchor, used for links (and also to mark specific targets on a page for direct linking) HTML5 부터다른블록요소를감쌀수있게되었음. <strong> Used to make your content strong, displayed as bold in most browsers, replaces the narrower 시각적으로두꺼운글씨 + 의미적으로도강조 <bold> or <b> bold tag 시각적으로두꺼운글씨 <em> Adds emphasis, but less strong than <strong>. Usually displayed as italic text, and replaces the old <i> (italic) tag 36
Block Element vs. Inline Element Inline Elements <img /> Image alt attribute should be specified. <img src="p.gif" /> <img src="p.gif" alt="p" /> <br> The line-break is an odd case, as it's an inline element that forces a new line. However, as the text carries on the next line, it's not a block-level element. <input> Form input fields like and <abbr> Indicates an abbr. <acronym> Working much like the abbreviation 37