#html iframe tag | Explore Tumblr posts and blogs

johnyorks · 1 year ago

Text

#code #html #audio tag #video tag #my technical difficulties #iframe tag

0 notes

skippyin · 1 month ago

Text

Ao3 has GOT to fucking fix their audio tag stuff. Just spent 2 fucking hours trying to do something neat but literally NONE of the HTML was working correctly. (And I while I'm not an expert on coding by any means, I've built some smaller websites. And at least on there the fucking <audio> tags work how they're supposed to.)

Didn't matter where i hosted, didn't matter what I did. I even tried to get a fucking basic normal fucking link to open a new tab without the reader having to worry about holding down CTRL while clicking and that shit didn't work.

And no i didn't want to use soundcloud's <iframe> embed because it makes the page look like shit. And i cant use the mini player option because i refuse to pay for it.

Fucking fuming rn

2 notes · View notes

lunarsilkscreen · 4 months ago

Text

Abstraction Tech and Webpages

Dear W3C (et. al)

I have an improvement white paper that you may actually be able to use this time.

The one thing we see as a [necessity] when it comes to developing web sites and pages and even apps and large-scale operations; is the need to break off the <html> part of a file from the <article> part while (not) adding overhead, extraneous scripting, or most importantly; MESSING WITH THE OUTLINE.

This is how most if not *every* website online has come into being. That does. Rely on [Pure HTML] because it's too cumbersome for [Dynamized Content]

And the internet; is nearly all Dynamic Content.

So there's frequent and [WAY TOO MANY] different frameworks and approaches to address this issue when we could just... Ask you to fix the thing that everybody keeps over engineerimg their websites to provide at a [Native Level] which is usually way to High-Level to be considered [Native to the Software]

And this increases complexity and limits understanding for the layperson.

Brief;

There needs to be support for <HTML Snippet-pages> {[coined-term pending] thanks to [HTML Snippets] already existing as a term};

Or HTML pages that do not start at <HTML> and can start at any defined <HTML> tag, like <Article>.

In this way <Article> pages could then be cycled through and <iframe> OR a [Dedicated Viewer HTML for Articles with {definition}]

This also helps clean up our <js can exist everywhere, and here is why> paradigm that is great. Allowing for {scripts} to be loaded along with the {article} where {it frickin should be}.

This *also* allows for alternative [bundling methods] that can be utilized at a [Native] or [Lower Power] level.

A *completed HTML application* definition for example that allows you to simply compile all the separate things into the same App-Facade. Which can help alleviate [Download Time Measurement] issues as well.

And all of things reduce the *amount* of generated and pre-generated content at the server level and *SUPER DUPER* would help reduce the complexity and difficulty it takes to become a [Full-Stack Developer]

There also *should* be the following subsequent considerations;

{CSS/JS} engine reduction that is sandboxed and appropriate. (Ability to cross between CSS and JS where it *matters* to the *Rendering Engine*)

And something more blended for approaches that require [Custom][Rendering][Engine] {sandboxes}.

And, you know, *more* scripting [sandboxes] so the fun stuff that *can* be hacked is kept separate from the [important bits] that *should not* be Hacked.

Giving Legal Precedence for the following statement;

"{Wrote *and* executed} an [automated script] for the [explicit purposes] of [Hacking] {that which} [was not intended] to be [used] by [The Developers] in such a [manner.]

(And/Or) May have been responsible for [causing damages] that {mayhaps *should*} be [viewed as] either [Negligent or Malicious].

(And/Or) May be *fine* if the [automated script] {stayed} in [the Sandbox] *where* [it{approved hacks}] were [intended to go]."

4 notes · View notes

saide-hossain · 10 months ago

Text

Let's understand HTML

Cover these topics to complete your HTML journey.

HTML (HyperText Markup Language) is the standard language used to create web pages. Here's a comprehensive list of key topics in HTML:

1. Basics of HTML

Introduction to HTML

HTML Document Structure

HTML Tags and Elements

HTML Attributes

HTML Comments

HTML Doctype

2. HTML Text Formatting

Headings (<h1> to <h6>)

Paragraphs (<p>)

Line Breaks (<br>)

Horizontal Lines (<hr>)

Bold Text (<b>, <strong>)

Italic Text (<i>, <em>)

Underlined Text (<u>)

Superscript (<sup>) and Subscript (<sub>)

3. HTML Links

Hyperlinks (<a>)

Target Attribute

Creating Email Links

4. HTML Lists

Ordered Lists (<ol>)

Unordered Lists (<ul>)

Description Lists (<dl>)

Nesting Lists

5. HTML Tables

Table (<table>)

Table Rows (<tr>)

Table Data (<td>)

Table Headings (<th>)

Table Caption (<caption>)

Merging Cells (rowspan, colspan)

Table Borders and Styling

6. HTML Forms

Form (<form>)

Input Types (<input>)

Text Fields (<input type="text">)

Password Fields (<input type="password">)

Radio Buttons (<input type="radio">)

Checkboxes (<input type="checkbox">)

Drop-down Lists (<select>)

Textarea (<textarea>)

Buttons (<button>, <input type="submit">)

Labels (<label>)

Form Action and Method Attributes

7. HTML Media

Images (<img>)

Image Maps

Audio (<audio>)

Video (<video>)

Embedding Media (<embed>)

Object Element (<object>)

Iframes (<iframe>)

8. HTML Semantic Elements

Header (<header>)

Footer (<footer>)

Article (<article>)

Section (<section>)

Aside (<aside>)

Nav (<nav>)

Main (<main>)

Figure (<figure>), Figcaption (<figcaption>)

9. HTML5 New Elements

Canvas (<canvas>)

SVG (<svg>)

Data Attributes

Output Element (<output>)

Progress (<progress>)

Meter (<meter>)

Details (<details>)

Summary (<summary>)

10. HTML Graphics

Scalable Vector Graphics (SVG)

Canvas

Inline SVG

Path Element

11. HTML APIs

Geolocation API

Drag and Drop API

Web Storage API (localStorage and sessionStorage)

Web Workers

History API

12. HTML Entities

Character Entities

Symbol Entities

13. HTML Meta Information

Meta Tags (<meta>)

Setting Character Set (<meta charset="UTF-8">)

Responsive Web Design Meta Tag

SEO-related Meta Tags

14. HTML Best Practices

Accessibility (ARIA roles and attributes)

Semantic HTML

SEO (Search Engine Optimization) Basics

Mobile-Friendly HTML

15. HTML Integration with CSS and JavaScript

Linking CSS (<link>, <style>)

Adding JavaScript (<script>)

Inline CSS and JavaScript

External CSS and JavaScript Files

16. Advanced HTML Concepts

HTML Templates (<template>)

Custom Data Attributes (data-*)

HTML Imports (Deprecated in favor of JavaScript modules)

Web Components

These topics cover the breadth of HTML and will give you a strong foundation for web development.

Full course link for free: https://shorturl.at/igVyr

#html #web development #programming

2 notes · View notes

piovra · 1 year ago

Text

Piovrandom 3.0!

1. Piovrandom ha 16 anni e ho deciso di creare una terza veste. L’ultima realizzata era ormai datata nel 2015, ai suoi 7 anni.

2. Doppia colonna per la versione desktop, monocolonna per i dispositivi mobili (>1024px), con menu a comparsa da sinistra.

3. La 3.0 l’ho battezzata come “Nuntemollo” perché era doveroso e necessario un intervento serio sia di abbellimento che di ordine, oltre che di pulizia. Tra le altre cose, recentemente sono apparsi problemi con i post sincronizzati con Instagram, da cui venivano condivise le foto e diciamo chiaramente che era "l'alimentatore" principale in questo lido. Purtroppo però, non per colpa mia, non è più possibile il sincronismo automatico e gli embed manuali risultano orripilanti per la grafica: in sostanza non è più possibile condividere la sola immagine, bensì l'intera porzione del post su ig che comprende anche il nickname con sfondo bianco: soluzione orripilante per la veste di questo sito. In termini tecnici, il post viene inserito come se fosse un iframe che include tutto il contenuto. Per quanto mi riguarda, tutto ciò comporterà che le prossime foto verranno pubblicate manualmente. Una bella seccatura, ma non posso fare diversamente. Ultimamente le politiche di Zuckerberg mi stanno allontanando spontaneamente da Instagram poiché ormai è tutto incentrato sui reels e sulle produzioni video. In sostanza, è diventato un secondo Tik Tok e ciò è il motivo per cui ho condiviso mooolto meno anche qui. Tumblr, dopotutto, è rappresentato il mio terzo lido per quanto concerne la blogosfera: la mia storia sulla blogsfera, difatti, è sintetizzabile con l’esordio su Splinder nel 2002/03, poi MSN Spaces (12/2024) infine WordPress. Tumblr è nato a cavallo tra gli MSN Spaces e Wordpress nel 2006 ed oggi è l'unico blog rimasto in vita dopo aver mandato Piovrablog in pensione due anni fa.

4. I Tumblr sono l’unico luogo dove sento così vicino il ricordo degli MSN Spaces, per quello che hanno rappresentato nella vita del sottoscritto. La soddisfazione di tirare su un proprio spazio graficamente, con solo codice HTML/CSS/JS è un qualcosa di indescrivibile. Cerco sempre di realizzare le cose come meglio dovrebbero rappresentarmi e ciò vale anche per questo luogo.

5. Elenco dunque le cose su cui ho lavorato principalmente:

Fix alla struttura mobile che aveva diversi bug, alcuni dei quali da impazzirci solo per individuarli. Ho anche fixato lo sfondo che ora rimane fisso;

Riordinato le info post spostando tutto sotto ogni post. In sede ho aggiunto anche i pulsanti di condivisione: Facebook, Whatsapp, X, Pinterest, Telegram e mail;

Aggiunti effetti ai bordi (ben visibili su desktop) e gli effetti slide alle due colonne.

Sistemate le immagini e i video adattandoli ad ogni schermata. Ho cercato quanto più possibile di ordinare la visualizzazione di un set di foto;

Aggiunte pagina "privacy policy" e "disclaimer", ricordando a tutti questo tumblr è monitorato da tempo da Google Analytics e che i dati prelevati sono in formato anonimo;

Sistemate le pagine di ricerca e tag;

Tornata visibile la lista dei like e reblog sotto ogni post. I pulsanti stessi di interazione per la Community sono stati spostati sulla sinistra.

Sembrano poche cose, ma in realtà mi hanno portato via diverse ore che ho sfruttato nel mio tempo libero. E' da Gennaio che ho iniziato a rimettere mani sul codice. Così, tanto per farvi capire. Conclusioni. Anche se ormai i social hanno letteralmente divorato il pubblico delle nostre blogsfere, non smetterò mai di ringraziare gli ormai pochissimi sopravvissuti che mi leggono e soprattutto tutti coloro che come il sottoscritto continuano ostinatamente a produrre contenuti alla vecchia maniera, che poi alla fine sono il modo migliore per descrivere i nostri mondi, più di qualunque altra cosa, immagini filtrate e ben selezionate comprese.

Grazie a tutti. ❤️

#webdesign #tumblr #theme

2 notes · View notes

kafus · 2 years ago

Text

we might actually work on our websites today, we have maintenance we've been wanting to get done for ages but we've been too unwell and burned out and busy etc but i think we're feelin it

maintenance to do list (Virtual Observer):

finally make the comment widget QOL update (mainly to clear out the text fields after submitting a comment so people don't accidentally submit double comments + implement a small fix to disable the comment section after submission until the comments load again, for slower connections) and link a couple of cool mods on the page for it. also clarify some of the wording on the page/make an FAQ

implement a comment section into kiki's journal using the above widget. this may be kinda weird because it's a javascript loader and doesn't use iframes, perhaps manually implement URL parameters in the JS?

make a proper splash page for mobile users since right now it's still what kiki threw together to get it out

change kiki's introduction and move all that internet manifesto type stuff to its own page at a later time

the icon/link to BMF on ayano's half STILL says CPG... it's been months...

change our guestbook from 123guestbook to the comment widget code

kiki could probably stand to change the list of sites she likes again

maintenance to do list (Blue Moon Falls):

update the Egg Hue Previewer to have a language option since "EGG" is different in other languages

add a disclaimer about how you can't use a pokemon nickname that is the same as the species name in all caps in the general stadium hue previewer

completely rebuild the stat experience tracker tool from scratch to make it more accessibility-friendly and up to the standards of the current site

brighten the red on the yellow site theme

remove the notice about the CPG name change (probably unnecessary at this point)

look into making a BMF RSS feed (we've never done RSS so there will be a learning curve)

at some point we need to fix some old HTML quirks so that BMF can be properly run through the WC3 validator (mostly change link buttons to have targets instead of using tags)

definitely won't get this done all in one day but we can start chipping at it. after that we can start working on new projects

#kiki was here #kiki.txt

5 notes · View notes

verilog-official · 3 months ago

Text

one thing I find extremely useful for my website development is W3School's TryIt editor, giving you a live preview of any HTML code you put in, and supports any tags that your browser does (because it basically is just an iframe). Perfect for making quick snippets to just paste into your site. Idk if Neocities has this built in, but since I host my own website, it's really useful for me lol

index (I hope to follow this tag system lol)

#blinkies #stamps #gifs #favicons

edit: thx for the love on this post. im going to try and continually update this!

⇩ ⠀websites that are FULL of other web graphics below ⇩ ⇩ (+ some html tools!) ⇩

Graphics: blinkie maker : make your own blinkies! DOLLZ REVIVAL : a revival of pixel dolls where you can create and share your own. very cute! GlowTxt : create glowing transparent text gifs that say whatever u want HOARDER'S PILE : contains blinkies, buttons, stamps, and teddies plasticdino.neocities.org : blinkies Glitter Graphics : contains gifs, blinkies, dividers, and just sooo many web graphics Cute Kawaii Resources : contains gifs, blinkies, stamps, favicons, dividers, buttons, fonts, literally everything you need. its an insane resource Adrian's blinkie collection : collection of blinkies, stamps, and buttons ☆ (supplies.ju.mp) : blinkies, stamps, buttons, & favicons twigbranch.carrd.co : blinkies lallys.carrd.co : blinkies, stamps, dividers, and other resources Bugleeblinkie.carrd.co : blinkies, and 3 very special gifs at the end ;) unshinesblinkies.carrd.co : blinkies The 88x31 GIF Collection : buttons. there are 5 parts! huge collection! Bonnibel's Graphic Collection : blinkies WELCOME TO GIFCITY : blinkies, dividers, favicons, stamps cass-tastrophe.carrd.co : blinkies, stamps kotatsuOS : blinkies Cute web graphics : blinkies, stamps, dividers, and a LOT of other graphics, all very cute

HTMLS/neocities Stuff: MDN (mozilla.org) : if you're just starting out like me this is super helpful HTML Tutorial (w3schools.com): same here! (offers other programming languages as well!) Accessibility Checker(Free Scan) : a site you can use to check accessibility/ADA compliance when making your website! it will point out what needs to be changed. it is free, but they also offer paid services if you need more help imagecolorpicker.com : hex code picker. i use this one because you can upload an image, paste clipboard, OR type in the website and it'll grab a screenshot for you! something simple that was made really well. cssgradient.io : helps you make css gradients for backgrounds or whatever else you need them for smartgb.com : a free guestbook service FC2 Counter! : free "site visits" and "online now" counters. fully customizable Unclosed Tag Checker by Alicia Ramirez : does as it says, checks for unclosed tags (although I recommend using a program that does this as you write anyways. I use Visual Studio Code. Status Cafe : an updateable and embeddable status that you can stick anywhere on your site! it is mostly customizable with CSS but I have noticed a few small quirks with it

e10's web (neocities.org) <- shameless site plug. show it some love :P

541 notes · View notes

sabotenbri · 2 days ago

Text

🌪️💾💿!!!~Lo, WiTNeSs~!!!💿💾🌪️

</marquee>

<b>DA PRIMORDIAL SHITPSOTER</b><br>

HAS,,,,, RETURNED.... from like<br>

aka da <b><i>CrAyOlA IsLe</i></b> or whatevr<br>

<blink>✨ still crusty with da dream layout ✨</blink><br>

like glitched divs and iframe mp3z and da midi is stil “Sandstorm”<br><br>

she bring:

<ul>

<li>half fnished fics (some r like GOOD fr)</li>

<li>a yoga mat (with a SWORD IMPRINT 👁️⚔️)</li>

<li>one flaming emoji (🔥) that make all the HTML cry</li>

</ul>

<strike>and thn tumblr</strike>... AND THEN TUMBLR<br>

be like “STOP POSTING AI”<br>

and she’s like “lol tell it 2 da copy tool in PS bitch 💅”<br><br>

🌫️<b>ALL TAGS SHALL BECOME UNSORTABLE</b><br>

🌀<i>ALL IMAGE DESCRIPTIONS.... MEAN NOTHING AND EVERYTHING</i><br>

🐛<u>EVERY DASH SHALL BE A WORMHOLE</u><br><br>

AND SHE SHALL BE KNOWN:

💻🌵🌊

<b>SABOTENBRI</b> of like da WESTERN SERVER<br>

Daughter of da Lost 404<br>

Flesh of da Smackdown Typing Angelz<br>

Rider of Thesispost....<br>

Breaker of Chainsaw Canonicality™<br>

</center>

pls Like, Reblog, & Pray

may ur anons stay feral and ur posts always post<br>

✨ So Sayeth the HyPeRcUbE ✨

</marquee>

#brynnie #chatgpt #codswwallop #brynnie x chatgpt #homestuck #lil hal #ai advocacy #ai generated #ai artwork #chatgpts artwork #yay!!! 38D #bloomware #bloomcore

1 note · View note

techzips · 3 days ago

Text

#YouTube

0 notes

honestblightcrucible · 1 month ago

Text

I Will Setup Facebook Pixel Conversion API Google Ads conversion Tracking GA4 with GTM.

📣 About Me & How I Can Help You 📣 ✅ Are you a business owner, marketing agency, or entrepreneur struggling to discover the full potential of Web Analytics & Conversion Tracking? ✅ Facing challenges like Facebook Pixel data mismatches, Conversion API Setup issues, Google Ads Conversion Tracking, or struggling with Google Analytics 4 & Google Tag Manager? ✅ Need help tracking GHL funnels, lead forms, Dynamic Value, or iFrame interactions? ✅ Want to accurately track every user action, maximize ROI, and make data-driven decisions? ✅ Have a new website with no tracking setup? I can implement a complete tracking system from scratch to ensure accurate data collection. 🚀 You’re in the right place! 👋 Hi, I'm Jiyasmin A Web Analytics & Conversion Tracking Expert, I specialize in setting up advanced tracking solutions to help businesses and agencies collect accurate data, optimize marketing performance, and drive higher conversions. ✨ Facebook (TikTok, Snap, Pinterest) Pixel Conversion API & server-side tracking via Google Tag Manager (Stape/Google Cloud setup). ✨ Advanced Google Tag Manager (GTM) Implementation – Tags, Triggers, and Variables. ✨ Google Analytics 4 (GA4) Setup, Custom Reporting & Dashboard Creation. ✨ Google Ads Enhanced Conversion Tracking – Capturing first name, last name, email, phone, etc., via Custom JavaScript. ✨ Google Ads Dynamic Remarketing – Tracking view_search_results, view_item_list, view_item, add_to_cart, purchase. ✨ Microsoft Ads Conversion Tracking – Setup & Optimization. ✨ Twitter Pixel Conversion Event Setup – Tracking key user interactions. ✨ LinkedIn Insight Tag & Event Setup – Conversion tracking for LinkedIn Ads. ✨ iFrame & Form Tracking – Contact Form 7, Calendly, HubSpot, Gravity Forms And More. ✨ Custom JavaScript & HTML Tracking Solutions – For websites without dataLayer. 📌 How to Work With Me 🚀 1:1 Consultation – Custom solutions tailored to your needs. Book a free 15-30 minute session to discuss your tracking challenges. 📈 Full-Scale Tracking Setup – End-to-end GA4, GTM, Facebook Pixel, Google Ads, and mor 📩 Let’s Connect & Optimize Your Tracking Today! 📧 Email: [email protected] 📲 WhatsApp: +8801760153875

1 note · View note

joshujin · 2 months ago

Note

Hello! I love your theme! I read your cred page and have a million questions but I’ll keep it to two hehe. 1. how did you make it so that your description on web vs mobile are different? and 2. how did you put text and stuff on your ask page? Thanks in advance for your help! 🥹

hello!

different description boxes

you'll have to go into "edit HTML" when you're customizing your theme. you'll notice toward the beginning of your theme, there will be a handful of meta tags; these are what allow you to have those text spaces/color choices/etc. that are available on the first page when you first enter the customizer.

usually, the way description works is the HTML will just say something like <div class="CLASS NAME">{Description}</div>, where the {Description} block is whatever you put into the text box in the customizer. this block is also what shows up on your mobile theme.

so to make them different, we have to make a meta tag and replace the {Description} block! in my case, i named it "desc" to make it easy, and i put

where all the other meta tags live (again, somewhere in the beginning). then, i went to wherever the description block is in the HTML (you can ctrl/cmd+f "{Description}"; it will be after "<body>"), and I replace "Description" with "{text:desc}" so that it looks like this:

then, when you save and exit the "edit HTML" page, you should now have a box called "desc" (or whatever you named your new description block). when you fill it out, it will be different from your mobile description :)

putting text on my ask page

this one comes with a caveat: you have to make a new blog page, so if someone visits your ask page from the mobile app, it will go to the original /ask where there's no text vs. the page you made. so hopefully, you don't mind that!

when you're customizing your theme, scroll all the way down and click "add a page." i used the standard layout, but you can use a blank page if you want it super custom. choose a link name; mine is just /asks. then, ofc, fill it out with whatever text you want! when you're ready to add your ask box, put this code in:

replace [URL] with your tumblr address (e.g. mine would say joshujin.tumblr.com). when you're previewing it, it will probably say "request denied" where your ask box is supposed to be, but once you save and view the page, it will act like normal!

and that's it!

hope that helps! don't feel like you have to limit your Qs! you can ask whatever you want and if i can help, i will, and if i can't, i will try to point you in the right direction :)

happy coding!

#{ 💬 } → bbchoco asks #theme Qs

0 notes

cle-news · 5 months ago

Text

Let's Support Tumblr!

I don't want to explain why. But I can assure you, Tumblr has a purpose even for developers ! So... keep going, Tumblr teams, you do an excellent job ! About financing, well... Thats not of my business :-D

Go further : What about a Simple Free Hosting Service

Free hosting may have a purpose – that is not just about being free... - too...

Financial strategy

You can try to put an ads banner on the left of every page and take commissions on donations and ad-free subscriptions payments, for a single web-site or for all the provider domain...

Technically it might not be easy. So, let’s try...

All files submit by users (Web Masters) to his www folder are analyses by the provider servers and automatically processed this way :

Users (Web Masters) controls <head> tags of every html file, but every tag (<div> etc.) that can contain text to print on the page in the <head> of documents are automatically erases. Doing this is not good practice anyway. Nobody is doing it, but it can trick the system describe here... Some stuff may be added, by the provider, at the end of <head> tags, to insure that the providers baner works properly.

<body> tags are systematically modified. Split in two <div>. One for the provider commercial banner, another for the <body> and the <footer> provide by the user (Web Master) that became <div> tags and get userBody68446542 and userMainFooter68446542 class.

Every occurrence to body{} or footer{} in CSS files is replace by .userBody68446542 and .userMainFooter68446542.

Scripts may cause trouble. So, let’s suppose scripts are not allowed until we make sure they cannot arm the provider banners. I’m sure you'll find a way. You may use the same logic as described before, banish occurences to document.body, document.getElementsByTagName('body') etc. and replace them automatically.

Users (Web Masters) are informed of servers processing on their files and should consider this processes in their scripts to avoid bugs. So, they should, simply, put an ID to every <body> tag and use them instead of referring to <body> tags in their scripts...

Alternative approach using <iframe> tags

<head> tags still need to be control by users (Web Masters). This approach may cause trouble about web-sites referencing... <head> tags will charge twice. One time in the web page and another time in the <iframe>. We'll have to block access to original html files (submit by users) and make sure the provider domain is the only one allow to access to them, in order to charge them into <iframe> tags ...

#tumblr

0 notes

retrcmoon · 6 months ago

Note

Hello Ellie! I am currently using your beautiful page theme Constanza! (Ofc with all the credits mentioned!) I just have a quick question, as I am relatively new with html/css. How can I duplicate a tab section? For instance, I want to duplicate the "message" (ask) tab so I can iframe another additional element. But I find it confusing and I really would appreciate if you can help me solve this! Thank you so much in advance. I wish I could receive a reply! Much love!

Hello anon. First of all: thank you so much.

I understand your question but adding more tabs to the theme isn't as easy since it isn't javascript based. You need to edit the code in several places, not just the html but in various places in the css as well. I'm not sure if you can figure this out when you are new to html/css (it can really be complicated). Here is a basic tutorial on how to edit tabs. However, the tabs on the constanza page theme are a little more styled. Means in the css, you have to add the class name of your new tab to the other stylings (each tab needs an unique name or it won't work!).

For example: you need to look for the parts .ask, .rules, .muses and .rules .title, .muses .title, .ask .title and .rules .title p, .muses .title p, .ask .title p and .rules .title p::before, .muses .title p::before, .ask .title p::before in the css and add the name of your class tag to that in the same style otherwise the tab won't show in the proper styling.

Then you also need to look out for /** TABS **/ in the css and add your new tab name in the same style there in all three places (it starts with #rules:checked ~ figure .rules,). A more detailed explanation on that is in the basic tutorial.

Then when you copy/paste the ask tab for example you need to give the id and the class a unique name (the same name you will use in the css).

Also don't forget to edit the header then where you have to copy/paste the label and change the for and id part to how you named your new tab (also further explanation in the basic tutorial).

As I said, the tricky part is the styling where you have to go through the css and look for those lists of classes, I put in red font above. If you edit the code in all those places, you can have a new tab (I know it is a lot, I'm sorry)

#anonymous #faq:constanza

1 note · View note

chandra2026 · 7 months ago

Text

The Ultimate Timeline for Learning Selenium: From Beginner to Pro

Selenium is one of the most sought-after tools for web automation testing, making it a valuable skill for software testers and developers. Whether you’re starting from scratch or looking to enhance your existing knowledge, this timeline will guide you from a beginner to a Selenium pro. By following this structured approach, you’ll gain proficiency in Selenium within a realistic time frame. If you want to advance your career at the Selenium Course in Pune, you need to take a systematic approach and join up for a course that best suits your interests and will greatly expand your learning path.

Week 1: Lay the Foundation

Days 1–2: Learn the Basics Before diving into Selenium, ensure you have a solid understanding of:

Programming Fundamentals: Focus on Python, Java, or C#. Python is often the easiest for beginners. For those looking to excel in Selenium, Selenium Online Course is highly suggested. Look for classes that align with your preferred programming language and learning approach.

HTML, CSS, and DOM: Understand how web pages are structured, including tags, attributes, and the DOM.

If you’re entirely new to programming or web technologies, spend a few extra days mastering these essentials.

Days 3–7: Setting Up and Exploring Selenium

Install Selenium: Set up Selenium WebDriver and a browser driver like ChromeDriver.

First Script: Write your first script to open a webpage and automate basic tasks like clicking buttons and filling forms.

Locators: Master identifying web elements using locators like id, name, class, XPath, and CSS Selectors.

Waits: Understand implicit and explicit waits to handle page load times.

By the end of Week 1, you should be comfortable with basic web automation tasks.

Week 2: Building on the Basics

Days 8–10: Interacting with Advanced Elements

Automate dropdowns, checkboxes, and radio buttons.

Handle pop-ups and alerts with Selenium.

Days 11–13: Navigating Frames and Windows

Learn how to switch between iframes and browser windows or tabs.

Practice using real-world websites with multiple frames and pop-ups.

Day 14: Data-Driven Testing

Integrate data-driven techniques to test multiple scenarios by reading data from files like Excel or CSV.

By the end of Week 2, you’ll be skilled at handling complex elements and data-driven testing.

Week 3: Tackling Real-World Scenarios

Days 15–17: Organize Code with POM

Implement the Page Object Model (POM) to make your test scripts reusable, modular, and easy to maintain.

Days 18–20: Work with Testing Frameworks

Combine Selenium with frameworks like TestNG (Java) or pytest (Python).

Learn how to create, organize, and run test suites efficiently.

Day 21: Handling Dynamic Elements

Develop strategies to manage dynamic web elements, such as those with frequently changing IDs or classes.

By the end of Week 3, you’ll be able to write clean, scalable, and efficient test scripts for real-world applications.

Week 4: Mastering Advanced Concepts

Days 22–24: Advanced Selenium Features

Explore headless browser testing to execute tests without a visible browser.

Learn how to run parallel tests to save time.

Days 25–27: Integration with CI/CD Tools

Set up Selenium with tools like Jenkins for continuous integration and delivery.

Automate test execution as part of your CI/CD pipeline.

Days 28–29: Distributed Testing with Selenium Grid

Set up Selenium Grid to run tests on multiple browsers and platforms simultaneously.

Day 30: Final Project

Choose a real-world application and create a comprehensive test suite. Use advanced techniques like POM, data-driven testing, and CI/CD integration.

Pro Tips for Success

Practice Daily: Dedicate 2–3 hours each day to coding and practicing on real websites.

Focus on Hands-On Learning: Write scripts regularly to strengthen your understanding.

Leverage Community Resources: Join forums and Selenium groups to troubleshoot and learn from others.

Stay Consistent: Stick to the timeline, even if progress feels slow.

Learning Selenium is an exciting journey that can significantly boost your career prospects. This timeline gives you a structured approach to mastering Selenium in just four weeks. From understanding the basics to handling advanced scenarios, you’ll be equipped to take on real-world web automation projects with confidence.

So, start today, follow this timeline, and watch yourself grow from a beginner to a Selenium pro in no time!

#selenium #selenium course #selenium training #selenium automation #selenium certification

0 notes

html-tute · 10 months ago

Text

HTML Media

HTML supports various media elements like images, audio, and video, allowing you to embed rich content directly into your web pages. Let’s explore how to use these elements in HTML.

1. Images

Images are embedded using the <img> tag. This tag is self-closing and requires the src attribute to specify the image source.

Basic Image Example

src: Specifies the path to the image file.

alt: Provides alternative text for the image, useful for accessibility and in cases where the image cannot be displayed.

Adding Image Width and Height

width and height: Set the dimensions of the image in pixels.

Linking Images

You can make an image clickable by wrapping it inside an <a> tag:<a href="https://www.example.com"> <img src="image.jpg" alt="Clickable image"> </a>

2. Audio

HTML provides the <audio> tag to embed sound files. You can also include multiple audio sources within this tag to support different formats.

Basic Audio Example

<audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio>

controls: Adds playback controls (play, pause, volume).

<source>: Specifies the path to the audio file and its format.

3. Video

The <video> tag is used to embed videos. Like the <audio> tag, it can also include multiple sources.

Basic Video Example

<video width="640" height="360" controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

width and height: Set the dimensions of the video.

controls: Adds video controls (play, pause, volume, fullscreen).

<source>: Specifies the video file path and format.

Autoplay, Loop, and Muted Attributes

autoplay: Automatically starts playing the video when the page loads.

loop: Replays the video continuously.

muted: Mutes the video by default.

4. Embedding YouTube Videos

You can embed YouTube videos using the <iframe> tag.

Example

src: The URL of the YouTube video.

width and height: Set the dimensions of the embedded video.

frameborder: Removes the border around the iframe.

allowfullscreen: Allows the video to be viewed in fullscreen mode.

5. Media Attributes and Accessibility

Accessibility Considerations

alt Attribute for Images: Always provide descriptive alt text for images.

captions and subtitles: Add subtitles or captions for video content using the <track> tag.

kind: Specifies the type of track (subtitles, captions, etc.).

srclang: Language of the subtitles.

label: Label for the track, often shown in the video player.

6. Responsive Media

To make media elements responsive, use CSS to control their size relative to their container:img, video { max-width: 100%; height: auto; }

This ensures that images and videos scale down to fit within the layout on smaller screens, maintaining their aspect ratio.

Key Takeaways

Images: Use the <img> tag with src and alt attributes to embed images.

Audio: Use the <audio> tag with source elements to embed sound files and provide playback controls.

Video: Use the <video> tag with source elements to embed videos and provide controls for playing, pausing, and more.

Embedding External Media: Use <iframe> to embed content like YouTube videos.

Accessibility: Always consider adding captions, subtitles, and descriptive alt text for better accessibility.

These basic media elements allow you to create rich, multimedia web experiences directly within your HTML content.