Intro to HTML, CSS & JS - Internship Presentation Week-3
0 likes1,829 views
The document provides an agenda and details for a weekly presentation during a training program on information technology. The presentation covers HTML, CSS, and JavaScript. It defines HTML and the differences between HTML4 and HTML5. It describes the HTML5 structure and semantic elements. It also defines CSS and why it is used, CSS selectors and syntax, the box model, CSS units, and different types of JavaScript functions.
Intro to HTML, CSS & JS - Internship Presentation Week-3
- 1. WEEKLY PRESENTATION DURING TRAINING PROGRAM - Devang Garach [email protected] WEEK-3 Information Technology
- 2. AGENDA What is HTML? Difference between HTML4 & HTML5 HTML5 Structure What is CSS and Why it is used for? CSS Selector & Syntax Box Model CSS Units JavaScript (types of functions) Information Technology DURING TRAINING PROGRAM - WEEKLY PRESENTATION
- 3. What is HTML? HTML Stands for Hyper-Text Markup Language Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. Information Technology DURING TRAINING PROGRAM - WEEKLY PRESENTATION
- 4. Difference between HTML4 & HTML5 Information Technology HTML4 HTML5 HTML4 released in 1997 (source wikipedia.com) HTML5 released in 2014 (source wikipedia.com) Elements like nav, header, footer not their New semantic element for web structure like nav, header, footer etc. It didn’t support audio and video without the use of flash player support. It supports audio and video controls with the use of <audio> and <video> tags. Vector graphics is possible in HTML with the help of various technologies such as VML, Silver-light, Flash, etc. Vector graphics is additionally an integral a part of HTML5 like SVG and canvas. DURING TRAINING PROGRAM - WEEKLY PRESENTATION
- 5. Difference between HTML4 & HTML5 (Continue...) Information Technology HTML4 HTML5 It does not allow drag and drop effects. It allows drag and drop effects. Doctype declaration is too long and complicated. Doctype declaration is quite simple and easy. Older version of HTML are less mobile-friendly. HTML5 language is more mobile-friendly. DURING TRAINING PROGRAM - WEEKLY PRESENTATION
- 6. Difference between HTML4 & HTML5 (Continue...) Information Technology HTML4 HTML5 Removed tags in HTML5 which are n HTML4 <acronym>,<applet>,<basefont>,<big>, <center>,<font>,<frame>,<frameset>, <noframe>,<strike>, ... New Tags <article>,<aside>,<audio>,<bdl>, <canvas>,<datalist>,<details>, <figcaption>,<footer>,<header>,<main>, <progress>,<section>,<summary>, <time>, <video>, ... DURING TRAINING PROGRAM - WEEKLY PRESENTATION
- 7. HTML5 Structure <!DOCTYPE HTML> <html lang=”en”> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Your Website</title> </head> <body> <header> <nav> <ul> <li>Your menu</li> </ul> </nav> </header> <section> <article> <header> <h2>Article title</h2> <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> </header> <p>Content</p> </article> </section> <aside> <h2>About section</h2> <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </aside> <footer> <p>Copyright 2009 Your name</p> </footer> </body> </html> Information Technology DURING TRAINING PROGRAM - WEEKLY PRESENTATION
- 8. What is CSS and Why it is used for? CSS Stands for Cascading Style Sheets It used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. CSS describes how HTML elements are to be displayed on screen, paper, or in other media CSS saves a lot of work. It can control the layout of multiple web pages all at once Information Technology DURING TRAINING PROGRAM - WEEKLY PRESENTATION
- 9. CSS Selector & Syntax CSS selectors are used to "find" (or select) the HTML elements you want to style. We can divide CSS selectors into five categories: - Simple selectors (select elements based on name, id, class) - Combinator selectors (select elements based on a specific relationship between them) - Pseudo-class selectors (select elements based on a certain state) - Pseudo-elements selectors (select and style a part of an element) - Attribute selectors (select elements based on an attribute or attribute value) Information Technology DURING TRAINING PROGRAM - WEEKLY PRESENTATION
- 10. CSS Selector & Syntax (Continue..) CSS Syntax: Selector{ Property : Value; … ... } Information Technology (Source: w3schools.com) DURING TRAINING PROGRAM - WEEKLY PRESENTATION
- 11. CSS Selector & Syntax (Continue..) CSS Combinators: There are four different combinators in CSS: - descendant selector (space) - child selector (>) - adjacent sibling selector (+) - general sibling selector (~) Information Technology DURING TRAINING PROGRAM - WEEKLY PRESENTATION
- 12. Box Model The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model: Information Technology (Source: w3schools.com) DURING TRAINING PROGRAM - WEEKLY PRESENTATION
- 13. CSS Units CSS has several different units for expressing a length. Many CSS properties take "length" values, such as width, margin, padding, font-size, etc. Length is a number followed by a length unit, such as 10px, 2em, etc. There are two types of length units, Absolute Length & Relative Length Information Technology DURING TRAINING PROGRAM - WEEKLY PRESENTATION
- 14. CSS Units (Continue...) Absolute Length The absolute length units are fixed and a length expressed in any of these will appear as exactly that size. Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout. Information Technology cm (centimeters) mm (millimeters) px (pixels) 1px = 1/96th of 1in in (inches) 1in = 96px = 2.54cm pt (points) 1pt = 1/72 of 1in pc (picas) 1pc = 12 pt DURING TRAINING PROGRAM - WEEKLY PRESENTATION
- 15. CSS Units (Continue...) Relative Length Relative length units specify a length relative to another length property. Relative length units scales better between different rendering mediums. Information Technology em rem vm vh % Relative to the font-size of the element (2em means 2 times the size of the current font) Relative to font-size of the root element Relative to 1% of the width of the viewport* Relative to 1% of the height of the viewport* Relative to the parent element DURING TRAINING PROGRAM - WEEKLY PRESENTATION
- 16. JavaScript JavaScript is a lightweight interpreted programming language. The web browser receives the JavaScript code in its original text form and runs the script from that. Many types of function declaration in JavaScript: Regular Function | Anonymous Function | IIFE | Callback Function | Arrow Function Information Technology DURING TRAINING PROGRAM - WEEKLY PRESENTATION
- 17. JavaScript (Continue...) Regular Functions: function sum(a, b){ return a + b; } sum(5, 6); Information Technology DURING TRAINING PROGRAM - WEEKLY PRESENTATION Anonymous Functions: const myFunctionVar = function(){ return typeof variable; }; myFunctionVar; IIFE Immediately-Invoked Function Expression (function(){ statements; })();
- 18. JavaScript (Continue...) Arrow Functions: const absValue = (number) => { if (number < 0){ return -number; } return number; } Information Technology DURING TRAINING PROGRAM - WEEKLY PRESENTATION Callback Functions: function myDisplayer(some){ console.log(some); } function myCalc(n1, n2,myCallback){ let sum = n1 + n2; myCallback(sum); } myCalc(5, 5, myDisplayer);
- 19. Information Technology Thank You. - Devang Garach [email protected]