#a html tag attributes

[webtutorsblog]

HTML attributes are an essential component of web development. They provide additional information about HTML elements and allow developers to modify the behavior and appearance of a web page. With Webtutor.dev's comprehensive guide, you'll learn about the different types of HTML attributes and how to use them effectively to enhance your web pages. From class and id attributes to src and href attributes, this guide covers everything you need to know to get started with HTML attributes. You'll also learn how to use data and aria attributes to make your web pages more accessible to users with disabilities. With the knowledge gained from this guide, you can create web pages that not only look great but are also accessible and user-friendly. So, if you're looking to improve your web development skills and create high-quality web pages, check out Webtutor.dev's guide to HTML attributes today!

[didntaskforfrozenyoghurt]

title html attribute. why do screenreaders have so many conflicting feelings about you.

alt html attribute. why must you only allow me to attach you to images. how am i supposed to label my grooving kaomoji as such now.

[centralkvetchmonolith]

The SHEER AMOUNT of fucking with formatting I had to do to get that post to display legibly on dash.............

[codewithnazam]

HTML Forms with javascript

Are you looking to create a user-friendly and interactive website that allows users to submit data easily? If yes, then HTML forms are your go-to solution. HTML forms are a crucial component of any website that allows you to collect user information and data. In this article, we will discuss HTML forms with example code snippets and explain how they work. We will also highlight the different…

[ceyhanmedya]

HTML

New Post has been published on https://hazirbilgi.com/what-is-html-when-and-by-whom-was-html-created/

HTML

What is HTML? When and by whom was HTML created?

HTML  is a markup language that defines the structure of web pages. HTML is one of the basic building blocks of every website . For this reason, it is among the first details that web developers will want to learn. 

While HTML is an important building block, it is not enough to make a web page look good. It  must be supported by CSS  and  JavaScript  . HTML is essentially code and is used to structure the content of a web page. 

The content on the web page can consist of a number of different paragraphs, images and tables. It is possible to format them with HTML. In this way, the web browser knows how to configure the web page that a person visits and displays it in the direction desired by the developer.

What is HTML and when was it invented?

HTML or  hypertext markup language is a markup language developed for displaying materials or data on the internet. Each material has a known buyer location,  called a web page  . Web pages contain hypertext links that allow the fetching of related pages.

HTML is the markup language used to code web pages. HTML  was designed by  British scientist Sir Tim Berners-Lee in 1980 . HTML markup tags  contain document elements such as headings, paragraphs, and tables. Once formatted, they can be viewed by programs or applications known as web browsers.

When viewing a web page, web browsers interpret it according to permitted technology. Thus, items such as headings, paragraphs, and tables are presented adapted to the screen size and font used. HTML documents also contain anchor links, called links to other web pages.

What is Semantic HTML?

Semantic HTML is the conveying of literal meanings for the uses of HTML tags. Semantic HTML was used effectively throughout most of the 90’s and  became an important part of the standard HTML structure . Since the late 90’s,  CSS has become more important in web pages when it has been used effectively .

Semantic HTML 

It consists of tags such as , ,,, and . One of the most important reasons to use semantic HTML tags is that web crawlers can easily index the web page. In this direction, it is possible to improve the web page in terms of SEO . Also, semantic HTML is important for accessing web pages from screen readers.

What are HTML Versions?

After HTML was designed, it has developed in many different forms over the years. For this reason, the HTML versions that are used effectively have changed from time to time. There are five different versions of HTML that are used effectively. Each of them made extra contributions to the HTML structure, making it easier for the developers to use it.

HTML 1.0: It is the first version developed for HTML. It was published in 1991 and was used effectively until 1995.

HTML 2.0: Version released in 1995. It has been accepted as the standard version in web design. Added support for features such as text boxes and buttons.

HTML 3.2: Published by the W3C in 1997. It provided extra support in terms of table creation and form elements. It is considered the official standard since 1997.

HTML 4.01: Released in 1999. It is the stable language for the HTML language and is considered the official standard. It has added CSS support to the HTML language.

HTML5: It is the newest version of the HTML language and was announced in 2008. This version  is developed by W3C and  WHATWG .

What’s the Difference Between HTML Tags, Elements, and Attributes?

HTML tags , HTML elements, and HTML attributes are often confused and used interchangeably when defining. However, there are differences between these three elements. Each  HTML tag has its own unique meaning. HTML elements are used to describe content. HTML attributes provide additional information for existing HTML elements.

What are HTML Tags?

HTML defines the formatting of a particular web page. For this reason, the text, images and other content on the page should be displayed in a shaped way. For example, you may want some text to be uppercase, lowercase, bold, or italic. To do this,  you need to use HTML tags .

HTML tags are like keywords that define how the web browser will display the content. When a web browser reads a document containing HTML, it reads it from top to bottom and from left to right. Thanks to HTML tags, a web browser can distinguish between HTML content and simple content. Each HTML tag can have different properties.

What are HTML Elements?

HTML  consists of three elements , opening tag, content and  closing tag . Some elements are used as empty. HTML elements are often confused with HTML tags. However, an element consists of a combination of three different elements. All HTML files are made up of elements. These elements are responsible for creating web pages. They also describe the content on the web page.

Theoretically, the opening tag, content, and closing tag should go together. Some elements may not have content and closing tags. Such elements  are called empty elements or self- closing elements  . For example, a line spacer  and a straight long line.

elements in this structure.

What are HTML Attributes?

HTML attributes are placed in the opening tag, and they  range from the “style” to  the “id” description. HTML attributes help convey more information about an element. In addition, these attributes ensure that needs such as styling elements on the web page with JavaScript are met.

While HTML attributes provide additional information about elements, they are modifiers of the HTML element. Each element defines the behavior of the element to which it is attached. HTML attributes must always be applied with the start tag. Although the names to be given to HTML attributes are case sensitive, standard usage consists of lowercase letters.

html,are html tags case sensitive,are html and css programming languages,are html and css the same,are html files safe,are html attachments safe,are html and javascript the same,are html tables still used,are html ids case sensitive,are html sites reliable,are html attributes case sensitive,create an html file,create an html page,can html files be dangerous,create an html table,create an html form,can html id have spaces,create an html element in javascript,create an html link,convert an html to pdf,

[sheisraging]

Tutorial: How to Embed Gifs (and get the one you actually want from the set)

There have probably been posts about this before, but since reposting is still a (deeply unfortunate) thing, I figured I'd give this a shot in case it's not a well known trick.

The tumblr Gif tool will allow you to embed gifs directly into your post without saving and re-uploading (reposting) someone else's work.

When you're building your post, just use the yellow GIF icon in the post builder:

You can search here by tag or keyword. If you happen to know one of the tags used on the original post you're looking for, that can narrow things down:

To narrow down to a SPECIFIC post, you can also paste the URL into the search field. This will pull up the very first gif in that set:

If you select that gif, it will pop into your post with a credit and link back to the OP (specifically back to the OPs post with that gif in it):

This is a properly attributed gif embed. The credit on the bottom right points back to the original post:*

Often, the first gif is not actually the one you want to embed, but there is a way to swap the image out for the one you want without losing the source attribution.

*It's helpful to put some reference text near your initial embed so you're able to swap the right image out later on. For this post, I'm going to use that short block right above the embedded gif as a reference.

In another tab/window, go to the OPs post and find the actual gif you want to embed from their set. Right click the image and Copy Image Address:

Once you have the URL copied, go back to your post and scroll to the gear icon at the top:

Open that menu and in the dropdown, where it says Text Editor, swap Rich Text to HTML:

Your post will turn into a bunch of code once you do this. Don't worry, we will change it back.

For this post, I put reference text above that first embedded gif so I could easily find the URLs I need once it becomes HTML. This is super helpful if you're embedding more than one gif. The reference text is highlighted below. This indicated the block that my currently embedded gif lives in:

In order to swap the first gif out for one that's later in the set, you just need to replace the SRC gifv and SRCSET gifv URLs with the image address you copied:

Once you've pasted the image address into these spots, you can go back to the gear icon and switch the Text Editor back to Rich Text:

Your post should return to it's previous, glorious state, but instead of the first gif embedded, you should now see the one you actually want from the set. The credit and source attribution back to the OPs post should remain intact on the bottom right:

This might seem super complicated at first, but it's pretty straightforward once you've tried it, and also a lot less frustrating for gif makers to see this than seeing our stuff just get reposted.

Anyway... If you found the gifs outside of tumblr or you didn't make them yourself, don't save and re-upload (aka. repost) them to tumblr, 'cause someone probably stole them from here to begin with and that's not cool. Search the tags and find the ones you want. Reblog from gif makers. If you want to embed a single gif from a set, try to do it this way, or minimally, credit the person you took it from.

[ghostgoing]

hi tech #2

Tim and Tucker are working on some code together Danny, passing by: have you considered adding a value attribute to your object tag? Tim: this is C++ Fenton! And even if I were working in html, you can’t use value with object! Danny leaning towards screen: I mean you’ve got object right there points at screen Tim: Tucker[weary]: he’s trolling you Tim: Shut the fuck up Fenton! Danny: (smirks) you can’t make me Tim swivels his chair, grabs Danny by the shirt, pulls him down and kisses him hard. He releases Danny and swivels back to the project as though nothing has happened Tucker meeting Danny’s eyes behind Tim’s back: *wiggles his eyebrows* Danny:(mouths) what the fuck Tucker: *wiggles his eyebrows again* Danny’s phone rings. Danny: Hey Jazz! Danny: yeah I’ll be there in five

several minutes later….

Tucker, grabbing Tim’s shoulder: (scream whisper) DUDE YOU KISSED HIM Tim: (panicked) I KNOW!

EDIT: I have written a different version of this post here

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

[changes]

Friday, January 27th, 2023

🌟 New

On the web, you’ll now see a helpful message when you reach the end of a feed (on a tag page with very few results, for example) or visit a completely empty feed (on the “your tags” dashboard tab if you don’t follow any tags, for example).

You can no longer apply formatting to a poll question. Attempting to do so previously would result in visible HTML once the post was published.

Kokobot’s initial message now includes a line about how to stop receiving messages (you just need to reply “stop”).

🛠 Fixed

Fixed an issue on mobile web that prevented the creation of secondary blogs.

Fixed another issue on mobile web that prevented users from accessing messaging.

Fixed an issue that could cause the post editor to break when reblogging some polls.

Fixed an issue that made it possible for the poll results total to be over 100%.

Fixed an issue that made it so poll results would sometimes not load in reblog notes.

On web, we fixed a bug that caused reblog attribution to be missing from posts on the blog view likes tab.

Fixed a bug that caused some post embeds to have scrollbars.

🚧 Ongoing

We tried to come up with something kind of cheeky here but we also know everyone is tired so: Please keep reporting any spam bots that you encounter. We’re still fighting from our side and we appreciate all of the reports that you all have sent in 💜

🌱 Upcoming

🌈

Experiencing an issue? File a Support Request and we’ll get back to you as soon as we can!

Want to share your feedback about something? Check out our Work in Progress blog and start a discussion with the community.

[transienturl]

You know what, I'll bother making this post. It's long overdue.

PSA: Please don't install uBlock Origin rules for Tumblr that use :nth-of-type(), and please remove or fix any you have installed. They can and will hide the wrong things. I'll show you a few alternatives below.

First, an example of how we get here. I've used the uBlock Origin element picker to try to hide the "Get a Domain" sidebar item:

With some different adjustments of the sliders, it gave me these two snippets, one of which targeted a whole bunch of sidebar items, and the other of which selected the right one. Great, right? Read on.

www.tumblr.com##li.g8SYn.IYrO9:nth-of-type(7) www.tumblr.com##.gM9qK > li.g8SYn.IYrO9

As you can see, these both target a particular kind of sidebar item via "li.g8SYn.IYrO9"—fine—and as you can probably guess, the second one counts them all up and hides the seventh it finds.

This is bad, because what it actually hides depends on exactly how many sidebar items there are! Users can "snooze" Tumblr Live, which will make an item appear or disappear, and users with/without Ad-Free subscriptions will have or not have another. I have seen many, many people accidentally hide their activity, messages, inbox, etc using someone else's rule that's supposed to hide Live. Worse, some rules intended for e.g. recommended post carousels that use nth-of-type translate to something like "hide item number three on the dashboard no matter what it is," which will lead to a seemingly random post on your dashboard disappearing!

This isn't a problem specific to Tumblr, of course—I personally think uBlock Origin should never autogenerate these rules—but Tumblr has a ton of elements that aren't in fixed positions, so I feel comfortable wording that PSA the way I did. On a very static site, those rules might be fine. Here they almost always aren't.

So how do we fix this? First of all, as a developer of XKit Rewritten (check out @addons!), I must suggest you check if it has a feature to do what you want. Plenty of times it won't, though, and if not, we want to make a rule that hides an element based on what it is, not where it is. Here are three ways to make a robust rule:

First, I'll right-click the element I want and use the inspect element tool in my browser's developer tools to look at the element I really want (Firefox and Chrome/Edge/Opera have different but overall similar interfaces for this):

The HTML looks, for reference, like this (Tumblr sucks at code blocks but I'll try):

<li class="IYrO9 g8SYn" title="Get a domain"> <a class="tDT48" href="/domains"> <div class="kn4U3"> <svg> <use href="#managed-icon__earth"></use> </svg> </div> <div class="a132D"> <span class="ZC1wz">Get a domain</span> <!-- other unimportant stuff removed--> </div> </a> </li>

What's something unique about this element, preferably about the outermost element, and preferably contained within the <angle brackets> (HTML tags)? In this case, we have it easy: title="Get a domain" is definitely unambiguous and fulfills all of those three. If you're very familiar with web design using CSS, you'll know how to target that; if you've vaguely heard of CSS, you may be able to look at a reference sheet of CSS selectors, see [attribute=value], and figure it out, and if neither is true, I'll spoil it for you and say that we just put it in square brackets in this case.

So—taking the rule uBlock Origin made, removing the :nth-of-type() and replacing it with our better selector—here's our first working, bug-free uBlock Origin rule:

##li.g8SYn.IYrO9[title="Get a domain"]

Okay, great. But what if we didn't have that attribute to target? What if our top-level element looks the same as the other ones? What if we want this rule to work if we change our Tumblr language to Spanish? Let's move on to :has().

:has() is a CSS selector (supported in uBlock Origin even in browsers where you can't use it for web development yet, i.e. Firefox), that lets you check the contents of an element for whatever is in the parentheses. Let's assume that Tumblr would never make two sidebar items with the same icon, and target that href="#managed-icon__earth" property:

##li.g8SYn.IYrO9:has([href="#managed-icon__earth"])

Yep, that works too!

Finally, what if we couldn't use either of those because we need to target the content of the page that's not contained within the <angle brackets>? We can take a look at the uBlock Origin documentation and find that it has something for that too: :has-text(). You can do very powerful things with this (e.g. you can sort of implement Blacklist entirely using uBlock Origin using something like article:has-text), but it doesn't perform well and can pretty easily be used incorrectly, so I'd suggest you avoid it when possible.

However, let's try using it here to target the "Get a domain" label text:

##li.g8SYn.IYrO9:has-text(Get a domain)

And that also works!

With these techniques, you should be able to target any specific thing you'd want to hide without using any fragile positional selectors. If you're going to share your uBlock Origin rules with others, please make use of this! If you're just using your rules for yourself, then hopefully I've given you enough information so that you can understand what a rule does and decide for yourself if it's worth bothering to fix (menu item order might not change that often, so maybe you're fine with certain rules being a bit prone to breakage; if your rule hides the first post in your timeline you really do need to fix that one!)

-

And, of course, a note for you web developers out there: :has() isn't natively supported in Firefox quite yet, so you can't really use it (I would not recommend using JQuery's simulated version—it's not quite the same). And :has-text() is just not a thing for CSS at all. Just use javascript at that point! Edit: No longer true in 2024; style away!

Final note: any rule with a random 5-character string like g8SYn will eventually break when Tumblr rebuilds its CSS map, though they haven't done that in ages. But when they do: no, it's not "Tumblr devs breaking our rules because they hate us." (Yes, I hear that sentiment a lot in contexts when it almost always makes zero sense.) If you're fairly experienced with CSS you can sometimes make Stylus/uBlock Origin rules that don't reference any, but it's usually convoluted and more trouble than it's worth.

[webtutorsblog]

Some Advanced HTML Tags and Techniques: Take Your Web Design Skills to the Next Level

HTML (Hypertext Markup Language) is the standard markup language used for creating web pages. It allows you to structure content and define its meaning, layout, and appearance on a web page. Here are some advanced HTML tags and techniques that can help you create more dynamic and interactive web pages.

HTML Head

The HTML head element contains information about the document, such as the page title, meta information, and links to external resources. The head element is included in the HTML file before the body element and is not visible on the page. It is used to provide information that the browser or search engine can use to better understand and display the document. Some common elements found in the head include the title tag, meta tags for SEO, links to stylesheets, and references to JavaScript files. By including the appropriate information in the head element, you can help to improve the user experience and search engine optimization of your web pages.

Learn More About HTML Head

HTML Color

HTML color is an important aspect of web design, and learning to use color codes effectively can enhance the visual appeal of a web page or website. HTML color codes can be used with various HTML elements, such as <body>, <div>, <h1>, <p>, and <a>, to name a few. They can also be used in CSS code to style elements within a page or an entire website.

Learn More About HTML Color

Semantic HTML

Semantic HTML uses tags to describe the meaning and structure of content, rather than just its appearance. This makes it easier for search engines and screen readers to understand the content of a web page. Examples of semantic tags include <header>, <main>, <nav>, <section>, and <article>.

Learn more about HTML Semantic

Custom Attributes

HTML allows you to create your own custom attributes for elements. This can be useful for storing additional data or metadata about an element, such as a data attribute for storing an ID or a tooltip. Custom attributes should be prefixed with "data-", such as data-id or data-tooltip.

Learn more about HTML Attributes

HTML Forms

HTML forms are used to collect user input and are a fundamental component of many web applications. Advanced form techniques include validation, using the required attribute, and customizing the appearance with CSS.

Learn more about HTML Forms

HTML5 Canvas

The HTML5 canvas elementallows you to create dynamic graphics and animations on a web page. With JavaScript, you can draw shapes, lines, text, and images, and animate them using various techniques.

Learn more about HTML Canvas

Responsive Images

Responsive images ensure that images are displayed at an appropriate size and resolution for the user's device and connection speed. HTML provides several ways to implement responsive images, including the srcset and sizes attributes, and the picture element.

Learn more about HTML Images

HTML Table

HTML tables are used to display data in a structured and organized manner. They consist of rows and columns, and each cell can contain text, images, links, or other HTML elements. To create a table, you use the <table> tag, and then add rows with the <tr> tag and cells with the <td> or <th> tag. The <th> tag is used for table headers. You can also add attributes such as "border", "cellspacing", and "cellpadding" to the <table> tag to adjust the appearance of the table. By using HTML tables, you can present data in a clear and readable format on your web page.

Learn more about HTML Table

HTML Class

HTML classes allow you to apply a specific style or behavior to a group of HTML elements. To create a class, you use the "class" attribute and assign a name to it, such as "my-class". You can then add this class to one or more HTML elements by using the "class" attribute followed by the class name, such as "class=my-class". This makes it easier to apply consistent styles across your website and to make changes to those styles by editing the class definition in your CSS stylesheet. Classes can also be used to target elements with JavaScript or jQuery, making it easier to manipulate their behavior and appearance. By using HTML classes, you can create a more flexible and maintainable website design.

Learn more about HTML Class

HTML JavaScript

HTML and JavaScript work together to create dynamic and interactive web pages. JavaScript is a programming language that can be embedded in HTML documents to add interactivity, animations, and other dynamic features. You can include JavaScript code in your HTML document using the <script> tag, either by including it directly in the HTML file or by referencing an external JavaScript file. JavaScript can interact with HTML elements, manipulate the DOM, and communicate with servers to dynamically update web content without requiring a page refresh. By using HTML and JavaScript together, you can create powerful and engaging web applications that run directly in the browser.

Learn more about HTML JavaScript

In conclusion

By utilizing advanced HTML tags and techniques, web developers can take their web design skills to the next level. From creating dynamic animations with the canvas element, to implementing responsive images and web components, these techniques allow for more interactive and user-friendly web experiences. Additionally, it is important to consider accessibility when designing web content, ensuring that all users can access and interact with the content. With these tools and techniques, web developers can create more engaging, accessible, and responsive web pages.

[thegrayascendancy-if]

Hello, wanted to say I read and loved the demo. Very well done. I just had a few questions, would love to know what Twine Template you use, especially at the beginning. Where you have the character creator, I love that the box around your selection changes to say/match what you chose. Such as depending on what skin color I choose it changes to signify that. Would love to know if you would share how you did that. I look forward to future updates! Best of luck.

Thank you! 🤍

I'm using the default template for SugarCube, if I remember correctly. Glad that you liked the box effect, it was my solution to reducing the number of passages whilst still allowing the validation of user input in character creation.

I did it through a combination of HTML tags and SugarCube native macros. Technical stuff under the cut:

Here is an example for eye color:

<fieldset class="charbox"><legend id="chareyes" class="chartxt">$p.appearance.eyes</legend> <div class="charoptions">Your eyes are: <<link "hazel">><<set $p.appearance.eyes to "hazel">><<replace "#chareyes">>$p.appearance.eyes<</replace>><</link>> <<link "brown">><<set $p.appearance.eyes to "brown">><<replace "#chareyes">>$p.appearance.eyes<</replace>><</link>> [rest of the options removed for brevity]</div> </fieldset>

The fieldset and the legend HTML tags together form a single box, a so-called legend, which I declare per attribute such as name, skin color, etc. You need a fieldset to make legend work iirc, but legend is where that text is displayed and it is positioned on the box frame by default. Important here is to give a unique ID to the legend tag ("chareyes" in this case), as we are interested in manipulating the text shown in it depending on our box.

In the sample above, the options I present for the eye color are listed within the Twine <<link>> tags. For these links there is no target passage to go to. Instead, you can see it is coded to do two things upon clicking the respective option. One, setting a game variable to the selected color.

<<set $p.appearance.eyes to "brown">>

Two, triggering a replace command to change the value shown in the legend to the description of the selected eye color according to the variable we have set in the same line. This is the bit you are asking about:

<<replace "#chareyes">>$p.appearance.eyes<</replace>>

Replace triggers without changing passages, so this way you can adjust multiple variables on a single "page". You'd obviously need to adjust the corresponding CSS classes to make it look the desired way, but the mechanics are serviced with just this idea above.

Hope this helps!

[eggdesign]

Making a featured tags section

I've gotten a few questions about this, so I'm going to explain how I'm putting together the featured tags section on my (still in progress/yet to be released) dashboard inspired theme.

This uses JS with v1 of the API, the HasPages block in the theme HTML, and some CSS.

Instead of relying on text options for tags, this theme is grabbing pages based on if it is a tag url or not.

While I technically have 4 links here, /About is not a link to a tag, so it gets removed.

This uses the API similar to how @fukuo did featured posts, but with vanilla JS instead of jQuery. How it works:

Select only the links in the featured tags container that include /tagged/ (using a CSS attribute selector for [href*="/tagged"])

Grab the tag name from the url

Add that tag name to the API url

Use the returned data to add the text, total posts, and any images from the most recent result of that tag

Style/formatting with CSS

I have the JS and CSS here with some comments on what everything is doing so far. I will update this as I make more progress on the theme, so let me know if you run into anything that I need to update!

[streetlights-was-taken]

Hello! I hope I don't bother you again. I have two questions for you (I think there are more). I'm writing a zosan fanfic and I came up with the idea of ​​putting "titles" in what happens in the "chapters" separated by the divider, like the titles of anime episodes (very One Piece with spoilers about what happens in the episode), I would like to know what do you think of this idea? I have images of what these titles would look like if you want them for better visualization. 2- Is there a skin work on ao3 that imitates these "titles", as if they were chapter titles of a book (but without having to have several chapters as I want to make a oneshot)?

hello! yes, I think that sounds like a neat idea. you should go for it!!

I don't watch one piece so I hope I'm visualizing it right. if I got it wrong, feel free to send me a picture.

anyway. are you trying to do something like this?

if this is what you're going for, you can try this code out! I also created a pastebin for this one, so you can just copy paste to your own workskin.

so here, we're creating the lined-title css class. you can just add it to your <p> tags in the html when you want to apply them. e.g.

<p class="lined-title">TITLE</p>

feel free to play around with border-style and the border-color (or any other attribute). you'll want border-style:solid if you just want one single line, for example.

you can also check AO3's FAQ on what colors and fonts you can use. fun fact: border-style:double is the same css they use to add those double lines in the FAQ!

note that this will span the entire width of the page. so if you have a short title, it'll look like this on desktop:

if you don't want it to span the whole page, we could try this instead (also included in the pastebin link):

which will result in this:

however, we can't manipulate the spacing between the text and the lines in this one. on the other hand, it has text-decoration-style:wavy which the first option doesn't have!

for custom scene dividers, you can also check out these guides:

How to Make Customized Page Dividers by La_Temperanza

Dividers & how to style them by skinofthesoul

Rainbow Paragraph Divider by benwvatt

bonus: inspect element

also, are you familiar with inspect element yet? if you are, great! you can just skip this. otherwise, if you're still getting the hang of working with workskins and aren't used to editing css, you can try this:

right click on the text you want to change on AO3, then click "inspect" or "inspect element" (not sure what it's called in browsers these days; on firefox, it's just "inspect"). this will bring up a bunch of developer tools and it kinda looks like this:

it might look different depending on the browser.

but here on the side, you can see the html on top and css at the bottom. as you can see in the screenshot, we are inspecting the title and we can see the different css rules for the title.

if you want to play around with the css, you can just change them from this panel and it will automatically reflect on the page. these changes are not permanent so it's a good way to test different styles without having to go through the cycle of updating the workskin and refreshing the fic page.

if this is your first time trying this out, it might look overwhelming, but it's very helpful if you get the hang of it. but of course, you don't need to learn how to do this to style your fics. :D

[codewithnazam]

HTML Forms with examples

Are you looking to create a user-friendly and interactive website that allows users to submit data easily? If yes, then HTML forms are your go-to solution. HTML forms are a crucial component of any website that allows you to collect user information and data. In this article, we will discuss HTML forms with example code snippets and explain how they work. We will also highlight the different…

[sinsinewave]

what wiki.js doesn't support the markdown HTML tag attribute except it does but it applies the markdown in the editor rather than the preview?