#Basic HTML tags explained | Explore Tumblr Posts and Blogs

webtutorsblog · 1 year

Text

Mastering HTML Basics: A Comprehensive Guide with WebTutor.dev

As the foundation of web development, HTML (Hypertext Markup Language) is a crucial language for anyone looking to create websites or web applications. Whether you are a beginner just starting out or an experienced developer looking to brush up on your skills, WebTutor.dev offers an exceptional resource for mastering HTML basics. In this blog post, we will delve into the wealth of knowledge available at https://webtutor.dev/html/html-basic, and explore how this comprehensive guide can help you level up your HTML skills.

Structured Learning for Beginners

If you are new to web development and HTML, WebTutor.dev HTML Basics guide is an excellent starting point. The guide is structured in a way that is easy to follow, with concepts introduced in a logical order that builds upon each other. From understanding the basic structure of an HTML document to working with various HTML elements, HTML attributes, and HTML tags, the guide covers all the essentials in a beginner-friendly manner.

One of the strengths of the guide is its practical approach to learning. Each concept is accompanied by clear explanations, examples, and demonstrations of how to implement it in real-world scenarios. This hands-on approach allows beginners to apply what they have learned and see the results in their web pages, which helps solidify their understanding of HTML concepts.

Comprehensive Coverage of HTML Basics

The HTML Basics guide on WebTutor.dev covers a wide range of topics, providing a comprehensive overview of HTML fundamentals. Some of the key topics covered in the guide include:

HTML Document Structure: Understanding the basic structure of an HTML document, including the <!DOCTYPE>, <html>, <head>, and <body> elements.

HTML Elements: Learning about different HTML elements such as headings, paragraphs, links, images, lists, tables, forms, and more, and how to use them correctly.

HTML Attributes: Understanding HTML attributes and how to use them to customize the behavior and appearance of HTML elements.

HTML Tags: Exploring various HTML tags and their proper usage, including opening and closing tags, nested tags, and void tags.

HTML Forms: Understanding how to create forms in HTML to collect user input, including different form elements such as text inputs, checkboxes, radio buttons, and dropdown menus.

HTML Semantics: Learning about the semantic elements in HTML, such as <header>, <nav>, <main>, <article>, <aside>, and <footer>, and how they contribute to building accessible and SEO-friendly websites.

HTML Validation: Understanding the importance of HTML validation and how to validate HTML documents using online tools.

In addition to these topics, the guide also covers other essential HTML concepts such as doctypes, character encoding, linking to external resources, and best practices for writing clean and maintainable HTML code.

Interactive Learning Experience

WebTutor.dev offers an interactive learning experience with its HTML Basics guide. The guide includes numerous examples and exercises that allow learners to practice what they've learned in a hands-on manner. Learners can experiment with the code examples provided in the guide, make modifications, and see the results in real-time. This interactive approach helps reinforce the concepts and allows learners to gain confidence in their HTML skills.

Moreover, WebTutor.dev provides a code playground where learners can write HTML code, view the output, and experiment with different HTML concepts in a safe environment. This interactive feature allows learners to practice coding without the need for any additional tools or software, making it a convenient and user-friendly learning experience.

Up-to-Date and Accessible Learning Material

WebTutor.dev HTML Basics guide is regularly updated to ensure that it reflects the latest best practices and standards in HTML development. This means that learners can trust the content to be current and relevant to the latest web development trends. The guide is also designed to be accessible, with clear explanations, examples, and demonstrations that cater to different learning styles. Whether you're a visual learner who prefers diagrams and illustrations or a hands-on learner who wants to experiment with code, WebTutor.dev HTML Basics guide provides a variety of learning materials to accommodate different learning preferences.

Community Support and Resources

WebTutor.dev goes beyond just providing a comprehensive guide to HTML basics. The website also offers a supportive community where learners can connect with other web developers, ask questions, and seek help when needed. This community aspect adds an extra layer of support to the learning experience, as learners can learn from each other's experiences, collaborate on projects, and grow together as developers.

In addition to the community support, WebTutor.dev also provides additional resources such as cheat sheets, reference guides, and tutorials on related web development technologies, which can complement the HTML Basics guide and further enhance the learning journey.

Conclusion

Mastering HTML basics is essential for anyone interested in web development, and WebTutor.dev HTML Basics guide is a valuable resource for achieving that goal. With its structured learning approach, comprehensive coverage of HTML fundamentals, interactive learning experience, up-to-date and accessible materials, and community support, WebTutor.dev offers a robust and effective platform for learning HTML.

Whether you are a beginner just starting out or an experienced developer looking to refresh your HTML skills, WebTutor.dev HTML Basics guide is a valuable tool that can help you strengthen your foundation in HTML and set you on the path to becoming a proficient web developer. So, head over to https://webtutor.dev/html/html-basic, dive into the guide, and unlock the power of HTML for your web development projects. Happy coding!

2 notes · View notes

fandomsareforlife · 1 year

Text

Clarification: you don’t need to know how to use them, you just need to know what they are vaguely

#my polls #polls #technology #html #css #Java #context in the tags because why not #basically during dinner my brother asked me if I knew what html was #and I said yes #he then explained that it was to figure what the average person knew about html and mentioned css #I told him I knew what css was and he was very shocked #also almost outed myself as chronically online lol

1 note · View note

bobbiedebruyn · 8 months

Text

So you just joined Tumblr?

Tumblr basics + Fandoms/Gifmaking

Congratulations, you just landed at Tumblr! This hellsite (affectionate) can seem intimidating and complicated at first, but once you grasp the basics of it it’ll quickly turn into your own personal little hut in the forest. Tumblr is a website where you and only you curate your dashboard, you’ll see the content that you seek on your own. In this post, I’ll explain the basics of Tumblr and the basics of how fandoms function here with the help of Bob. Okay, let’s get started.

1. Blog customization

The first thing you should do as soon as you land on Tumblr is add a profile picture and header before you interact with people. You want to be distinguishable from bots and therefore avoid getting blocked. You can also add anything to your bio, there's no character limit. Some folks add their name and pronouns, but there are no rules about that. There are also no rules about profile pictures. It can be a picture of you, a picture of your dog, a picture of a rock, or a picture of your favorite character. If you plan on staying on the fandom side, you might notice that a lot of fandom blogs have colorful-looking icons (a cutout of a character on a colorful background), for these icons and also headers I suggest checking out source blogs that make those icons. For starters, @iconheadersource is a goldmine where you definitely going to find something that’d suit you and your blog.

Tumblr on mobile and Tumblr on desktop are two different creatures when it comes to customization. On the desktop, you can customize your blog with coding (HTML + JS). Now Bob will demonstrate to us some examples of blogs on desktop.

If you want to customize your desktop blog, I suggest checking out @phantomcodes and @glenthemes for the codes.

Tutorial on how to install themes

Using javascript on Tumblr pages

2. Search Engine

Nice! You've made your blog look pretty! Now, let's shift our focus to the search engine and ways to discover content. As mentioned earlier, you curate your dashboard by looking for things you enjoy and like. Search using hashtags or the names of your interests (TV shows, movies, birds, music, etc.) to find your piece of cake. For instance, folks who create posts about TV shows you like use tags to ensure their posts reach others interested in the same thing. So, let's go ahead and search for something right now.

Once you search for that specific tag, you are redirected to the corresponding tag page. Here, you can see that posts are sorted by "Latest" or "Top" (indicating posts with the most notes). On the right side, you will find related tags and blogs which are frequently using the searched tag. By following the tag, both the tag itself and the posts tagged with it will automatically appear on your dashboard in the "Your tags" section. You have the option to filter tags according to your preferences. In the settings, you can choose to block specific tags if you prefer not to see content related to some particular topics.

The only method for sharing posts and content on this website is through reblogging. On Tumblr, reposting others' content, including art, gifs, and fics, is not accepted. Reposting means downloading art, gifs, etc., creating your own post, and then sharing it. And that's a big no-no, strongly discouraged. Your likes essentially function as bookmarks, and you have the option to set them to be private. When you save something, it doesn't appear on your friends' dashboards.

We don't censor things here, and I advise you not to do so too. If you need to mention a word that might be potentially triggering or could be flagged on another social media, feel free to say it. Many users have specific topics and tags filtered out, so if you use variations like "K!tKat" instead of "KitKat" in the tags, it can bypass the tag filter, potentially causing more harm as people will see content that triggers them. And remember to always tag posts that have flickering or flashing!!!

If you want to organize your reblogs or make comments on a reblog, use the tags section and not the comments section itself. This is called "#add tags." Feel free to type whatever you want, but keep in mind that the original poster receives notifications when someone reblogs their post and adds tags. Yes, all tags are visible to us.

Okay, so let's quickly recap this information with the help of our dear friend, Bob.

3. Social interactions

So let's move on to one of the crucial topics - how to make friends on Tumblr? Personally, I don't think there's one particular formula for that. Sometimes you just see a funny bloke posting about something as random as desert rain frogs, grab them, and go "You're my friend now" and that's how you become mutuals.

However, there are other, more common ways to become friends with someone. You can start by reblogging someone's post, adding tags to the reblog, and then following the person. Create your own posts, tag them to ensure they reach the folks who are interested in the same things as you, and participate in fandom events and challenges if you're into that. Interact with people you want to befriend, message them, send them asks. You will eventually find your crowd. You'll also find swifties, and fans of supernatural who never moved on from that destiel love confession four years ago, they also can be your friends, at some point, you will become friends and chill with each other. Be open to new interests to make sure your dashboard is not dull and boring.

Tumblr doesn't have the supposed hierarchy, and you don't have to listen to anyone who tells you otherwise, you curate your own experience and blocking is pretty normalized here. Notes and followers (which are private for everyone) don't really matter, stick to your beliefs and your vibe and you'll be fine. We're all equal losers here.

4. Fandom / Gifmaking

Fandoms play a significant role on Tumblr, they're closely tied with gifmaking. As a fellow creature of fandom, I'm adding this part because we don't gatekeep - more gifmakers and fandom enthusiasts mean a better fandom experience. As I mentioned earlier, everything has its tag, making it easy to find your favorite TV show fandom by searching for the tag. This is also how you can connect with people who share an interest in that specific TV show. Upon entering the tag, you'll stumble upon numerous moving pictures – these are GIFs. People create GIFs of everything, from their "blorbo" (the term for favorite character) to beloved ships and favorite moments. There are also plenty of creative GIFs with different coloring and complicated effects. And the best part? You can do it too!

There are a lot of ways to make GIFs. Some people use Photoshop, and some use Photopea which is an excellent accessible option. I'll be linking posts for Photoshop under this text. For Photopea tutorials and guides, please check out @photopeablr.

I've been making GIFs for three years at this point, and those are the tutorials I used when I was just starting out:

how to make a gif:

comprehensive guide 101

basic gif making tutorial + mvp player installation

gifmaking for beginners

how to install MVP player on a PC

film downloading & screen-capping tips

correct photoset dimensions

coloring

how to fix orange-washed characters

how to: coloring east & southeast asian celebs

channel mixer

colored background

color manipulation

vibrant coloring

how to brighten dark scenes

color isolation

effects

glitch effect

blending

crossfade transition

gradient effect in the text

gradient text

red colour accent on the b&w gifs

how to add a gif in a template

blurring gif backgrounds

using templates

text

text tutorial 1

font resources

understanding fonts and typefaces

split text

subtitles

other

icon tutorial

gif headers

For more tutorials, inspirations, and resources - please check out @usergif. It's a good source blog for all gifmakers.

Wait but what's a source blog? These are blogs that center around a specific theme, creating content for a particular topic. They are managed by multiple editors, these blogs track their own tags to reblog content related to the theme. They can be source blogs dedicated to gifmaking (just like @usergif), a TV show, a movie, a character, a celebrity, a sports team, or literally anything else. Typically, these blogs incorporate terms like "network," "source," "central," "creators," "hub," or "daily" in their usernames, making them easily distinguishable from regular personal blogs. Examples of source blogs that come to my mind right now are @dailyanakin, @heartstoppercentral, and @nancywheelercentral.

Let's also talk about tracking tags, which are often included in blogs's bios, whether they're from source blogs or solo gifmakers. You can add these tags to your posts when creating a gifset related to a specific source blog or something you know a particular gifmaker would appreciate. Basically, the gifmaker can search their tracking tag, much like a regular Tumblr tag, and view the most recent sets in which someone used their tag.

The last thing I want to talk about are usernames, and main and side blogs. On Tumblr, we have two types of blogs: the main blog and the side blog. The main blog is the initial blog created when you sign up for your account. This blog has full functionality and all features, allowing you to follow other blogs, like posts, and send asks to other blogs. In addition to the main blog, you can create side blogs on your account. Side blogs lack some of the features of main blogs; you can't like posts, follow other blogs, or send asks from a side blog. They have slightly different functionality – a side blog can be password-protected, have multiple users, and allow you to send direct messages to people. Other users can follow your side blog, and you can receive asks from them.

Many people use side blogs as URL holders. For instance, when a new TV show is announced, someone might be the quickest to save all canonical character names. You can then message that empty side blog to inquire if they're willing to trade that specific URL or if it's available for a giveaway. Canonical URLs are often challenging to obtain, so many people add letters in between or at the end or use symbols like "-", and they also mix names and surnames of different characters.

5. The End

Okay, so we've just covered how Tumblr works, how fandoms operate, and how to get into gifmaking. I hope this guide by me and Bob has been helpful to you. If you have any questions, feel free to send them to my ask box or simply ask Bob. I hope you enjoy your stay here, and that your experience with this website will be a positive one.

#tumblr #welcome to tumblr #tumblr etiquette #how to tumblr #fandom community #fandom culture #photoshop tutorial #gif tutorial #gif resources #kas.txt #mine

702 notes · View notes

juney-blues · 2 years

Text

ever since i made THIS POST a lot of people have been asking for a tutorial, even though in pretty much all of the screenshots i included the specific part of inspect element showing exactly what i edited.

so buckle the fuck up I guess because the tumblr userbase want to find out how to make html pages unusable and who am I to deny you.

get ready for Baby's First HTML and CSS tutorial lmao

ok so first things first we need to go over BASIC HTML

html is made up of these things called "tags" which specify certain parts of the web page, such as

HEADERS (<h1> through <h6> in terms of importance)

PARAGRAPHS (<p>paragraph here</p>)

LINKS (<a href="linkhere"></a>)

BOLDED SECTIONS OF TEXT(<b>bold here</b>)

and a bunch of other stuff,

by default however, specifying all of this just gives us a plain white page with plain black text of varying sizes

that's of course, no fucking good, and sucks shit, so the arbiters of html decided to let us STYLE certain elements, by adding a STYLE parameter to the tag

this can change any number of elements about how things are formatted.

text colour, page colour, font, size, spacing between elements, text alignment, you name it? you can change it!

you might've noticed that, certain elements are nested in other elements

and that any changes that apply to one element, apply to everything included under that element!

how convenient!

anyway this method of styling things by adding a style=" " to their tags is called "in-line style"

i think because the "style" goes "in" the "line"

it's generally ALSO a pain in the ass to style an entire website like this and should be exclusively reserved for small changes that you only want to apply to specific parts of the page.

for any real change in style you want to create a <style> section in your page's header!

this can be used to make changes to how all elements of a type in your page are displayed

or even add new elements with whatever wacky styling you want that can be used with the <div> tag!

wow! isn't css just dandy!

and hell you can even use External CSS™ if you're making multiple pages and want them all to have a consistent theme, by pointing to a .CSS file (which is basically just a <style> header without the <style> tags lmao

ok this is all well and good and very interesting if, say, you're making your own website

*cough*neocities*cough*itsreallycoolandfree*cough*

but you came here because you want to FUCK UP A WEBSITE and make it look STUPID!!

so this is where the transform css property comes in~

you can read up on it HERE if you want the details but basically it allows you to apply mathematical transformations to any html element you want,

all of these fun bastards,

they can be really useful if you're doing some complicated stupid bullshit like me

OR for having fun >:)

if you'll remember, earlier i said that css properties apply to literally everything nested in an element,

and you MIGHT notice, that literally everything in pretty much all html files, is nested in an <html> tag

you can use style=" " or regular css on pretty much ANY html tag,

INCLUDING HTML!

ok ok that was a lot of buildup for something that i could've explained in one or two lines, but i gave you all this fundamental knowledge for a reason,

well, two reasons, go make a neocities

CHAPTER 2: THIS POST HAS CHAPTERS NOW

CSS KEY FRAMES BABYYYY

THESE FUCKERS DON'T WORK AS INLINE STYLING

I HAD TO TEACH YOU HOW CSS WORKED, TO GIVE YOU THE KNOWLEDGE YOU NEED, TO ANIMATE PAGES. TO MAKE THE FUCKERY COMPLETE!!!!

OKAY SO AGAIN READ UP ON THIS IF YOU WANT THE FULLEST POSSIBLE UNDERSTANDING

BUT WHAT KEYFRAMES ALLOW YOU TO DO, IS ANIMATE CSS PROPERTIES

and then make a class, which calls that animation...

and then assign that class. to your html tag.

and then vomit forever

we can do it in 3d too,

the only limit is your imagination... (and how many parameters you want to look up on w3schools and mozilla mdn web docs)

CHAPTER 3: APPLYING IN PRACTICE

ok now the fun thing about all of this, is you can apply it to your blog theme, literally right now

like literally RIGHT now

like step one, make sure you have a custom blog theme enabled in your settings, because that's turned off by default for some reason

step 2: edit theme

step 3: edit html:

step 4: apply knowledge in practice >:)

#juney.txt #html #css #web development #psa #long post

432 notes · View notes

syn4k · 1 year

Text

Finally, I Can Maintag This After Nine Months

Hello everyone! This post is about my very long (80k) Empires S1 fanfiction, (i'll tend to the flame, you can worship the) ashes.

Ashes has been nine months in the making, and the last chapter was just posted today. It is twice as long as my previous longest published work and I made a lot of it up as I went.

The premise is this: The Rapture was three months ago, and Gem and Fwhip are on their way out of the world. They land for the night on the edge of the desert, and stumble upon a certain emperor, who's been missing for eight years and long presumed dead. Which is great! They found him! But... he's strangely quiet.

More details and a general FAQ for the fic under the cut.

Why does this fic have the Graphic Depictions of Violence warning and the Author Chose Not to Use Archive Warnings ratings applied at the same time? What does that mean?

I explain my full reasoning in a post here, but basically, I wanted to let people know that there was violence while also implying that there were also some other things that needed to be handled carefully that aren't necessarily covered by an Archive warning.

Ashes has the Canon Compliant tag attached, but this is a scenario that I've never seen in canon before.

This is correct. When I started writing this, my tag for this fic was #ashes au because I was pretty sure that I was going against canon with some of the details I was including. I added that tag later after realizing that even though some of the specific details didn't line up, it counted to me. (The tag stuck because I've linked it everywhere by now and don't want to change it.)

As for the post-canon status of this work, Ashes was mainly started because I felt like Pixl's ESMP s1 POV (which ended early because he got busy with another project; this happens to everyone and i do not hold it against him) deserved to be finished and so I set out to write it. Pix later said in an Empires S2 livestream and then in his s2 finale that every interpretation of what happened to the Copper King was correct, so I just went with it.

If I wanted to make fanart or fanfiction of this fanfic, could I do that?

There is a section for that on the website I made for Ashes! (I learnt HTML at 12am for this. I couldn't sleep.) Any questions you have that aren't answered by that, send me a message or an ask and I'll be happy to answer.

#ray's tag #mcyt #empires smp #empires smp s1 #pixlriffs #geminitay #fwhip #esmp s1 #fanfiction #writing #lets fucking GO baby #ashes au #if you find this interesting and decide to check it out and you like it- please reblog this post! i put a lot of effort into writing this

102 notes · View notes

phrandallanton · 1 month

Note

Hellu))

I looked at your neocities thingy, and I just wondered how you did that with the text boxes and the background and stuff. If you are willing to share, if you aren't, then sorry for wasting ur time)

I'm very new to coding (I suck) and "Penelope the cat" doesn't really help much T-T

Hi! Don't worry about asking, I'm always happy to help and give info on anything I know to the best I can! (Though to be completely honest, I too don't know much of HTML so... lol)

I used a <table> tag and the other tags that come with it. I also used boarder, boarder style, and background color, which would be in the CSS part of the code. Makes the boarder that's around it, The style that boarder will be in, and the background color of that table.Here's a website that explains it better then I can and also helps me out A LOT.

I heavily recommend this site, it's a life saver and will explain everything.

Also here is some CSS to help with the boarder and background!

Some other extra tips I'll throw in here:

I recommend using "Visual Studios". It's a free program and you can get a plug-in that allows you to see how your website looks without having to edit, go to the website, refresh, over and over. It also helps with coding as well, overall I'm loving it!

Now, by no means am I saying you should copy somebody else code and steal it. That's wrong. However, if you see something you like and want to know how it works, inspect the page and look at the code! I've learned a lot from doing this and it's help me figure out how things work too. Once again, do not straight up steal lines of somebody else's code. By that point you're not coding, you're copying, pasting, and stealing.

I also think you should learn the basics of HTML, and if you really want to make things then I say take the time to learn HTML. Personally for me, I love the look of broken ugly websites. Just some basic CSS will do for me! But if you're not like me, then yes, I think you should learn more then just the basics.

I'm sure there's some HTML nerds that can explain this way better then what I can so like I always say when it comes to learning stuff, look it up! The internet has unlimited free information, somebody 12 years ago on reddit probably asked the same question you did and the answer will be in the comments of that post. Always search for things!

#Html #neocities #Blog

8 notes · View notes

impulsiveprogrammer · 1 year

Text

still day 1 - html

once again, technically not day 1, still doesn't matter,

common/basic html tags

<p> (closing </p>): creates a paragraph

<h1> (closing </h1>): creates a heading. this tag is used for the biggest headings in the page (example: a general, all encompassing title)

<h2> <h3> <h4> <h5> (closing </h2> </h3> </h4> </h5>): these four tags also create headings, each smaller than the next. h2 is bigger than h3 and so on (example: h2 can be used for a chapter title, and h3 for the title of each section of that chapter)

<h6> (closing </h6>): creates a heading. this tag is used for the smallest headings in the page

<strong> (closing </strong>): makes the text stronger, usually bolding it. this tag goes inside other tags, like <p> (example: <p>normal text <strong>bold text</strong> normal text</p>)

<em> (closing </em>): emphasizes the text, usually italicizing it. this tag goes inside other tags (example: <p>normal text <em>emphasized text</em> normal text</p>)

<a href="example"> (closing </a>): creates a clickable link. the link / path goes inside the quotes in the opening tag (in place of the word example that i put there for reference). the text you want to be able to click which directs to the link goes between the tags (example: <a href="link">text to be clicked</a>)

<br> (no closing tag): creates a line break inside a paragraph (since line breaks in the code are ignored). in other words, it sends the text after it to the next line, without creating a new paragraph, instead of having it stay in the same line as the text before it until it no longer fits

that was a lot but it's the basics i swear. also all these tags are used inside/between the <body></body> tags (explained in my "absolute basics" post which i will not link to right now sorry). that's it

#codeblr #html #notes

26 notes · View notes

izicodes · 1 year

Note

Hey Hai, so I would like to know, how you did this https://xiacodes.tumblr.com/all-my-tags

This "All my tags". It's opening up like a webpage like a blog.

That's cool, can you teach me?

Hiya! 💗

Super for the late reply, I've been busy and I tried creating a proper answer for this too!

Just to clarify for anyone else, this is what @suzukasthings is referring to:

To achieve this, I made a little video, because I can also explain with words but it's also best to see how it's done also!

Go to your blog's theme creation page

Go to the bottom of the menu and click 'Add a page'

Create the ending of the URL, here I added 'new-page'. This is the URL link you will use to link to the new page.

The sections under is where you will customise the new page, so you can add anything really!

If you want to have a link generated to your theme, you can google the 'Show link to this page'. Tumblr will do the whole link HTML tag for you on your sidebar.

Click 'Update Pewview' to see your work

Click 'Save' to save the page so everyone can see the changes

The URL to the page will be your normal Tumblr blog URL + /[the name you added to the page] e.g. for my all tags page is https://xiacodes.tumblr.com/all-my-tags

Done!

In terms of customisation, I would recommend having basic HTML and CSS knowledge because I recommend using the HTML editor to customise your pages, like I did here:

Hope this helps! 🤗🙌🏾💗

#my asks #tumblr themes #coding #codeblr #programming #comp sci #progblr #tech #programmer

35 notes · View notes

cozylittleartblog · 1 year

Note

Oop, hello there! ^^ I remember you from DA, still think your art is so cool!! Still fond of the vintage characters and the world of Tessa n' Val! I'm currently testing the waters on Tumblr lol, hoping to get around a different vibe for documenting my projects n' chatting about stuff I like, and wanted to ask: as someone who's been on Tumblr for a while, what are your main tips for a starting artist in the platform? Wish ya a great day! Stay artful n' creative :]

HI!!!! i remember you too, i always get really excited when artists i like come here. tumblr is the only website i really use for myself and not just to post art, so it means i get to follow them and interact with their art 🥺 i ditched deviantart for everything that isn't posting art and bitching about the website via status updates lmfao, the new inbox and watched deviants tabs are so... out of the way and counter intuitive. hate it there.

anyway, I've written a general tumblr how-to post because there's been so many exoduses (exodi??) from other platforms over the last few years, but I don't think I've ever written one for artists? or at least I can't find it if I did. so here are some hot tips 😎👉👉

NUMBER ONE BIGGEST RULE: if you're an artist and you want to actively gain a following and curate your art, please have a separate art blog where you post exclusively or near exclusively art. it's ok to reblog a post here or there, but tumblr is a website About curating and having specific blogs! it's not that people don't want to see or hear about the artist behind the work, but they don't want 43289 unrelated memes and posts for fandoms they're not in 😅 admittedly i have skipped following some good artists here because their reblogs completely drown out their art and clog my dashboard. people really like curated blogs, almost every artist has a separate art blog 'round these parts. (it's completely fine to post WIPs and text posts discussing your art too, some people would like to see your process!)

speaking of curating: tags are your best friend! tumblr tracks the first 20 tags I believe, so use the first 20 tags to add your important search terms. this is where you put anything you'd want to turn up in the search. really you probably wont have more than 10 of these tags. after that you are welcome to ramble in the tags or use organizational tags for your specific blog.

not sure how to tag? search up what terms you'd use to try to find your own post if you were someone else, and see what tags popular posts in that tag used. you should ALWAYS use the #art and #artists on tumblr tags, as well as any relevant common trigger/content warning tags :D here's how i do it:

FOR FANDOM POSTS: where applicable, I tag Fandom, Fandom Acronym, Featured Characters, Featured Ships, and sometimes #[fandom] fanart and/or #[fandom acronym] fanart. FOR ORIGINAL POSTS: you can tag your art medium (digital art, traditional art, sculpting, etc), the general aesthetic or themes, time periods, and if it features your OCs you can use #oc and their names so if people want to see all your OC content they can find it. admittedly i mostly post fanart so i am very spontaneous with the tags i use on my original art posts lol

4. shorter captions seem to be preferred by the masses, I personally either dump my extra comments in the tags of the original post or I'll put them under a cut. unless it's extremely relevant to the post, like explaining ideas or headcanons

5. have all your handy links in your bio! you can use basic HTML coding to insert links with text and put in line breaks. you should have links to other socials (or something like a carrd that links them for you) and your support streams, like shops and tip jars and patreons. and ofc a little about you and what people can expect to see you draw!

6. have your inbox open! you don't have to take requests, but sometimes someone will throw a brilliant idea at you that you may Coincidentally be inclined to draw. it's also just fun to interact with people who like what you do! sweet comments go a long way

7. last one i can think of - do a seIf-reblog at some point in the day. people live in different timezones and not everybody finishes their dashboard. personally I schedule posts for 12 pm cst and then one seIf-reblog at 8 pm cst. it's also okay to reblog your older artworks for new followers to see, especially if you haven't posted in a while. TV airs re-runs and so can you B)

hope some of it helps!

#tumblr guide #tumblr how to #artists #ask #ninacti0n #will be following u from my main hehe #tumblr artists

27 notes · View notes

wojenka · 9 months

Note

Hnnnghh I was informed by tatp that u know about about coding wdgvbb any tips or whatever I’m trying to make a neocitys website or smthg

Since it's neocities website all you need is: HTML, CSS and maybe some graphics. As I said before I'm shit at explaining stuff but I will try my best. So here's "I want to make my own website" the basics!

HTML - markup language, the base of your websiteCSS - style of your website, can change color of html elements, size, font etc. I linked w3schools website since it's pretty easy to understand.Do you need to learn all of this before coding? No. I think it's the best to just check things that you need for your website. If you need to change background color of your website just find a w3schools tutorial on it or simply search for "how to change background color in css". You just should know html tags and basic attributes: id and class and how to link your css in html file so your style actually works! Neocities has it's own tutorials on html and css so you could check them out too! Neocities also has it's own code editor. You can edit everything in browser. I personally like to code in Visual Studio Code then just paste the code into Neocities editor. VS Code has a lot of addons (some of them are there by default) that make coding way easier for example: autocorrection of syntax errors and giving you suggestions!

Example: If you type html in vs code html file you will get 3 suggestions:

choose the html:5 one:

TAADAAAM!! VS Code just wrote the whole website structure for you! You can install more extensions here under extension section! There is this extension called vscode-pets it won't help you with coding but its really cute:

some yt tutorials: CINNIMANI (specifically for neocities), web coding playlist (this one is good for all websites in general); https://sadgrl.online if you were on neocities you probably saw her website. She has a lot of useful resources including image resources and also she made her own WEBSITE BUILDER or acutally layout builder! It's pretty simple website builder but still. If you are looking for premade layouts you can just search them on google or get sum from the website I linked ^__^ Uploading your website to neocities is really easy since all you need to do is to put all the files on there! I guess that's all for now. If you have any problems or questions just ask. I'm here to help ^^ websites with free to edit code: https://codepen.io, https://github.com

#ask.answered();

9 notes · View notes

webtutorsblog · 1 year

Text

Looking to master the basics of HTML? WebTutor offers a comprehensive guide to help you navigate the world of HTML with ease. From understanding tags to building web pages, this tutorial is perfect for beginners. Start your journey to becoming an HTML pro today at WebTutor!

#Basic HTML tags explained #Introduction to HTML elements #HTML basics #HTML tutorial #Master HTML #HTML tags #Web development #Learn HTML #HTML for beginners #HTML guide #HTML syntax #Building web pages #Basic HTML elements #Learn HTML elements

1 note · View note

rpclefairy · 11 months

Note

hi !! this might be an embarrassing, noob-y type question but i was wondering how one would link a specific tag/or create a tag page and link it in a post ?? saw it on a blog and thought it was pretty neat !!

hi there! it's not an embarrassing question at all! there are two parts to answering this though, let me explain.

how one would link a specific tag

the same way you add any link to text! just copy the url to the tag you want to link and then write any text you want to append the hyperlink.

create a tag page and link it in a post

this is where you have two options.

first option: you can add links from text posts. for instance i have often linked to other posts in my previous posts or included links to download pages for my resources. just to give an example, let's say i want to link you here to all the tutorials in my blog, you can click here.

you do this just by selecting the text and adding the link.

you can make a post with a list of links to various tags this way.

the second option: making a separate page is a little more involved and you will have to deal with html coding to some extent, although there are ways to do it very minimally.

the easy way:

open the theme customization panel and scroll down to the bottom of the column where you'll find "add a page" and "advanced options", click on add a page. there you can repeat the same steps as the first option! just write tags, link the url to the text and that's it. you can format and decorate this page the same way you would a text post.

the hard(er) way:

find a custom navigation code, you can search for this specific type of pages here. this is where you need to have a basic grasp on html that i don't think i could provide you with briefly in this post. it's not terribly difficult though, just looking at the code you'll find a lot of it is self-explanatory.

the gist of it is, you'll add a page same as in the easy option but click where it says "standard layout" and change it to "custom layout". there you'll paste the code of your navigation page. it should look like this:

you can customize the code to your liking (colors, fonts, images) and add your links from there.

#inbox

12 notes · View notes

dramarising-replacement · 1 year

Text

XSS?

I know Im going to cry my ass off over this as someone who is experienced in cybersecurity field, but XSS attack which FR lately experienced is not something which would breach a database (unless the website is vulnerable to SQL injection) or take the server down.

You may wonder what XSS is? I may explain a few basics before this.

So your browser is capable of executing scripts (javascript) which is behind the webpage effects things like showing the alarm box when you tap or click on the bell, the coliseum rendering and etc, it is sandboxed which means the script cannot access the data outside the same website (like the script in FR webpage cannot access contents like cookies of your Google account).

However since javascript on FR webpage can access your FR cookies (which store your login session), inputs like profile bio, dragon bio, forum posts and titles (whatever that a user can put inputs in) must be sanitized in order to prevent unexpected code from being executed on your browser.

However the developers could miss this sanitizer system on the inputs for any reason (like the code being too old and vulnerable to XSS but devs havent noticed it) which means a suspicious user (lets just say hacker) could craft a javascript code and save it in a FR webpage which doesnt sanitize html tags and therefore if a user visits it, the code will be executed and the cookies will be sent to the hacker.

What could XSS attack access?

If the attack is successful and the hacker has logged into your account, they could access anything that you can normally access when you are logged into your account, the hacker could access your messages on FR, find your email which you use for FR and even impersonate as you. They cannot access or change your FR password because it is not accessible on the browser, they cannot breach a database because XSS does not execute on server side.

Worst scenario? If your browser (and its sandbox) is vulnerable to memory issues then XSS could even execute unexpected codes on your own computer or mobile, which is very rare but still possible.

Why would someone want to hack kids on the haha funny pet site?

Because KIDS (and let's be honest, most of the adult audience) are stupid, they are vulnerable to being manipulated to do or visit something on internet, your data is valuable even if it is on a funny pet site, they target these sites because the audience is mostly kids (in this context, under 18) and most importantly they abuse the belief that pet sites arent a target for hackers.

Cheers and stay safe on internet.

#Flight Rising #Staff #Bugs #Long post #No salt

20 notes · View notes

light-lanterne · 1 year

Note

how do you make your blog look so cool and good on computer screen thing?? :')

hello ! :] i'm not entirely sure i understand the question, but if you mean this,,,

,,,then that's just my custom theme !!

you have to be on desktop to enable it (go to your blog settings and turn on the "enable custom theme" thingy that's near the top). once you do that, tumblr gives you a default theme that looks a lot like the one you already have ~

for instance, this is what my default would look like :S

it works, but it's not the most appealing in my opinion :\

to change it, you need to once again go to the blog settings and click on the "edit theme" button. you are then taken to the customisation page, where you can make some adjustments to that default theme you're given,,,

,,,or you can change it to a completely different one ! :D

first, you need to find a theme you like. you can browse "tumblr theme" tag if you want, or go to theme-hunter and look around for stuff. there are a looot of themes with a lot of different styles to chose from, most of which are relatively easy to edit.

once you find something you like, you need to get the code. it's usually linked on the maker's post, near the top, and most of them take you to pastebin. you select the whole code and put it in your clipboard,,,

,,,and then add it to your blog. go to the customisation page i mentioned before, then click on this little button i've marked in the image.

once there, you just delete everything currently in there (at this point, the code for the default theme) and paste the code you picked instead.

update preview, save the changes, then go back to the main customisation page.

scroll down a little and you'll find the theme options and voilà ! you can edit the theme to make it into whatever you want :O for instance, the theme i have has a lot of colour options

you can also change out the font,,, or the images,,, there are a lot of options available; it just depends on the theme you picked :]

if you have some css and / or html knowledge, you can also change out some stuff in the code :O the sky's the limit ~

so yeah,,, that was a basic breakdown of how to apply a tumblr theme :] hope it was helpful !! if you need any help please don't hesitate to reach out :D also, please forgive me if i misinterpreted your question altogether or if this was too confusing. i'm not great at explaining this stuff u.u

although, even if i misunderstood, i highly encourage picking a nice theme for your blog ! it's a nice option to make your blog a bit more you or go along with your aesthetic (for instance, here's the theme i picked for my dark academia-ish blog). it's also really fun to edit these themes, in my opinion, so that's a bonus !! :]

more than anything, please do enable the custom theme thing. even if you keep the default theme, it's important to have that on because it allows you to use the archive, a vital part of blog navigation in this site :O

#💕#🎧#🧸

11 notes · View notes

blogpreetikatiyar · 2 years

Text

WhatsApp Clone Using HTML and CSS

What does cloning a website means?

To make a copy

Cloning a website means copying or modifying the design or script of an existing website to create a new website. Website cloning allows a designer to create a website without writing scripts from scratch.

Any website can be cloned. You are also free to integrate some additional new features while cloning your website.

Cloning a website is one of the proven methods you can use to learn web development faster. It provides basic to advanced ideas about how websites work and work, and how to integrate them.

Let’s learn how to clone a website just using HTML5 and CSS in a simple way.

Will take an example of WhatsApp Website and will clone it.

WhatsApp is a free cross-platform messaging service. iPhone and Android smartphone, Mac and Windows PC users can call or exchange text, photo, voice and video messages with anyone in the world for free, regardless of the recipient's device. WhatsApp uses Wi-Fi connections to communicate across platforms. This differs from Apple iMessage and Messages by Google, which require a cellular network and Short Message Service (SMS).

Key WhatsApp Terminology

Cross Platform

Messaging apps

End-to-end encryption

Video & Audio Calls

WhatsApp Business

HTML (Hyper Text Markup Language) –

HTML stands for Hyper Text Markup Language that is standard markup language to create web pages and web-based applications

It represents the structure of a web page

It comprises of series of elements which tells the browser how to display the content

Basic Structure of a HTML Document –

<!DOCTYPE html>

<html>

<head>

<title>WhatsApp Clone</title>

</head>

<body>

<h1>let's learn Web Development</h1>

<p>My first project - WhatsApp Cloning</p>

</body>

</html>

Let’s Explain the above code –

- It is used to defines that the document is HTML5 document

- It is the root elements on an HTML Page

- It contains all the meta information about the HTML Page

- This element contains all the visible content of the page, such as paragraph, headlines, tables, list, etc.

- It defines the largest heading for any topic, it ranges from -

- It defines a paragraph in the HTML page

Elements –

It is the collection of start and end tag, and in between content is inserted between them.

It major components are–

Opening Tag – Used to tell the browser where the content starts.

Closing Tag – Used to tell the browser where the content material ends.

Content – Whatever written inside the opening and closing tag is content.

Some Most Commonly used tags are –

– Used to define a document or section, as it contains information related to titles and heading of related content.

– The navigation tag is used to declare navigation sections in HTML documents. Websites typically have a section dedicated to navigation links that allows users to move around the site

– Anchor tag is used for creating hyperlink on the webpage. It is used to link one web page from another.

– It is used to define a paragraph. Content written inside tag always starts from a new line.

– It is used to define heading of a web page. There are 6 different heading h1, h2, h3, h4, h5 and h6. H1 is the main heading and the biggest followed by h2, h3, h4, h5 and h6.

- It is used to group multiple elements together. It helps in applying CSS.

- Image tag is used to embed an image in a web page.

CSS (Cascading Style Sheet) –

CSS stands for Cascading Style Sheets, that describes HTML elements that appear on screen, paper, or other media.

It used for designing web pages, in order to make web pages presentable.

It is standardized across Web Browsers and is one of the core languages of the open web system/technology.

CSS Selector –

CSS Selectors are used to select or target the element that you want to style. Selectors are part of the CSS ruleset. CSS selectors select HTML elements by ID, class, type, attributes, etc.

Types of CSS Selectors –

Element Selector – It selects the HTML elements directly using name

ID Selector – It selects the id attribute of an element. ID is always unique, in the code. So, it is used to target and apply design to a specific or a unique element.

Class Selector - It selects the class attribute of an element. Unlike ID selector class selectors can be same of many elements.

Universal Selector – It selects all the elements of the webpage, and apply changes to it.

Group Selector – It is used when same style is to be applied on many elements. It helps in non-duplication of code.

Different ways of applying CSS -

CSS can be applied in different ways –

Inline CSS –

Styling is done using different attributed inside an element itself. It can be used to apply unique style for a single element.

<h1 style="color:blue;">Let's learn Web Development</h1>

Internal CSS –

It is defined or written within the <style> element, nested instead <head> section of HTML document.

It is mainly used when need to apply CSS on a particular page.

h1 {

color:blue;

}

</style>

External CSS –

It is used to apply CSS on multiple pages. As all the styling is written in a different file with an extension “.css” Example style.css.

It is written instead head tag.

For more detailed guide – Click here

Let’s implement the above learnt concepts –

In this example will clone a static page of WhatsApp using Internal CSS-

<!DOCTYPE html>

<head>

:root {

font-size: 15px;

--primaryColor: #075e54;

--secondaryColor: #aaa9a8;

--tertierColor: #25d366;

}

* {

margin: 0;

padding: 0;

font-family: inherit;

font-size: inherit;

}

body {

font-family: Helvetica;

font-weight: 300;

}

img {

object-fit: cover;

width: 100%;

}

.container {

margin: 0 1.2em;

}

header {

background-color: var(--primaryColor);

padding: 1.4em 0;

}

header .container {

display: flex;

justify-content: space-between;

align-items: center;

color: white;

}

header .logo {

font-size: 1.5rem;

font-weight: 300;

}

header .menu {

margin-left: 18px;

}

.nav-bar {

background-color: var(--primaryColor);

margin-bottom: 8px;

display: grid;

grid-template-columns: 16% 28% 28% 28%;

justify-items: space-between;

align-items: center;

text-align: center;

box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,

rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;

}

.nav {

color: var(--secondaryColor);

text-transform: uppercase;

padding: 1em 0;

}

.nav.active {

border-bottom: 3px solid white;

color: white;

}

.chat {

padding: 1em 0;

display: flex;

justify-content: space-between;

}

.chat .info {

display: flex;

}

.chat .username {

font-size: 1.2rem;

margin-bottom: 5px;

font-weight: 300;

}

.chat .recent-chat {

color: gray;

max-width: 200px;

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

}

.chat .recent-chat .read {

color: #34b7f1;

}

.chat .photo {

width: 55px;

height: 55px;

border-radius: 50%;

margin-right: 18px;

}

.chat .recent-chat-time {

font-size: 12px;

color: gray;

}

.contact-button {

padding: 1em;

border: 0;

border-radius: 50%;

color: white;

transform: rotate(0deg);

font-size: 1.3rem;

position: fixed;

bottom: 20px;

right: 1.2em;

background-color: var(--tertierColor);

}

</style>

<title>WhatsApp</title>

</head>

<body>

<h1 class="logo">WhatsApp</h1>

<div>

</div>

</header>

<a role="button" class="nav active">Chats</a>

<a role="button" class="nav">Status</a>

<a role="button" class="nav">Calls</a>

</nav>

<div>

<h6 class="username">Anurag</h6>

<i class="bi bi-check2-all"></i> Yes, i remembered that! 😄

</p>

</div>

</div>

<div>

<h6 class="username">Cipher</h6>

<p class="recent-chat">Do you wanna hangout?</p>

</div>

</div>

<div>

<h6 class="username">CipherSchools</h6>

<i class="bi bi-check2-all read"></i> Hey bro, time to band!

🥁🎸

</p>

</div>

<small class="recent-chat-time"> Yesterday </small>

</div>

<div>

<h6 class="username">Schools</h6>

<p class="recent-chat">Hey, where are you now? 🙄</p>

</div>

</div>

<div>

<h6 class="username">Anurag CS</h6>

<i class="bi bi-check2-all read"></i> May i borrow your games

for 2 weeks?

</p>

</div>

</div>

</div>

</section>

</body>

</html>

#Programming #Coding #online learning #Online learning platform #css for beginners #Html #Css

23 notes · View notes

darkcoffeeonly · 2 years

Text

Calibre & FanFictions

This post aims to explain how to use Calibre to create your own fanfictions collections, keep them updated and create (fancy?) main board for you to take track of your readings, your TBR and much more.

I’m in no way an expert of Calibre and I don’t know phyton nor I’m able to tweak beyond its basics. This post mirrors how I set up my Calibre over the years and some tricks I learnt on the way. If you wish to know more, refer to the official website and its resources (especially the mobilread forum).

What is Calibre?

Calibre is a free and open source software that allows you to organize your ebooks library, to convert between formats, to edit your ebook files (ie adding covers, ToC, changing the CSS), to transfer files to e-readers.

For a full list of its feature, please** refer to the official website**

Calibre is a pc (Windows, Linux, Mac) based software. It can’t run on Android/iOS (smartphone/tablet).

Download & Install Calibre

Calibre can be downloaded from the official website.

Once you have downloaded it, run the exe file.

It will ask you in which language you want to set the interface, where do you want to store your library (just pick/create a folder on your pc. Be aware that this folder will be the domain of Calibre software, you can’t change anything in it manually if you don’t want to corrupt Calibre database. You can select a folder shared over dropbox/onedrive, but to be on the safe side, be sure the sync process is disabled when you are running Calibre).

If you have an e-reader, select your brand and the device type during the basic configuration, otherwise just pick the Generic interface.

Click on Next and then on Finish. Your Calibre Library will open and it will show you something like this:

Calibre main tools

Adding Books Manually - Basic Procedure

On its own, Calibre can add and process any “ebook like” file (epub, mobi, pdf, etc) you have stored on your pc.

Let’s say you download a FF from AO3 using the “download epub” function.

Just click on “Add Books” and select the file. Calibre will add the file to its folder structure and will fill the metadata embedded in the file and that can be matched with its standard columns:

Clicking on “Edit Metadata” you can manually edit the metadata, generate a standard cover, browse your pc to add a cover, add links (to goodreads or archiveofourown) in the Ids (identifiers field).

For example, to add the link to archiveofourown, go to AO3 page for the fanfiction, copy it, go back to Calibre, click on the icon next to “Ids” and the link will be copied here.

Adding Custom Columns

Calibre comes with its own standard columns, but you will want to add your own columns to keep track of other things.

To add columns, click on Preferences -> Add Your Own Column. There you will see all columns available for the metadata.

Let’s say you wish to track also:

Characters

Relationships

Rating

AO3 Tags

Number of Chapters Posted

WordCount

When a FF was last updated

If a FF is completed or not

A free text where you can add your own comment

You will need to create 9 custom columns. Click on the “plus” icon to start creating them and choose which kind of column you wish to create.

For example, “Characters”, “Relationships”, “AO3 Tags” contain multiple values, so they need to be “Comma separated text, like tags, shown in tags browser” meaning that the text extracted from the “Characters” list will recognize the comma as separator and will treat each “text between commas” as a separate tag, to be shown on the tag browser.

Rating column will be a “Text column shown in tag browser” (since you don’t have multiple values)

Chapters and WordCount will be a Integers, since you will have numeric values there

If a FF has been completed or not will be a Yes/No column

Last Update will be a date kind of column (where you can specify your preferred format):

And finally, “Your Comment” column will be a long text, “like comments, not shown in tag browser”. You can choose if it needs to parse HTML or not, and if you want to add a heading or not:When you have create the columns you need (but don’t worry, you can add/delete any column at any given time), click on “Apply”.

You can notice how all the custom columns you added are clearly marked.

Take also care of the “lookup name”. That’s how columns are referred everywhere else in Calibre.

After clicking on Apply, Calibre will ask you to restart so to load the new configuration. The new columns will be added at the end:

You can drag and drop them in any position you wish.

To add information, just click on the field or click on “Edit Metadata” again, where you will see now a second tab with the Custom Metadata.

Once you confirm, the data will be shown also in the main interface (where you can still edit them) and all columns you created as “to be shown in the tag browser” will be shown on the left panel:

FanFicFare - The Game Changer

Adding all infos manually is very time consuming, but you can save a lot of time using FanFicFare (FFF).

What is FanFicFare?

FFF is a plugin. As said at the start, Calibre is Open Source, meaning anyone can add to it and over the years many different people created various “add-ons” (plugins) to enhance Calibre experience. The plugins that have been officially validated can be found directly on Calibre by clicking on the arrow next to Preference and selecting the “Get Plugins to enhance Calibre” option.

Search for FanFicFare and install it (select to add it in the main toolbar):

In the next post I’ll go through FFF basics.

#calibre

13 notes · View notes