HTML and CSS
Download as PPTX, PDF1 like222 views
The document provides an overview of HTML and CSS basics. It covers HTML structure using tags, common HTML elements and tags like headings, paragraphs, lists, and tables. It then covers CSS and how it can be used to style HTML elements either inline, internally, or via an external stylesheet. Key CSS concepts covered include properties for fonts, colors, padding, borders, dimensions. The document concludes with an assignment to build a page using HTML and external CSS.
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