HTML and CSS
•Download as PPTX, PDF•
1 like•120 views
Explaination of HTML and CSS for fresher entering candidates in IT industry
Recommended
More Related Content
What's hot
What's hot (20)
Similar to HTML and CSS
Similar to HTML and CSS (20)
Recently uploaded
Recently uploaded (20)
HTML and CSS
- 1. www.treeni.com Html, Css - Ketan Ghumatkar
- 2. HTML Basics ● Hypertext markup language ● Browser language ● Building blocks using tags ● Structure of website
- 3. HTML Basic Layout <!DOCTYPE html> <html> <head> </head> <body> </body> </html>
- 4. HTML Advance Layout <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>
- 5. HTML Advance Layout ● <header> - Defines a header for a document or a section ● <nav> - Defines a container for navigation links ● <section> - Defines a section in a document ● <article> - Defines an independent self- contained article ● <aside> - Defines content aside from the content (like a sidebar) ● <footer> - Defines a footer for a document or a section ● <details> - Defines additional details ● <summary> - Defines a heading for the <details> element
- 6. HTML TAGs - Elements and Attributes Examples - <a href="https://www.w3schools.com">This is a link</a> <img src="img_girl.jpg" width="500" height="600">
- 7. HTML - Important tags Headings <h1>- </h1> <h2>- </h2> <h3>- </h3> <h4>- </h4> <h5>- </h5> <h6>- </h6> Paragraphs <p>-</p> Content holders <div>-</div> <span>-</span> Listings <ul> <ol> <li>A</li> <li>A</li> <li>B</li> <li>B</li> </ul> </ol> Table <table> <th> <td></td> <td></td> </th> <tr> <td></td> </tr> </table>
- 8. HTML - styling Basic styling with tags ● <b> - Bold text ● <strong> - Important text ● <i> - Italic text ● <em> - Emphasized text ● <mark> - Marked text ● <small> - Small text ● <del> - Deleted text ● <ins> - Inserted text ● <sub> - Subscript text ● <sup> - Superscript text Element types - Block - inline
- 9. CSS - Basic ● Cascading style sheet ● How element should look like ● Color, size, shape, position ● CSS can be added to HTML elements in 3 ways ● Inline - by using the style attribute in HTML elements ● Internal - by using a <style> element in the <head> section ● External - by using an external CSS file
- 10. CSS - Inline Styling ● Mostly used for single element to style ● Uses the style attribute of html element ● Example - <h1 style="color:blue;">This is a Blue Heading</h1>
- 11. CSS - Internal Styling ● Used to define style for single html page ● Is defined in the <head> section within <style> tag <!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
- 12. CSS - External Styling ● Used defined style for multiple html pages ● You can change look of entire website with single file <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> body { background-color: powderblue; } h1 { color: blue; } p { color: red; }
- 13. CSS - Properties font: 15px arial, sans-serif; background: lightblue url("img_tree.gif") no-repeat fixed center; padding: 10px; padding: 10px 2px; padding: 5px 10px 15px 20px; border: 5px solid red; width: 500px; width: 50%; Try different properties in chrome debugger Reference: https://www.w3schools.com/cssref/default.asp
- 14. CSS - concept Padding and Margin Float: left, right, none; Position: static, relative, absolute, fixed
- 15. Assignment Overview Write HTML and CSS to create below page Folder structure - Assignment - index.html - css - style.css
- 17. Thank You