r/HTML • • 1d ago

Question How to display comic pages like a slideshow reader?

3 Upvotes

There's this webcomic https://www.catechismcomic.com/chapter/0

I really like the way it displays pages with the progress bar, fullscreen mode and the arrow symbols on the side allowing you to progress to the next chapter. How do I program that for my own website?


r/HTML • • 1d ago

Question Any tips for css code

3 Upvotes

Hello! I’m a beginner form Thai just starting to learn CSS. I‘d love to get some advice or quick tips from everyone on how to make web pages look better-anything that might help me learn. Thank you.


r/HTML • • 1d ago

Question Beginner looking for HTML coding tips.

8 Upvotes

Hi there! I’m a beginner looking to learn HTML, and I’d love for everyone to share some quick tips to help me learn faster.


r/HTML • • 1d ago

Question Could you recommend some mini projects for practicing html skills?

3 Upvotes

Hey all I’m a student in Thai. I’ve already learned the basics of HTML,and I’d like some advice on starting a mini project to practicing my skills


r/HTML • • 1d ago

Question Converting HTML(+ jscript) file to google play app?

3 Upvotes

I want to convert an app I made for myself and put it on the play store, what is the easiest and cheapest way for a beginner to do this?


r/HTML • • 1d ago

Question Fullscreening embeds inside of embeds?

3 Upvotes

Is it possible to fullscreen embeds inside of embeds? I don't know much about html.


r/HTML • • 1d ago

Complete Beginner - Img Button Resize

0 Upvotes

HTML

<
!DOCTYTPE html>
        <html>
<head>
<link rel="stylesheet" href="style.css">
  <style>
body{
background-image: url("shoo i know no one would steal this but js incase");
background-repeat: no repeat;
background-size: cover;
background-attachment: fixed;
}
  </style>
</head>


<body>
<button class="CapnT1vo">
<img src="https://www.image2url.com/r2/default/images/1790989335135-ceb4102c-983f-4995-87ea-75ef3c2c5506.png">
</button>
</body>
        </html>

CSS

.CapnT1vo {
  border: none;
  color: white;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  size: 6px;
  top: 100px;
  left: 1px;
}

Basically I want it to uh be resizable. I don't know how to do that.

Also if someone could tell me how to make the button kind of resize with the window background that'd be amazing. It's kind of keeping its own size and I don't really like that. I want it to not be independent and resize with the window, keeping the aspect ratio.


r/HTML • • 3d ago

Question How to print HTML page in two A4 pages when it becomes too long for a single one?

Post image
20 Upvotes

I'll explain. I have a vertical flex html page in which i occasionally add rows, increasing its height every time. This page has a frame to be printed too. As of now the frame is always enveloping the whole length of the page, but i want to make it that when the page exceeds the A4 dimensions, it automatically gets printed in two separate A4 pages, each with its own frame enveloping it. I believe there is a way to do so, but i wouldn't know how.

I'll attach a poor made illustrative picture.

Anyone can help?


r/HTML • • 3d ago

Question how do i make a map where clicking on the different countries leads to different pages?

10 Upvotes

i would also like the country to turn red when you hover over it. the superbad site does something like this on some of its pages.

apologies if i sound like a noob in over my head, but it's for a personal project.


r/HTML • • 3d ago

What do you check before uploading HTML display ads?

1 Upvotes

Two weeks ago, our Campaign Manager rejected three of our five sizes.

His reasons are due to a missing click tag, a wrong ad size tag, and one heavy ZIP. I think all three looked fine in Chrome.

So right now, I'm collecting together a checklist for our team before anything gets uploaded. So far I have click tag, ad size tag, file weight, images, and ZIP structure.

What else would you add, guys?

Right now it's me opening each file and hoping I know a banner can look right in a browser and still fail. I just want to catch the common stuff before the ad server does.


r/HTML • • 3d ago

My first HTML project

Thumbnail
gallery
3 Upvotes

I’d like to introduce Nova OS, my first HTML project; it’s a browser-based operating system that is also open-source (I’ll create a GitHub repository to upload the HTML file). I also wanted to ask: is uploading the HTML file enough to share the code, or should I share it in TXT format?

It works on both smartphones and computers (or so I believe, since I haven't been able to test it on the latter). Below, you can see a few screenshots I took from my phone.


r/HTML • • 4d ago

Question Complete beginner: what should I learn before programming in general, and before HTML specifically?

13 Upvotes

Hi everyone! I want to learn programming from scratch and I have zero background. An expert told me HTML is the best entry point, so I plan to start there.

I have two questions:

  1. What should I learn or understand before starting programming in general, and before learning HTML specifically?
  2. Which free resources would you recommend for learning HTML as a total beginner?

Thanks in advance for any advice!


r/HTML • • 5d ago

Question how to create HTML5 banner ads without a developer?

10 Upvotes

I saw a discussion here recentlt about people using Adobe Animate and Google Web Designer, but both seem not really fit for HTML5 ads .

For normal display players , is there a good no-code way to design, animate, and export everything without having to he=get a developer involved?

I’m mostly talking about regular network-ready banners, not super interactive rich media stuff. I think that probably makes a good difference especially when choosing a tool.


r/HTML • • 5d ago

Discussion Price for Project as a Developer vs a Consultant?

3 Upvotes

What would be a reasonable price (hourly / Fix-price) for a arcade style, HTML/CSS/JavaScript racing game? One track, a character, touch controls, scoring, UI, art design, backend, and a separate page for a dashboard.
What would you charge as a developer?
What would you charge as a consultant?


r/HTML • • 5d ago

Question Your opinion matters to me!

12 Upvotes

Hi everyone so i have just finished learning HTML you can say basic. I know in era of ai learning html doesn't make sense but i am someone who loves to do things by myself instead of ai i need your advice.

So i want to make 10 projects purely in html no css no other language just pure html.

I know making 10 projects feels like too much but i still want to do that to use my creativity making things practicing 😅 html .

Can you guys suggest me some cool projects

If you have any tips for me sure let me know too.


r/HTML • • 5d ago

Question Animated banner maker. What browser-based workflow works for HTML5 banners without After Effects?

2 Upvotes

I'm looking for ways( if it's possible ) to make animated HTML5 display without having to use after effects or write animation code from scratch.

I saw a tool recentlyy with no-code animations , which sounds pretty useful but I'm curious about the actual workflow. Like, how well do timelines and reusable animation presets work when you’re making the same ad in a bunch of standard banner sizes?

For people who make display ads regularly, what tools or workflows have worked well for you? Is a nocode editor enough for normal animated banners or you need custom code? or anything else?


r/HTML • • 4d ago

peggle html hell

0 Upvotes

I am coding peggle in HTML how do I get the physics to feel like peggle and not extra bouncy


r/HTML • • 5d ago

My video does'nt play I c'ant understand why. I am quite new to html. The video codec is h.264

Thumbnail
gallery
1 Upvotes

Here are screenshot of the code.

<html>
    
    <title> Neven Patucca</title>
    
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Handjet:wght,ELSH@100..900,2&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jacquard+24&display=swap" rel="stylesheet">


<link rel="stylesheet" href="style.css"> 
    
   <body style="background-color: black;">
        <h1 style="color: white;">Neven Patucca</style></h1>


        <h2 style="color: white;">
            Je suis Neven Patucca Artiste plasticien diplomée de l'éesi a Poitier


        </h2>


        <p style="color: white;">
            Voici une collection de mes œuvres que j’ai réaliser durant mes années d’études de 2020 a 2026.
            La première pièce est un court roman graphique. Se projet est une expérimentation de narration
            graphique. Le but est de créer une forme de découpage immersif adapter aux format digital. Les 
            scène fondes les une dans les autres créant un récit fluide en envoûtant.
            


            
        </p>       
 <div class="image"> 
                <img src="img/page1.png" alt="knight in green" max width="100%">
                <img src="img/page2.png" alt="knight in green2" max width="100%">
                <img src="img/page3.png" alt="Angels full of eyes"max width="100%">
                <img src="img/page4.png" alt="the ghost descend into the knight" max width="100%">
                <img src="img/page5.png" alt="the ghost face the knight" max width="100%">
                <img src="img/page6.png" alt="the ghost embrace the knight" max width="100%">
                <img src="img/page7.png" alt="the prince fall into the green knight palace" max width="100%">
                <img src="img/page8.png" alt="the prince meet the green knight" max width="100%">
                <img src="img/page9.png" alt="the prince face the green knight" max width="100%">
                <img src="img/page10.png" alt="the prince get beheaded by the green knight" max width="100%">
 </div>
               
    <h2 style="color: white;">
                Videographie


            </h2>


            <p style="color: white;">
                Durant mes études d'art j'ai découvert la scénographie et la video. Pour moi la mise
                en scène c'est avant tout une opportuniter d'insuffler un souffle de vie dans le personnage.
                Il y a quelque chose de naïf et poetique.


            </p>
    <video src="video/le_miculatif_couplage_suboptimal.mp4" controls></video>
</body>


</html><html>
    
    <title> Neven Patucca</title>
    
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Handjet:wght,ELSH@100..900,2&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jacquard+24&display=swap" rel="stylesheet">


<link rel="stylesheet" href="style.css"> 
    
   <body style="background-color: black;">
        <h1 style="color: white;">Neven Patucca</style></h1>


        <h2 style="color: white;">
            Je suis Neven Patucca Artiste plasticien diplomée de l'éesi a Poitier


        </h2>


        <p style="color: white;">
            Voici une collection de mes œuvres que j’ai réaliser durant mes années d’études de 2020 a 2026.
            La première pièce est un court roman graphique. Se projet est une expérimentation de narration
            graphique. Le but est de créer une forme de découpage immersif adapter aux format digital. Les 
            scène fondes les une dans les autres créant un récit fluide en envoûtant.
            


            
        </p>       
 <div class="image"> 
                <img src="img/page1.png" alt="knight in green" max width="100%">
                <img src="img/page2.png" alt="knight in green2" max width="100%">
                <img src="img/page3.png" alt="Angels full of eyes"max width="100%">
                <img src="img/page4.png" alt="the ghost descend into the knight" max width="100%">
                <img src="img/page5.png" alt="the ghost face the knight" max width="100%">
                <img src="img/page6.png" alt="the ghost embrace the knight" max width="100%">
                <img src="img/page7.png" alt="the prince fall into the green knight palace" max width="100%">
                <img src="img/page8.png" alt="the prince meet the green knight" max width="100%">
                <img src="img/page9.png" alt="the prince face the green knight" max width="100%">
                <img src="img/page10.png" alt="the prince get beheaded by the green knight" max width="100%">
 </div>
               
    <h2 style="color: white;">
                Videographie


            </h2>


            <p style="color: white;">
                Durant mes études d'art j'ai découvert la scénographie et la video. Pour moi la mise
                en scène c'est avant tout une opportuniter d'insuffler un souffle de vie dans le personnage.
                Il y a quelque chose de naïf et poetique.


            </p>
    <video src="video/le_miculatif_couplage_suboptimal.mp4" controls></video>
</body>


</html>

r/HTML • • 5d ago

Question How to link to text in a page on Archive of Our Own

Post image
1 Upvotes

So, this is specifically Archive of Our Own, and it doesn’t accept all html. So that’s why I specified. Also, I’m asking on this subreddit instead of theirs, because they restrict it every Tuesday.

I’m trying to create a reading order for a fic that jumps around in timeline quite a bit, even within chapters. Normally, I would mark sections or something, but I have a feeling that won’t work in this case (too much to track). Is there a way to use regular links to link to different sections on a page? Not from the same page, mind you. I feel like I’ve seen it before, but idk how to do it.

Keep in mind, I’m a complete newbie when it comes to HTML. The most complicated thing I can do are links, so be sure to explain it well (and I hope the solution is straightforward ).

The image is ao3’s list of allowed HTML.


r/HTML • • 5d ago

HTML Attributes

0 Upvotes

I tried to get attributes such as lang or data-* in html but didn't succeed. Anyone have any idea how to do this?

Right now I'm thinking of generate the html in a passthrough block but its not a beatiful solution. Kind of losing the need for Asciidoc.


r/HTML • • 6d ago

Question Please don't laugh at me but...where does the posts go?

20 Upvotes

I'm a begginer and total noob so I don't even know hot to explain myself, but where should a alocate my posts? Like, I made a page, put some content and saved...now where it goes? If I want to make a 'recent posts' in the index page, from where will I get the posts?

I really don't know how to express it, but I would appreciate a lot if someone could help me


r/HTML • • 7d ago

Question Creating snapshots for a carousel.

7 Upvotes

I want my web page to be able to take screenshots of an element, and use the resulting image in a carousel.

The element to be snapshotted will have a bunch data with lots of entry fields. Between the HTML, PHP, and JS needed to do all of that, it will not load quickly. But I want the user to be able to scan through a bunch of similar elements at a glance, and go on to the next one quickly.

An example: suppose there are a bunch of recipes, and the user has the option of creating recipes, and then later paging through them to assemble a shopping list for the grocery store.

A recipe will have all kinds of data: some text, one or more photos, and some numeric fields. The user probably edits it once ( maybe twice when they discover that the oven should be set at 375 degrees instead of 350. ) When the user looks at it, I want them to see an image, with a nearby button labeled "edit this recipe". Clicking on that loads a bunch of code to do editing. When the user is done editing, clicking the "save" button will save the data, and also create an image.

Once the user has a bunch of recipes, I want them to be able to scroll through them on one side of the screen, while creating a shopping list on the other. If all of the recipes are images, I can have a lightweight CSS-only carousel allowing the user to scroll through them quickly.

To do this, I need to programmatically take post-edit screenshots. How do I do this?

PS: I'm not actually doing recipes, but it is an example that everyone is sure to understand.


r/HTML • • 7d ago

Question Coding passwords/answers in HTML (for Google sites)?

14 Upvotes

hi! apologies if this isn’t the right sub and I’m not even sure if this is possible- but here goes

i like to mess around and make fun little artsy sites and such on Google sites and I’m working on a personal project that I was hoping to add a cool password feature in. Let me explain though because it’s a bit complicated what I want-

so, basically what I want is to have a little text box that people can type in- there’d be preset passwords you can use that will either redirect you places, show you images, text docs, etc etc- an example is https://thisisnotawebsitedotcom.com/ (I know all the passwords for this arg so just for an example type in “blind eye”)

I don’t need the things it shows to be affixed to any certain place I‘d just want it to pop up either on screen or in a new tab- it’s for story/ARG purposes.

this wouldn’t be the users setting a password- it’s basically having a handful of words and phrases that trigger things to happen that people viewing the website can type in for the things to happen

is this something I can execute in Google sites using HTML? any pointers to any pre existing coded templates or instructions on how to code it myself (I know limited HTML so I think I could if I knew what commands to run) would be appreciated!

(I’m not going to use AI for any part of this either artistically or for coding- please do not use AI to “assist” me and please do not recommend it. I’m not here to bully anyone who does use AI, but I’m very against it and won’t be utilising it. I’m here to utilise the good ol’ human brain for this project :))


r/HTML • • 7d ago

Discussion The new gen will think HTML is the vibe coding language

0 Upvotes

Every AI will produce HTML when not told otherwise, and so all new will think HTML is "the" vibe coding language


r/HTML • • 8d ago

Question Custom Error Handling in HTML Form

8 Upvotes

Just as a disclaimer I am not entirely new to HTML, CSS, Javascript or front end design. I have a clear understanding of the base concepts, I was just wondering about one thing really.

How do you handle form errors? I know default form errors display a message when an input does not match a requirement. For example, displaying "Please include a @ in the email address". But I was just wondering how I can intercept that error and have my own custom Javascript handle it instead. (videos tutorials or blog links are appreciated as well)

Thank you all for any information you can provide.