Bacon 🥓's profile picture

Published by

published
updated

Category: Web, HTML, Tech

Basic HTML coding :)

Hey all for a little bit I've seen new/old people have trouble with getting images in bulletins and comments etc so I thought I'd do a quick little write up and such that may/may not be helpful and I will try keep it simple and not every way to write things/different style etc. So If there is an error/mistake...let me know and I'll fix it up. I hope this is easy to understand.

Suggestions? Leave a comment, I'll throw it in and credit you. Sorry if there already is a blog post like this, I haven't looked myself but thought it would be helpful in someway.

When writing a bulletin/blog you get two different modes: WYSIWYG and HTML. If you use WYSIWYG it has some icons that allow you to easily import pictures, and add links as well as adding tables...but when posting a comment you only get HTML (and a slightly limited one compared to a bulletin or blog post). So for this little write up I will be writing for when it is in HTML mode. You can tell what mode you are by just above the box where you type your message on a bulletin, click it to switch to HTML or WYSIWYG.  

One thing to keep in mind is when you start a "command" for example you must always remember to close it otherwise code after that won't be read as the previous code hasn't been closed/stopped yet. I will explain a tiny bit more when showing you how to bold text.


This is what is accepted when making a comment on a bulletin post/comment you can find this to the left side should you ever need a refresher. So while I haven't covered everything listed in this photo (at least not yet, depends if people want it or not) it will give you a rough idea.

Bold text

<b> - This will bold text. This text is <b>bold</b> and now it is not.

Example: This text is bold and now it is not.

Italic text

<i> This will make text italic. This text is now <i>italic</i> and now it is not
Example: This text is italic now it is not

Headings

Headings are a way to make text bigger and such and range from size 1 to 5, and I've used headings for head lines such as "bold text and headings" so far... to do a heading text is really simple, start it off with <h1> and any text within this will be the biggest heading font. To return the font back to normal, simply close it by </h1> to do a smaller size simply change the 1 to another number (from 1-6). In WYSIWYG you are limited to 1-3 (unless you go into html and change it like I had to).

Example:

This is heading size 1

This is heading size 2

This is heading size 3

This is heading size 4

This is heading size 5
This is heading size 6

Strike

<Strike> put a line across your text as if crossing out something. (works the same as bolding text, remember to close it off). I never make <strike>miztakes!</strike>mistakes!

Example: I never make miztakes! mistakes!

Insert a link

So you want to add a link? You have to have a URL (website address) and some text to attach it to, this creates a link. This one is a slightly longer code. in WYSIWYG mode, the text will turn blue and have an underline showing its a link. <a href="URL site goes here">Text goes here</a>

Example: Spacehey Home page  

Insert an Image

Everyone loves inserting photos right! Note as of 14/11/2021 you cannot insert images into comments, so unless I'm wrong or things change you are restricted to blog and bulletin posts (or your spacehey profile). It's a little bit like inserting a link just different words and no need to put text. <img src="URL to picture goes here"></img> - If this a bit too much click here to view the video version of it

Example:
 
You can link to gif/jpg/svg/png picture formats (some examples).

Inserting an image that links off to somewhere

Say you want a photo and it links to somewhere, we combine the two previous codes together. We simply put the link code in first and then the image code and then close both of them after the image code.
<a href="URL to website goes here"><img src="URL to picture goes here"></a></img>

Example: (clicking the photo in this case will send you to SpaceHey home page)


Marquee text/image

Say you want some text that scroll from the right to the left you simply put in <marquee> and then next to it or to make it it underneath whatever is easier for you to read the code like previous codes, you just need to make sure whatever text you want to scroll is inside the marquee tags so something like this, 
<marquee> 
This is some text
woooooo coool, very cool
alright time to stop
</marquee>

Examples:this text is moving


the next example is if you want to scroll images instead!
< marquee >
<img src="image file 1" > </img>
<img src="image file 2" > </img>
<img src="image file 3" > </img>
<img src="image file 4" > </img>
<img src="image file 5"> </img>
< /marquee >  
Alright I think that will do now...Spacehey has just crashed again...lucky I found out before posting lol so please any questions/suggestions on what to add/fix leave a comment.
If this helped, feel free to leave a kudos (or 2x). Will add more to it if people ask/want it. 


55 Kudos

Comments

Displaying 9 of 9 comments ( View all | Add Comment )

KHRIS0L0GY

KHRIS0L0GY's profile picture

hey, i've seen some ppl make their blog posts have their layout on it and I CANT FIGURE IT OUT!! 3

could you help me? :')
i've asked around and no one seems to know and the ppl that have it on their blog posts won't answer me :p


Report Comment

SLEEPYHEAD

SLEEPYHEAD's profile picture

Ive seen some layouts having gifs or images on top of their page, I'm having a hard time founding how to code it out and was wondering if you can help a bit


Report Comment

☆ K4DE

☆ K4DE's profile picture

thank u sm this was so helpful !!


Report Comment



Not a problem at all, glad it was helpful :)

by Bacon 🥓; ; Report

Holly May

Holly May's profile picture

Do you anything about how to fix a profile picture or why it would upload sideways. I've tried editing it on my computer and changing the orientation and then reuploading it but it still reverted to uploading sideways.


Report Comment



Hmm thats very odd, try saving this photo and uploading this one
Click here

Let me know how you go :)

by Bacon 🥓; ; Report

lime360

lime360's profile picture

this tutorial is so cool


Report Comment



Haha thank you, I hope it was helpful :)

by Bacon 🥓; ; Report

zachary

zachary's profile picture

do you have a code to put a functional link on my about me?


Report Comment



As in just have a link within your about me section?

It's in the Insert a link section

by Bacon 🥓; ; Report

yozo

yozo's profile picture

whooa :O thanks sm f0r this


Report Comment



No problem, I will add a few more basic ones soon, once I get the music playing worked out (playlist wise)

by Bacon 🥓; ; Report

Courtney.Marie

Courtney.Marie's profile picture

Thank you!


Report Comment



No problem

by Bacon 🥓; ; Report

Rob

Rob's profile picture

Nice thanks! I was wondering about this :)


Report Comment



Awesome, glad it helped :)

by Bacon 🥓; ; Report