#Advanced HTML Tutorial

[cozypups]

i super duper wish i could go back to when i was first learning html and css and asking my mom to take me to the library to get those html coding books that were from 2004 or something

[code-passion]

Exploring the :has() Selector in CSS

CSS has progressed greatly over time, introducing a number of advanced selectors that improve the ability to style web pages with precision and flexibility. One of the most recent additions to the CSS selector is the :has() pseudo-class. This blog will go over the details of the :has() selector, including its usage, benefits, and practical examples to help you use this powerful tool in your web development projects.

What is the :has() Selector?

The :has() selector is a relational pseudo-class that lets you choose an element depending on the presence of a descendant or a more complicated relationship within its subtree. In simpler terms, it allows you to style a parent element if it contains specific child components.

Syntax:

element:has(selector) { /* CSS properties */ }

Key Features

Relational Selection: Unlike typical CSS selectors, which focus on the element or its immediate children, :has() selector looks at the content within the element to see if it fits a specified conditions.

Dynamic Styling: It can dynamically apply styles based on the presence or absence of specific elements, resulting in more interactive and context-aware designs.

Please check out nine examples of the :has selector by clicking on the link.

follow- https://www.linkedin.com/company/skillivo/

[webtutorsblog]

Uncovering 10 Advanced HTML Tags for Proficient Developers

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

 <canvas>: Unleash Your Creative Side

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

<video> and <audio>: Rich Media Experience

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

 <iframe>: Seamless Integration

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

<progress>: Visualizing Progress

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

 <details> and <summary>: Interactive Disclosure

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

<figure> and <figcaption>: Captioned Images

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

<mark>: Highlighting Text

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

<time>: Semantic Time Representation

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

<article> and <section>: Structured Content

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

Unlock Your Full Coding Potential with WebTutor

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

With WebTutor, you will experience

Expert Instruction

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

Hands-on Practice

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

Flexible Learning

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

Supportive Community

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

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

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

[physicsgoblin]

Physics and Mathematics Resources (plus some Chemistry):

I will update this because I know I have more recommend textbooks somewhere in my files, I'm just too tired to look right now. Latest update: 5/13/25

Physics:

The Science Spot--Mostly lesson plans for teaching kids

The Physics Classroom Tutorial--Has interactive online activities and models. Some videos and also some chemistry stuff.

HyperPhysics--Quite possibly the best resource I've ever seen because it shows how all concepts are linked together. The site isn't loading for me but it says it's up. There is a downloadable version on the Internet Archive (though it doesn't look as nice and clean). EDIT: I found a GitHub that lets you clone and download the html so you can click through it offline and it works! If people are interested I can make a tutorial, it was very easy.

PhET--A ton of demonstrations and tutorials. Also has some for mathematics and chemistry.

Paradigms Physics Notes--this was the curriculum that was used in my junior and senior classes. A lot of stuff here. If you are interest about teaching physics using this method, you can read more here.

Quantum Mathamatica Add-on--Useful for calculations.

The Hypertextbook--uhh lots here. Problems, solutions, explanations, etc.

oPhysics--interactive physics software.

MiniPhysics--more demonstrations and interactive software.

Michel van Biezen--really clear work-throughs of many subjects (algebra, calculus, chemistry, physics). He actually has a tumblr but has been active in like a decade @ilectureonline

Mathematics:

Paul's Online Math Notes--Got my whole class through junior and senior year

Calculator Soup--a lot of different kinds of calculators

3Blue1Brown--Very interesting youtube channel that shows a lot of calculus and linear algebraic principals visually or in intuitive ways.

Mathologer--more interesting advanced mathematical concepts.

General:

OpenStax--Free textbooks, legally

[tanaka-drew]

Hi, I was wondering if there are any updated tutorials on how to make themes? Also, if you publish this message, maybe some might suggest tutorials, base codes? Thank you, have a great one *hug*

hello hello nonny! sorry it took me days to reply but basically:

start with the tumblr documentation and familiarize yourself with the post blocks. then, you can choose base codes. the most updated ones are by eggdesign which are:

npf based template (this one supports new posts)

and this basic base one

if you opt to build your own, it is important that you have these scripts:

unnested captions by magnusthemes and neothm

npf fix by glenthemes

lightbox tutorial by shythemes

then, there's the designing parts:

google fonts for fonts of any kind

learn html x learn css by w3schools

phosphor icons. or you may browse glen's collection of icon fonts.

flex-box tutorial to make your designing easier

and on the advanced side, learn how to make anything responsive/mobile friendly

additional tutorials maybe found in w3schools and css-tricks.

idk if you'd like modals/popups but this is the tutorial that i use. and as for multiple tabs, i use this script too.

and shamelessly advertising my credits page because it's a masterpost of some sort that helped me with my coding journey

also just a tip, when coding anything, picture the lines that u input as a language of its own and picture how it wants to portray a div ^^

[slitherpunk]

Do you have any advice for someone who wants to start learning how to make games? I have limited programming skills and am only really familiar with html/css…

This really depends on the types of games you want to make! A lot of engines today make it really easy to assemble what you have in mind like renpy or rpg maker or gbstudio without needing to know a lot of programming. If you have something more complex in mind you might want to look into something like godot? (I hesitate to recommend unity or unreal these days) I've found the godot programming language pretty understandable for beginners.

Another general tip is to really keep your first projects small. If you follow a few tutorials, and then are lost on your big project, you should shrink your scope, some of the best practice you can get making games is to finish something, so you're not spending so much time sinking into it when you're not totally sure how you're going to progress. A small project is one that you can plan out your complete route on in advance.

Sorry I don't have too much more advice for this lately, making my own games recently have been a very slow process because of my job.

[help-an-alter]

we, as a system, need some help. we've been blurry a lot lately and need a way to front trigger the guys with their shit more together (/silly)

i was thinking that maybe i could describe the alters briefly and get some ideas for stuff they might enjoy doing that could trigger them to front as well. i guess like. comforts for them so they can get up in front? anyways ill write short stuff abt them and feel free to just skip whoever you cant think of anything for!!

Miki (he/it): introject but source irrelevant. alien sent to earth to scope if it's liveable. loves space related stuff in general, and bouncy, silly music.

Jotaro (he/him): introject of jotaro kujo, from part 3 and 4 of jjba. source connecting relatively high. ageslider (17-30ish) with a passion for marine life. can seem cold and uninterested but does really enjoy taking to people. sometimes hearing his name makes him front. technically a physical pain handler

Y (she/her): optimist alter and fun haver. she loves 2000s webcore stuff and decorating simplyplurals. pink thing. loves cutesy stuff and daydreaming

thats it for now tbh these are our most responsible guys.. uh. sorry for the long ask, and thanks in advance for the help!

I’ll do my best!

Miki - bubbles, kinetic sand, lego building, nature observing/journaling, people watching, outfits with chrome details, face painting

Jotaro - aquarium visits, watching source media (maybe with friends?), paper models of marine life (you can also use these as decor!)

Y - learn to code html/css and build a personal website (here is a good tutorial to start with!!), if that’s a bit too much to do you can also try out strawpage. try out nicher computer programs (ukagakas might be fun?), play childhood games

Hope these help! Sorry for the long wait :(!

- mod lei

[advancement-made]

List of EPPRBs (helping Status)

@dailyquests

@mission-board

@status-updates

@loading-tips

@advancement-made

@deathscreenmessages

@monster-bestiary and @bossfight-messages

@nefarious-exclam

@character-selecton (no i)

@item-shoppe

@glitches-and-bugs

@players-guide-to-magic

@beta-leaks

@mini-games

@location-finder

@objective-marker

@unused-questline

@magic-foraging-tooltips

@evil-loading-screen

@character-profiles

@roadside-shrines

@cmd-semicolon

@war-causing-interrobang

@bugged-inverted-interrobang

@hashbang-mods

@percontation-mark

@redacted-exclam

@location-loser

@magical-experiments

@unskilledpoint

@shady-item-shop

@collectibles-menu

@rpg-weather-cycle

@rpg-partylog

@small-cat-npc

@ultrakill-style-bar-updates

@john-tendrils-exclam-the-eighth

@the-tutorial

@big-bad-evil-guy

@system-notifs

@druid-exclam (no im not switching this to html <3)

@sparky-exclam

@trap-messages

@epcuartbook

@story-choices

@trudle-the-faerie

@the-moon-npc

@daily-companion

@slime-wizard-exclam

@virus-thing

@pheriya

@demon-exclam

@combat-menu

@buffs-window

@settinggeneral

@parasiteinfoform-greenstate

@weaponsshop

@level-12-weaponsmith

@level-1-slime

Not punctuation:

@gnome-armada

@demonic-dev-blog

Also check out:

@epprbcu-incorrect-quotes

@correct-epprbcu

@the-multiversal-asterisk

@epprb-art

@solidwater05

Let us know you exist so you can be added:

[cruzinthruwitem]

Okay, so, you want to add a link to your bio but you don't know how? I mean you could go and read this article. Or you can stay and I'll just tell you..

Tldr version: Open tumblr in web browser and navigate to edit bio. Copy paste "<a href="URL">Link Text</a>" into bio. Replace URL with link and Link Text with text to be displayed. Save and enjoy

Long version below cut:

Oh, hey, you stayed! Now don't worry because it's a lot simpler than you think. All it takes is a little copy/pasting and you'll be right on your way.

So first things first. You're going to have to open your internet browser. I know, I know, but unfortunately the mobile app doesn't really support this feature so internet browser it is. You're going to open up tumblr in your web browser and navigate to your bio to edit it. Now, I'm going to skip ahead and assume you know how to navigate to where you need to go to be able to edit your bio, but if you don't, then I do highly suggest reading the article linked up above. Moving on.

You're going to need to copy/paste two (2) things:

This html code (without the outer quotes) "<a href="URL">Link Text</a>" which is what will be doing all the magic for us.

The URL of whatever it is you're going to link to, including the http:// or https:// part.

Now the next part is fairly easy. You're going to paste that html code into your bio and replace the URL part with the link you want to navigate to, and the Link Text part with what you want the text to display. For example, let's say for some reason I want everyone reading my bio to go look at cute pictures of cats on reddit. I would replace the URL part with "https://www.reddit.com/r/cutecats/" and the Link Text part with "go look at cute cats"

Now this is what that code would look like after:

"<a href="https://www.reddit.com/r/cutecats/">go look at cute cats</a>"

And this is what it should look like in my bio:

And voila! You're all done! All you have to do now is hit save and you now have a custom link in your bio!

Now, you could go and customize the link even further by changing the color or making it bold or italicize it or whatever, but that's a little more advanced and a whole different tutorial.

Anyway, have fun!

[ao3css]

Hello! I want to recreate this overlapping text effect to show two character speaking at the same time, but I can't seem to make it work on AO3.

I'm very much a noob when it comes to coding anything, I usually just grab something from a tutorial like the above HTML code, but the CSS tutorials I came across might not work with AO3's skins? Is what I'm trying to do even possible?

Thank you in advance for your advice!

For this you will need to make a work skin that contains:

.OverlayedText { line-height: 0%; }

(you don't have to call it "OverlayedText", feel free to chose whatever class name you find most convenient)

And in your work (which must have the work skin you made in use), you will need to format the text you wish to overlay as follows:

(Each line is to be separated with "<br/>".)

It will look like this:

As a side note: if you'd like for the lines of dialogue to be overlapped and legible enough to be read, you can also set the line-height value to 30%~50%. It will reduce the overlapping, but should still give the impression that both lines are spoken at the same time.

[felidae-sims]

Resources; Favourite Sites for Anythings Colours Related.

This List is being updated. Updates won't show up on reblogs. visit the original post to view the most up to date post.

• Encycolorpedia, a Fantastic Site. Hex Codes, Colour Analysis, Colour Codes of Brands and more:

This site has lots of information and cool features. It's my favourite for everything's Colour related. It can also analyse a picture uploaded from pc. Not to mention how easy it is to make palettes with.

Edit: how cool is the image analysis. On pc its possible to hover over the image and sample it's colours.

I lost its bookmark and found it recently, so might as well share.

I'll add a bunch more in the future.

26.05.25 Update:

Color Hexa: good features.

W3 School. Notice the different translations of colour standards into hexa.

Colour Pod's resources page is nice [Firefox users can sample colours straight from the browser].

Contrast Tools, to verify readability.

More Info about readability & some colour codes & palettes.

That's it for today. Happy Simming!

[putschki1969]

Ghibli wo Utau Digital Release

It's past midnight in Japan so it's officially the release day of the Studio Ghibli Tribute album “ジブリをうたう/Ghibli wo Utau/Singing Ghibli”. Please be sure to ❗SUPPORT Wakana❗ in any way you can! Especially if you decided not to order a physical copy, you can purchase and stream the entire tribute album or just Wakana's song "Mononoke Hime" on various sites (mora, iTunes etc) and streaming platforms (Spotify, YouTube, Apple Music, etc). Please note that a VPN add-on might be required. It is going to take a while for my album to arrive so of course I couldn't resist the digital version. • ————— ¤ ♫ ¤ ————— • BUY the album on mora (TUTORIAL here) BUY it in your local iTunes store at midnight in your time zone Digital link: https://jvcmusic.lnk.to/GhiblioUtau • ————— ¤ ♫ ¤ ————— •  

[Work information] Studio Ghibli Tribute Album “Singing Ghibli” On sale November 1, 2023 VICL-65894 / ¥3,400 (tax included) ▼ Click here to make a reservation https://www.jvcmusic.co.jp/-/Linkall/VICL-65894.html

Thoughts: What a gorgeous and ambient arrangement! The choir, the drums, the sounds of nature. Very immersive. 100% obsessed! I absolutely adore Wakana's singing in the verse. So, so beautiful! In my opnion, her vocals are much more on point than during her performance of the song at the Wakana Anime Classic 2020 concert. I am just so smitten with the way she sings 月の光, 心, 美しい and きっさきに! The "aahh" higher harmonies in the background starting around the 1-minute mark are also a nice addition. Sounds like Wakana is doing them herself. The bridge/interlude with Wakana's "uh...uh...uhs" hits me right in the feels, the occasional shake in her voice actually works here (at least for me) because it sounds like she is just very emotional in those moments. I am a bit on the fence when it comes to the chorus, I like most of it but the まことの心 part is definitely a bit too high and thin for my taste (especially in the grand finale). I would have preferred a richer, more operatic singing style I guess...? Thankfully, it doesn't take away from my overall enjoyment of the song. What did you think? Other songs I enjoyed from the album are いのちの名前, テルーの唄, ルージュの伝言 and 時には昔の話を

Ghibli wo Utau Concert Announced

Today it was also announced that a special concert will be held in March 2024 to celebrate the release of this tribute album. Artists participating in the album will gather to hold a special concert for one night only! Enjoy a variety of famous songs, expressed in new ways by talented artists from all genres and backgrounds. ※Please note that not all artists participating in the album are guaranteed to appear at the concert ※The performing artists have not been revealed yet but we can expect Wakana to participate (especially since the event will be produced by Satoshi Takebe)

Title: “Ghibli wo Utau” Concert ~ Produced by Satoshi Takebe Date and time: March 27, 2024; Open 18:00 | Star 19:00 Venue: Tokyo International Forum Hall A Homepage: https://ghibliwoutau-concert.com/

SS seat ¥13,000 S seat ¥10,000 Wheelchair seat ¥13,000 U-25 seat ¥5,000 ※There might be an official recording of the event

Advanced lottery for CD purchasers Target product: "Ghibli wo Utau" Target period: October 31, 2023 to November 21

Album Reaches Rank 7 on the Mora Charts

The regular and high-res version of "Ghibli wo Utau" are ranked 7th and 12th respectively on mora's "Overall Latest Ranking of Most Popular Songs/Albums" within the last 24 hours. No news yet on the Oricon Chart front. Hopefully the album reaches a high position, I really want Wakana to get some much-deserved exposure from this release.

[theplayer-io]

So I know how to code websites now, but idk how to upload it to the internet. My plan is to give you all a post that will update with a string of code to sort of visit the website(s?) that I am curating. I will reblog a post that had the original, and include a more patched version as time goes on. I am so sorry in advance.

Because of this.... Lemme show you how html and css works!!

For Project Our Realities, it will all be in html and css since that's what I'm learning so far. JavaScript will be included later.

HTML and CSS basics below!!

HTML, or Hyper-Text Markup Language is the basics of coding a website. It describes how a website will look. It unfortunately doesn't get you too far in terms of digital design, which is why we have languages like Css and javascript.

All HTML files start with <!DOCTYPE html>. This declares to the file that you will be coding in html rather than something like lua.

Each HTML file, after declaring it as an html file, starts with <HTML> and </HTML>. To end a tag, you must close it by adding a forward slash before writing its name (unless it is <br> or <hr>, or similar).

The <head> tag lets you add a title (silly little tab name), a favicon (silly little icon next to the name of the tab) and ways to link your CSS to the HTML.

An HTML file will look like this <!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

In the body, you can write the rest of your page, using headers (<h>/<h1-6>), paragraphs (<p>), and even forms (<form>).

--

CSS, also known as Cascading Style Sheets, is a type of coding language that is often used to create websites. No, it is not C++.

Rather than <>, CSS uses brackets {} to code.

CSS is used to style html websites, so it addresses html tags and lets you style their appearance. There is something known as inline CSS, where you can use the <style> tag to style something in your HTML file. HTML was never meant to have colors in its code, but you can change the color of text with inline css. Let's say you would like to style a header.

In your HTML file, it would say:

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="(name of .css file goes here)">

</head>

<body>

<h1> My first header!!! :> </h1>

</body>

</html>

Now that we have our header, let's turn it red.

In your CSS file, it should say...

h1 {

color: red;

}

The H1 addresses that it will select all h1 elements. The code in the brackets shows that all those addressed will be the color red.

CSS has no starting or finishing lines, all elements will by stylized with {}.

--

To create an HTML file, you must end it with .HTML

To create a CSS file, you must end it with .css

Sometimes, when I create a link for the Css, the required name for the file will be in the HTML code already. Make sure that both files are in the same folder, and not one in a different folder within the same parent folder. This will not work.

--

Wanna test this out? Make a new notepad file on Windows, title it as "firsthtml.html", and create another file called "firstcss.css".

Place this in the .HTML file: <!DOCTYPE html>

<html>

<head>

<title> First HTML </title> <link rel="icon" type="image/x-icon" href="https://i.pinimg.com/736x/1a/8d/9d/1a8d9d26cdca15285d217c817f6953ec.jpg">

<link rel="stylesheet" href="firstcss.css">

</head>

<body> <h1>Welcome, traveler!!</h1>

<h3><I>Thank you for reading the tutorial!! Follow the blog to keep up with our news.</I><h3>

</body>

</html>

Now, for your .css file, write this down:

h1 {

color: dark blue;

}

h3 {

color: orange;

}

--

Thank you so much for following this tutorial. I mainly learned about this from w3schools and in my school course. Happy coding!!! :>

-ava

[furresquid]

does anyone have any good tutorials or stuffs to make blinkies, stamps, and stickers for a neocities webbed site? specifically in html if that helps. ive used blinkie cafe but thats abt the extent and i want to make my own, thanx in advance :3

[kelpk0re]

got any website building resources? 👾

i recently started teaching myself HTML and CSS!! i’ve made my own website with neocities and am slowly starting to get things figured out, but i’m a very hands-on learner and am struggling figuring things out by just like, looking at paragraphs of text and then the code example 😭 does anyone know of any video tutorials breaking things down or have any good resource sites for HTML & CSS? thanks in advance and happy coding!

also here’s my website currently :)

[nick-nellson]

Hi! I have a question since I saw you doing it on one of your posts, specifically the Moulin Rouge quote: when you source a movie how do you get your source font "Moulin Rouge (2001) dir. " to look like that? thanks in advance!

hello! i use this tutorial and then once you've done the text replacing part you have to use the cog in the top right corner of your post and change the text editor to html and then i just make it bold cause i think it looks nicer like that! i hope this makes sense!