Introduction to html & css
0 likes387 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