#HTML tutorials

[warrenwoodhouse]

How to Import your Tumblr Blogs from your other accounts on Tumblr (Tutorials) (How Tos) (Guides) (Codes)

Guide by @warrenwoodhouse #warrenwoodhouse

You can import your Tumblr blogs from your other accounts on Tumblr, though it was a feature in 2012 and discontinued a decade later. Currently, the only way to import your content from your other blogs on your other accounts is to use the backup feature found in the Blog Settings area. You’ll need to use a computer as the exporting feature saves your blogs in ZIP Archives. You can then import them on another account.

You can learn more about this by CLICKING HERE to see the article on Tumblr Support.

[webtutorsblog]

Uncovering 10 Advanced HTML Tags for Proficient Developers

In the vast universe of web development, HTML (Hypertext Markup Language) stands as the foundation upon which the entire web is built. From simple text formatting to structuring complex web pages, HTML tags play a crucial role in defining the structure, content, and appearance of a website. In this blog post, we're going to delve into the world of HTML tags, focusing on 10 advanced tags that can take your web development skills to new heights.

 <canvas>: Unleash Your Creative Side

The <canvas> tag allows you to draw graphics, create animations, and render images directly on a web page. It's an essential tag for creating interactive games, data visualizations, and engaging multimedia content.

<video> and <audio>: Rich Media Experience

Enhance user engagement by embedding videos and audio files using the <video> and <audio> tags. These tags enable you to provide a seamless multimedia experience within your web pages.

 <iframe>: Seamless Integration

Want to embed external content like maps, videos, or social media feeds? The <iframe> tag lets you do just that while maintaining a clean and responsive layout.

<progress>: Visualizing Progress

Display progress bars and indicators using the <progress> tag. It's great for showing the status of ongoing tasks, file uploads, or any process that requires visual feedback.

 <details> and <summary>: Interactive Disclosure

Create interactive disclosure widgets using the <details> tags and <summary> tags. These are perfect for hiding and revealing additional content or information on demand.

<figure> and <figcaption>: Captioned Images

When you need to associate captions with images, the <figure> tags and <figcaption> tags provide a semantic way to do so, improving accessibility and structure.

<mark>: Highlighting Text

Emphasize specific text within paragraphs or blocks by using the <mark> tag. It's particularly handy for drawing attention to search terms or key points.

<time>: Semantic Time Representation

The <time> tag lets you mark up dates and times in a way that's machine-readable and user-friendly. It's an excellent choice for showing published dates or event schedules.

<article> and <section>: Structured Content

When organizing content, the <article> tags and <section> tags provide semantic structure. <article> is suitable for standalone content like blog posts, while <section> helps group related content together.

Unlock Your Full Coding Potential with WebTutor

If you're looking to master the art of web development and delve deeper into the world of HTML, CSS, JavaScript, and beyond, look no further than WebTutor. This premier online learning platform offers comprehensive courses and tutorials that cater to beginners and advanced learners alike.

With WebTutor, you will experience

Expert Instruction

Learn from industry professionals who are passionate about sharing their knowledge.

Hands-on Practice

Gain practical experience through interactive coding challenges and real-world projects.

Flexible Learning

Study at your own pace, fitting your learning journey into your busy schedule.

Supportive Community

Connect with fellow learners, ask questions, and collaborate on projects in a supportive online environment.

Whether you are a budding web developer or seeking to level up your skills, WebTutor provides the resources and guidance you need to excel in the world of coding. Visit today and embark on a journey of discovery and innovation!

In conclusion, HTML tags are the building blocks of the web, enabling developers to create diverse and engaging experiences for users. By harnessing the power of advanced HTML tags and supplementing your learning with WebTutor, you will be well on your way to becoming a proficient web developer capable of crafting exceptional online experiences.

[ivccseap]

HTML HAND WRITTEN NOTES

Html HAND WRITTEN Notes

[izicodes]

Convert HTML to Image: A Step-by-Step Guide ✨

Do you want to turn some HTML code you've made that's on your website and have a way to convert it into an image for you to save?

Well, look no further! I too wanted to do the same thing but funny enough, there weren't any straightforward tutorials out there that could show you how! After hours of searching, I finally discovered the solution~!

This is an old tutorial I made 🐼

💛 Set your environment

Before we dive into the conversion process, I'll assume you already have your HTML code ready. What you want to learn is how to turn it into an image file. You should have a good grasp of HTML and JavaScript. For this tutorial, we'll use the following HTML code example:

We won't include the CSS code, as it doesn't affect this tutorial. The JavaScript file (script.js) at the bottom of the body element is where we'll add the functionality for the conversion.

Your page should resemble the following:

As you can see, the "Click me" button will handle the conversion. We aim to convert everything within the div.info-div into an image.

💛 Using the html2canvas JavaScript Library

The html2canvas library allows you to take screenshots of webpages and target specific elements on a screen. Here are the steps to include the library in your project:

The steps to put the library in your project:

Visit the html2canvas website for more information.

Copy the CDN link from here

and include it in a script tag in your project's head tag in the HTML file:

That's it for including the library on the HTML side. Now, let's move on to the JavaScript code.

💛 JavaScript Functionality

Here's the JavaScript code to handle the conversion:

In this code, I want to turn the whole div.info-div into an image, I put it into a variable in const div = document.querySelector(".info-div");.

I also put the button into a variable in const button = document.querySelector("button");

I added a click event listener to the button so when the user clicks the button, it will follow the code inside of the event listener!

You can find similar code like this in the documentation of the html2canvas library:

What is happening here is:

We add the div (or what the element we want to take an image of) into the html2canvas([element]).then((canvas)

Added the image file type url to a variable = const imageDataURL = canvas.toDataURL("image/png"); - You can replace the png to other image file types such as jpg, jpeg etc

Created an anchor/link tag, added the href attribute to imageDataURL

The download attribute is where we will give the default name to the image file, I added "dog.png"

Perform the click() function to the anchor tag so it starts to download the image we created

And that's it!

💛 The End

And that's it! You've successfully learned how to turn your HTML into an image. It's a great way to save and share your web content in a unique format.

If you have any questions or need further clarification, please comfortable to ask. Enjoy converting your HTML into images! 💖🐼

[celestie0]

custom font colors tutorial

note: this is for my bb @tobaccosunbxrst but also just wanted to post it to public for anyone curious on how to do custom fonts w html on tumblr. i originally made this tutorial privately for my mutual @certainlysyko so apologies for the silly choice of example text that i used lol. anyways.

so as we know, tumblr only has the following default color options for text:

but what if we want some other cool colors like coral pink or cerulean blue or barf green?

to do custom fonts, it’s very simple, but it needs to be done on pc/laptop (cannot be done on app). we are going to start with a post:

then, you’re just gonna change whatever word that you want the custom color for into one of the tumblr defaults. you do this by just selecting the text with your cursor and then tumblr’s default colors pop up. you can change into any of them, this just establishes the code in the html and makes it easy to spot

then you're going to go to the little settings thingy at the top right of the post (the settings wheel) and click on this drop down, then click on "html" which will switch it to html

now it's in html. this looks very simple bc there is only one statement here. i’ll touch on how to deal with more lengthier blocks of html code later. but for now, note this section only:

<span class="npf_color_rachel">

this is ALL we need to work with in the code

we're going to change it from

<span class="npf_color_rachel">

to

<span style="color: #[hex code]">

so, for example, something like

<span style="color: #81b7ce">

note. you can also just copy paste the lines above so you don’t have to type it out

soooo all we did was delete the class=npf_color_rachel part and just replaced it with style=“color: #[hex code]

and here's the preview! all done :)

this is the website i use to find the hex codes. a hex code is basically those codes after the hashtag so like #81AACE (don't forget to input the hashtag)

now, for those lengthier posts i mentioned, you can use ctrl+f and search the word "color". it will show up any place on the post where you have a colored font (so do this after you’ve already changed all the places you want custom colors into default tumblr colors, like in the 1st step)

this way, you can easily find the places with <span blah blah> that you need to edit

here is an example of that in one of my posts:

and yeah! that’s basically it. disclaimer, i’m not a software engineer nor so i know much about tech haha, this is just for tumblr aesthetics

alright peace out! 🧚‍♀️✨ hope this is helpful

[adornedwithlight]

💫 HTML for pretty colors tutorial 💫

Hello sweet beans! Since my last tutorials have been yeeted into oblivion with deactivating my previous blog @/benkeibear I figured I repost them onto here! (Mind you, my old blogs are ahead)

I'm lowkey shocked to see blogs gatekeeping this knowledge but yeah. Make your blog pretty! Match your text to dividers or just have it as colorful as you'd like!

First of all, you can not do this on the mobile app! You need to either use a laptop or your phone / tablet's internet browser (in my case safari)

You start by logging into your account and either you make a post or you edit a post. I recommend making the post on the app first because editing is certainly faster & easier!

This is our starting point! For the fancy fonts you can use messletters

1. I will now log into tumblr on my web browser and click on "edit this post".

2. You then have to click on the little gear icon in the top right corner to change the settings on your post.

3. There you have to click on "rich text" to change it to "HTML"

Your post should now look like this:

A quick rundown on html.

You always start with a letter or code in brackets. to end what you're doing it's </>. The slash signals the end.

P= paragraph <p> and to end </p>

I= italics <i> and to end </i>

b= bold <b> and to end </b>

Now tumblr will automatically do this for you if you made a text bold/in italics on your mobile post but to keep this tutorial simple i left that out here. You can always edit your text in the app after! Just not the color.

And as you see, the fancy text is now in coding. But we get to that later!

To colorize your text it's easiest to just use this website as it gives you lots of options!

1. First i will be choosing the option of "solid color" and you can then put in the hex code of your desired color into the color box.

2. In the top box you will have to put the text you will color - for this tutorial it's "Testing"

3. Then you copy the box HTML code and paste it into tumblr where your word(s) are. Do not remove the <p> and </p> in front and after your word/ sentence!

4. For the sake of this tutorial I marked the html code for colors in pink and the words in blue

Your code will now look like this:

For the gradient you can simply choose horizontal gradient or three colored gradient on the website above and copy/paste the html text.

Mind you that every single letter will get its own color code now so the word gradient suddenly looks very long in html.

If you save the post it will now look like this!

Important to know is that you can color the fancy text only solid as the website can not color it as it is and putting the letter codes in the box above does not work either.

To color the fancy letters you simply copy the color code instead of the whole text - which looks like this:

Don't forget to add </span> behind the word/the codes you're coloring to signal that this is where the color stops! If you forget to add it, nothing will be colored.

If you decide you still want to have the fancy lettering in multiple colors you have to color letter code by letter code manually like this:

(I made a very poor choice on 2 different greens but oh well)

If you'd like to change your text, you can always do that on the mobile app like you usually would. You just can't change the color unless it's into a default color. But you can still change the size or make it bold for example.

Anyhoot, this is the whole magic behind html. It's a lot and might be very complicated at first but you will eventually get the hang of it! Took me weeks and hours until someone sat me down and went through it step by step.

If you have any questions or something doesn't work as you thought it would please don't hesitate to reach out - I'm always happy to help!

[lavendergalactic]

Hiii may i ask how you install fonts on bundlrs? I keep trying and it won’t work, I even looked at how you did it on your template but when I try to change the font it just doesn’t work?🥺 help please

yeah course i'll start from the very beginning

step 1

first i go to dafont and find a font i like and download it

step 2

i got to my files and extract all

step 3

i head my way over to catbox and just drop the OTF or TTF file into the box

step 4

ok now it's coding time, make sure you've got your code inbetween <style> </style> or else it wont work

so what you're going to write is

@font-face{ font-family:'font name'; src:url(ur catbox url);}

step 5

to actually use this font you've got to assign it to something (go to this website if you need extra help)

if you want the font to be assigned to everything you do this

p, r { font-family:font name; }

and if you need it bigger or smaller you can add " font-size:15px; " (15 can be replaced with anything)

hope this helps

[forecast0ctopus]

Idk if anyone's ever asked you this but how do you go about animating? i.e. what program do you use and what's your process?

I really wanna start animating but it seems like such a daunting task lol

okay lots of words so. under the read more lmao

toon boom harmony is industry standard 2d animation software so thats what i use for freelance work and more finished things like that antibodies animation (though i did the bg painting in procreate) – but totally not the ideal software for just starting out with animation lmao not to mention the fact that its a subscription :/// small sketches like that gif of bones i posted i'll sometimes tackle in procreate or procreate dreams, which are wayy more affordable and user friendly, even if theye a bit less robust.

if youre looking for a combination of robust software with the best price, blender is free and has 2d capabilities that ive messed around with a few times – its super cool, but the interface can be confusing if you've never worked in blender before and it has a bit of a steep learning curve BUT theres also always always always good ol paper and pencil, and nowadays most people own a camera and can access video editing software to stitch things together the best things to start out with are the basics, like a ball bounce animation, different weight objects falling, walk cycles – once you get an understanding of how timing works with animation, then tackling how characters move is the next step. just going into complex characters right off the bat is an easy way to get frustrated FAST lmao starting simple is always the way to go also a lot of cartoons and stuff move A Lot Less than you would think, a 10 second animation at 12 frames per second is almost never going to be 120 different individual drawings – sometimes you can just get away with a few blinks and a bit of lip sync to really sell an animation, so while animation does take a lot of time and effort try not to be too intimidated!!

[hokkienmee]

An Unrefined Way to Display Stats on Your Tumblr Blog Without Tumblr API

Demo:

What you'll need:

Tampermonkey

Google Sheets

some coding experience (this is not a beginner friendly tutorial)

Tutorial:

[kinglazrus]

How to rewrite a fic

Step one: Decide that your writing has improved drastically since you first started the fic and you need to rewrite everything if you want to continue.

Step two: Make notes of the existing storyline and characters to create a bare bones outline and keep track of where the story was originally heading.

Step three: Decide to date the fic to 2008 and start feverishly researching message boards, blogs, and other forms of social media at the time because the fic you chose to rewrite is only told through media outlets and wasn't that sooooo smart and totally not limiting to the story at all

Step four: Start learning HTML apparently because Ao3 lets you do cool shit and if your fic is supposed to have a 2008 message board then by god it's going to look like a 2008 message board.

Step five: die I guess?

[warrenwoodhouse]

index.html Template (HTML Templates) (Templates) (Codes)

A simple html template for generating a blank page for your self-hosted website.

[webtutorsblog]

Want to upgrade your coding skill to create animations and interactive graphics? This blog covers everything about HTML animation including the Canvas API.

[ivccseap]

HTML for Beginners

Html Tutorial

[astrojulia]

Hi!! I saw your blog and it's beautiful! I'd like to ask if you could share some tips about editing posts, specifically changing the font color and doing that cool effect where it has more than one color on the same font ☺ if you're not comfortable teaching that's okay too! Have a good night

Hello Siren,

Thank you for the compliment. Yes, I can teach you. Just follow a tip from Auntie here: do it because you genuinely like the aesthetic. The time you spend writing the post is sometimes the same as editing it, and in my experience, this won't necessarily translate into more likes or reblogs. So, do it because you think it's beautiful.

As comical as it sounds, I won't be using HTML in this post because using the codes could cause problems. I've seen some tutorials, but I just really learned when I searched on my own.. I also do all my editings on my notebook. So, here's everything I use:

Websites I use for editing:

HTML Code Editor: While you're creating your HTML, you can simultaneously see if it's working

BBcode & HTML Text Colorizer: This is where you'll create the gradient

Browserling: I use this site to make the gradient code compatible for Tumblr

Aesthetic Symbols: this is for that cute symbols

Piliapp: more copy/paste symbols

Fontes e Letras: copy/paste fonts

Canva: This is where I create some of my designs. I also use Photoshop

Deviantart: a lot of material for Photoshop like templates, PSDs and Renders (PNG image with a good resolution), you can see the ones I use the most in my sources

@animatedglittergraphics-n-more: dividers

@saradika: dividers

@engrampixel: cute material

Color Hunt: if you don't have a color pallete in mind, here you can find a lot of options

Adobe Color: if you want to create your own HTML color palette this site can help

DaFont: where I download my fonts, the ones I use the most are: Betterfly, Arcadepix, Starborn, Lemon Milk, Cursive Sans and BubbleGum

EmojiTerra: as I use tumblr on my notebook, this is where I get my emojis

HTML Text Editing

Important:

Go use the HTML Code Editor in this part and your life will be way easier.

Some things I do right here in the tumblr editor, like putting the images and different fonts like Lucille.

All HTML code starts with < > and ends with , that is, when you start a paragraph you will write <p> and when you finish you will write </p> (HTML Code Editor ends your coding automatically)

I'm teaching all this because if you want to make gradients in your entire text and not just in the title, you'll need to know about html

To start your HTML you will need to go to the gear that appears on the right side when you are writing your post, go to the bottom until you find the Text Editor and switch to HTML.

The Codes

<p> start a paragraph </p>

<br> to make a space between text less than a paragraph (good to use in indented text) you don't need to put </br>

<b> make the text bold </b>

<i> leave the text in italics</i>

<strike> leave the text crossed out </strike>

<small> make the text small like this </small>

<h1> make the text large like this </h1>

<h2> make the text large like this </h2>

<ul> Create unordered list (dotted) </ul>

<ol>Create lists with order (numeric) </ol>

*instead of making paragraphs you will create new items in the list using the code <li> </li>

<blockquote class="npf_indented"> make the text indented </blockquote>

<span style="color: #HTML"> Code to color your texts, pay attention that it uses (") instead of (') and doesn't use (;) </span>

Tutorial on creating invisible spaces, just like I use to do the navigation, if I put it here everything bugs. PT-BR

<a href="URL">Link Text</a>: Creates a hyperlink

Making your Gradient

Go to BBCode and HTML already with your HTML text and colors in hand. Write or copy your text in the box, choose the gradient type (I use middle) and select your colors (from one to three different colors)

Now copy the text in the "HTML code for this text: (To use on your website)" box and go to the Browseling, you will replace the (') to (") and the (;) for nothing

Copy and paste your new code direct in your tumblr post editor or in the HTML Code Editor. Success!!

I think that's all. Kisses from the Sea! 🐚

[hailsatanacab]

Chapters: 1/1 Fandom: Danny Phantom, Batman - All Media Types Rating: General Audiences Warnings: No Archive Warnings Apply Relationships: Danny Fenton & Wulf Characters: Danny Fenton, Wulf (Danny Phantom), Bruce Wayne, Tim Drake, Damian Wayne, Robin (DCU), Red Robin (DCU), Batman (DCU), Ra's al Ghul Additional Tags: Portals, Ghost King Danny Fenton, Comedy of Errors, DPxDC WEEK 2022, Time Travel, dp/dc week 2022, Swearing

Summary:

Okay, so Danny’s first attempt at a portal isn’t what one would call a success.

Unfortunately, instead of opening into a relatively safe (if incredibly underwhelming) cave, it splits a hole right into a great ocean of ectoplasm in the Ghost Zone, which promptly begins to flood the space around them.

It’s up to their ankles in seconds as gallons of foaming green water surge through the opening, with a thundering roar like waves crashing upon the shore.

“Uh…” Both he and Wulf just stare, watching with wide eyes as the day just gets worse and worse.

“Wulf!” Knocking himself out of his trance, Danny turns towards him and flaps his arms in panic. Oh, shit! This isn’t good! There’s no way this amount of ectoplasm in the material world is healthy, he’s going to be in so much trouble! What the hell are they meant to do? “Help!”

Originally written for dpxdc week 2022 for the prompt "Wulf teaches Danny how to open portals. It does not go to plan."

[knightobreath]

ok i like this web site building thing. i dont really know what im doing with any of this but i am going to make this site if it kills me.

ideas:

each comic gets its own page with a description and links and stuff

catagorized by genre

disqus comments on comic description pages

featured, new, and recently updated (LATER) on side bar

recently updated stuff that reads rss feeds (LATER)