HTML HTML5 InfoTech Seminar
HTML5: Overview Added Removed <!DOCTYPE html> 11/14/2017 HTML5: Overview Year Event By 1989 World Wide Web Tim Berners Lee 1991 HTML 1 (basic tags) 1995 HTML 2 (forms support) HTML Working Group 1997 HTML 3 (browser extensions) W3C 1999 HTML 4 (frames) 2000 XHTML (strict HTML) 2008 HTML 5 draft WHATWG 2014 HTML 5 <!DOCTYPE html> <html lang=“kr”> <head> <meta charset=“utf-8”> </head> <body> …. </body> </html> Added Multimedia Support Semantic Elements Form Types/Attributes <audio> <video> <svg> <canvas> <header> <footer> <article> <section> Number Date/Time Range min/max Removed Tags Support <center> <font> <strike> Frames InfoTech Seminar
HTML5: Multimedia Audio Video <audio controls=“controls”> <source src=“song.mp3" type=“audio/mpeg"> <source src=“song.ogg" type=“audio/ogg"> Your browser does not support the video element. </video> Video <video width=“600” controls=“controls”> <source src=“movie.mp4" type=“video/mpeg"> <source src=“movie.ogg" type=“video/ogg"> <track src=“movie_kr.vtt” kind=“subtitles” srclang=“kr” label=“Korean”> <track src=“movie_en.vtt” kind=“subtitles” srclang=“en” label=“English”> Your browser does not support the video element. </video> Example: http://widit.knu.ac.kr/~kiyang/share/html/media.htm InfoTech Seminar
HTML5: Semantic Elements <header> Introductory content for a document/section <nav> Navigation Links <section> Thematic grouping of content (e.g., chapters) <article> Independent, self-contained content (e.g., forum/blog/ post) <aside> Sidebar content <footer> Footer for a document/section <figure> Caption for an image <img src=‘picture.jpg’> <figcaption>Fig. 1 </figcaption> </figure> Why use Semantic Elements? Easier for Web applications (e.g., search engines) to identify content For Semantic Web, Web 3.0 InfoTech Seminar
HTML5: Form Input Types Number Date Time Color Range Email URL Search Numeric input Date Date input date picker Time Time input time picker Color Color input color picker Range Input range slider control Email Email address automatic validation (checks for @) URL URL address automatic validation (checks for http://) Search Search field ‘X’ to clear input Attributes autocomplete Autocomplete based on previous entry min/max Minimum/Maximum input value multiple Enable multiple input values pattern Specify a regular expression for input validation InfoTech Seminar
DHTML Tidbits InfoTech Seminar
iFrame Issues HTML 4: <iframe height=“pixels or %”> ifr1.htm ← height=“100%” without DOCTYPE ifr2.htm ← height=“100%” with DOCTYPE ifr3.htm ← with CSS ifr4.htm ← with CSS & X-UA-Compatible <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> IE=edge: IE to use the highest rendering mode available chrome=1: IE to use chrome frame (chrome inside IE) if available InfoTech Seminar
CSS Tooltip Example CSS HTML /* Position the tooltip: Top */ <style> /* Tooltip container */ .tooltip { position: relative; display: inline-block; } /* Tooltip text */ .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; /* Position the tooltip text - see examples below! */ position: absolute; z-index: 1; } /* Show the tooltip text when you mouse over the tooltip container */ .tooltip:hover .tooltiptext { visibility: visible; } </style> HTML <div class="tooltip">Hover over me <span class="tooltiptext">Tooltip text</span> </div> /* Position the tooltip: Top */ position: absolute; z-index: 1; bottom: 100%; left: 50%; margin-left: -60px; /* Position the tooltip: Left */ position: absolute; z-index: 1; top: -5%; right: 105%; /* Position the tooltip: Right */ position: absolute; z-index: 1; top: -5px; left: 105%; InfoTech Seminar
Javascript: Mouse Events Example // 1. reset to original images // 2. restore onmouseout function function resetImg() { var oImg = [“a0.gif",“a1.gif",“a2.gif"]; for (i=0; i<oImg.length; i++) { var id= "i" + i; var elm=document.getElementById(id); elm.src=oImg[i]; elm.onmouseout = (function(i) { return function () { this.src=oImg[i]; } }(i)); // 1. restore images & onmouseout functions // 2. set target image // 3. disable onmouseout function of target menu function setImg(id,img) { resetImg(); elm.src=img; elm.onmouseout = function() { } HTML <img id='i0' src="a0.gif“ onmouseout="this.src='a0.gif'" onClick="setImg('i0',‘a0b.gif')“ onmouseover="this.src=‘a0b.gif'“> <img id='i1' src="a1.gif“ onmouseout="this.src='a1.gif'" onClick="setImg('i1',‘a1b.gif')“ onmouseover="this.src=‘a1b.gif'“> <img id='i2' src="a2.gif“ onmouseout="this.src='a2.gif'" onClick="setImg('i2',‘a2b.gif')“ onmouseover="this.src=‘a2b.gif'“> Menu 1 Menu 2 Menu 3 Original & MouseOut a0.gif a1.gif a2.gif MouseOver & OnClick a0b.gif a1b.gif a2b.gif InfoTech Seminar
Bootstrap What is Bootstrap? How to use Bootstrap HTML + CSS-based design template + Javascript for easier web development Accommodates Responsive Web Design Automatic adjustment to different devices (e.g. cellphone, tablet, desktop) How to use Bootstrap Use CDN (Content Delivery Network) <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> Download from getbootstrap.com Installed on widit.knu.ac.kr <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="/js/bootstrap.min.js"></script> InfoTech Seminar
Bootstrap Basic Use HTM5 doctype Mobile-device compliance <!DOCTYPE html> Mobile-device compliance <meta name="viewport" content="width=device-width, initial-scale=1"> Containers Example container class → responsive fixed width container container-fluid class → full width container Grids Example Similar to table → 12 columns across Classes → xs (phone), sm (tablet), md (desktop), lg (large desktop) <div class="row"> <div class="col-sm-12">full width column</div> </div> <div class="row"> <div class="col-sm-4">column 1</div> <div class="col-sm-4">column 2</div> <div class="col-sm-4">column 3</div> </div> full width column column 1 column 2 column 3 InfoTech Seminar
Bootstrap Other Examples Container Example Grids Example container class → responsive fixed width container container-fluid class → full width container Grids Example Similar to table → 12 columns across Classes → xs (phone), sm (tablet), md (desktop), lg (large desktop) Images Example Classes → img-rounded, img-circle, img-thumbnail, img-responsive Collapse Example Webpage Template Example InfoTech Seminar