Craggy Coding Codex (UC: This might take a while)

ValKayRee · October 28, 2020, 9:18pm

Codex Directory: TABLE OF CONTENTS

This will not be referred to as OP (Original Post)

Preface: Resources and the Boring Basics

Questions/Suggestions

Chapter 1: Basic Coding Rules and Etiquette

Chapter 2: Linking

Index of Properties

Chapter 3: Picture Book (Images and GIFs)

Chapter 4: All About Spans

Ancient Manuscript: Old span creations and their code

Chapter 5: Creating Tables

Many spare pages

ValKayRee · October 28, 2020, 9:21pm

Preface: RESOURCES AND THE BORING BASICS

This post will be referred to as OP (Original Post)

DISCLAIMER

I’m not an expert plus I’m bad at explaining stuff so this encyclopedia might just end up being a links collection.
Let me know if I got anything wrong and as of right now, I have not edited anything.

If you have something that could go in here, PM me and I’ll add what you write with credit. Otherwise, this thread may never be completed 0.0

THREADS IN FORUMS

Coding class hosted by astrophile (there are coding assignments you can look at but please test them outside of Coding 101 like in your own thread or Coder’s Society) 12/10 recommend lurking. Most of my knowledge comes from here and it’s more comprehensible than what this thread will become.
Coding Resource Megathread (Basically, a bunch of links to resources for Markdown, BBCode, HTML and other good stuffs)
The Coder’s Society (Place for testing stuff, lurking and asking about how to do things) I rarely lurk here but it’s cool

NOTES THAT MAY BE IMPORTANT

Differences Between Markdown, BBCode, HTML

Markdown

Uses this ‘toolbar’: highlight text and click an option to change text OR click an option which gives an outline like this…

Then, replace highlighted part with your text

Markdown is great for quickly making lists, polls, summaries, blurring words/sentences, getting preformatted text, hyperlinking, underlining, italicizing, etc…
Yet it has many limitations. BBCode and HTML can do many more things.

BBCode

Uses square brackets

Example: [color=red]Text Here[/color]

HTML

Uses <>

Example: <h1>Heading</h>

HTML is great for coding with CSS to make what everyone likes: span.

Mixing Code (BBCode and HTML)

Be careful with how each string is coded. Sometimes, you may need to skip a line for the code to work.
Mixing Markdown with BBCode or HTML is fairly simple.

Properties Vs. Values

Say we are creating a post and somewhere in the code is this: border: 6px red dotted; width: 40px; height: 30px

Properties in the example: border, width
Values of border: whatever is after the colon and before the semicolon
Use the right punctuation (colons and semicolons) in the right places or a part of the ~~possible whole~~ code will not work

To put it simply because I am not familiar with coding jargon, a property can be seen as a post’s characteristics and the values given to property are finer details.

Mobile Responsiveness

This one is a doozy but when one codes a span post, there will be times other users on other devices will say the beautiful image that was coded seems cut off. Do not worry, there are ways to fix this. I still struggle with this so if anyone knows a foolproof way, please post or tell me.

1-Code within a width of 300px (I did this for the first time to improvise dealing with a smaller screen but…it looked so narrow and just ugly so what else is there to do?)
2-px is used for fixed sizes so if your size goes over 300px, use a responsive unit. I used rem and vw. ~~They should work~~

How do you check? Simple!
Inspect Element and find Responsive Design Mode (also Ctrl+Shift+M if I am not wrong). Then, there will be a portion of the thread that pops up. Pick a device you want to see ‘from’, adjust the height if needed, maybe scroll down a bit and if the post is not cut off, users using the device should not have problems viewing your creation. If the post is still cut off, try to figure out what went wrong whether it is the web unit being used or width length.

FONTS

Web Safe Fonts

W3schools’ List of Web Safe Fonts
Google Fonts List

Example

This is times new roman

Code for Example

[font="times new roman"]This is times new roman[/font]

Removing the quotation marks is fine too ~~I do it and have not run into any issues yet~~

W3SCHOOLS (WEBSITE HOMEPAGE)

Notes for HTML

HTML elements are defined by start tags, content and an end tag. Tagnames will be identified in the example along with these things.
Usage of end tags are recommended even when code works without them.

Example
This is content
In this example,  is the start tag, This is content is content and  is the end tag.
Note that the code will run until there is an end tag and despite looking the same, there is a slash in the end tag. Also, the tagname here is “i” which means italics.

HTML

Headings

Examples

Heading 1

Heading 3

Heading 6

Code for first example

<h1>Heading 1</h1>

Styles (Font, size, colour)

Examples

The font size of this text is 6
The font color of this text is PLUM
This is red

Code for examples

<font size=6>The font size of this text is 6</font>
<font color=plum>The font color of this text is PLUM</font>
<font size=1><font color=red>This is red</font></font>

Formatting (Italics, bold, subscript, superscript, etc.)

Examples

Font size is 6
This is italicized
This is bold
This is smaller text
~~This is deleted text~~
Inserted text
H₂O (Subscript)
n² (Superscript)
Mix of bold and italics
Well^HelloThere (Mix of italics and superscript)

Code for examples

<font size=6>Font size is 6</font>
<i>This is italicized</i>
<b>This is bold</b>
<small>This is smaller text</small>
<del>This is deleted text</del>
<ins>Inserted text</ins>
H<sub>2</sub>O (Subscript)
n<sup>2</sup> (Superscript)
<b><i>Mix of bold and italics</b></i>
Well<i><sup>Hello</i></sup>There (Mix of italics and superscript)

Blockquoting

Example

This is a blockquote. On the forums, you can quote a user by highlighting their words and clicking "QUOTE when it pops up. However, one use for this in threads is quoting or identifying text from sources outside of the forums such as websites

Code for example

<blockquote>This is a blockquote. On the forums, you can quote a user by highlighting their words and clicking "QUOTE when it pops up. However, one use for this in threads is quoting or identifying text from sources outside of the forums such as websites</blockquote>

For quoting comments on forums…

OR
> [words here]

COLOUR

Colour Wheels

From w3schools.com

Colour Pickers

Colour Palettes

Some Colour Schemes
Paletton.com
ColorSpace Pick a colour and colour palettes will be generated

Other colour stuff

Text Colourizer (BBCode and HTML: gradient text)
Colour Gradient from w3schools.com
Colour Mixer from w3schools.com Mix two colours together and get HEX codes
Colour Shades from w3schools.com Gives tables of shades of gray and red, explains colours, list of ‘Web Safe Colours’

Coming soon for original post: Basics of CSS

UC

ValKayRee · October 28, 2020, 9:23pm

SUGGESTIONS

ValKayRee · October 28, 2020, 9:44pm

Chapter 1: BASIC CODING RULES AND ETIQUETTE

~~I only know a few obvious ones but there might be unsaid rules?~~
Any ideas are welcome

SPECIFICALLY FOR THE FORUMS (Given by the creator of this very forum o.o)

Very important stuff

Posts MUST have content (Otherwise isn’t possible anymore)
No loooooong posts made with the padding element in spans (Imagine scrolling to what seems like no end…)

GENERAL RULES AND ETIQUETTE

~~Gathered from time on two forums and reading some guides online~~

Code with your viewers in mind.

Try to make posts that are easy on the eye and visible. (Colour palettes will help)

Beware

This might not be easy on the eye.
The words: This might not be easy on the eye.
Note: Also remember light and dark mode exists. What may look nice on dark might not on light. ~~I messed up too often because I forgot about light’s existence.~~

Using inspect on elements is totally okay for checking mobile responsiveness but what is not okay? Stealing code (going into someone’s code using this method and copying what they created). Think of it this way…coding is like writing and spans are pieces of artwork. It’s not okay to plagiarize in literature and it’s not okay to trace in art, passing these things as original creations.
Coders spend time to either plan, write, adjust and debug/fix their code ~~I know some do all four with varying time spent~~. Some code can take up to several hours until the creator feels ready to show it so do not steal. If you wish to learn something, do not be sneaky and ask them. I can’t speak for all coders here but I know I would rather be asked than find someone took the code that caused me to pull out seven white hairs. Maybe this should be the first point…hmm.
Of course, everyone has the right to keep their secrets so please respect the person no matter what the answer is. There will be others who can help. Many coders will be excited to guide or teach what they know.
In the case of a post that looks off (mobile responsiveness/cut off post, text that is difficult to read, cannot be seen on current mode, etc.), a screenshot or private message will suffice. Most coders will appreciate help from others if their code cannot be enjoyed but as always, remember to be polite when sending the screenshot or message. If you are unsure whether they welcome advice/pointing out errors, perhaps reach out to them before sending unsolicited messages.
Believe it or not, everyone has their own aesthetic taste and their own coding style. If a post does not look good to you, it is best to avoid commenting unless the issue found is critical (refer to summary of #1).

ValKayRee · October 28, 2020, 9:49pm

Chapter 2: LINKING

HTML Link

Link to w3schools.com

Code: <a href="https://www.w3schools.com/html/html_links.asp"> Link to w3schools.com</a>

Make sure there are quotation marks around the link or it will not work and be as useful as normal text…the user will see a url but will not be directed anywhere if they click.

Hyperlink Using Markdown

Link to w3schools.com

Steps

On the Markdown toolbar, click the fifth button whose icon looks like a two-link chain.
Next, there is an Insert Hyperlink popup. Simply fill it in and press OK.
Done

The basic code is [link title here](link here)
Note that for this hyperlink, quotation marks are not needed

Simply Dropping a Link

https://www.w3schools.com/html/html_links.asp

The easiest and does not take much effort. Just copy and paste links and an embed will be made automatically.

OR

Make plain links a little more pretty
HTML Links Hyperlinks

Code
https://www.w3schools.com/html/html_links.asp

Using an Image as a Link

![](upload://tt9bXmpOPD5SKT722lllYM92G7Q.png) This image will lead you somewhere. Try it out if you dare.

Code:
<a href="https://www.wattpad.com/home">
![](upload://tt9bXmpOPD5SKT722lllYM92G7Q.png)
</a>

<a href> is the location you want to direct users to. Take the url of anything. Note the quotation marks! Also, check if there is no typo or a letter was deleted while copying and pasting.
<img src> is the url for the image used to act as a link. Note it has to be in quotation marks too and it has to be .png, .jpeg or .gif. Anything that will give an image when posted without the linking. In other words, image format.
Remember to close it with the ending tag </a>

Do NOT use the Markdown “upload” tool for this.

Check where a link would lead to

On most PCs: Hover the cursor over the link and check URL in bottom left corner
I’m not sure if this works for other devices but try pressing a link for a longer time until there is a popup

From my tablet

20201028_183747

Coming soon for linking: Coloured links, video links and embeds(?)
Let me know if something is wrong.

ValKayRee · October 28, 2020, 9:51pm

LIST TABLE OF PROPERTIES, VALUES AND USAGE (Coming soon?)

Reserved

ValKayRee · October 28, 2020, 10:00pm

Picture Book (UC)

Images and GIFs

Definitions

Image: Visual representations of them and also called graphics. Electronically, graphics can be either raster or vector. (Differences between the two will be explained in another summary)

Image file formats: standardized ways to organize and store digital images, storing data in uncompressed, compressed or vector format.

Graphics Interchange Format/GIFs: small animations and video footage.

Image File Formats

Most common: jpg, tif, png, and gif

Wackywriters forums: jpg, jpeg, png, gif, heic, heif, mp4, mp3

Note: On these forums, JPG, PNG and GIF are most commonly used. Some file formats are not allowed including zip and svg.

Raster Vs. Vector

Raster=PNG
Vector=SVG

On these forums, raster is used.

Uploading Images

Using a link (PC)

Steps

Fairly simple.
Step 1: Find image in browser
Step 2: Copy image
Step 3: Copy and paste into post being made. The image will appear automatically
Done

Example

![image|281x180](upload://2VcehbHV2sagkvaNhkrTHYclixN.jpeg)

Using a link (Mobile)

Note: By mobile, I am referring to my tablet since that’s the closest thing I have to a phone. If you have a phone and use links to share images, what are the steps? ~~I doubt this is important information so I’ll just put whatever I know and not guess.~~

Steps

Step 1: Find an image in browser
Step 2: Open image in a new tab
Step 3: Grab the link
Step 4: Copy and paste into post being made
Done!

Using the markdown toolbar (as long as you have the forums, it works o.-)

Remember this? (From OP)

To upload images using this tool, there are a few ways.

Upload Button

Step 1: Press/click this

Step 2: See This?

Good
Step 3: Pick one of two ways

Way 1: From device
image|100%
Select a file from your device
Way 2: From the web

Simple enough

Step 4: Upload…Click this

Done

Add an image

Using the 13th button on the toolbar

Select this

You will see [img]http://[/img]
Insert the URL by replacing http:// with the image’s link

1080×810 142 KB

![](upload://fiZ0zOqUTTHVUuMnrXvF6UxAyQp.jpeg)

Uploading Graphics Interchange Format (GIFs)

All you need is a link for the graphic…Tumblr is a great source for GIFs. (I did not use it for the example)

http://cdn.lowgif.com/full/f2806e5ea48f3991-shooting-star-gif-hashtag-images-on-tumblr-gramunion.gif

Changing Image Size

Here’s the original. It’s huge, isn’t it?

https://png.pngtree.com/thumb_back/fw800/background/20190222/ourmid/pngtree-water-ripple-%E6%B6%9F%E6%BC%AA-h5-background-waveripplewater-patterngradientrotateblueminimalism-image_52314.jpg

There are a few ways to change image size.

Sometimes, you see this

Select the size you want and see how size changes.

Using width and height dimensions in pixels

Original

![](upload://cV5ngNO9rsBMKmdcxenlFjSkdVU.jpeg)

200x300 (change will be *change*)

![*200x300*](upload://cV5ngNO9rsBMKmdcxenlFjSkdVU.jpeg)

70x50

![*70x50*](upload://cV5ngNO9rsBMKmdcxenlFjSkdVU.jpeg)

Note: When using this method, the numbers go inside the square brackets, width x height

Using percentages

Original

![clear-blue-sky|690x388](upload://Iek2KfscVcNqacc3S0UnNptbEi.jpeg)

75%

![clear-blue-sky|690x388, 75%](upload://Iek2KfscVcNqacc3S0UnNptbEi.jpeg)

45%

![clear-blue-sky|690x388, 45%](upload://Iek2KfscVcNqacc3S0UnNptbEi.jpeg)

ValKayRee · October 28, 2020, 10:08pm

ALL ABOUT SPANS (Coming soon?)

This topic is probably what most aspiring coders on these forums will look for. ~~I was one of them~~. Instead of lurking and refraining from asking “how’d you do that”, newer coders can come here but many would be willing to share their secrets.

Copying + pasting, stealing/copying by inspecting elements is also not good which will be a topic in here. I might also share some old, simple code but it’s 100% better to create posts your way by understanding the art of cosing. We’ll see though.

SPAN TAGS

The tag

The  tag is an inline container. I won’t go deep into what that means ~~beacause a)I don’t know much and b)I don’t there is much to know except for this~~. Anyway, to make a span, there is an ‘opening’ and ‘closing’ tag. For span, start everything with  and end everything with . Many coders feel lazy and leave the closing tag out but sometimes, this will make a mess so try to use  always…to avoid having strings of code run longer than intended.
For coding, we use

<span style="(stuff go in here that will be talked about below)">Maybe you write some stuff in here</span>

DISPLAY PROPERTY AND DIFFERENT VALUES

Display: block
Display: inline
Display: inline-block

THINGS ABOUT WIDTH AND HEIGHT

Undefined widths (no value assigned)
Using percentage

MARGIN AND PADDING

Padding
Margin

BASIC FORMAT (PLAIN RECTANGLE)
BASIC FORMAT WITH TEXT
BORDER AND OUTLINE

Types of borders
Border radius
Combination of border types

GRADIENT BACKGROUND

Linear

SPAN IN A SPAN
OPACITY
BACKGROUND IMAGE/GIF
BORDER IMAGE/GIF
COMBINATION OF BACKGROUND + BORDER IMAGE/GIF
SCROLL BARS (X+Y)
HIDING SCROLL BARS
WEB UNITS COMPARISON/USES

px
pc
rem
vw

ValKayRee · October 28, 2020, 10:14pm

OLD CODE FOR REFERENCE (A bit iffy)

There is 85% chance this will be deleted because I might not go through with sharing span examples and their code. However, if you go into my coding lab and find something you like but can’t figure out, just ask in PM.
Disclaimer: I might not be giving 100% answers.

ValKayRee · October 28, 2020, 10:16pm

CREATING TABLES (Coming soon…hopefully)

~~Does anyone have ideas of what tables are good for in forums? I only have 1 or 2 ideas >.<~~

ValKayRee · October 28, 2020, 10:17pm

RESERVED