Introduction to HTML
HTML, or HyperText Markup Language, is the standard language for creating web pages and applications. It is a markup language, which means it provides a structure for content on the web and describes what that content looks like.
Basic Structure
A basic HTML document has a specific structure, including doctype, header and body elements. The doctype declares that the page is an HTML document. The header element contains metadata about the document, such as the page title, while the body contains the page content, such as text, images, lists, links, etc.
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
Page content here.
</body>
</html>
Tags and Attributes
HTML tags are the building blocks of an HTML page. They define and describe the content. Each tag begins with a angle bracket (<) and ends with an angle bracket (>). Some examples of HTML tags include <h1> for titles, <p> for paragraphs, <a> for links, etc.
HTML attributes provide additional information about elements. They come in name/value pairs and are always included at the beginning of the tag. For example, the link tag (<a>) often includes the 'href' attribute, which indicates the URL the link leads to.
<a href="https://www.example.com">This is a link to Example.com</a>
Media Queries
Media Queries are a CSS technique that allows you to adapt the layout and design of a web page to different devices and screen sizes. They are a crucial part of responsive design.
A Media Query consists of a media type and one or more expressions that check the conditions of certain device resources. For example, you can use a Media Query to apply a set of CSS styles if the browser window width is less than 600px.
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
In this example, the page background will be light blue if the browser window width is less than 600px.
Media Queries are a powerful tool for creating an optimized user experience for different devices. They allow you to create designs that respond to changes in the user's environment, such as screen size, orientation (portrait or landscape), and screen resolution.
In conclusion, HTML is the foundation of any web page. Understanding the basic structure of HTML, tags and attributes, and how to use Media Queries to create responsive designs is essential to becoming an effective front-end developer.
