Introduction to html & css
0 likesā¢390 views
This document covers topics related to frontend web development including HTML5, CSS3, JavaScript, and jQuery. It discusses different types of web and mobile applications, as well as technologies and frameworks. The document then goes into detail about HTML document structure, various HTML elements like headings, paragraphs, links and images, using CSS for styling, CSS selectors, block and inline elements, and the CSS box model. It also covers HTML links, lists, and input elements.
Introduction to html & css
- 1. Frontend Sessions HTML5, CSS3, Javascript and Jquery by: Seshu Puvvada 1
- 2. What ? ļµ what is web / static / dynamic application ? ļµ what is mobile web / native / hybrid application ? 2 By: Seshu Puvvada
- 3. What? ļµ What is HTML ? ļµ What is CSS ? ļµ What is Javascript ? ļµ What is HTTP? 3 By: Seshu Puvvada
- 4. Technologies and Frameworks 4 By: Seshu Puvvada
- 5. IDE ? ļµ Eclipse ļµ Notepad++ ļµ Visual studio ļµ Webstrom ļµ Atom etcā¦ 5 By: Seshu Puvvada
- 6. HTML Document Structure ļµ Parent and child structure ļµ doctype ā declaration of standards compliance ļµ html ā Root element ļµ head ā Document metadata ļµ Used by browsers and search engines ļµ body ā Document data ļµ Displayed to the users by the client browser 6 <!DOCTYPE html> <html> <head> <title>Welcome</title> </head> <body> <h1>Welcome to HTML</h1> </body> </html> By: Seshu Puvvada
- 7. <head> metadata ā¢Title of the document<title> ā¢Includes metadata of the application such as keywords, description etc..<meta> ā¢Includes script<script> ā¢Define styles for body elements<style> ā¢Directive indicating related documents<link> ā¢Define base address for all relative links on the page<base> 7 By: Seshu Puvvada
- 8. Basic HTML Elements ļµ Headings h1 to h6 ļµ Paragraph (p, pre) ļµ Links(a) ļµ Images(img) ļµ Attributes ā provides additional information about an element ļµ Title ļµ Href ļµ Src ļµ Width, height ļµ Alt etcā¦ 8 By: Seshu Puvvada
- 9. Text elements ļµ <b> - bold ļµ <strong> - strong ļµ <i> - italic ļµ <em> - emphasized ļµ <small> - small ļµ <mark> - marked ļµ <del> - deleted ļµ <sub> - subscript ļµ <sup> - superscript 9 By: Seshu Puvvada
- 10. HTML Style ļµ What is Style ļµ Inline styling ļµ <p style="color:red">This is a paragraph.</p> ļµ Internal styling - Using Style tag ļµ <style> p { color: red; } </style> ļµ External Style sheet ļµ mystyle.css ļµ Basic styling properties ļµ background-color, color, font-size, font-family, text-align, border, padding, margin etcā¦ 10 By: Seshu Puvvada
- 11. CSS Selectors ļµ Id selector ļµ #tagid{ css properties } ļµ Element selector ļµ h1{ css properties } ļµ Class selector ļµ .myheader{ css properties } 11 By: Seshu Puvvada
- 12. Block Vs Inline ļµ Block elements ļµ Container elements for grouping ļµ May contain other block or inline elements ļµ New lines appear ļµ Can have width and height, it takes whole page width ļµ Div, h1, p, form etcā¦ ļµ Inline elements ļµ Container for text and other inline elements ļµ No new line before or after ļµ Has no width and height ļµ span, a, img etc.. 12 By: Seshu Puvvada
- 13. CSS Box Model 13 By: Seshu Puvvada
- 14. HTML Links ļµ Anchor Element ļµ <a href="http://www.syntelinc.com">Welcome to syntel</a> ļµ What is target -- _self and _blank ļµ <a href="http://www.syntelinc.com" target="_blank">Welcome to syntel</a> ļµ Image with link ļµ <a href="http://www.syntelinc.com" target="_blankā> <img src="welcome.jpg" /> </a> ļµ Bookmarking Section ļµ <a href="#Zaheer">Zaheer Khan Open to Bowling Coach Role in Indian Team </a> 14 By: Seshu Puvvada
- 15. HTML List ļµ Unordered list ļµ <ul> <li>item name</li> </ul> ļµ list-style-type:square, circle, disc ļµ Ordered list ļµ <ol> <li>item name</li> </ol> ļµ type = ā1ā, A, a, I, i ļµ List item 15 By: Seshu Puvvada
- 16. HTML Input elements ā¢<input type="text" name="username"> Text ā¢<input type="password" name="psw"> Password ā¢<input type="submit" value="Submit"> Submit ā¢<input type="radio" name=āaccept" value=āyes" checked> Radio ā¢<input type="checkbox" name=ācountry" value=āIndia"> Checkbox 16 By: Seshu Puvvada