https://github.com/learnwithfair/html-documentation
html-documentation with [learnwithfair, Learn with fair, Rahatul Rabbi, Md Rahatul Rabbi ,rahatulrabbi]
https://github.com/learnwithfair/html-documentation
documentation html html-documentation html5 learn-with-fair learnwithfair rahatul-rabbi rahatulrabbi
Last synced: 3 months ago
JSON representation
html-documentation with [learnwithfair, Learn with fair, Rahatul Rabbi, Md Rahatul Rabbi ,rahatulrabbi]
- Host: GitHub
- URL: https://github.com/learnwithfair/html-documentation
- Owner: learnwithfair
- Created: 2024-05-01T01:47:41.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-01T02:03:50.000Z (about 2 years ago)
- Last Synced: 2025-02-26T16:50:00.118Z (over 1 year ago)
- Topics: documentation, html, html-documentation, html5, learn-with-fair, learnwithfair, rahatul-rabbi, rahatulrabbi
- Language: HTML
- Homepage:
- Size: 10.4 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# HTML-DOCUMENTATION
Thanks for visiting my GitHub account!
**HyperText Markup Language (HTML)** is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript. [more](https://www.w3schools.com/html/html_intro.asp)
### What is HTML?
- HTML stands for Hyper Text Markup Language
- HTML is the standard markup language for creating Web pages
- HTML describes the structure of a Web page
- HTML consists of a series of elements
- HTML elements tell the browser how to display the content
- HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.
### [Code-Example](https://github.com/learnwithfair/HTML)
## Source Code (Download)
[Click Here](https://mega.nz/folder/RGFiUApD#PoKIVCwF8IkQhE2PHw1XxQ)
## Required Software (Download)
- VS Code, Download ->https://code.visualstudio.com/download
## Project Overview
| |
| :---------------------------------------: |
| Roadmap |
|  |
| |
| :--------------------------: |
| Overview |
|  |
| |
| :----------------------------: |
| Outline |
|  |
## Table of Contents
1. [Introduction to HTML](#1-introduction-to-html)
- [What is HTML & Why HTML?](#11-what-is-html--why-html)
- [History of HTML](#12-history-of-html)
- [Advantages and disadvantages of HTML](#13-advantages-and-disadvantages-of-html)
2. [Basic HTML](#2-basic-html)
- [Tags, contents, elements, attributes](#21-tag-content-attribute-element)
- [Debugging](#22-debugging)
- [Text Formatting tags](#23-text-formatting-tags)
- [Entity, comment, Symbol, Color](#24-entity-comment-symbol-color)
- [List - Ordered, Unordered, Description](#25-list---ordered-unordered-description)
- [Link](#26-link)
- [Image and iframe](#27-image-and-iframe)
- [Table](#28-table)
- [Form](#29-form)
3. [Advanced HTML](#3-advanced-html)
- [Multimedia - audio, video](#31-multimedia---audio-video)
- [Meta tags & SEO](#32-meta-tags--seo)
- [Semantic HTML](#33-sematic-html)
- [Web accessibility](#34-web-accessibility)
- [Graphics](#35-graphics)
- [HTML5 API](#36-html5-api)
- [HTML Templates and Web Components](#37-html-templates-and-web-components)
## 1. Introduction to html
- What is HTML and its role in web development?
- History of HTML
- Advantages & disadvantages of HTML
### 1.1 What is HTML & Why HTML
- HTML stands for HyperText Markup Language
- It is not a **programming language** but markup language where tags are responsible for defining the elements and layout of a webpage, including headings, paragraphs, images, links, and more.
### 1.2 History of HTML
- Tim Berners-Lee created HTML in 1990
- HTML 1.0 - 1990
HTML 2.0 - 1993
HTML 3.0 - 1995 (Not fully implemented)
HTML 3.2 - 1997
HTML 4.0 - 1997
HTML 4.01 - 1999
HTML5 - 2014 (Ongoing development with subsequent versions like HTML5.1, HTML5.2, etc.)
### 1.3 Advantages and disadvantages of HTML
- Advantages of HTML:
1. **Easy to Learn**: HTML has a simple and straightforward syntax, making it easy for beginners to learn and understand.
2. **Platform Independent**: HTML is platform-independent and can be used on any operating system or device that has a web browser.
3. **Wide Browser Support**: HTML is supported by all major web browsers, ensuring compatibility and accessibility across different platforms.
- Disadvantages of HTML:
1. **Limited Styling Options**: HTML has limited styling capabilities compared to CSS (Cascading Style Sheets). While HTML can define basic styles, more complex and detailed styling is better achieved using CSS.
2. **Lack of Interactivity**: HTML on its own is static and lacks interactivity. To add dynamic behavior or functionality to web pages, additional technologies such as JavaScript or server-side languages are required.
3. **Browser Compatibility Issues**: Different web browsers may interpret HTML code differently, leading to potential compatibility issues. Developers must test and ensure cross-browser compatibility.
4. **Security Risks**: HTML alone does not provide built-in security features. Web developers must implement security measures and follow best practices to protect against vulnerabilities, such as cross-site scripting (XSS) attacks.
## 2. Basic HTML
- Tags, element, attributes, basic strcuture of HTML, text formatting tags, links, images, lists, tables, basic forms
### 2.1 Tag content attribute element
#### What is Tag & its syntax?
- Tag is the heart of html; HTML document is mainly built with tag.
- Tag Syntax: `` ; Inside the angular brackets we need to write predefined keywords to use html tag.
- Small / capital letters both can be used when writing html tag; however small letter is prefered.
- Example: `
This is a paragraph
`
In the example, `` is an opening tag, `
` is a closing tag and `This is a paragraph` is called content. In between the starting tag to end tag we have content. Everything from starting tag to end tag is called Element
#### What are the types of Tag?
- There are 2 types of html tag: Pair/container tag and empty tag
- Pair tag has starting and ending; However, empty tag has no closing tag.
- Some of the example of pair tag and empty tags are given below:
```html
...
...
...
...
...
...
....
![]()
...
```
#### What is attribute & how to use attribute?
- Attribute helps tag to extend its capabilities
- In the following example, `![]()
` is tag; src, height, width are the attributes
```html
```
- Attribute Syntax: `attributeName="attributeValue"`
#### HTML basic structure
- HTML document has 2 important part: head, body
- In the following example a basic structure of a HTML document
```html
TITLE, META TAG ETC.
CONTENT OF THE WEBPAGE
```
- Always use `` to tell the browser what type of document to expect; remember it is not a tag, just a declaration
- Every HTML document must have `` pair tag and Inside `` tag we use `` and `` as the example shows above.
- Inside head tag we use meta tag, set title etc.
- Inside body tag we write everything that we want to display on web page.
#### Environment setup
- Editor: VScode / Notepad++ / Sublime
- Browser: Google Chrome / Firefox
- Version Control: GitHub
#### First HTML Program
```html
Document
This is my first webpage
I am Anisul Islam
A full stack web developer & passionate computer science teacher
```
- Here, lang attribute refers to the language; attribute value en refers to english
- Inside `` tag we have set title of the webpage using `` tag
- Inside `` tag we are displaying some text. here `
` tag creates a line break
#### Headings, Paragraph, Horizontal rule
```html
This is a h1
This is a h2
This is a h3
This is a h4
This is a h5
This is a h6
This is a paragraph. I am writing a paragraph here.
```
- output of the text-formatting tags is below:
- There are 6 HTML heading levels. `
` is the largest level and `` is the smallest level.
- by default, heading tags and paragraph tag create new line (block level element)
- `
` here `
` is an empty tag responsible for creating horizontal rule and size attribute set the heights of the horizontal rule in pixel
#### Styling html elemnts
```html
body {
background-color: #222;
}
h1 {
/* color: white; */
/* color: #fff; */
color: rgb(255, 255, 255);
text-align: center;
}
Document
Bangladesh is my motherland. I miss Bangladesh a lot.
I also miss my family
```
- From the example, you can see that for styling html elements inside the html documents we can use style tag or style attribute
- style attribute in HTML: style="property: value; property: value..." (from the example you can see that `
` tag has style attribute where paragraph color is set as green)
- style tag in HTML: ` ... ` tag must be used inside the head tag as shown in this example. In this example you can see that `
` and `` tag has styling property like color, text-align, background-color.
- To set color of an html element we can use color name / hexadecimal color code / rgb color / hsl code as a value of color property as shown in this example for h1 tag.
### 2.2 Debugging
- Inspect Element: Within the browser developer tools, the "Inspect Element" feature allows you to examine and modify the HTML structure in real-time. You can navigate through the document tree, view CSS styles, and experiment with changes to identify and fix layout or formatting issues.
- Use Comments: Insert comments (``) within your HTML code to temporarily remove or isolate sections of code that might be causing issues. This helps you narrow down the problematic area and identify the source of the problem.
- After writing your html code you can check the validity on this website https://validator.w3.org/
### 2.3 Text Formatting tags
- Text Formatting tags: Applying formatting to text using tags like strong, em, u, s, sup, sub, blockquote, and code.
```html
This is a bold text
This is a strong text
This is a italic text
This is a emphasize text
This is a italic text
bold. italic and bold
Important task should be highlighted
This is a deleted text
H2O
(a+b)2
This is a
life changing documentation
Read,learn, enjoy
ofcourse share with others
Google
Anisul Islam 192 anis road, London United Kingdom
What our customer thinks?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius
John Doe
console.log("hello");
```
output of the text-formatting tags is below:
- The `
` tag is used to enclose a block of quoted text. It is commonly used to represent quotations, excerpts, or highlighted text. The `` element inside the `
` represents the quoted text, and the `` element provides attribution or the source of the quote.
- The `` tag is used to define a section of code or programming instructions. It is commonly used for displaying code snippets or highlighting code within a paragraph.
### 2.4 Entity, comment, Symbol, Color
#### Comment syntax example
```html
```
#### Entity syntax example
```html
© < > > ♥
```
- First example shows the example of a html comment
- second example shows an example of entity
- To create an entity first write & then give a keyword and then give a semicolon
- `©` will create copyright symbol
- `<` will create less than symbol
- `>` will create greater than symbol
- `♥` will create hearts symbol
#### Sources for adding symbol, icons and emoji
- Unicode character website: https://unicode-table.com/en/
- W3School emoji link: https://www.w3schools.com/charsets/ref_emoji.asp
- iconfinder icon link: https://www.iconfinder.com/
- Pick image from [unsplash](https://unsplash.com/)
- Choose color from
- [colorhunt](https://colorhunt.co/)
- [imagecolorpicker](https://imagecolorpicker.com/)
- [htmlcolorcodes](https://htmlcolorcodes.com/)
### 2.5 List - Ordered, Unordered, Description
- Adding list items (li) to organize and present information.
- Mainly there are 3 types of list available in html: ordered list, unordered list, description list
- `ol` (ordered list) tag is used for creating ordered list.
- `
`: Specifies the type of ordered list markers. Values: "1" (default) for numeric markers, "A", "a", "I" for uppercase Roman numerals, and "i".
- ``: Specifies the starting value of an ordered list.
- ``: Reverses the order of the items in an ordered list.
- `ul` (unordered list) tag is used for creating unordered list.
- `: Sets the spacing between list items to be more compact.`
- type Values: "circle" for circular markers, "square" for square markers, or "disc" for filled round markers.
- `dl` (description list) tag is used for creating description list, dt (description term), dd (description details)
- `li` (list) tag is a common tag for both ordered and unordered list
example
```html
Web development front end skills
- HTML
- GitHub
- Figma
- CSS
- Tailwind CSS / Bootstrap
- Google
- Google is a search engine
```
output of the list code
### 2.6 Link
- Linking to other pages within the website and external websites.
- Creating hyperlinks using the ` ... ` tag and understanding attributes like href, target, and rel.
- Inside `` link `href="url"` attribute is used where we give the address where we want to visit based on click
- Inside `` link `target="_blank"` attribute is used to open a new tab for the visited page/site
- As shown in the following example we can send email by clicking the link for that we have to use `href="mailto:EMAIL_ADDRESS_HERE"`
- As shown in the following example we can call somone by clicking the link for that we have to use `href="tel:PHONE_NUMBER_HERE"`
```html
Contact Me
website
YouTube
Call me
Mail Me
```
output of the html link code
### 2.7 Image and iframe
#### image
- For adding image on webpage we use `![]()
` tag as shown in the following example.
- some common attribute for `![]()
` tag: `src, alt, height, width, title`
- syntax for adding image: `
`
- `src` attribute needs the image address
- `alt` attribute shows some text about image if image is not found
- `title` attribute shows some tooltip text when we hover over the image
- `height` and `width` attribute helps us to set the height and width of image
- `loading="lazy"` if you have too many images and you want to load them lazily (after loading the other things first then you want to load images)
- we can use `![]()
` tag inside of `` tag so that when we click an image it will take us to a link. ` ![]()
`
#### iframe
- iframe helps us to display any website, youtube video or map inside our own webpage
iframe Example
```html
```
### 2.8 Table
- Understanding table structure, headers, rows, colspan, rowspan and data cells.
#### HTML Basic Table
- `` tag is used to create table.
- `` tag is used to create table head.
- `` tag is used to create table body.
- `` tag is used to create table footer.
- `` tag is used to create table row.
- `` tag is used to create table data cell.
- `` tag is used to create table header cell.
- `` tag is used to create table caption.
- Follow the image to understand td, tr,
```html
Student Table
ID
Name
GPA
101
Anis
3.92
102
Rabeya
3.45
103
Rasel
3.45
```
output of the above html code
#### HTML Table rowspan, colspan
- `rowspan="N"` attribute is used to tell that a cell will expand N number of rows.
- `colspan="N"` attribute is used to tell that a cell will expand N number of columns.
- An example of rowspan is given below:
```html
Document
table,
th,
td {
border: 1px solid;
border-collapse: collapse;
}
Student Table
ID
Name
GPA
101
Anis
3.92
102
Rabeya
3.45
103
Rasel
```
output of the above html code
- An example of rowspan is given below:
```html
Document
table,
th,
td {
border: 1px solid;
border-collapse: collapse;
}
Student Table
ID
Name
Phone
101
Anis
017
018
102
Rabeya
019
015
```
output of the above html code
- An example of colspan and rowspan is given below:
```html
Document
table,
th,
td {
border: 1px solid;
border-collapse: collapse;
}
Student Table
ID
Name
GPA
Phone
101
Anis
3.45
017
018
102
Rabeya
019
015
102
Rabeya
3.95
019
015
```
output of the above html code
#### Accessible table
- ``
- An example of accessible table using scope is given below:
```html
Document
table,
th,
td {
border: 1px solid;
border-collapse: collapse;
}
Student Table
Student ID
Name
Age
101
Anis
31
102
Rabeya
30
```
output of the above html code
An example of table using ` & ` tags is given below:
```html
Document
table,
th,
td {
border: 1px solid;
border-collapse: collapse;
}
Student Table
Student ID
Name
Age
101
Anis
31
102
Rabeya
30
```
output of the above html code
### 2.9 Form
- Using form controls like text inputs, checkboxes, radio buttons, dropdowns, and submit buttons.
- HTML `` Elements:
- `` element is used to create a html form. form help us to collect user data.
- `` element is the most used form element.
- `` element is used for labelling form elements. It helps the form elements accessible byguiding the screen reader. `` element has `for=""` attribute which value should be equal to `` element's id value.
- `` - helps to create dropdown menu.
- `` - helps to create options for dropdown menu.
- `` - helps to create options for dropdown menu.
- `` - helps to create multiple lines text input field.
- `` - helps to create button.
- ``
- ``
- ``
- `` & `list=""` attributes
- form tag attributes:
- ``-> enable the autocomplete option.
- ``-> sends data without encoding.
- `name=""` attribute is used to set the name of any element which is essential for getting data in server side especially.
- input tag type attribute
- `type=""` attribute can change the visualization of `` element.
- `` creates a single line text input field.
- `` creates a single line email input field.
- `` creates a single line password input field.
- `` creates a single line number input field.
- `` creates a checkbox input field.
- `` creates a radio button input field.
- `` creates a clikable button.
- `` creates a submit button for form.
- `` creates a color picker input field.
- `` creates a date picker.
- `` creates a month picker.
- `` creates a time picker.
- `` creates a week picker.
- `` creates a image selector.
- `` creates a file selector.
- `` creates a url selector.
- `` creates a input field for telephone number.
- `` is used for searching.
- `` creates a input field which is not visible to user.
- `` creates a range by setting min and max value, default range is 0 to 100.
```html
Contact Me
Email:
```
- HTML Forms Validation:
- `required` attribute specifies that an input element must be filled before submitting the form.
- `max=""` attribute is used to set the maximum input value for an input field.
- `min=""` attribute is used to set the minimum input value for an input field.
- `pattern=""` attribute is used to set a regular expression for validating an input field.
- others
- `value=""` attribute is used to set initial value for input field.
- `readonly` attribute is used to set an input field as readonly.
- `checked` attribute is used to set an input field already checked.
- `disabled` attribute is used to make a input field disable.
- `size=""` attribute is used to set the number of characters for an input field.
- `maxlength=""` attribute is used to set the maximum number of characters for an input field.
- `placeholder=""` attribute is used to give a hint to the users.
- `step=""` attribute specifies steps for input field.
- `autofocus` attribute makes an input field automatically focus when the page is loaded.
- `height="" width=""` attribute is used to set input elements height and width.
- `list="id_of_datalist"` attribute is used to set input elements height and width.
- A form example is given below:
```html
Username:
Password:
Email:
phone:
Date of birth:
favourite Month:
Select a random number from 1 to 5:
Select your image:
Select a file:
Select favourite color:
Paste your website's url:
Religion:
muslim
hindu
other
Gender:
male
female
other
Department:
CSE
EEE
LLB
Message:
Save Data
Clear
```
output of the above html code
## 3. Advanced HTML
### 3.1 Multimedia - audio, video
#### audio
- ` ... ` tag helps us to add audio in our webpage
- ` ... ` tag has some attributes such as `controls autoplay muted height width`
- audio example shows how to add aduio source by using `` tag
- Inside `` tag we must define the `src=""` src address/name and also the `type=""` of audio
- as the example shows there are 2 `` tag is used if the first format is not supported by the browser then second one will work. if first and second both is not supported by the browser then `Your browser does not support the audio element.` will work.
audio Example
```html
Your browser does not support the audio element.
... ` tag helps us to add video in our webpage
- ` ... ` tag has some attributes such as `controls autoplay muted height width`
video Example
```html
Your browser does not support the video element.
`) to define page metadata, such as title, description, and keywords.
Understanding the impact of meta tags on search engine optimization (SEO).
```html
body {
background-color: aquamarine;
}
Document
```
- Inside `` tag we can define metadata(document title, character set, links, scripts, styles), other information that will not be visible to the users
- meta tag provides information to the browsers and search engines about the webpage
- `` defines the character encoding for the HTML document.
- `` for supporting older version of IE.
- `` defines that webpage width is related to devices width and initial zoom level is 1.
- `` generally connects css file to html. Inside of href attribute we give the css file name.
- ` ... ` we can use ` ... ` tag directly inside the head tag for designing html elements.
- `` generally connects js file to html. we can also use ` ... ` tag directly inside the body tag.
### 3.3 Sematic HTML
- div can help to divide screen but it is not semantic
- purpose of HTML5
- adding more semantic tags
- more form types
- improve accessibility
- improved storage facilities
- improved graphics & media
- remove few things
- HTML5 Semantic elements: `
- sematic tags vs non semantic tags
- semantic tags are meaningful tags for human, search engine. example: `
etc.`
- non-semantic tags are not meaningful tags for human, search engine. example: ` etc.`
- sematic tags vs non semantic tags example is given below:
#### details and figure elements
- `` elements have tewo states: closed, open
- `` a short summary of details is provided by summary element
- `` can have diagram, photos inside of it.
- `` can set the figure caption.
An example of details, summary elements are given below:
```html
Document
details[open] > summary {
background-color: aqua;
}
Anisul Islam
My Name is Anisul Islam. I am 31 years old. I have done my masters in
Software, Web & cloud at Tampere University, Finland.
fig1: list image
```
output of the heading style code
### 3.4 Web accessibility
- what is web accessibility?
- making website supportive for disable people and search engine
- how to check web accessibility?
- inspect -> lighthouse -> accessibility
- axe Devtools for accessibility testing
- chromeVox for screen reading
1. Use Semantic elements over non semantic elements.
- semantic tags are meaningful tags for human, search engine. example: `
etc.`
- non-semantic tags are not meaningful tags for human, search engine. example: ` etc.`
- In the following example button is more accessible than div for making a button. Semantic elements help the screen readers.
```html
Click me
Click me
```
- Example of explicit semantic vs implicit sematic element
```html
Click me
Click me
```
- landmarks helps to naviagte from one place to another: header, h1...h6, main, nav, footer
2. Use Heading tags in order
- use one h1 element in a webpage
- keep sequence when using: h1 -> h2 -> h3 ... (follow top-down order)
3. Use alt attribute
- use alt attribute for `![]()
` element
- alt attribute provides more info to the blind people
- low bandwidth might not render the image so the alt will help here
- alt attributes helps technologies like search engines
- title attribute can be used when we hover over image to get extra information
4. Contrast ratio checker
- use contrast ratio checker for foreground and background color: https://webaim.org/resources/contrastchecker/
5. Declare the languages
- ``
6. Meaningful Link txt
- make link text descriptive, understandable and clear ` Visit Anisul Islam's website `
7. Form related matters
- use label and bind input elements with label by using id and for value same. example is given below:
```html
Email:
Choose Gender:
Male
Female
```
8. use aria-label vs aria-labelby vs aria-descriptionby
- these attribute has no visual impact but they are for assistive purpose. use them only when you can not use semantic elements
- The aria-label and aria-labelledby attributes are both used to give an element it's accessible name.
- using forms with standards labels - you shouldn't need it at all: -> label, for is more than enough
- **_aria-label_** add accessible name directly to an element and it has higher priority than the element value. In the following example screen reader will say learn more about me instead of learn more
```html
Learn more
```
- **_aria-labelby_** create a relationship between elements
```html
Hobbies
- Playing Football
- Playing Badminton
- Swimming
```
- **_aria-descriptionby_**
```html
Password
Pasword must be at least 8 character long
```
9. role and tabindex -> tabindex can start from 0 then -1, -2 for lesser priority so that you can navigate by keyboard one after one in an order
```HTML
```
- References:
- https://www.w3.org/WAI/fundamentals/accessibility-intro/
- https://www.w3schools.com/html/html_accessibility.asp
### 3.5 Graphics
#### progress bar and svg
- `
`
- ` `
- you will learn more about svg and canvas in CSS and Javascript playlist
### 3.6 HTML5 API
- Exploring HTML5 APIs like Geolocation, Drag and Drop, Web Storage, and Web Workers. Understanding their usage and practical applications.
1. **Geolocation API**:
- The Geolocation API allows you to retrieve the user's geographic location information.
- Example:
```js
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
console.log("Latitude: " + latitude + ", Longitude: " + longitude);
});
} else {
console.log("Geolocation is not supported by this browser.");
}
```
2. **Drag and Drop API**:
- The Drag and Drop API enables you to create drag-and-drop interactions between elements on a web page.
- Example:
```javascript
var draggableElement = document.getElementById("draggable");
var dropZone = document.getElementById("drop-zone");
draggableElement.addEventListener("dragstart", function (event) {
event.dataTransfer.setData("text/plain", event.target.id);
});
dropZone.addEventListener("dragover", function (event) {
event.preventDefault();
});
dropZone.addEventListener("drop", function (event) {
event.preventDefault();
var data = event.dataTransfer.getData("text/plain");
var element = document.getElementById(data);
dropZone.appendChild(element);
});
```
3. **Web Storage API**:
- The Web Storage API provides a way to store key-value pairs locally in the user's browser.
- Example:
```javascript
// Store data
localStorage.setItem("username", "John");
// Retrieve data
var username = localStorage.getItem("username");
console.log(username);
// Remove data
localStorage.removeItem("username");
```
4. **Canvas API**:
- The Canvas API allows you to draw graphics and animations on a web page using JavaScript.
- Example:
```javascript
var canvas = document.getElementById("my-canvas");
var context = canvas.getContext("2d");
context.fillStyle = "red";
context.fillRect(50, 50, 100, 100);
context.strokeStyle = "blue";
context.lineWidth = 2;
context.strokeRect(75, 75, 50, 50);
context.beginPath();
context.arc(150, 150, 50, 0, 2 * Math.PI);
context.fillStyle = "green";
context.fill();
context.closePath();
```
### 3.7 HTML Templates and Web Components
- Building reusable HTML templates and components using `` and custom elements.
```html
// Clone the template and populate the data
var template = document.getElementById("user-template");
var clone = template.content.cloneNode(true);
clone.querySelector(".user-name").textContent = "John Doe";
clone.querySelector(".user-email").textContent = "john.doe@example.com";
// Insert the cloned template into the document
document.body.appendChild(clone);
```
- Leveraging frameworks like Angular, React, or Vue.js for more advanced component-based development.
## Follow Me
[Facebook](http://facebook.com/learnwithfair), 
[Youtube](http://youtube.com/@learnwithfair), 
[Instagram](http://instagram.com/learnwithfair)
s