DEV Community

Hariharan S J
Hariharan S J

Posted on

Day 1 Of Payilagam

1.Introduction of both HTML And CSS

Basic concept of HTML

HTML (HyperText Markup Language) is the standard language used to create web pages. It provides the structure of a webpage by using elements called tags.

HTML is not a programming language; it is a markup language.

Structure of an HTML Document

<!DOCTYPE html>


My First Web Page


Welcome


This is my first HTML page.



Common HTML Tags
Tag
Purpose

to

Headings

Paragraph
Line break


Horizontal line Image Link Container Inline container Attributes in HTML Attributes provide additional information about elements. Example: Visit Site href is an attribute Attributes are written inside the opening tag HTML Headings HTML has 6 levels of headings:

Main Heading

Sub Heading

is the most important and

is the least.

Paragraphs and Line Breaks
Paragraph →


Line break →

This is a paragraph.
This is next line.

HTML Links
Links are created using tag:
Google

Basic concept of CSS

CSS (Cascading Style Sheets) is used to style and design HTML web pages.
It controls the layout, colors, fonts, spacing, and responsiveness of a website.
HTML gives structure, CSS gives style.

Inline CSS
Applied directly inside an HTML tag.

Hello World

text-align: center aligns the text to the center of its container.

HTML Box model

The HTML Box Model is a basic concept in CSS that explains how every HTML element is treated as a rectangular box on a web page.
This box controls spacing, size, and layout of elements.
Components of the Box Model
Every HTML element consists of four layers:

+-------------------------+
| Margin |
| +-------------------+ |
| | Border | |
| | +-------------+ | |
| | | Padding | | |
| | | +---------+ | | |
| | | | Content | | | |
| | | +---------+ | | |
| | +-------------+ | |
| +-------------------+ |
+-------------------------+

Where margin is outside the box and padding is
Inside the Box

Top comments (0)