#HTML tutorial

[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!

[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! 🐚

[ashesofariandel]

Hiii made a small accessibility tutorial for custom html webpages, feel free to look at it/use it for your websites byee

[transbro]

Do you want links or a centered bio? Maybe even an indent or two? today ill be showing you how to get your bio to look like this:

To start you'll have to go on your PC and go to your tumblr page, you'll wanna click on the URL with the little globe sign and ends in .com

After this youll be greeted with your tumblr url, head up to the top righthand corner and click on this paint icon

After you click on that, you'll be at your editor page

Everything were gonna be doing is in the Description box at the very top, this is were were gonna put some basic html code.

Links:

To add a hyperlink to your bio you'll need to copy this html:

<a href=""></a>

Inbetween the "" you'll put your url, and inbetween the >< is were you put your text, telling people what theyre about to click on! if you do it right it'll look something like this

<a href="thisisaurl.com">Link to a url!</a>

Make sure to add the end </a> or whatever you write after that link will be apart of your link!

Indents:

to add an indent to your bio you'll need to add this html:

<p></p>

pretty simple! image them as little Paragraphs, anything you put in between will be its own thing, and if you want to make a separation, just add another <p></p>

an example would look like:

<p> hi im really gay. </p><p> and trans! </p>

You can add as many indents as you like! just make sure to put all your text inbetween the p's!

Centering:

To center your text you'll need to follow the steps above.

Put whatever is in your bio between <p></p> then add this to the top of your bio:

<p class="center">

this will turn everything between ur <p></p> into centered text!

Thats all the bio tips i have for now, happy blogging :P

[flowcodes]

In Ao3 say you are making a newspaper clipping. Or a fake essay for your character to write. Whatever you need a title for this is how you do it in HTML.

First, make sure you are in HTML in the text box and you will need to put the title that you want (or you really just want some big text. I won't judge) and put a < h1> without the space at the beginning of it. So for example

< h1> Hola

Again without the space. Then at the end of the text, you will put < /h1> again without the space. example

< h1> Hola < /h1>

Now say you think this is too big for your liking. Or you need a subheading for whatever reason. Well, you can use the same basic format: <h_> and </h_> all the way up to six.

Now you may be thinking "Wait I want it to be smaller. Why would I go bigger in number? Won't it be bigger?" No, the bigger the number in this case would be smaller the text. So a little bit of a guide if you are still confused or you just want it. Without the space.

< h1> </h1> Heading

< h2> </h2> Sub Heading

< h3> </h3> Sub Sub Heading

< h4></h4> Sub Sub Sub Heading

< h5></h5> Sub Sub Sub Sub Heading

< h6></h6> Sub Sub Sub Sub Sub Heading

You can only go up to (down to?) 6 with the heading stuff.

I hope this helped!!

[gordonramsei]

heyyyyyyy  fools  &  ghouls  !  i  had  a  request  on  how  to  properly  install  popup  muse  pages  ,  so  here  i  am  with  a  walk  -  through  +  codepen  for  those  of  u  who  are  visual  learners  (  aka  me  lmao  )  .

[alucarddear]

I have a question about your bio. How did you manage to link the masterlist and stuff? For me there isn't an option to do so.

That’s because there isn’t a built-in option. My description box uses simple HTML codes to link stuff, but you cannot do it on mobile.

Use your PC or laptop to write it and it’ll work on both PC and mobile. Note that you cannot edit your description on mobile though or the links will be gone.

Do the following:

1. Click on "edit appearance" or customise:

2. Write on the description box like you normally would. Use HTML code for links:

<a href=“http://blogname.tumblr.com/tagged/whatever”>Click for whatever</a>

Note that the way spaces are coded has changed recently. It's not - or + anymore, but %20. This might be a reason for having broken or incompatible links depending on device used. If you have spaces on your #tags, they should be written as %20. Ie, my tag #alucarddear masterlist becomes alucarddear%20masterlist on the link portion of the HTML.

Actual example of how mine looks like:

I hope I explained it well enough and this helps you.

[nananarc]

Pro tip: How to put an url into your blog description

put this in your desc: TITLE

replace URL with the url you want

replace TITLE with the text you want the url to be displayed with

profit

[memento-morri-writes]

hi morri!

you talked about doing a page for your WIP, and I'd like to ask how do you do them?? I've tried to make pages for my WIP before but coding is not a language i understand sadly T-T

do you have mayhaps some tips? or general advice? or something because I've tried for ours and i never end up doing anything and I'm so tired T-T

thanks, love

(@/ink-fireplace-coffee)

Hi Carmen!

NOTE: This is kinda gonna assume that you have never touched a custom code in your life and have no idea how html works. I tried my best to make it simple, but also cover as much as possible. Be warned, it's a REALLY long post. But hopefully it's helpful!

Ah, okay, well, there's a lot to get into here. But I will try my best to explain it all!! First off, if you've never made a custom page before, you need to ask staff to add JavaScript support to your blog. You can do that really easily, and it should only take them about 24 hours to get back to you.

Once you have JS enabled on your blog, you need to actually make the new page, like you would any other page. (Open your blogs theme editor on desktop, scroll down on the sidebar until you see "pages" and hit the plus/new page button.)

Once you've done that, click where it says "default layout" (or something similar) and change it to "custom layout". Choose a url for your page (for example, my page for ATQH is just "memento-morri-writes.tumblr.com/atqh".) You only need to put anything that would come after the /. (So in my case, I'd just put "atqh" in that box.

Okay, now you need a theme. There's not a lot of them out there when it comes to ones built specifically for written WIPs. @bebewrites has some amazing ones on her blog! (05 and 02 are my personal favorites.) Also, this page by @/seyche is gorgeous!

Once you've chose a theme, open the link to the code hosting site (github, pastebin, etc.) and copy all of the raw code. (You can highlight and copy it manually, or sometimes there's a button that says "raw" that makes it easier.)

Paste all of that nonsense into where it says "html here" on your blog. Hit "update appearance". You should see a little, sort of squished preview of the page.

Now comes the hard part. Editing the html. I'm gonna go into detail about this under the cut, since it'll get long.

Firstly, a lot of codes have some degree of instructions written in them. Any text that looks slightly greyed out is "comments" or code that doesn't do anything, but is there to give you guidance. Keep an eye out of those as you go through the code!! They'll often tell you where new sections begin or end, so you know what you're editing!

Firstly, start at the very top of your code. Nearly the very first thing on there it's going to say <title> [some kind of text] </title>. This controls what shows up on the browser tab! So make it descriptive, but short and to the point. (I usually just do the story name or it's abbreviation.)

Next there's gonna be a very long section called <style>. Most of this you don't need to worry about, unless you really know what you're doing, but there are some important bits.

Directly under where it says <style> is where you should look for this next bit. It should look something like this, but it might look different depending on the code. There are hundreds of "right" ways to code a page, it's all up to preference.

Alternatively, if there's not a nice, neat section for all the colors and fonts, you can hit "ctrl + f" and type in "color", and you can arrow through the results until you find one that mentions background/text/heading color.

The important thing here is the numbers and letters in red. Those are Hex Codes!! (hex cause there's 6 digits.) They're just a way for the computer to know what color you're talking about.

You can use a website like htmlcolorcodes to find any color you want. When you have one you like, click in the top box on the website and copy the 6-digit hex code. Paste it in place of the one in the code. NOTE: You need to keep the #. Otherwise the code won't recognize it as a hex code.

Some Quick Hex Codes: - Pure white is #fff - Pure black is #000 - #eee is a very lovely off-white that is much easier on the eyes than pure white.

Keep acessibility and legibility in mind when choosing colors!! Don't put white or off-white text on a pastel pink background! Conversely, some people have a hard time reading super high-contrast stuff, especially bright text on dark backgrounds. So try and avoid something like pure white text on a pure black background. (Light and dark is generally fine, but go for "softer", less saturated colors.) If people are getting a headache reading about your OCs, they're gonna decide it's not worth the trouble.

Okay, back on track. You can also change the font size for the headings, subheadings and body text. If it's not neatly given to you, you can do a "ctrl + f" and search for "size". That should help you find it.

Sizes are shown in pixels (px). This is the default measurement for font sizes, and really the only one. Sometimes referred to as "points". So if you hear someone say "12 point font", they mean a font that's 12 pixels tall. Pixels and points mean the same thing, so don't worry too much about it. But for html, you need to use the "px" after the number. This functions a bit like the "#" before the hex codes. It tells the computer what you want done and why. (Kind of.)

NOTE: I'm not going to talk about changing the fonts in this, since it's already getting really long. However, I will gladly answer an ask about it!

Now, onto the fun part!! Adding your information! Scroll down, or do a search for where it says "<body>". This should also be pretty clear cause the text will go from lots of colors to largely white with some green. This is where the actual content of the page starts. Or at least the content you care about.

From here on out, things could be arranged in any one of thousands of ways. So, I'm just going to walk you through the basics of html content.

First things first: basics. In html, every "type" of element or content has a symbol. That's what the stuff between the <> is. And for every one of those symbols, you need an end piece. A set of <> without a slash starts an item, while a set with a slash ends it. So a complete set would look something like this:

<[symbol]> [content] </[symbol]>

Exactly what those symbols are varies, and that's what I'll get to in a minute. Keep in mind that when you make a set of starting <> (ie no slash), tumblr will automatically add a closing set. However, it's not always the smartest, and you can end up with double ending sets. So double check that you only have one starting set and one ending set.

Now, no to the specifics.

Links:

Links are kinda wonky when it comes to html. The symbol for a link is "a", but you can't just go "<a>" and be done with it. A complete link looks like this:

Yes, you have to put the space, and the equal sign, and the quotation marks. So what does all that stuff mean?

Well, the space between the quotation marks is where you put the url. If you're linking outside of your own tumblr blog, you need the full url, copied and pasted from your browser bar, including the http nonsense. (It's not nonsense, but-) If you're linking something within your own tumblr blog, you only need to include what would come after the / in the url. For example if you wanted to link someone to your wip tag, which is "wip: cos", then you would put "/wip: cos" inside the green quotation marks.

NOTE: When you're linking outside of your own blog, get rid of that slash!! It's left there as a courtesy/spacer by most coders since they assume most people will only be linking within their own blogs. If you leave it with outside urls, things will not work.

Okay, but you don't just want a giant URL showing up in your pretty text. And html knows that. That's where the space between > and < comes in. What you put between the starting set and the ending set is what will actually show up on your blog. Just like when you highlight and link something via text on tumblr.

Here's an example of a "complete" link in html:

What this will actually do is when someone clicks on the words "wip tag" in your blog, it will take them to the tag "political fantasy wip" on your blog.

Text Changes:

So, earlier I mentioned being able to bold, underline, italicize text. Yep, you can do that!! In order to do that, you just put starting and ending sets around the text you want to be changed, like this:

The symbols are different for every type of text change, but here's a quick list:

Bold -

Italics -

Underlined -

Emphasis (looks different depending on the code) -

Strikethrough -

Images:

Images are also kind of weird. You can't just upload them from your computer. If they're images from unsplash, etc., you can just right click and click "copy image address". If they're ones you made, or that are on your computer, you'll have to upload them to a hosting site like imgur, and then right click and copy image address.

NOTE: Pay attention to image ratios and dimensions when using codes!!! If you put in an image of the wrong ratio (say, 5:7 rather than 4:5), the code will force it to fit and you'll end up with a very ugly picture! So just pay attention. If it's not obvious (1:1 (square)) or specified in the code, trial and error is fine!

So what do I need those image addresses for anyways? Well, here's a complete image code.

That bit in the green quotations is that image address you copied earlier.

PHEW!

That was a really long post! But I hope it answers some questions people on writeblr might have about editing page themes!!

If you have any questions, feel free to send me an ask or DM!

[click54366546456]

#اقتباس#اقتبسات#آل تمبلر#تمبلر بالعربي#عرب تمبلر#تمبلر#تمبلريات#كلمات راقت لي#دعاء#خواطر#عبارات#عرب#حكم#حب#تاق#هاشتاق

[mypicyard]

What is HTML?

if you have a question, what is html ? then answer is given below:

HTML represents Hyper Text Markup Language and consists of a series of elements. 

HTML is the standard markup language for making Web pages. 

HTML depicts the design of a Web page.

[techconsultant1]

Trending Top 3 CSS & Javascript Effects Designing 2022 / Animated css Effect /