Downloaded 13 times
Uploaded bysesharao puvvada
Introduction to html & css
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.
More Related Content
Similar to Introduction to html & css
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
Introduction to html & css
- 1. Frontend Sessions HTML5, CSS3,Javascript and Jquery by: Seshu Puvvada 1
- 2. What ? whatis web / static / dynamic application ? what is mobile web / native / hybrid application ? 2 By: Seshu Puvvada
- 3. What? What isHTML ? 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 ofthe 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 Whatis 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 Idselector #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 AnchorElement <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 Unorderedlist <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 •<inputtype="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