Day 003: HTML & CSS

Starting out, while PHP is a great server side programming language, there is also need for client side technology to display and style content. HTML or the Hypertext Markup Language and CSS or Cascading Stylesheet fulfill this niche.

Thinking of it as—HTML is WHAT is to be displayed while CSS is HOW it is displayed.

HTML Basics

HTML is a standard markup language for the web. It makes up the structure and content to be presented to the user. It uses a system of tags, attributes and hyperlinks. Multiple pages can be linked together using hyperlinks.

TLDR—

What HTML Does:

Defines the page structure (headings, paragraphs, lists, etc.)
Embeds images, videos, and other media
Links pages together with hyperlinks

Document Structure

Every HTML document starts with a specific structure that helps the browser understand how to display the page correctly.

<!DOCTYPE html>    // Specify that the document will be of type HTML5

<html>   // HTML tag all the content of the page goes inside this

<head>    // Header of the webpage, contains metadata like the title, character set

    <title>Page Title</title> // Title shown on the browser tab

</head>
<body>    // Actual Content that is to be displayed on the page
...
...
...
</body>
</html>

Tags, Attributes, and Classes

Tags are the basic building blocks of HTML, each of which defines an element. Attributes provide additional information about an element, such as specifying an image’s source (src) or a link’s destination (href). Classes are used to group elements together so you can apply CSS styles or JavaScript functionality to them.

Example:

<a href="https://www.example.com" class="link">This is a link</a>

<a> is the anchor tag used to create links.
href is the attribute that defines the hyperlink’s destination URL.
class="link" adds a class which may be used to style this link using CSS.

iFrames and Embeds

An iframe or Inline Frame allows you to embed another HTML document within the current page. It’s useful when embedding external content like YouTube videos, Google Maps, or other elements to a website.

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

Meta Tags

Meta tags provide metadata about the web page, which is not visible to the user but essential for the Search Engines to help understand the content of the page better.

<meta charset="UTF-8">
<meta name="description" content="A beginner's guide to HTML and CSS.">
<meta name="keywords" content="HTML, CSS, Web Development">

CSS Basics

CSS allows us to add styles to our HTML elements, i.e., CSS is used to control the visual presentation—colors, fonts, layout, etc of the elements of our webpage.

CSS Selectors

CSS selectors allows us to target specific HTML elements to apply styles to.

There are several types of CSS selector main ones are:

Element Selector: Targets elements by their tag name (eg- p {}).
Class Selector: Targets elements with a specific class (eg- .link {}).
ID Selector: Targets elements with a specific ID (eg- #header {}).

CSS Properties

CSS properties define how elements should look. Some commonly used properties include:

color: Sets the text color(foreground).
font-size: Controls the size of the text.
background-color: Sets the background color.
margin: Space around elements.
padding: Space inside elements.

Combining CSS selectors and properties, to style element:

p {
    font-size: 16px;
}

.link {
    background-color: blue;
    color: white;
}

#header {
    text-align: center;
}

The CSS Box Model

The CSS box model is used to describe how the elements on a webpage are structured and how space is distributed around them.

Content: Size of the actual content (text, images, etc.).
Padding: Space between the content and the border.
Border: A line surrounding the element, i.e., the border.
Margin: Space outside the border, creating separation from other elements.

HTML & CSS Integration

We can use CSS to style the HTML content. There are multiple methods to embed CSS into a webpage like, Internal CSS— CSS is written inside <style> tags, External CSS— It uses external file to hold the CSS, Inline CSS— It is used to define CSS for a specific element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML and CSS</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }
        h1 {
            color: #333;
        }
    </style>
</head>
<body>
    <h1>Using HTML with CSS.</h1>
</body>
</html>

HTTP Methods

When interacting with a website, the browser sends HTTP requests to the server and the server responds to these request based on their method and data accompanied with it. These requests can use various HTTP methods:

GET: Requests data from the server, used in Reading.
POST: Sends data to the server, also used in Creation.
PUT: Updates existing data on the server, also used for Updating.
DELETE: Removes data from the server, used in Deleting.

HTML and CSS Cheatsheets for quick reference were created and which can be found here(HTML) and here(CSS).

Lakshyajeet.