#html tutorial

[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

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

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

[flowcodes]

Fake Ao3 App

Originally posted under my main blog: FlowGeeksOut in the community 'Crying ao3 down'

Greetings everyone reading this it has recently come to my attention that there is an app claiming to be affiliated with ao3 along with OTW that is not ans has privacy safety concerns.

For context earlier today ao3 was having issues and the Ao3 News Tumblr blog made a post about it. I being in the Cyring Ao3 Down community went to reblog it there and link people who were having issues to the post in hopes for them to understand what was happening if they were not already aware. That was when I came across the following post from @elijah-j

Obviously the edit was not there before. Anyways I saw this post and became confused and concerned.

In case you were not aware ao3 is part of the nonprofit organization OTW. This is very important for serval reasons. One of most being legal protection for both ao3 and the fan content creators that host their content on ao3. Since ao3 does not run ads and are part of a non profit organization they therefore do not make any money off of the fan works hosted there. This therefore gives a lot of protection to ao3 and the fan creators against civil litigation from the copy right holders of the Fandom you wrote for. Since the biggest argument in those cases is about profits and if ao3 was running ads and gaining profit from fan creators hosting the fan content there and or paying the fan creators to do so it is harder for a court case to be nessary and or winnable.

As a fan creators for has over 100 works hosted on ao3 I feel very safe being able to express my fanworks with all this protection. So imagine my concern when I saw the post shown above. I then asked the poster @elijah-j for clarification see the comments below

As seen in the last screenshot as soon as I was made aware that it was "in the app only" my brain immediately jumped to this being a scam since and let me say this load and clear THERE IS AND HAS NEVER BEEN AN APP FOR A03

I then explained this to @elijah-j as seen in the screenshot below

Yep that last screenshot says there was NOTHING IN THE PRIVACY POLICY

This horrible because in a way they have the right to do whatever the hell they want with any personal data they have collected on you.

I proceed to let @elijah-j that i think they should report said app to the play store and ao3 because this could cause many problems for a lot of people. @elijah-j agreed with me and did so.

So if you are using an app that is using ao3 name you should report it to the app store and ao3 along with deleting your account on the app if possible then the app.

If you used a similar password to any other website you should change the password.

I will find the link again of where to report it to ao3 along with more information about ao3 and the law if you are interested about the importance of ao3 not having ads.

If you have any questions or concerns please feel free to comment them and I will try my best to help you find an answer and or solution or way forward.

And thank you for @elijah-j for letting me post this!

Stay safe

Links

[xiaokuer-schmetterling]

PODFICCER (and fic author) RESOURCE: things i learned about HTML today

-> from this reference work on ao3: A Complete Guide to 'Limited HTML' on AO3 by CodenameCarrot (please go leave a comment if you find anything here useful !!!)

EDIT: OMG Y'ALL I HAVE BEEN HAVING SO MUCH NERDY GEEKY FUN TWEAKING MY PODFIC HOW-TO GUIDE WITH THIS STUFF

headings, blockquote, div

----

-----

html currently allowed by ao3 html sanitizer

a. abbr. acronym. address. b. big. blockquote. br. caption. center. cite. code. col. colgroup. details. dd. del. dfn. div. dl. dt. em. figcaption. figure. h1. h2. h3. h4. h5. h6. hr. i. img. ins. kbd. li. ol. p. pre. q. rp. rt. ruby. s. samp. small. span. strike. strong. sub. summary. sup. table. tbody. td. tfoot. th. thead. tr. tt. u. ul. var.

-----

in-line (text) formatting tags supported by ao3

-----

OMG LOOK AT THIS !!! IDK WHEN I WOULD EVER USE THIS BUT LOOK HOW COOL !!!

-----

paragraphs & p formats: archiveofourown.org/works/5191202/chapters/161901154#AddParagraphs

-----

omg I'VE ALWAYS WONDERED HOW TO GET THAT LINE BREAK THINGY IN THE MIDDLE OF THE PAGE !!!

-----

end post

[dragunova]

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

[tpointtechadu]

HTML Made Easy: The Ultimate Beginner’s Guide

Discover the best way to learn HTML for beginners with this easy-to-follow tutorial. Start from the basics, explore real-world examples, and build a strong foundation in web development. Whether you're new to coding or looking to refresh your skills, this guide makes learning HTML simple, practical, and fun.

[tutorialwithexample]

HTML for Beginners: Easy-to-Follow Tutorial to Kickstart Your Web Development Journey

If you are interested in building websites, learning HTML (HyperText Markup Language) is the perfect place to begin. This HTML tutorial for beginners will help you understand the basics of web design in simple terms.

What is HTML? HTML is the foundation of all web pages. It’s a language that uses "tags" to organize and display content like text, images, links, and more. When you visit any website, what you see on the screen is made possible through HTML.

Why Learn HTML? HTML is easy to learn and essential for anyone who wants to design or edit websites. Even if you're planning to become a front-end or back-end developer, understanding HTML is crucial. It helps you control how web pages are structured and displayed.

Basic Structure of a Web Page An HTML page typically includes the following:

Headings – To define titles and subheadings on your web page.

Paragraphs – To add blocks of text content.

Links – To connect your web page to other pages or websites.

Images – To make your page more engaging.

How to Get Started with HTML You don’t need any special software to learn HTML. You can start with a simple text editor (like Notepad) and a web browser (like Chrome). Write your content, save it, and open it in the browser to see your web page come to life.

For a detailed step-by-step guide, visit HTML Tutorial for Beginners. Happy learning!

[jtpoint]

Learn the basics of web development with this HTML tutorial for beginners. Easy-to-follow guide to creating web pages with headings, links, and images. Perfect for new developers starting out!

[warrenwoodhouse]

How to create a Live Tile on Windows 11 (Tutorials) (Codes)

Learn how to create custom live tiles for your blogs and websites for use on Windows 8, Windows 10 and Windows 11.

[ctechstudy]

Understanding HTML: The Building Blocks of the Web

In the vast landscape of the internet, HTML stands as the foundation upon which the digital world is built. From simple static web pages to dynamic interactive experiences, HTML (Hypertext Markup Language) plays a pivotal role in shaping the online landscape. Let's embark on a journey to demystify HTML and understand its significance in the realm of web development.

What is HTML?

HTML is a markup language used to create the structure and content of web pages. It consists of a series of elements, or tags, that define the various components of a web page, such as headings, paragraphs, images, links, and more. These elements are enclosed within angled brackets (< >) and typically come in pairs, with an opening tag and a closing tag, sandwiching the content they define.

The Anatomy of HTML:

Tags: Tags are the building blocks of HTML and serve as the basic units of structure. They encapsulate content and provide semantic meaning to different parts of a web page. Common tags include <html>, <head>, <title>, <body>, <h1> (heading), <p> (paragraph), <img> (image), <a> (anchor/link), and many more.

Attributes: Tags can also contain attributes, which provide additional information about the element. Attributes are specified within the opening tag and consist of a name and a value. For example, the <img> tag may include attributes such as src (source) to specify the image file and alt (alternative text) for accessibility purposes.

Nesting: HTML elements can be nested within one another to create hierarchical structures. This nesting allows for the organization and hierarchy of content, such as placing lists within paragraphs or dividers within sections.

Document Structure: Every HTML document begins with a <!DOCTYPE> declaration, followed by an <html> element containing <head> and <body> sections. The <head> section typically contains metadata and links to external resources, while the <body> section contains the visible content of the web page.

The Role of HTML in Web Development:

HTML serves as the backbone of web development, providing the structure and semantics necessary for browsers to interpret and render web pages correctly. Combined with CSS (Cascading Style Sheets) for styling and JavaScript for interactivity, HTML forms the core technology stack of the World Wide Web.

Conclusion:

In essence, HTML is the language of the web, enabling the creation of rich and immersive digital experiences. Whether you're a seasoned web developer or a newcomer to the world of coding, understanding HTML is essential for navigating the intricacies of web development. Embrace the power of HTML, and embark on a journey to craft compelling narratives and experiences in the ever-evolving digital realm.

[iamstumpeded]

Anyone who says this took a lot of time is probably taking a screenshot and photoshopping it, which is way more effort than you need to spend on making Musk look stupid.

So I'm going to show you very basic HTML editing. This is probably doable on mobile, but I don't know it off the top of my head, so you'll need a computer for this.

Find the tweet you want to edit. Right-click on it and choose "Inspect"

2. A panel will open. In most browsers, this will be to the right, but some might have it at the bottom of the screen. You can hover a line to highlight the element it represents.

3. Tweets contain some amount of <span>, which is basically a bunch of text. Click on the arrow to the left of the line to see the contents of the span. Any links in the tweet get a separate span nested in <a>.

4. Double-click on the white text and edit to your heart's content. If you want to completely get rid of a span, just delete the contents and leave it blank. Push enter to apply the changes. You will see the changes immediately after. Do not refresh the page or all your changes will be lost.

5. If you can't find an element in the code panel, click the button on the top left of the panel.

Now click on the element in the website view. It should now be highlighted in the code panel as well, and you can make any edits you want.

6. Take a screenshot. Boom. You're done. You now have a fake tweet with identical formatting to an actual tweet, no dealing with alignment issues or mismatched fonts.

You can change EVERYTHING on the webpage using this panel. Some things are just more complicated than text. Have fun poking around, but do remember that refreshing the page fetches all the data of the original page, and that sending the link to someone sends it unedited.

[flowcodes]

I posted this originally on the comminuted crying ao3 is down under flowgeeksout and it thought it would be a good idea to post here.

Just thought I would make this post since people like the person below me have trouble with ao3 loading but it is not down. Here are some ways to try to fix the problem.

1. Delete your search history on the browser. Sometimes it is just being dramatic.

2. If that does not work check to see if you have any other apps open in the background and close them

3. If this also does not work then try shutting all the tabs on the browser that you are using

4. Check on different tab and see if your browser is working on the other website if not then it could be an internet/wifi/data problem.

5. If it is a internet/wifi/data problem first if you have your wifi on try turning it off to be sure your phone is not being dramatic. Try the verse if you are using data.

6. If all of the above fails try using a different browser.

7 A. If that fails. Try by A. Making sure everything is off meaning apps and websites and powering off the device then power it back on

7 B. Make sure your device is on the latest update version

8. If all fails then sorry it might be time to look for a new device to read your fic on whether switching to another device you own and check if it works there if it does then it is the original devices issue and you may in fact need a new one.

I hope this is helpful!