👍1🆒1
Basic HTML Commands:*
1.
2.
3.
4.
5.
6.
7.
8.
*Text Formatting Commands:*
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
*Link Commands:*
1.
2.
*Image Commands:*
1.
2.
3.
*List Commands:*
1.
2.
3.
4.
5.
6.
*Table
From Precious Chisom
1.
<html> - Root element of HTML document2.
<head> - Contains metadata about document3.
<title> - Sets title of page4.
<body> - Contains content of HTML document5.
<h1-6> - Headings (h1 largest, h6 smallest)6.
<p> - Paragraph7.
<br> - Line break8.
<hr> - Horizontal rule*Text Formatting Commands:*
1.
<b> - Bold text2.
<i> - Italic text3.
<u> - Underlined text4.
<s> - Strikethrough text5.
<strong> - Strongly emphasized text6.
<em> - Emphasized text7.
<mark> - Highlighted text8.
<small> - Smaller text9.
<del> - Deleted text10.
<ins> - Inserted text*Link Commands:*
1.
<a> - Anchor (link)2.
<link> - Links external stylesheet*Image Commands:*
1.
<img> - Image2.
<figure> - Figure (image with caption)3.
<figcaption> - Figure caption*List Commands:*
1.
<ul> - Unordered list2.
<ol> - Ordered list3.
<li> - List item4.
<dl> - Definition list5.
<dt> - Definition term6.
<dd> - Definition description*Table
From Precious Chisom
👍3👎1
Smart 🧠:
S-pecific
M-easurable
A-chievable
R-elevant
T-imely
©️sololearn app
•••••••••☆☆☆☆☆••••••••••
Join our channel @Html_codee
S-pecific
M-easurable
A-chievable
R-elevant
T-imely
©️sololearn app
•••••••••☆☆☆☆☆••••••••••
Join our channel @Html_codee
Here is a simple HTML and Tailwind CSS code snippet to display a video with a poster image using Tailwind CSS classes:
In this code snippet:
- We have an HTML structure that includes a video element with the controls attribute for playback controls.
- The poster attribute specifies an image that is displayed while the video is downloading or until the user plays it.
- We use Tailwind CSS classes for styling, such as centering the video on the screen and setting the background color.
You can replace the placeholder URLs with your actual video source URL and poster image URL. The provided code will display a video with a poster image using Tailwind CSS styles in a basic HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video with Poster using Tailwind CSS</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-200 flex items-center justify-center h-screen">
<div class="max-w-md">
<video controls poster="https://placekitten.com/800/600" class="w-full">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</body>
</html>
In this code snippet:
- We have an HTML structure that includes a video element with the controls attribute for playback controls.
- The poster attribute specifies an image that is displayed while the video is downloading or until the user plays it.
- We use Tailwind CSS classes for styling, such as centering the video on the screen and setting the background color.
You can replace the placeholder URLs with your actual video source URL and poster image URL. The provided code will display a video with a poster image using Tailwind CSS styles in a basic HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flowbite Alert</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center items-center min-h-screen">
<!-- Flowbite Alert -->
<div id="alert-1" class="flex p-4 mb-4 text-sm text-blue-800 border border-blue-300 rounded-lg bg-blue-50" role="alert">
<svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M18 8a6 6 0 11-12 0 6 6 0 0112 0zm-6 8a8 8 0 100-16 8 8 0 000 16zm-.75-9.75a.75.75 0 111.5 0v2.25a.75.75 0 01-1.5 0V6.25zm.75 6a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd"></path>
</svg>
<div>
<span class="font-medium">Info alert!</span> This is a blue alert using Flowbite.
</div>
<button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-blue-50 text-blue-500 rounded-lg focus:ring-2 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex h-8 w-8" data-dismiss-target="#alert-1" aria-label="Close">
<span class="sr-only">Close</span>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.js"></script>
</body>
</html>
🎉1
Forwarded from WeWantYou
This media is not supported in the widget
VIEW IN TELEGRAM
In HTML, you can create tables using the
1.
2.
3.
4.
Here's a basic example of how to create a simple table with two rows and two columns:
You can further customize tables by using attributes like
If you have specific requirements or need assistance with a particular aspect of creating HTML tables, feel free to ask for more details!
<table>, <tr>, <th>, and <td> elements. Here are some essential commands and elements to create tables in HTML:1.
<table>: This is the main element used to define a table.2.
<tr>: This element defines a row in the table.3.
<th>: This element defines a header cell in a table. Header cells are typically bold and centered.4.
<td>: This element defines a standard cell in a table.Here's a basic example of how to create a simple table with two rows and two columns:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
You can further customize tables by using attributes like
colspan, rowspan, border, align, and more within the table elements to control the structure and appearance of the table.If you have specific requirements or need assistance with a particular aspect of creating HTML tables, feel free to ask for more details!
1. <div>: The <div> element is a versatile container used to group and style elements in HTML.
2. <p>: The <p> element defines a paragraph of text.
3. <a>: The <a> element creates hyperlinks to other web pages, files, locations within the same page, or email addresses.
4. <img>: The <img> element embeds images in an HTML document.
5. <ul>, <ol>, <li>: These elements create unordered lists (<ul>), ordered lists (<ol>), and list items (<li>), respectively.
6. <form>, <input>, <button>: These elements are essential for creating forms and input fields for user interaction on websites.
7. <span>: The <span> element is an inline container that allows you to apply styles or scripts to a specific section of text.
8. <header>, <footer>, <nav>, <section>, <article>: These are semantic HTML5 elements for structuring the layout of a webpage.
9. Attributes: HTML elements can have various attributes like id, class, href, src, alt, style, etc., which provide additional information or control over the elements.
•••••••••☆☆☆☆☆••••••••••
Join our channel @Html_codee
2. <p>: The <p> element defines a paragraph of text.
3. <a>: The <a> element creates hyperlinks to other web pages, files, locations within the same page, or email addresses.
4. <img>: The <img> element embeds images in an HTML document.
5. <ul>, <ol>, <li>: These elements create unordered lists (<ul>), ordered lists (<ol>), and list items (<li>), respectively.
6. <form>, <input>, <button>: These elements are essential for creating forms and input fields for user interaction on websites.
7. <span>: The <span> element is an inline container that allows you to apply styles or scripts to a specific section of text.
8. <header>, <footer>, <nav>, <section>, <article>: These are semantic HTML5 elements for structuring the layout of a webpage.
9. Attributes: HTML elements can have various attributes like id, class, href, src, alt, style, etc., which provide additional information or control over the elements.
•••••••••☆☆☆☆☆••••••••••
Join our channel @Html_codee
/* HTML: <div class="loader"></div> */
.loader {
height: 60px;
aspect-ratio: 1;
position: relative;
}
.loader::before,
.loader::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
transform-origin: bottom;
}
.loader::after {
background:
radial-gradient(at 75% 15%,#fffb,#0000 35%),
radial-gradient(at 80% 40%,#0000,#0008),
radial-gradient(circle 5px,#fff 94%,#0000),
radial-gradient(circle 10px,#000 94%,#0000),
linear-gradient(#F93318 0 0) top /100% calc(50% - 5px),
linear-gradient(#fff 0 0) bottom/100% calc(50% - 5px)
#000;
background-repeat: no-repeat;
animation: l20 1s infinite cubic-bezier(0.5,120,0.5,-120);
}
.loader::before {
background:#ddd;
filter: blur(8px);
transform: scaleY(0.4) translate(-13px, 0px);
}
@keyframes l20 {
30%,70% {transform:rotate(0deg)}
49.99% {transform:rotate(0.2deg)}
50% {transform:rotate(-0.2deg)}
}
/* HTML: <div class="loader"></div> */
.loader {
width: 60px;
height: 16px;
display: grid;
}
.loader:before,
.loader:after {
content: "";
grid-area: 1/1;
--c:no-repeat linear-gradient(#046D8B 0 0);
background: var(--c), var(--c), var(--c);
animation: l16-1 1.5s infinite linear, l16-2 1.5s infinite linear;
transform: scale(var(--s,1)) translate(3px,-3px);
}
.loader:after {
--s:-1;
}
@keyframes l16-1 {
0%,
3% {background-size: 0 4px,4px 0 ,0 4px}
16.67%{background-size: 100% 4px,4px 0 ,0 4px}
33.33%{background-size: 100% 4px,4px 100%,0 4px}
46%,
54% {background-size: 100% 4px,4px 100%,100% 4px}
66.67%{background-size: 0 4px,4px 100%,100% 4px}
83.33%{background-size: 0 4px,4px 0 ,100% 4px}
96%,
100% {background-size: 0 4px,4px 0 ,0 4px}
}
@keyframes l16-2 {
0%,49.9%{background-position: 0 0,100% 0 ,100% 100%}
50%,100%{background-position: 100% 0,100% 100%,0 100%}
}
/* HTML: <div class="loader"></div> */
.loader {
width: 74px;
height: calc(27px*0.866 + 6px);
display: grid;
}
.loader:before,
.loader:after {
content: "";
grid-area: 1/1;
background:#FD135A;
--c1:conic-gradient(from 150deg at top ,#000 60deg,#0000 0);
--c2:conic-gradient(from -30deg at bottom,#000 60deg,#0000 0);
--s:27px calc(27px*0.866);
clip-path: polygon(17px 0,calc(100% - 17px) 0,100% 100%,0 100%);
-webkit-mask:
var(--c1) left 6px top 4px,
var(--c2) center,
var(--c1) right 6px top 4px,
linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
-webkit-mask-repeat:no-repeat;
animation: l6 2s infinite both;
}
.loader:after {
transform: rotate(180deg);
transform-origin: 50% 99%;
animation-delay: 0.5s;
}
@keyframes l6 {
0% {-webkit-mask-size:0 0 ,0 0 ,0 0 ,auto}
8.33% {-webkit-mask-size:var(--s),0 0 ,0 0 ,auto}
16.67%{-webkit-mask-size:var(--s),var(--s),0 0 ,auto}
25%,
50% {-webkit-mask-size:var(--s),var(--s),var(--s),auto}
58.33%{-webkit-mask-size:0 0 ,var(--s),var(--s),auto}
66.67%{-webkit-mask-size:0 0 ,0 0 ,var(--s),auto}
75%,
100% {-webkit-mask-size:0 0 ,0 0 ,0 0 ,auto}
}
👍1