diff --git a/HTML.md b/HTML.md index e71cc40..f6ef900 100644 --- a/HTML.md +++ b/HTML.md @@ -1,95 +1,18 @@ -# HTML and CSS3 Cheat Sheet +# Comprehensive HTML5 Cheat Sheet ## Table of Contents -1. [HTML Basics](#html-basics) - 1.1 [Document Structure](#document-structure) +1. [Document Structure](#document-structure) +2. [HTML Basic Elements](#html-basic-elements) +3. [Text Formatting](#text-formatting) +4. [Links and Navigation](#links-and-navigation) +5. [Multimedia Elements](#multimedia-elements) +6. [Embedded Content](#embedded-content) +7. [Forms](#forms) +8. [Semantic Elements](#semantic-elements) +9. [APIs](#apis) - 1.2 [HTML Elements](#html-elements) - - 1.3 [Headings](#headings) - - 1.4 [Paragraphs](#paragraphs) - - 1.5 [Lists](#lists) - - 1.6 [Links](#links) - - 1.7 [Images](#images) - -2. [HTML Advanced](#html-advanced) - - 2.1 [Forms](#forms) - - 2.2 [Tables](#tables) - - 2.3 [Semantics](#semantics) - - 2.4 [Media Elements](#media-elements) - - 2.5 [IFrames](#iframes) - -3. [CSS3 Basics](#css3-basics) - - 3.1 [Selectors](#selectors) - - 3.2 [Box Model](#box-model) - - 3.3 [Colors and Backgrounds](#colors-and-backgrounds) - - 3.4 [Text Styling](#text-styling) - - 3.5 [Fonts](#fonts) - -4. [CSS3 Advanced](#css3-advanced) - - 4.1 [Flexbox](#flexbox) - - 4.2 [Grid](#grid) - - 4.3 [Transitions](#transitions) - - 4.4 [Transforms](#transforms) - - 4.5 [Animations](#animations) - -5. [Responsive Web Design](#responsive-web-design) - - 5.1 [Media Queries](#media-queries) - - 5.2 [Viewport](#viewport) - -6. [CSS Layout](#css-layout) - - 6.1 [Floats](#floats) - - 6.2 [Positioning](#positioning) - - 6.3 [Display Property](#display-property) - - 6.4 [Box Sizing](#box-sizing) - -7. [Advanced HTML Techniques](#advanced-html-techniques) - - 7.1 [Canvas](#canvas) - - 7.2 [SVG](#svg) - - 7.3 [Web Components](#web-components) - - 7.4 [Drag and Drop](#drag-and-drop) - -8. [Advanced CSS Techniques](#advanced-css-techniques) - - 8.1 [Custom Properties (CSS Variables)](#custom-properties-css-variables) - - 8.2 [CSS Grid Layout](#css-grid-layout) - - 8.3 [Filter Effects](#filter-effects) - - 8.4 [Clipping and Masking](#clipping-and-masking) - -## HTML Basics +## Document Structure ```html @@ -97,235 +20,210 @@ - My Website - + Document Title -
-

Welcome to My Website

-
-
-
-

Article Title

-

Article content goes here.

-
-
-

Section 1

-

This is a paragraph.

- - Visit Example - Description of the image + ``` -## HTML Advanced +## HTML Basic Elements + +### Heading Tags + +```html +

This is a Heading 1

+

This is a Heading 2

+ +
This is a Heading 6
+``` + +### Paragraph + +```html +

This is a paragraph.

+``` + +### Lists + +#### Unordered List + +```html + +``` + +#### Ordered List + +```html +
    +
  1. Item 1
    2. +
  2. Item 2
    3. +
+``` + +### Links + +```html +Visit Example +``` + +## Text Formatting + +### Bold + +```html +This is bold text +``` + +### Italic + +```html +This is italicized text +``` + +### Underline + +```html +This text is underlined +``` + +## Links and Navigation + +### Anchor Tag + +```html +Visit Example +``` + +### Navigation + +```html + +``` + +## Multimedia Elements + +### Image + +```html +Description of the image +``` + +### Audio + +```html + +``` + +### Video + +```html + +``` + +## Embedded Content + +### Iframe + +```html + +``` + +### Embedded Audio + +```html + +``` + +## Forms ```html -
- - - - - - - - - - -
NameAge
John Doe25
- - - - - - ``` -## CSS3 Basics +## Semantic Elements -```css -/* Selectors */ -h1 { - color: #3498db; -} -/* Box Model */ -div { - width: 200px; - height: 100px; - padding: 10px; - margin: 20px; - border: 2px solid #2ecc71; -} -/* Colors and Backgrounds */ -body { - background-color: #ecf0f1; -} -/* Text Styling */ -p { - font-size: 16px; - font-weight: bold; -} -/* Fonts */ -body { - font-family: 'Arial', sans-serif; -} -``` - -## CSS3 Advanced - -```css -/* Flexbox */ -.container { - display: flex; - justify-content: space-between; -} -/* Grid */ -.grid-container { - display: grid; - grid-template-columns: auto auto auto; -} -/* Transitions */ -button { - transition: background-color 0.3s ease; -} -button:hover { - background-color: #e74c3c; -} -/* Transforms */ -.box { - transform: rotate(45deg); -} -/* Animations */ -@keyframes slide { - from { - transform: translateX(-100%); - } - to { - transform: translateX(0); - } -} -.slider { - animation: slide 1s ease-in-out; -} -``` - -## Responsive Web Design - -```css -/* Media Queries */ -@media only screen and (max-width: 600px) { - body { - font-size: 14px; - } -} -/* Viewport */ -meta { - width: device-width; - initial-scale: 1.0; -} -``` - -## CSS Layout - -```css -/* Floats */ -.float-left { - float: left; -} -/* Positioning */ -.absolute-position { - position: absolute; - top: 10px; - left: 20px; -} -/* Display Property */ -.inline-block { - display: inline-block; -} -/* Box Sizing */ -box-sizing: border-box; -``` - -## Advanced HTML Techniques +### Article ```html - - +
+

Article Title

+

Article content goes here.

+
+``` + +### Section + +```html +
+

Section Title

+

Section content goes here.

+
+``` + +### Header and Footer + +```html +
+

Page Header

+
+ + +``` + +## APIs + +### Geolocation + +```html + - - - - - - - -
Drag me!
-
- ``` -## Advanced CSS Techniques +### Local Storage -```css -/* Custom Properties (CSS Variables) */ -:root { - --main-color: #3498db; - --secondary-color: #e74c3c; -} -body { - background-color: var(--main-color); -} -button { - background-color: var(--secondary-color); -} -/* CSS Grid Layout */ -.grid-container { - display: grid; - grid-template-columns: auto auto auto; -} -.grid-item { - padding: 20px; - text-align: center; - border: 1px solid #ccc; -} -/* Filter Effects */ -.image-container { - filter: grayscale(50%); -} -/* Clipping and Masking */ -.clipped-element { - clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); -} +```html + ``` diff --git a/README.md b/README.md index 280fa77..932de06 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ ### A compendium of various technical "cheat sheets". -- [HTML and CSS](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/HTML.md) +- [HTML](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/HTML.md) - [JavaScript](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/javascript.md) - [JavaScript Object Notation](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/JSON.md) - [Markdown](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/markdown.md)