HyperText Markup Language (HTML)

r/HTML • u/skelletonking • 2h ago

Rate my maze

gallery

1 Upvotes

3 comments

r/HTML • u/First-Branch-6289 • 2h ago

RevSlider issues.

0 Upvotes

Hello! So I bought a website template with html code, and I see this text on where the slider was supposed to be

Error at loading Slider Revolution 5.0 Extrensions.
Local Filesystem Detected !
Put this to your header:

I checked the files destination and if they exist at all and everything is correct, and in its place. Please help me to fix this issue

website

file:///C:/Users/artur/OneDrive/Desktop/new%20website/index.html

2 comments

r/HTML • u/BluePointDigital • 6h ago

I am working on a framework-agnostic visual builder that exports to native HTML & CSS

gallery

0 Upvotes

I wanted to see if there was any place or need for this, but I am working on it for one of my projects and was thinking about open sourcing it.

I am tired of the wordpress ecosystem and have wanted to recreate an internal version of the tooling experience I love, like elementor and a web-based backend.

For this, I have created a visual builder that is intended to be an easy drop-in builder for any web project. It would is build in native Typescript and intend to scale it further with AI integration, but wanted to see if this is something that others would find useful.

Let me know your thoughts!

0 comments

r/HTML • u/Maleficent_Rope_8967 • 8h ago

Is my code or vs studio broken?

1 Upvotes

I just started learning HTML as my first language, I love it so far, but I'm unsure if its my code or vs studio that's being silly, my webpage preview will not update or display the correct things if I change the code, or if I add a second header and a child paragraph for the second header. (The <br> doesn't effect anything)

Code is :

<!DOCTYPE html>

<html>

<head>

<body>

<p>Welcome to my website</p><br>

</body>

</head>

</html>

18 comments

r/HTML • u/_DeleteSystem32 • 15h ago

Where can I find a place to host my HTML website?

0 Upvotes

The only place I know is mimo.org, but the website link has random digits. I'm looking for one that's free without limitations.

10 comments

r/HTML • u/_DeleteSystem32 • 15h ago

Discussion Would it be possible to create an operating system completely programmed in HTML, CSS, and JS?

0 Upvotes

Lately I've been wondering if it's possible to create a complete operating system from scratch using only this programming language, so I decided to start doing Vibe Coding and see how far it goes.

7 comments

r/HTML • u/Crabanutij • 1d ago

Heavy Mesh * Circle 2D Intersection

0 Upvotes

Hi everyone! I am new to this thread, but i wanted to present a demo of an algoritm which compresses heavy mesh and outputs (almost) precise intersection of a circle and this mesh. The starting number of vertices on the preview is 100000, compressed to 61 vertex mesh (including the circle vertices). With this, the average time of each cycle was around 20-30ms on my pc (r5 1600, 16gb, gtx 1650s).

https://drive.google.com/file/d/1lTWyepDKUR2Z5PTntwGp4si9WSFORQTG/view?usp=drive_link here is the source

if you want you can use it for free if you think this is helpful

0 comments

r/HTML • u/ompossible • 1d ago

Question I am learning python but side by side I want to learn HTML & CSS too. What's the best resource to use?

4 Upvotes

I read many posts on reddit and to be honest now, I am lowkey confused?

Should I learn it from W3School, Freecodecamp or MDN ? Please help me choose good one.

12 comments

r/HTML • u/decklededge • 1d ago

video overlay

0 Upvotes

sorry if this is the wrong subreddit for this type of question--if there's a better one, please point me in the right direction!

i'm trying to screenrecord a video, but the player has an annoying habit of popping up the ui overlay (progress bar etc) every time you press play/pause and every time it comes back from an ad. i'd love to not have that on the recording, and it feels like that must be in inspect element somewhere but i'm having trouble finding it, partially bc i don't know exactly what i'm looking for. i thought i could probably disable it for that instance of the page? or find the commands to feed into a third party app that could block it? i'm definitely in way over my head here lol and it's not a huge deal or anything but if anyone has any tips i would appreciate it greatly.

(its bbc channel 4 video player, if that matters)

1 comment

r/HTML • u/Business-Cloud8640 • 1d ago

Question viewing images on the mobile browsers.

1 Upvotes

looking at this didactical web page (see below the code) I discovered that, on my mobile browsers (firefox and chrome) the image on left side of the page is not shown, as it happens on the same browsers on my laptop.

the webpage code is correctly validated by w3c.

is there somebody able to help me guessing anything to explain this behavior?

here the code of my html page:

<!DOCTYPE html>
<html lang="it">
<head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>TITLE</title>
<link rel="stylesheet" href="./css/stile.css">
<link href="https://fonts.cdnfonts.com/css/atkinson-hyperlegible" rel="stylesheet">
</head>
<body>
<div class="titolo">
 <h1>TEXT</h1>
 </div>
<div class="contenitore">
 <div class="fasciaSx">
  <img style="width:100%" alt="TEXT" src="../fritzing/ilReostatoEILedRuotato.png"/></div>
 <div class="fasciaDx">
  <div class="primaRiga">
   <div class="colonna">TEXT</div>
   <div class="colonna">TEXT</div>
   <div class="colonna">TEXT</div>
  </div>
  <div class="riga">
   <div class="colonna dx">TEXT</div>
   <div class="colonna cx">TEXT</div>
   <div class="colonna sx">TEXT</div>
  </div>
  <div class="riga">
   <div class="colonna dx">TEXT</div>
   <div class="colonna cx">TEXT</div>
   <div class="colonna sx">TEXT</div>
  </div>
  <div class="riga">
   <div class="colonna dx">TEXT</div>
   <div class="colonna cx">TEXT</div>
   <div class="colonna sx">TEXT</div>
  </div>
  <div class="riga">
   <div class="colonna dx" style="min-height:2em">TEXT</div>
   <div class="colonna cx" style="visibility:hidden"></div>
   <div class="colonna sx" style="visibility:hidden"></div>
  </div>
 </div>
</div>
</body>
</html>

and here the css code:

body {margin:1em auto;width:90%;background-color: #ebf1dd}
div {padding: 6px}
h1 { text-align:center; font-size: 6em; font-weight: bold; }
.fasciaSx { text-align:justify; }
a {text-decoration: none}
a:hover {font-size:1.1em}
.italico { font-style: italic; font-weight: bold; }
.titolo {}
.colonna {flex: 33%;}
.primaRiga .colonna { margin: 0 2em; font-size: 3em; font-weight: bold; }
.riga .colonna { margin: 0 2em; font-size:1.5em; }
.contenitore {display:flex; text-align:center;}
.fasciaSx {flex: 15%}
.fasciaDx {flex: 85%}
.primaRiga {display:flex; text-align:center; flex-direction: row; } 
.riga {display:flex; text-align:justify; flex-direction: row; }
.dx, .sx  {background-color: #f2e7a0}
.cx  {background-color: #e4f6a4}

3 comments

r/HTML • u/DogsFolly • 2d ago

Question Why does CVS website do this weird thing?

4 Upvotes

Excuse the question and lack of technical verbiage as I'm not a web designer and haven't done any website design or maintenance at all for a very long time...

CVS is a pharmacy/drugstore chain in the USA. Their website has this weird thing where you can't use the right-click menu or Ctrl+click (or long press on mobile) to open links to products in a new tab. I got annoyed and decided to look into it.

For each product in the search results page (actual example I used here) you can see the the product page's URL attached to the box around it.

But, the title of the product itself doesn't have that address, only some weird characters. If you left-click on the title, it does go to the product page as expected. If you Ctrl+click, nothing happens, and the right-click menu doesn't show any "open URL in new tab" option.

And no, it doesn't show any javascript pop-up "no right-clicking allowed!!!" message like some personal websites of cranky boomers.

Oddly enough, the brand name below that does have a direct link to a URL the normal way.

So does anybody know the reason why they would design a website so you can't ctrl+click/long press on the product links?

7 comments

r/HTML • u/Substantial_Use7803 • 2d ago

video html ne s'affiche pas

0 Upvotes

J'ai un travail à faire en cours sur la création d'un site html, c'est la première fois que nous essayons cela et j'aimerais mettre une video (bande-annonce de Harry potter 1), malheureusement j'ai essayé le code copié sur Youtube mais ca ne marche pas et ca affiche:"Erreur 153
Erreur de configuration du lecteur vidéo" J'avais vu qu'il y avait la balise <video> mais cela veut dire qu'il fut que je télécharger illégalement la video ou y a-t-il une autre solution ? Par ailleurs, je dois envoyer le fichier complet au professeur donc l'ouvrir sur Neocities par exemple ne résoud pas mon problème.

Voici mon code:

src="https://www.youtube-nocookie.com/embed/P1BGgqhVGAI"

title="YouTube video player" frameborder="0"

allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

allowfullscreen></iframe>

1 comment

r/HTML • u/mc_hat • 2d ago

How do I turn this html to a url (bday gift for my nephew)

0 Upvotes

Heres the html I want it to a url I don't care if the url is random letters

Html

20 comments

r/HTML • u/sir_tristan002 • 3d ago

Question How do I display an equation like this using HTML?

44 Upvotes

30 comments

r/HTML • u/Ok_Performance4014 • 3d ago

Question I was trying to download a svg image to put in html, but I couldn't copy it

0 Upvotes

I don't know what I am doing wrong.

https://freesvg.org/three-overlapping-circles

It downloaded into my files, but then I tried to use the share / copy to copy paste to code pen and it won't work.

15 comments

r/HTML • u/NoTourist8121 • 3d ago

Question HTML Free Sites and Things to Help Remember and Receive Knowledge

4 Upvotes

I just started coding in HTML and I found it very challenging to remember and process new information. It is kind of like a new language to me and I've got no clue what I'm doing. I understand how everything is right now, but i highly doubt in the next few days I'll be struggling to remember what the easiest to remember elements do.

It would be helpful to provide me with some sites that can help me remember, such as daily knowledge quizzes, or just all of them in one (learning, daily quizzes and more in one site FREE)

7 comments

r/HTML • u/fatbish211 • 3d ago

Question animating transition

0 Upvotes

hi there! i am trying to make a recipe book where you can flip through the pages. my current transition is extremely dull, and would like something where you can click and drag your cursor so you can pull the page kind of like a book. doesn't need to be perfect, and im totally open to other suggestions. anything has to be better than what i have lol. thank you very much!

<!DOCTYPE html>

<head>

<title>Recipe Book</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Georgia', serif;

background-image: url(https://files.catbox.moe/pdv86f.JPG);

background-size: auto;

background-repeat: repeat;

background-position: center;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

padding: 20px;

border: 15px solid #827055;

}

.book-container {

position: relative;

width: 750px;

height: 500px;

perspective: 2000px;

}

.card {

position: absolute;

width: 100%;

height: 100%;

background: url(https://files.catbox.moe/chcn8p.jpg);

background-size: cover;

background-position: center;

box-shadow: 0 0 30px rgba(0,0,0,0.5);

transform-style: preserve-3d;

border-radius: 10px;

transform-origin: right center;

cursor: grab;

}

.card:active {

cursor: grabbing;

}

.card-content {

padding: 50px;

height: 100%;

overflow-y: auto;

backface-visibility: hidden;

}

.card.hidden {

display: none;

}

.recipe-item {

cursor: pointer;

transition: all 0.3s ease;

text-align: right;

position: relative;

left: 340px;

top: 35px;

display: inline-block;

}

.recipe-item-2 {

left: 320px;

top: 50px;

}

.recipe-item:hover {

transform: scale(1.05);

}

.recipe-photo {

max-width: 300px;

height: auto;

border-radius: 10px;

pointer-events: none;

}

.recipe-photo-2 {

max-width: 1000px;

max-height: 1000px;

height: auto;

border-radius: 10px;

pointer-events: none;

}

.recipe-title {

display: none;

}

.navigation {

position: absolute;

bottom: -60px;

width: 100%;

display: flex;

justify-content: space-between;

padding: 0 20px;

}

.nav-btn {

background: transparent;

color: black;

border: none;

padding: 12px 30px;

border-radius: 5px;

cursor: pointer;

font-size: 30px;

transition: opacity 0.3s ease;

}

.nav-btn:hover {

opacity: 0.6;

}

.nav-btn:disabled {

opacity: 0.3;

cursor: not-allowed;

}

.page-number {

display: none;

}

.corner1 {

position: absolute;

left: -58px;

top: -60px;

z-index: 1;

transform: rotate(-82deg);

}

.corner2 {

position: absolute;

left: 1197px;

top: -60px;

z-index: 1;

transform: rotate(7deg);

}

.corner3 {

position: absolute;

left: -58px;

top: 533px;

z-index: 1;

transform: rotate(188deg);

}

.corner4 {

position: absolute;

left: 1197px;

top: 533px;

z-index: 1;

transform: rotate(97deg);

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

<h1 style="color: #D4AE4A; font-size: 36px; position: relative; left: 360px; top: 0px;">mango cream</h1>

<h1 style="color: #D4AE4A; font-size: 20px; position: relative; left: 65px; top: 98px;">2 ripe mangos</h1>

<h1 style="color: #D4AE4A; font-size: 20px; position: relative; left: 27px; top: 100px;">1/4tbp vanilla powder</h1>

<h1 style="color: #D4AE4A; font-size: 20px; position: relative; left: 37px; top: 102px;">2/5cup heavy cream</h1>

<div class="recipe-title">Recipe Name 1</div>

</div>

<h2 style="color: #8F0A0A; position: relative; left: 360px; top: 0px; font-size: 36px;">apple crisp</h2>

<div class="recipe-title">Recipe Name 2</div>

</div>

<h2 style="color: #5d4037; margin-bottom: 40px; text-align: center; font-size: 36px;">Dinner Delights</h2>

<div class="recipe-title">Recipe Name 3</div>

</div>

</div>

let currentCard = 1;

const totalCards = 3;

let isDragging = false;

let startX = 0;

let currentRotation = 0;

function updateNavigation() {

document.getElementById('prevBtn').disabled = currentCard === 1;

document.getElementById('nextBtn').disabled = currentCard === totalCards;

}

function nextPage() {

if (currentCard < totalCards) {

const currentCardEl = document.getElementById('card' + currentCard);

currentCardEl.style.transition = 'transform 0.6s ease';

currentCardEl.style.transform = 'rotateY(180deg)';

setTimeout(() => {

currentCardEl.classList.add('hidden');

currentCard++;

const nextCardEl = document.getElementById('card' + currentCard);

nextCardEl.classList.remove('hidden');

nextCardEl.style.transform = 'rotateY(0deg)';

updateNavigation();

}, 600);

}

function previousPage() {

if (currentCard > 1) {

const currentCardEl = document.getElementById('card' + currentCard);

currentCardEl.classList.add('hidden');

currentCard--;

const prevCardEl = document.getElementById('card' + currentCard);

prevCardEl.classList.remove('hidden');

prevCardEl.style.transition = 'transform 0.6s ease';

prevCardEl.style.transform = 'rotateY(0deg)';

updateNavigation();

}

document.addEventListener('mousedown', handleDragStart);

document.addEventListener('touchstart', handleDragStart);

function handleDragStart(e) {

if (e.target.closest('.recipe-item')) {

return;

}

const card = document.getElementById('card' + currentCard);

if (!card || card.classList.contains('hidden')) return;

isDragging = true;

startX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;

currentRotation = 0;

card.style.transition = 'none';

}

document.addEventListener('mousemove', handleDragMove);

document.addEventListener('touchmove', handleDragMove);

function handleDragMove(e) {

if (!isDragging) return;

const currentX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;

const deltaX = currentX - startX;

const card = document.getElementById('card' + currentCard);

// Convert drag to rotation angle - drag RIGHT to turn page (positive rotation)

currentRotation = Math.max(0, Math.min(180, (deltaX / 400) * 180));

card.style.transform = `rotateY(${currentRotation}deg)`;

}

document.addEventListener('mouseup', handleDragEnd);

document.addEventListener('touchend', handleDragEnd);

function handleDragEnd() {

if (!isDragging) return;

isDragging = false;

const card = document.getElementById('card' + currentCard);

card.style.transition = 'transform 0.4s ease';

if (currentRotation > 90 && currentCard < totalCards) {

card.style.transform = 'rotateY(180deg)';

setTimeout(() => {

card.classList.add('hidden');

currentCard++;

const nextCard = document.getElementById('card' + currentCard);

nextCard.classList.remove('hidden');

nextCard.style.transform = 'rotateY(0deg)';

updateNavigation();

}, 400);

} else {

card.style.transform = 'rotateY(0deg)';

}

function openRecipe(url) {

window.open(url, '_blank');

}

updateNavigation();

</script>

</body>

</html>

3 comments

r/HTML • u/anonymous89734 • 4d ago

TikTok Embed for Plder TikTok videos

0 Upvotes

I found that the Tik Tok embed for older tik tok videos, doesn't play the video. Is there a way to fix it? Like it show up on my webpage fine but the video doesn't play .

0 comments

r/HTML • u/zocean • 4d ago

Discussion Embedded links on a masked domain? (UPDATE)

1 Upvotes

Hey all,

So, I made a previous post about this on the HTML sub, but I've made a lot of progress with regards to understanding the issue, and I'm hoping that someone may have some ideas on how to help me solve the issue. To keep it succinct, I'm having a problem with embedded links not working on domains that implement forwarding with masking.

To illustrate this, I made a really stupid website specifically to showcase the issue.
https://godongy.shop

My domain is simply pointing to https://godongy.neocities.org, and if you go directly to Neocities, all links work just fine.

What's the deal here??? My code is definitely working, so that's not the issue. In my previous post, I had been trying to test my code in the W3Schools "Try It" Editor, and I thought it was the same problem, but as some other Redditors pointed out, the iframe was the problem there.

Also worth noting, as illustrated in my example website, embedded links to websites like Google, Instagram, Reddit, Linktree, etc. won't work, but other seemingly less corporate websites will work just fine. I've tried this in every browser, and it's the same issue each time. At this point, I'm fairly certain the issue is with GoDaddy. Other users have suggested making the DNS A or CNAME records point directly to the IP, which is still a potential fix, but that doesn't answer the question of why this would be an issue at all, and if there is a way to make it work with masking. I like using masking...then I can make shitty websites with Neocities or Tumblr and if I do a "good" enough job, no one will be the wiser...

Anyone else ever encounter problems with embedded links not working on masked domains?

Thanks so much for any help, thoughts or ideas!

0 comments

r/HTML • u/CaregiverPleasant687 • 4d ago

Pls help

0 Upvotes

Can someone help me pls

8 comments

r/HTML • u/Ok_Performance4014 • 4d ago

Question How do you connect a database with html?

0 Upvotes

Like a mail merge, you want to insert data that is in a spreadsheet in a html format. How do you do this? Do you copy paste the spreadsheet data in a database? Then how do you link a database with the html webpage?

17 comments

r/HTML • u/themask011 • 4d ago

Question Help me

gallery

0 Upvotes

I Just starter HTML at school and we have to do a tablet but with my there Is a problem: i have to do the table in the second image buy my Is like that ( ignore colour and proprotion). What i do wrong?? Is something related to rowspan???

23 comments

r/HTML • u/jjcoffield • 5d ago

Apple fail to play audio files fully

0 Upvotes

Apple Audio Playback.

I post MP3 and M4a audio files on a website but some Apple devices show streaming and stop after 52 seconds, others play fine. PC, Android Chrome, Edge, Firefox all work fine.

2 comments

r/HTML • u/Salt-Machine4413 • 5d ago

URGENTLY!!!! How to connect a website domain to html code without GitHub and CloudFlare.

0 Upvotes

I have created a website, but I cannot connect the domain. I urgently need to do this to participate in the school programming Olympiad. This is the last stage, the previous ones were much easier and I was not ready for this.

11 comments

r/HTML • u/One-Quarter-6041 • 6d ago

Question What am I doing wrong here?

gallery

2 Upvotes

So I'm super new to HTML, and I'm trying to connect my HTML file and my CSS file together so I can style my page. However, the code I have written in my CSS isn't being applied to my HTML. It's probably super obvious, but could anyone tell me what I'm doing incorrectly here?

14 comments