#Free HTML Tutorial | Explore Tumblr posts and blogs

webtutorsblog · 2 years ago

Text

Comprehensive HTML Tutorial for Beginners: From Zero to Hero

Welcome to WebTutor.dev, your go-to resource for learning HTML online! In this tutorial, we'll cover the fundamentals of HTML (Hypertext Markup Language) with clear explanations and practical examples. Let's dive right in!

Lesson 1: Getting Started with HTML

HTML is the backbone of any web page. It provides the structure and content of a webpage by using tags and elements. Here's a simple example of an HTML document:

<!DOCTYPE html>

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

<h1>Welcome to WebTutor.dev!</h1>

<p>This is a paragraph of text.</p>

</body>

</html>

Let's break it down:

<!DOCTYPE html>: This declaration specifies that the document is an HTML5 document.

<html>: The root element of an HTML page.

<head>: Contains meta information about the webpage, such as the title.

<title>: Sets the title displayed in the browser's title bar.

<body>: The main content of the webpage.

<h1>: A heading element, in this case, the main heading of the page.

<p>: A paragraph element containing text.

Lesson 2: Structuring Content with HTML Tags

HTML offers a wide range of tags to structure and organize content. Here are some commonly used tags:

<h1> to <h6>: Headings of different levels, with <h1> being the highest.

<p>: Paragraphs of text.

<a href="https://www.example.com">Link</a>: Creates a hyperlink to another webpage.

<img src="image.jpg" alt="Description">: Inserts an image into the webpage.

<ul> and <ol>: Unordered and ordered lists, respectively.

<li>: List items inside <ul> or <ol>.

Lesson 3: Adding Styling and Formatting

HTML alone provides the structure of a webpage, but CSS (Cascading Style Sheets) is used to add visual styling and formatting. Here's an example of applying CSS to HTML:

Example

<!DOCTYPE html>

<html>

<head>

<title>Styling Example</title>

<style>

h1 {

color: blue;

font-size: 24px;

}

p {

font-family: Arial, sans-serif;

}

</style>

</head>

<body>

<h1>Welcome to WebTutor.dev!</h1>

<p>This is a styled paragraph of text.</p>

</body>

</html>

In this example, we've added a <style> block within the <head> section. We then define CSS rules to style the <h1> and <p> elements accordingly.

Lesson 4: Building Forms with HTML

HTML forms enable user interaction on webpages. Here's an example of a simple form:

<!DOCTYPE html>

<html>

<head>

<title>Form Example</title>

</head>

<body>

<form>

<br>

<label for="email">Email:</label>

<br>

</form>

</body>

</html>

In this form example, we have input fields for name and email, along with a submit button. The required attribute ensures that the user must provide information in these fields before submitting the form.

Congratulations! You've completed the introductory tutorial on HTML. By understanding these core concepts and practicing with more examples, you'll be well on your way to building impressive webpages. We encourage you to explore more topics such as advanced HTML elements, responsive design, and integrating HTML with other technologies. Visit WebTutor.dev for further tutorials, resources, and community support to enhance your HTML skills. Happy coding!

#HTML Tutorial for Beginners #learning HTML online #fundamentals of HTML #learn to code for free #coding course online #Online Web Tutorial #learn coding for free #online tutorial #learn code #learn code for free #learn online coding #best online platform for learning coding #best place to learn to code online #Learn Free HTML code #HTML introduction #Learn HTML #Free HTML Tutorial #html tutorial #free online HTML editor

0 notes

fixfiesta · 4 months ago

Text

So you have a Tumblr account for a long time (or not), but probably you may have a theme that is not supported anymore by its developer, or they just vanished from the face of this earth.

That means that you might be having problems with the new Neue Post Format (NPF) and how is handling new post types.

For more on what went into creating the Neue Post Format, check out Tumblr's Engineering blog post.

I know some-what about coding and even made some themes for Tumblr, though those were for a client so I can share them here.

The goal of this blog is to help:

Fix an old theme that's not behaving well with the new format.

Update some JavaScript knowledge that's breaking your theme.

Update outdated code to better display your theme.

And whatever, if I can help, I will.

AND if you'd like to give me a tip for helping out, that'd be awesome but not require for me to help you. [Ko-Fi not ready yet!]

Please check the READ.ME

⬇️ Versão Português 🇧🇷🇵🇹

Então você tem uma conta no Tumblr há muito tempo (ou não), mas provavelmente você tem um tema que não é mais suportado pelo seu desenvolvedor, ou o dito cujo simplesmente desapareceu da face da Terra.

Isso significa que você pode estar tendo problemas com o novo Neue Post Format (NPF) e como ele lida com novos tipos de postagem.

Para saber mais sobre o que foi necessário para criar o Neue Post Format, confira a postagem do blog de engenharia do Tumblr (em inglês).

O objetivo deste blog é ajudar:

Corrigir um tema antigo que não está se comportando bem com o novo formato.

Atualizar algum conhecimento de JavaScript que esteja quebrando seu tema.

Atualizar o código desatualizado para exibir melhor seu tema.

E tanto faz, se eu puder ajudar, é nóis.

E se você quiser me dar uma gorjeta para ajudar, isso seria ótimo, mas não é necessário para que eu o ajude. [Ko-Fi ainda não tá pronto!]

Por favor, verifique o READ.MEediting

7 notes · View notes

kumakechi · 11 days ago

Text

i need to learn 3d modelling so that more than anything my power to mod persona 4 golden can grow

#rambles #modding #the thing is i'm SO BAD at following tutorials #i've always learned better by doing my own thing. messing around with whatever tool it is until it works #but that isn't really something i can do with 3d modelling.#or at least it's not something i can do at a total beginner level. i imagine it'll be kinda like how i learned coding #(did a couple free online classes and once i learned the very basics/got bored i just did my own thing)#but i started THAT when i was like 14. i wanna be as good at blender as i am with html/css NOW!!!!!!#<- is not even that good w html #<- because of the aforementioned ''hates taking classes on this kind of thing'' thing

3 notes · View notes

dallasstarsdyke · 1 year ago

Text

i dont wanna decide on a career unfortunately everyone wants me to soso bad

#i have to have it in. checks watch. 6 months maximum :)#just because i want biomedical something its what im good at and i cant not help people #like thats not some hero complex thing if o dont get motivated by helping people i will be a danger to myself within a couple months #but guys i am fucking ASS at coding. im goated at block coding i always make it past that #but my neocities wont work even tho im basically copy and pasting from html tutorials #i walk into the room and the machine makes it clear that it does NOT fuck with me #maybe i want biomedical research or something thats a little less hands on #or maybe an occupational therapy direction because i learn a lot about disabilities in my free time #or one of the cna or ekg practicum classes i can take through the local college #OR i can pay minimum a couple thousand for coding classes and brute force it #or stay biomedical engineering and focus on improving the mechanical aspects of existing biomed devices without personally coding as much #or veer way off course for something in sustainability #im literally just gonna end up teaching ap bio somewhere lmfao. why are we stressing #< NO hate to ap bio teachers i fuck with you #but i see that shit in my future Vividly #(or i could plan curriculums for teaching biology and standardize methods for courses such as pltw in the real setting ETC ETC ETC)

7 notes · View notes

furiouslovepolice · 3 months ago

Text

0 notes

thunderlina · 4 months ago

Text

In the wake of the TikTok ban and revival as a mouthpiece for fascist propaganda, as well as the downfall of Twitter and Facebook/Facebook-owned platforms to the same evils, I think now is a better time than ever to say LEARN HTML!!! FREE YOURSELVES FROM THE SHACKLES OF MAJOR SOCIAL MEDIA PLATFORMS AND EMBRACE THE INDIE WEB!!!

You can host a website on Neocities for free as long as it's under 1GB (which is a LOT more than it sounds like let me tell you) but if that's not enough you can get 50GB of space (and a variety of other perks) for only $5 a month.

And if you can't/don't want to pay for the extra space, sites like File Garden and Catbox let you host files for free that you can easily link into NeoCities pages (I do this to host videos on mine!) (It also lets you share files NeoCities wouldn't let you upload for free anyways, this is how I upload the .zip files for my 3DS themes on my site.)

Don't know how to write HTML/CSS? No problem. W3schools is an invaluable resource with free lessons on HTML, CSS, JavaScript, PHP, and a whole slew of other programming languages, both for web development and otherwise.

Want a more traditional social media experience? SpaceHey is a platform that mimics the experience of 2000s MySpace

Struggling to find independent web pages that cater to your interests via major search engines? I've got you covered. Marginalia and Wiby are search engines that specifically prioritize non-commercial content. Marginalia also has filters that let you search for more specific categories of website, like wikis, blogs, academia, forums, and vintage sites.

Maybe you wanna log off the modern internet landscape altogether and step back into the pre-social media web altogether, well, Protoweb lets you do just that. It's a proxy service for older browsers (or really just any browser that supports HTTP, but that's mostly old browsers now anyways) that lets you visit restored snapshots of vintage websites.

Protoweb has a lot of Geocities content archived, but if you're interested in that you can find even more old Geocities sites over on the Geocities Gallery

And really this is just general tip-of-the-iceberg stuff. If you dig a little deeper you can find loads more interesting stuff out there. The internet doesn't have to be a miserable place full of nothing but doomposting and targeted ads. The first step to making it less miserable is for YOU, yes YOU, to quit spending all your time on it looking at the handful of miserable websites big tech wants you to spend all your time on.

#this is a side point so it's going here but I really think tech literacy should be a requirement in schools like math grammar history etc.#we live in a world so dominated by the stuff and yet a majority of the population does not understand it at even the most fundamental level #tiktok #tiktok ban #indie web #neocities #web development #current events #twitter #facebook #meta #amazon

10K notes · View notes

uiuxcafe · 5 months ago

Text

youtube

Build Figma Layouts FAST | Build a Design System

1 note · View note

agentromanoffsir · 2 years ago

Text

neocities guide - why you should build your own html website

do you miss the charm of the 90s/00s web where sites had actual personality instead of the same minimalistic theme? are you feeling drained by social media and the constant corporate monopoly of your data and time? do you want to be excited about the internet again? try neocities!!

what is neocities?

neocities is a free hosting website that lets you build your own html website from scratch, with total creative control. in their own words: "we are tired of living in an online world where people are isolated from each other on boring, generic social networks that don't let us truly express ourselves. it's time we took back our personalities from these sterilized, lifeless, monetized, data mined, monitored addiction machines and let our creativity flourish again."

why should I make my own website?

web3 has been overtaken by capitalism & conformity. websites that once were meant to be fun online social spaces now exist solely to steal your data and sell you things. it sucks!! building a personal site is a great way to express yourself and take control of your online experience.

what would I even put on a website?

the best part about making your own site is that you can do literally whatever the hell you want! focus on a specific subject or make it a wild collection of all your interests. share your art! make a shrine for one of your interests! post a picture of every bird you see when you step outside! make a collection of your favorite blinkies! the world is your oyster !! here are some cool example sites to inspire you: recently updated neocities sites | it can be fun to just look through these and browse people's content! space bar | local interstellar dive bar creature feature | halloween & monsters big gulp supreme peanutbuttaz | personal site dragodiluna linwood | personal site patho grove | personal site

getting started: neocities/html guide

sound interesting? here are some guides to help you get started, especially if you aren't familiar with html/css sadgrl.online webmastery | a fantastic resource for getting started with html & web revival. also has a layout builder that you can use to start with in case starting from scratch is too intimidating web design in 4 minutes | good for learning coding basics w3schools | html tutorials templaterr | demo & html for basic web elements eggramen test pages | css page templates to get started with sadgrl background tiles | bg tiles rivendell background tiles | more free bg tiles

fun stuff to add to your site

web revival manifestos & communities

also, there's actually a pretty cool community of people out there who want to bring joy back to the web! melonland project | web project/community celebrating individual & joyful online experiences. Also has an online forum melonland intro to web revival | what is web revival? melonking manifesto | status cafe | share your current status nightfall city | online community onio.cafe | leave a message and enjoy the ambiance sadgrl internet manifesto | yesterweb internet manifesto | sadly defunct, still a great resource reclaiming online social spaces | great manifesto on cultivating your online experience

in conclusion

i want everyone to make a neocities site because it's fun af and i love seeing everyone's weird personal sites that they made outside of the control of capitalism :) say hi to me on neocities

EDIT: part 2!!

88K notes · View notes

newcodesociety · 1 year ago

Text

#free #udemy #tutorial #html #css #web #development #beginners

0 notes

webtutorsblog · 2 years ago

Text

HTML 101: The Ultimate Beginner's Guide to Writing, Learning & Using HTML

HTML serves as the backbone of every web page, allowing us to structure content with paragraphs, headings, images, links, forms, and more. If you're eager to delve into web development or explore the world of coding, mastering HTML is a fantastic starting point.

Join us on webtutor.dev as we unveil the ultimate guide to HTML for beginners. In this comprehensive tutorial, we'll demystify HTML, explore its diverse applications, and equip you with the skills to write your own HTML code. From essential elements to crucial attributes, we'll cover it all.

Get ready to embark on your HTML journey with webtutor.dev – your go-to resource for empowering web development education. Let us dive in and unlock the potential of HTML together.

Join us now on webtutor.dev!

What is HTML?

First published by Tim Berners-Lee in 1989, HTML is now used by 94% of all websites, and probably all the ones you visit. But what is it, exactly?

HTML, short for HyperText Markup Language, is the backbone of the web. It is a markup language that structures the content of web pages. HTML utilizes tags to define the elements and their attributes, such as headings, paragraphs, images, links, lists, forms, and more. These tags instruct web browsers on how to display and render the content to users. With HTML, developers can create interactive and visually appealing web pages. It plays a vital role in creating a seamless browsing experience by allowing users to navigate through hyperlinks and access information across different websites. HTML is the foundation upon which websites are built, providing the structure and organization for displaying text, multimedia, and interactive elements. By learning HTML, individuals can gain the skills to create and customize web pages, making their mark in the digital landscape.

Is HTML a programming language?

No, HTML (Hypertext Markup Language) is not considered a programming language. It is a markup language used for structuring the content and presenting information on web pages. HTML provides a set of tags that define the structure and semantics of the content, such as headings, paragraphs, links, images, and more.

While HTML is essential for web development, it primarily focuses on the presentation and organization of data rather than the logic and functionality found in programming languages. To add interactivity and dynamic behavior to web pages, programming languages like JavaScript are commonly used in conjunction with HTML.

What is HTML Used for?

HTML (Hypertext Markup Language) is used for creating and structuring the content of web pages. It provides a set of tags that define the elements and their layout within a web page. Here are some of the key uses of HTML:

Web page structure: HTML is used to define the structure of a web page, including headings, paragraphs, lists, tables, forms, and other elements. It allows you to organize and present content in a hierarchical manner.

Text formatting: HTML provides tags for formatting text, such as bold, italic, underline, headings of different levels, and more. These tags help in emphasizing and styling specific parts of the content.

HTML Hyperlinks: HTML enables the creation of hyperlinks, allowing you to connect different web pages together or link to external resources. Links are defined using the <a> tag and provide navigation within a website or to other websites.

Images and media: HTML allows you to embed images, videos, audio files, and other media elements into web pages. It provides tags like <img>, <video>, and <audio> for adding visual and multimedia content.

Forms and user input: HTML provides form elements, such as text fields, checkboxes, radio buttons, dropdown menus, and buttons, allowing users to enter and submit data. Form data can be processed using server-side technologies.

Semantic markup: HTML includes semantic elements that provide meaning and structure to the content. Examples of semantic elements are <header>, <nav>, <article>, <section>, <footer>, which help define the purpose and role of specific parts of a web page.

Accessibility: HTML supports accessibility features, such as providing alternative text for images, using proper heading structure, using semantic elements, and other attributes that make web content more accessible to users with disabilities.

Overall, HTML serves as the foundation of web development, providing the structure and presentation of content on the World Wide Web. It is often complemented by other technologies like CSS (Cascading Style Sheets) for styling and JavaScript for interactivity and dynamic behavior.

How to Write HTML?

<!DOCTYPE html><html><head><title>My Page</title></head><body><h1>Hello, World!</h1></body></html>

Explanation:

<!DOCTYPE html>: Specifies the HTML version.

<html>: Opening tag for the HTML document.

<head>: Contains metadata about the page.

<title>: Sets the title of the page displayed in the browser's title bar or tab.

<body>: Contains the visible content of the page.

<h1>: Defines a heading level 1.

Hello, World!: The actual content to be displayed.

Please note that this example is a very basic HTML structure, and for more complex pages, additional tags and attributes would be required.

How to Create an HTML File

To create an HTML file, you can follow these steps:

Open a text editor: Open a text editor of your choice, such as Notepad (Windows), TextEdit (Mac), Sublime Text, Visual Studio Code, or any other editor that allows you to create plain text files.

Start with the HTML doctype: At the beginning of your file, add the HTML doctype declaration, which tells the browser that the file is an HTML document. Use the following line:

<!DOCTYPE html>

Create the HTML structure: After the doctype declaration, add the opening and closing <html> tags to enclose the entire HTML document.

Add the head section: Inside the <html> tags, include the <head> section. This is where you define metadata and include any external resources like stylesheets or scripts. For now, let's add a <title> element to set the title of your page:

<head>

<title>My First HTML Page</title>

</head>

Create the body: Within the <html> tags, include the <body> section. This is where you place the visible content of your web page. You can add various HTML tags here to structure and format your content. For example, let's add a heading and a paragraph:

<body>

<h1>Welcome to My Page</h1>

<p>This is my first HTML file.</p>

</body>

Save the file: Save the file with an .html extension, such as myfile.html. Choose a suitable location on your computer to save the file.

Open the HTML file in a browser: Double-click on the HTML file you just saved. It will open in your default web browser, and you will see the content displayed according to the HTML tags you added.

Congratulations! You have created an HTML file. You can now edit the file in your text editor, add more HTML elements, styles, scripts, and save the changes to see them reflected in the browser.

Common HTML Attributes

<a href="https://example.com" target="_blank">Link to Example</a>

<button onclick="myFunction()">Click me</button>

</select>

Explanation:

<input>: Attributes like type define the input type (text, checkbox, etc.), name sets the input's name for form submission, placeholder provides a hint to the user, and required specifies that the input is mandatory.

<img>: src specifies the image source URL, and alt provides alternative text for the image (useful for accessibility).

<a>: href sets the hyperlink URL, and target="_blank" opens the link in a new tab or window.

<div>: id assigns an identifier to the element, and class adds a CSS class for styling or JavaScript targeting.

<button>: onclick triggers a JavaScript function when the button is clicked.

<table>: border adds a border to the table.

<form>: action specifies the form submission URL, and method sets the HTTP method (GET or POST).

<select>: name assigns the name for the selection input, and <option> defines the selectable options within the dropdown menu.

These are just a few examples, and there are many more HTML attributes available for different elements, each serving specific purposes.

#learn to code for free #coding course online #Online Web Tutorial #learn coding for free #online tutorial #learn code #learn code for free #introduction to coding #learn html #programming training courses #best way to learn coding #how long does it take to learn coding #learn coding for beginners #best online platform for learning coding #best place to learn to code online

5 notes · View notes

sexyirish7 · 2 months ago

Text

Shop Sign Wall Lights

I put together a few sets of shop sign wall lights. But there are instructions. I kept some swatches as a default white color so that you could pick which color you want the light to be while in live mode. This saved on the file size of the package file because the more textures a file has, the more bloated the file size is.

I had some fun with some shop names although I mainly included generic titles in both English and Simlish.

DOWNLOAD for FREE: SFS

OR at Patreon*

*You must be over 18 to access my Patreon page.

INSTRUCTIONS ON CHANGING LIGHT COLORS

Once you place the light in build mode, then go to live mode. Click on the light and you will get the following pie menu.

Select SET COLOR AND INTENSITY and then choose THIS LIGHT. The color options will then appear so you can select which color you want.

If you use the name signs along with the Awning Lights, make sure to place the name on top of the awning so when you select the color picker, the correct sign changes colors. The other option is to place the name separate from the awning, go to live mode and change the color, then go back to build mode and add the awning light you want.

Enable the bb.moveobjects on cheat and then you can make adjustments to location and size of objects. You can adjust the position of the light on the wall by depressing the Alt key while placing the sign (on PC). You can adjust the size of the item by depressing the Shift key and either [ (for smaller) or ] (for bigger) (on PC).

CREDITS

Awning Shop Lights - 19 swatches of various awning wall lights. 18 are pre-colored and one is white so you can change the color yourself in game.

Candy Shop Lights - 20 swatches

Pottery Shop Lights - 25 swatches

Tattoo Shop Lights - 21 swatches

Enjoy!

Creations by SexyIrish7

These cc objects are new 3d meshes created using Blender and Sims 4 Studio.

Polygon Count: 6

All CC have:

*Ability to search catalog using search terms: sexyirish7 and si7

*Customized thumbnail

*******

CREDITS:

Software credits:

Sims 4 Studio v. 3.2.4.1 (Star): https://sims4studio.com

Blender 4.0: https://www.blender.org/download/

GIMP v. 2.10.34: https://www.gimp.org/

Inkscape v. 1.2: https://inkscape.org/

Thank you to the creators and moderators producing tutorials and answering questions!

*******

Model and Image credits:

Mesh created by me.

Simlish font credit to Franzilla: https://modthesims.info/

Image credits:

Awning Lights Image credits: Modified image from Adobe Stock

Candy Shop Image credits:

Swatches 1-3: Image by pch.vector on Freepik https://www.freepik.com/free-vector/christmas-candies-symbols-set-neon-style_11241813.htm#fromView=search&page=1&position=26&uuid=8b541325-0e62-4e37-9468-6bacd30f8963&query=neon+lollipop+candy

Swatches 4-8: Image by gstudioimagen on Freepik https://www.freepik.com/free-vector/sweet-candy-neon-seamless-pattern_5595774.htm#fromView=search&page=2&position=30&uuid=e2259de5-014d-4d04-af87-1198ee0f35e2&query=%40gstudioimagen+neon

https://www.freepik.com/free-vector/sweet-candy-neon-seamless-pattern_5595775.htm#fromView=search&page=1&position=27&uuid=e2259de5-014d-4d04-af87-1198ee0f35e2&query=%40gstudioimagen+neon

Swatches 9-10: Image by openclipart.org https://all-free-download.com/free-vector/download/peppermint_candy_clip_art_13182.html

https://all-free-download.com/free-vector/download/round_candy_with_stick_card_on_pink_background_6823183.html

Swatch 11: Image by All-free-download.com https://all-free-download.com/free-vector/download/round_candy_with_stick_card_on_pink_background_6823183.html

Swatches 12: Image by katemangostar on Freepik https://www.freepik.com/free-vector/ice-cream-cart-neon-sign_3238564.htm#fromView=search&page=8&position=42&uuid=2f82b4d1-5ca8-449c-ae22-4573861ebcb0&query=neon+sign+retail

Pottery Shop Image credits:

Swatch 1: Crafting icons created by andinur - Flaticon https://www.flaticon.com/free-icon/pottery_17392031

Swatch 2: Image by katemangostar via Freepik https://www.freepik.com/free-vector/aquarius-neon-sign_5561944.htm#fromView=search&page=2&position=5&uuid=c55e5e21-0550-46f0-b9be-cfa85ff38796&query=Ceramic+Neon

Swatch 3-4: Pottery icons created by Smashicons - Flaticon https://www.flaticon.com/free-icon/vase_3760867

https://www.flaticon.com/free-icon/vase_3760970

Swatch 5: Icon by istar_design_bureau via Freepik https://www.freepik.com/icon/pottery_1958438#fromView=search&page=2&position=20&uuid=096084ae-13fe-429c-a419-e6e13ccd37b9

Swatch 6:Icons by Eucalyp - Flaticon https://www.flaticon.com/free-icon/pottery_6552610

Swatch 7: Icon by berkahicon via Freepik https://www.freepik.com/icon/spin_13785816#fromView=search&page=2&position=0&uuid=096084ae-13fe-429c-a419-e6e13ccd37b9

Swatches 8-11: Icons by Freepik https://www.freepik.com/icon/pottery_8540816#fromView=search&page=3&position=43&uuid=096084ae-13fe-429c-a419-e6e13ccd37b9

https://www.flaticon.com/free-icon/machine_9200546

https://www.flaticon.com/free-icon/vase_8838322

https://www.flaticon.com/free-icon/pottery_3305262

Tattoo Shop Image credits:

Swatch 1: Modified Image by katemangostar on Freepik https://www.freepik.com/free-vector/tattoo-salon-neon-text-with-tattoo-machine-neon-sign-night-bright-advertisement_2438198.htm?log-in=email

Swatch 2: Image by Nippy Custom https://www.nippycustom.com/products/tattoo-neon-sign

Swatches 3-5: Image by bohlam via Vecteezy https://www.vecteezy.com/vector-art/2185717-tattoo-studio-neon-signs-style-text-vector

https://www.vecteezy.com/vector-art/34210463-neon-sign-tattoo-studio-with-brick-wall-background-vector

*******

TOU:

Do not re-upload and claim as your own

Do not re-upload and hide behind a paywall

266 notes · View notes

bloodpraxis · 22 days ago

Text

I finished coding my Rogue Trader character sheet template! It's now open sourced on GitHub 🤖

☆ Features

Display your character's stats in (almost) the same way as you've seen in Warhammer 40,000: Rogue Trader CRPG

Multiple sections for character building:

Summary: Character origin info, alignment level, history, and biography.

Features: Show off your build by listing abilities & talents that your character has gained throughout the course of the game.

Inventory: Your Rogue Trader's equipment, armour, etc. goes here.

Relations: Detail the relationship of your Rogue Trader and their retinue members.

Gallery: Place to show off your fanart, commissioned art, fanfics, playlist. Anything goes!

Cool floating servo skulls (only visible in certain screen sizes).

Responsive. Not horrible to look at even in small screens.

☆ Requirements

You would need a static site hosting service for this to work. I recommend Neocities or GitHub pages. Both are free.

Some experience with using npm.

Some experience with basic HTML and JS object/JSON is recommended.

I really wish that it's easier to use and set up, but it's just not possible due to the tech stack I chose initially... I did write a beginner's tutorial on the repository's wiki, but I don't know if it makes sense to normal people who do not code... If you have any questions, let me know and I'll see what I can do.

Tech stack: SvelteKit, SCSS, TypeScript

Bonus:

Name too long? No problem :)

#link to the github repo is in the source!#I made a draft of this post then posted this on Reddit then forgor about it again rip.#rogue trader #warhammer 40k rogue trader #warhammer 40k #warhammer 40000 rogue trader

254 notes · View notes

numbpill · 1 month ago

Text

========================================================

[tutorial: build your own neocities/nekoweb page]

========================================================

a beginner's guide for making your very own home on the indie web—retro, personal, weird, and 100% yours.

this ain’t an average wix, squarespace, or tiktok aesthetic.

we’re talking full html/css with soul and attitude.

[ prerequisites ]

------------------

> an idea

> basic text editor (vscode, notepad++, or even notepad)

> account on https://neocities.org or https://nekoweb.org

> some gifs or tiles you love (dig deep or make your own)

> optional: image host or gif repo (or self-host everything)

[ feeling overwhelmed? read this. ]

-----------------------------------

you do *not* need to know everything.

html is not a mountain. it's a garden.

you plant one tag. then another. then a style. then a button.

you can build your site piece by piece.

and every piece is a portal to somewhere personal.

you are allowed to make broken pages.

you are allowed to use templates.

you are allowed to start over as many times as you want.

this is *your* world. you control the weird.

[ step 1: create an account ]

-----------------------------

> neocities: https://neocities.org

> nekoweb: https://nekoweb.org

register a name, log in, and enter your file manager.

this is where you upload your files and see your site live.

[ step 2: your first file - index.html ]

----------------------------------------

make a new file: `index.html`

basic starter:

<html>

<head>

<title>my weird little corner</title>

</head>

<body>

<h1>welcome to the void</h1>

<p>this is my page. it’s strange. like me.</p>

</body>

</html>

> upload to the dashboard

> boom. you’re live at

https://yoursite.neocities.org

or https://nekoweb.org/u/yoursite

[ step 3: add a style sheet - style.css ]

-----------------------------------------

create a file called `style.css` and upload it.

here’s some nostalgic magic:

body {

background: url('tile.gif');

color: lime;

font-family: "Courier New", monospace;

text-shadow: 1px 1px 0 black;

}

img {

image-rendering: pixelated;

}

marquee {

font-size: 20px;

color: magenta;

}

link it in your html and the vibes activate.

[ step 4: decorate it like a haunted usb ]

------------------------------------------

> use <marquee> for chaos scrolls

> embed gifs from https://gifcities.org/

> steal buttons from https://cyber.dabamos.de/88x31/

> set up a guestbook at https://www.smartgb.com/

> loop audio with <audio autoplay loop>

> add fake errors, 90s web lore, random link lists

[ step 5: resources, themes, and comfort ]

------------------------------------------

> templates & layouts: https://numbpilled-themes.tumblr.com

> glitchy gifs & buttons: https://glitchcat.neocities.org/resources

> layout builder: https://sadgrl.online/projects/layout-builder/

> free tiled backgrounds: https://backgrounds.neocities.org/

> beginner html intro: https://www.w3schools.com/html/

> pixel fonts & cyber assets: https://fontstruct.com/

remember:

you don't need to know js. you don't need to be a coder.

you just need a mood, a direction, a dream.

the html will follow.

[ bonus concept: shrine pages ]

-------------------------------

> a page just for one character you love

> a room to house digital fragments of your identity

> embed quotes, music, images like altars

> call it shrine.html and link it from your homepage

[ closing mantra ]

------------------

you are not here to be optimized.

you are not a brand.

you are a ghost inside the machine,

carving your initials into the silicon void.

welcome to Your website.

========================================================

295 notes · View notes

sesamestreetkid · 9 months ago

Text

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

481 notes · View notes

melannen · 2 years ago

Text

How To Make Your Own Fanfiction Archive, In Just Ten Easy Steps

As the go-to "person who knows about AO3" for quite a few people who read fanfic but aren't really linked-in to wider fandom culture, I've fielded a lot of questions about how to do certain things on AO3 to which my best answer is "you should really start your own archive!" I think, in general, more fans starting their own small archives would be a net good for fandom. AO3 was never meant to be the only archive for all fandom, or even the main archive, and the more spread out and backed up we are the more resilient we are.

But of course I have to be reminded that a lot of fans these days don't really have any idea how little "you should start your own archive!" really involves. (Also, that I should practice what I preach.) So I am now making my own fanfiction archive, and writing up this post as I do it to tell people how to make theirs!

Go to https://neocities.org/ and sign up for an account. It only needs a username (which will also be your website address), password, and email. Pick a username that will be related to your archive's title!

Choose the free account option (if you ever need more than what the free account offers for a text-only archive, you should probably look into graduating from neocities.) This should take you to a menu of "how to make a website" tutorials. You should do them! They're useful skills. But let's get your archive running first.

Hit the big red Edit Site button, or open the menu under your username and select "Edit Site".

Select the "Index.html" file to edit. You're now in an HTML Editor. Congrats, you're a web developer c. 1999!

Find where it has text between the < title> tags. Delete the filler text, and put in the title of your new archive. This text will be what shows on the tab when people go to your archive.

Find where it has text between the < h1 > tags. This will be big header text at the top of your page. Put the title of your archive here again. If you have no experience with HTML, you should read over the other sample text. It covers the basic basics very well! Once you've done that, you can delete everything else between the < /h1> tag and the < /body> tag. Save your index.html file.

Get an HTML file for a fanfic you would like to add to your archive. If it's on AO3, you can use the html download option built into AO3. If you have it as a word processor/google docs file, you should have the option to save as an html file. Save that html file to your computer.

Go back to Edit Site on Neocities and go to "upload". Find the html file you saved and upload it. (You can also drag and drop files to upload.)

The file you uploaded should now be showing with your other neocities files. Right-click on the title and select "copy link".

Go in to edit index.html again. Under where you put your header text, type < br> < a href=" . Then paste in the link you copied. Then type "> Then put in the title of the fic. Then type < /a> . Then save the index page again when you're done. You can do this for every fanfic you have.

Congratulations! You now have your very own personal private fanfiction archive that you are 100% in charge of and make all the rules for. It's at least as good as half the ones I was reading on when I started reading fanfiction and will serve its function well as a way to let people read your fic. You can link to it from anywhere you want! (Including your AO3 profile.)

Blogpost version, with FAQs and discussion

Anyway, here's my beautiful new fanfiction archive made using this tutorial:

Melannen's Fanfiction Archive

(I am honestly way more disproportionately proud of finally making that than I expected to be. It's nice to have your own archive.)

If you make one, share it here ! I want to see!

#ao3 #archive of our own #fanfiction #fanfic archive #how-to #tumblr what are you doing to my angle brackets #why would you do that what's wrong with you

4K notes · View notes

roksik-dnd · 2 years ago

Text

For everyone who asked: a dialogue parser for BG3 alongside with the parsed dialogue for the newest patch. The parser is not mine, but its creator a) is amazing, b) wished to stay anonymous, and c) uploaded the parser to github - any future versions will be uploaded there first!

UPD: The parser was updated!! Now all the lines are parsed, AND there are new features like audio and dialogue tree visualisation. See below!

Patch 7 dialogue is uploaded!

If you don't want to touch the parser and just want the dialogues, make sure to download the whole "BG3 ... (1.6)" folder and keep the "styles" folder within: it is needed for the html files functionality (hide/show certain types of information as per the menu at the top, jumps when you click on [jump], color for better readability, etc). See the image below for what it should look like. The formatting was borrowed from TORcommunity with their blessing.

If you want to run the parser yourself instead of downloading my parsed files, it's easy:

run bg3dialogreader.exe, OPEN any .pak file inside of your game's '\steamapps\common\Baldurs Gate 3\Data' folder,

select your language

press ‘LOAD’, it'll create a database file with all the tags, flags, etc.

Once that is done, press ‘EXPORT all dialogs to html’, and give it a minute or two to finish.

Find the parser dialogue in ‘Dialogs’ folder. If you move the folder elsewhere, move the ‘styles’ folder as well! It contains the styles you need for the color coding and functionality to keep working!

New features:

Once you've created the database (after step three above), you can also preview the dialogue trees inside of the parser and extract only what you need:

You can also listen to the correspinding audio files by clicking the line in the right window. But to do that, as the parser tells you, you need to download and put the filed from vgmstream-win64.zip inside of the parser's main folder (restart the parser after).

You can CONVERT the bg3 dialogue to the format that the Divinity Original Sin 2's Editor understands. That way, you can view the dialogues as trees! Unlike the html files, the trees don't show ALL the relevant information, but it's much easier to orient yourself in.

To get that, you DO need to have bought and installed Larian's previous game, Divinity Original Sin 2. It comes with a tool called 'The Divinity Engine 2'. Here you can read about how to unstall and lauch it. Once you have it, you need to load/create a project. We're trying to get to the point where the tool allows you to open the Dialog Editor. Then you can Open any bg3 dialogue file you want. And in case you want it, here's an in-depth Dialog Editor tutorial. But if you simply want to know how to open the Editor, here's the gist:

Update: In order to see the names of the speakers (up to ten), you can put the _merged.lsf file inside of the "\Divinity Original Sin 2\DefEd\Data\Public\[your project's name here]\RootTemplates\_merged.lsf" file path.

Feel free to ask if you have any questions! Please let me know if you modify the parser, I'd be curious to know what you added, and will possibly add it to the google drive.

#baldur's gate 3 #bg3 #datamined #datamine #parsed dialogue #dialogue parser #parser

2K notes · View notes