HTML
HTML stands for Hyper Text Markup Language.And HTML is used for creating and structuring web pages using tags and elements."Hypertext" refers to links that connect web pages to one another, either within a single website or between websites.A markup language is a computer language that uses tags or symbols to annotate a document, defining its structure, layout, and appearance, markup languages simply tell software how to display or interpret text.HTML uses "markup" to annotate text, images, and other content for display in a Web browser.
How Does HTML Work?
When you type a website address into your browser, you’re requesting an HTML file from a server. That server sends the file back to your browser, which then reads the HTML code from top to bottom. As it reads, the browser interprets the tags to understand the structure and content of the page.
The Basic Structure of an HTML Document
Every HTML document follows a standard structure to ensure browsers can interpret it correctly. This fundamental layout consists of a few essential tags that set up the page.
`<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>`
<!DOCTYPE html>
This declaration is the very first thing in your HTML document. It’s not an HTML tag itself, but an instruction that tells the browser which version of HTML the page is written in.
Element
The <html> tag is the root element of the page. All other elements are nested inside this tag. It acts as the main container for the entire document.
Element
The <head>element contains meta-information about the webpage—data that isn’t displayed directly on the page itself but is important for the browser and search engines
<title>: The text you place here appears in the browser tab and as the title in search engine results.
<meta>: These tags provide metadata such as the character set, page description, keywords, and viewport settings for responsive design.
<link>: This tag is used to link to external resources, most commonly CSS stylesheets that control the page’s visual appearance.
<script>: This is used to embed or link to JavaScript files, which add interactivity to the site.
Element
The <body> element contains all the visible content of the webpage—the text, images, videos, links, and everything else a user sees and interacts with. All your structural and content-related HTML tags will go inside the
<body>tag.
HTML Tags
Tags are the keywords enclosed in angle brackets (< and >) that define how your content is formatted. Most tags come in pairs:
An opening tag: <h1>
A closing tag: </h1>
CSS
CSS stands for Cascading Style Sheets.CSS is the cornerstone of web design. It transforms plain HTML structures into visually captivating websites. It’s a language that allows web developers and designers to dictate the appearance of HTML elements.Think of HTML as the skeleton of a webpage, providing the basic content blocks. CSS is the stylish outfit, the makeup, and the overall aesthetic that brings the webpage to life. With CSS, you can control
For Example:
We can change colors and fonts,layout,backgrounds,animations and transitions and add interactive touches
CSS makes websites visually appealing and user-friendly. Its key advantage lies in its separation of content (HTML) from presentation (CSS). This means you can update styles across an entire website with minimal changes to the code. This efficiency saves time and makes website maintenance a breeze.
CSS Syntax
Selectors:
Selectors are like special instructions for your browser, telling it which specific HTML elements you want to style. Common types of selectors include Element selectors, Class selectors, and ID selectors.
Properties:
Think of properties as the different features you want to change about your elements – like color, font size, background image, and many more.
Values:
Values are the specific adjustments you want to make to a property. For instance, you could set the color property to red or the font-size property to 16px.
Declarations:
A declaration is a single instruction for your browser. It combines a property with its chosen value, separated by a colon and ending with a semicolon.
Style Rules:
A style rule groups all your declarations for a specific selector within curly brackets {}. It tells the browser which elements to style and how to style them.
Where to Put Your CSS
There are three main places to include CSS in your website:
Inline Styles:
You can add style attributes directly within your HTML tags, but this method is the least recommended as it makes your code harder to maintain.
Internal Stylesheet:
You can place <style> tags within the
section of your HTML document, defining styles specifically for that page.
External Stylesheet:
The most common and organized method is to create a separate file with a .css extension. Then, you link that file to your HTML using a <link> tag within the <head> section.