Đang tải... (xem toàn văn)
Lập trình web tĩnh Html dành cho người mới bắt đầu học lập trình web Mình khuyên các bạn nên học đầy đủ từ bài số 1 trở điVà kết hợp với video khi sử dụng slide nhưng do video mình chưa có thời gia up lên khi nào có mình sẽ cho link lên mục này
Session Module 16: HTML5 Elements Module 17: Introduction to CSS3 Session – Objectives (1) Introduction HTML5 New HTML5 Elements Explain the Layout Elements Explain HTML5 Forms Elements Explain the Video and Audio Elements Explain the Canvas Element HTML5 Elements & Introduction to CSS3 – Slide / 53 Session – Objectives (1) Introduction to CSS3 New features in CSS3 o o o o o o Rounded borders Rounded borders Transparency Multi-column support Multi-column support Transformations and animations HTML5 Elements & Introduction to CSS3 – Slide / 53 Evolution of Web Technologies HTML5 Elements & Introduction to CSS3 – Slide / 53 Introduction to HTML5 (1) HTML5 Elements & Introduction to CSS3 – Slide / 53 Introduction to HTML5 (2) HTML5 is the next generation of HTML 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 some HTML5 support HTML5 Elements & Introduction to CSS3 – Slide / 53 New HTML5 Elements The canvas element for drawing The video and audio elements for media playback Better support for local offline storage New content specific elements, like article, footer, header, nav, section New form controls, like calendar, date, time, email, url, search HTML5 Elements & Introduction to CSS3 – Slide / 53 Layout Tags (1) HTML5 Elements & Introduction to CSS3 – Slide / 53 Layout Tags (1) HTML5 Elements & Introduction to CSS3 – Slide / 53 Layout Tags Demo HTML5 Layout HTML5 Elements & Introduction to CSS3 – Slide 10 / 53 CSS3 - Multiple Columns Demo /* CSS */ newspaper { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ -moz-column-gap:20px; /* Firefox */ -webkit-column-gap:20px; /* Safari and Chrome */ } This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text Output HTML5 Elements & Introduction to CSS3 – Slide 39 / 53 CSS3 - Transformations Using CSS3 transform, Web designer can move, scale, turn, spin, and stretch elements 2d transform methods: o o o o translate() rotate() scale() skew() Browser support: HTML5 Elements & Introduction to CSS3 – Slide 40 / 53 The translate() Method Using translate() method, the element moves from its current position, depending on the parameters given for the left (X-axis) and the top (Y-axis) position For example, translate(50px,100px) will move the element 50 pixels from the left, and 100 pixels from the top HTML5 Elements & Introduction to CSS3 – Slide 41 / 53 The translate() Method Demo /* CSS */ div { width:100px;height:75px; background-color:lavender; border:1px solid black; } div#div2 { transform:translate(50px,20px); -moz-transform:translate(50px,20px); -webkit-transform:translate(50px,20px); } Output Hello This is a DIV1 element. Hello This is a DIV2 element. HTML5 Elements & Introduction to CSS3 – Slide 42 / 53 The rotate() Method The rotate() method rotates the element clockwise at a given degree Negative values are allowed and rotates the element counterclockwise For example, rotate(30deg) will rotate the element clockwise 30 degrees HTML5 Elements & Introduction to CSS3 – Slide 43 / 53 The rotate() Method Demo /* CSS */ div { margin:10px; width:100px; height:75px; background:lavender; border:1px solid black; } div#div2 { transform:rotate(30deg); -moz-transform:rotate(30deg); -webkit-transform:rotate(30deg); } Output Hello This is a DIV element. Hello This is a DIV element. HTML5 Elements & Introduction to CSS3 – Slide 44 / 53 The scale() Method The scale() method rotates increases or decreases the size of an element For example, scale(2,4) transforms the width to be twice its original size, and the height times its original size HTML5 Elements & Introduction to CSS3 – Slide 45 / 53 The scale() Method Demo /* CSS */ div { width:100px;height:75px; background-color:lavender; border:1px solid black; } div#div2 { margin:100px; transform:scale(2,3); -moz-transform:scale(2,3); -webkit-transform:scale(2,3); } Hello This is a DIV element. Hello This is a DIV element. Output HTML5 Elements & Introduction to CSS3 – Slide 46 / 53 The skew() Method The skew() method turns the element in a given angle, depending on the parameters given for the horizontal (X-axis) and the vertical (Y-axis) lines For example, skew(30deg,20deg) will turn the element 30 degrees around the X-axis, and 20 degrees around the Y-axis HTML5 Elements & Introduction to CSS3 – Slide 47 / 53 The skew() Method Demo /* CSS */ div { margin:20px; width:100px; height:75px; background-color:lavender; border:1px solid black; } div#div2 { transform:skew(30deg,20deg); -moz-transform:skew(30deg,20deg); -webkit-transform:skew(30deg,20deg); } Output Hello This is a DIV element. Hello This is a DIV element. HTML5 Elements & Introduction to CSS3 – Slide 48 / 53 CSS3 - Animations (1) With CSS3, we can create animations, which can replace animated images, Flash animations, and JavaScripts in many web pages The effect of a CSS Transform is to modify the appearance of an element in the browser by translating, rotating or other means In CSS3, use @keyframes rule to create animation HTML5 Elements & Introduction to CSS3 – Slide 49 / 53 CSS3 - Animations (2) Browser support: HTML5 Elements & Introduction to CSS3 – Slide 50 / 53 CSS3 - Animations Demo /* CSS in Safari and Chrome */ @-webkit-keyframes myfirst { from {background: red;} to {background: yellow;} } #box { width:100px; height:100px; background:red; animation: myfirst 5s; -webkit-animation: myfirst 5s; /* Safari and Chrome */ } Animation HTML5 Elements & Introduction to CSS3 – Slide 51 / 53 Session - Summary (1) HTML5 is the next generation of HTML HTML5 will be the new standard for HTML, XHTML, and the HTML DOM New HTML5 elements: o o o o Semantics (Layout tags, Link Relations…) Web Forms 2.0 (Input Fields) Multimedia (Audio Tag, Video Tag) 2D and 3D drawing (Canvas, WebGL) HTML5 Elements & Introduction to CSS3 – Slide 52 / 53 Session - Summary (2) CSS3 is the latest standard for CSS CSS3 covers the new features in Level of the W3C CSS specification with new visual effects and animation techniques CSS3 features: o o o o o o Rounded corners Drop shadows Transparency Multiple background images Multi-column support Transformations and animations HTML5 Elements & Introduction to CSS3 – Slide 53 / 53 [...].. .HTML5 Forms Elements (1) HTML5 has several new input types for forms These new features allow for better input control and validation New input types: o o o o o o email url number range Date pickers (date, month, week, time, datetime) searchcolor HTML5 Elements & Introduction to CSS3 – Slide 11 / 53 HTML5 Forms Elements (2) Browser Support HTML5 Elements & Introduction to CSS3 – Slide... to CSS3 – Slide 16 / 53 Video Element Attributes HTML5 Elements & Introduction to CSS3 – Slide 17 / 53 HTML 5 Video Format Currently, there are 2 supported video formats for the video element: o o Ogg = Ogg files with Thedora video codec Vorbis audio codecMPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec HTML5 Elements & Introduction to CSS3 – Slide 18 / 53 2D and 3D Drawing HTML5 Elements. .. Output HTML5 Elements & Introduction to CSS3 – Slide 21 / 53 Introduction to CSS3 CSS is used to control the style and layout of Web pages CSS3 is the latest standard for CSS CSS3 covers the new features in Level 3 of the W3C CSS specification, from currently wellsupported visual effects to the most cutting-edge animation techniques HTML5 Elements & Introduction to CSS3 – Slide 22 /... 10px; HTML5 Elements & Introduction to CSS3 – Slide 25 / 53 CSS3- Vendor Specific Extensions(3) Prefix -msmso-moz-o-atsc- Organisation Microsoft Microsoft Office Mozilla Foundation (Gecko-based browsers) Opera Software Advanced Television Standards Committee -wap-webkit-khtml- The WAP Forum Safari (and other WebKit-based browsers) Konqueror browser HTML5 Elements & Introduction to CSS3 – Slide 26 / 53 CSS3. .. CSS3 – Borders (1) With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border - without using a design program, like Photoshop Border properties: o o o border-radius box-shadow border-image HTML5 Elements & Introduction to CSS3 – Slide 27 / 53 CSS3 – Borders (1) Browser support: HTML5 Elements & Introduction to CSS3 – Slide 28 / 53 CSS3 - Rounded Borders /* CSS... Introduction to CSS3 – Slide 31 / 53 CSS3 - Transparency The css3 property opacity allows to change the transparency of an element Example for a CSS transparency of 60%: o opacity: 0.6; HTML5 Elements & Introduction to CSS3 – Slide 53 / 53 CSS3 - Web Fonts Before CSS3, web designers had to use fonts that were already installed on the user's computer With CSS3, web designers can embed fonts using CSS3. .. Browser support: HTML5 Elements & Introduction to CSS3 – Slide 33 / 53 CSS3 - Web Fonts Demo /* CSS */ @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf') } #content { font-family:myFirstFont; } Output With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts HTML5 Elements & Introduction to CSS3 – Slide 34 / 53 CSS3 - Text... corners to elements. Output HTML5 Elements & Introduction to CSS3 – Slide 29 / 53 CSS3 - Box Shadows /* CSS */ #shadowbox { width:300px; height:100px; background-color:yellow; -moz-box-shadow: 10px 10px 5px #888888; /* Firefox */ -webkit-box-shadow: 10px 10px 5px #888888; /* Safari and Chrome */ box-shadow: 10px 10px 5px #888888; } Output HTML5 Elements &... Introduction to CSS3 – Slide 34 / 53 CSS3 - Text Effects CSS3 contains several new text features o o text-shadow word-wrap Browser support: HTML5 Elements & Introduction to CSS3 – Slide 35 / 53 CSS3 Text Shadow Demo /* CSS */ h1 { text-shadow: 15px 5px 5px #FF0000; } Text-shadow effect! Output HTML5 Elements & Introduction to CSS3 – Slide 36 / 53 ... 18 / 53 2D and 3D Drawing HTML5 Elements & Introduction to CSS3 – Slide 19 / 53 Canvas Element The HTML5 canvas element uses JavaScript to draw graphics on a Web page A canvas is a rectangular area, and you control every pixel of it The HTML5 canvas element uses JavaScript to draw graphics on a web page HTML5 Elements & Introduction to CSS3 – Slide 20 / 53 Canvas Element Demo