.png)
.png)
Html Css
Html Css
HTML (HyperText Markup Language): HTML is the standard markup language used to create the structure and content of web pages. It consists of a series of elements, each represented by tags, that define the structure and content of a page. HTML elements can include headings, paragraphs, lists, links, images, forms, and more.
Here is a simple example of HTML code:
htmlCopy code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First Web Page</title> </head> <body> <header> <h1>Welcome to My Website</h1> </header> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> <section id="home"> <h2>Home Section</h2> <p>This is the home section of my website.</p> </section> <section id="about"> <h2>About Section</h2> <p>Learn more about us here.</p> </section> <section id="contact"> <h2>Contact Section</h2> <p>Contact us at: example@email.com</p> </section> <footer> <p>© 2024 My Website. All rights reserved.</p> </footer> </body> </html>
In this example:
- <html> is the root element that wraps the entire HTML document.
- <head> contains meta-information about the document, such as the character set, viewport settings, and the document title.
- <body> contains the main content of the document, including headers, navigation, sections, and a footer.
- Various elements like <h1>, <p>, <ul>, <li>, <a>, and <section> are used to structure and organize content.
CSS (Cascading Style Sheets): CSS is a stylesheet language used to describe the presentation and styling of HTML documents. It allows developers to control the layout, colors, fonts, and other visual aspects of a website. CSS uses selectors to target HTML elements and apply styles to them.
Here is a simple example of CSS code:
cssCopy code
/* Styles for the body element */ body { font-family: Arial, sans-serif; background-color: #f4f4f4; color: #333; margin: 0; padding: 0; } /* Styles for the header element */ header { background-color: #007bff; color: #fff; text-align: center; padding: 1em; } /* Styles for the navigation menu */ nav { background-color: #333; } nav ul { list-style-type: none; margin: 0; padding: 0; } nav li { display: inline; margin-right: 10px; } nav a { text-decoration: none; color: #fff; } /* Styles for sections */ section { padding: 20px; } /* Styles for the footer element */ footer { background-color: #333; color: #fff; text-align: center; padding: 1em; position: fixed; bottom: 0; width: 100%; }
In this CSS example:
- Selectors like body, header, nav, and footer are used to target specific HTML elements.
- Various properties like background-color, color, font-family, margin, and padding are used to style the elements.
- The position and bottom properties are used to create a fixed footer at the bottom of the page.
HTML and CSS work together to create visually appealing and structured web pages. HTML provides the content and structure, while CSS adds styling and presentation to make the content visually engaging for users.