Download presentation
Presentation is loading. Please wait.
1
HTML HTML5 InfoTech Seminar
2
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
3
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: InfoTech Seminar
4
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
5
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 address automatic validation (checks URL URL address automatic validation (checks for 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
6
DHTML Tidbits InfoTech Seminar
7
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
8
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
9
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
10
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=" <!-- jQuery library --> <script src=" <!-- Latest compiled JavaScript --> <script src=" 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=" <!-- Latest compiled JavaScript --> <script src="/js/bootstrap.min.js"></script> InfoTech Seminar
11
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
12
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
Similar presentations
