Report Blog Entry
this blog right here is going to be a no nonsense back to basics primer for some of the newer folk that feel a bit exasperated with how to modify their profile layout and blah blah blah blah blah. yea i get it - i was new once too ykno. we all gotta start somewhere! thing is though, it's ridiculously easy to pick up and learn!!
i see a lot of people swear by 3rd party websites that let you see ur profile edits in real time and ig whatever works for you but i prefer a more traditional approach and besides
the first step for the newbs is learning HOW things work :D
& imma show u how (cause im nice like that)
<33
anyway open your desktop text editor (notepad on winblows, for example)
and paste in the following:
<!DOCTYPE html>
<head>
<title>hello world</title>
<style>
</style>
</head>
<body>
</body>
</html>
save that file as helloworld.html then open in your browser of choice
you'll see a blank page
lmao that's cause we aint put anything there yet XDD
kk back in the same file, between the <body></body> tags
type "hello world"
save again -> reload in browser
now it's a blank page except for hello world
ngl a bit boring rn yea but hold on cause
we're going STYLING :O
mkay back in your html doc, type this between the <style></style> tags
body {
color:red;
font-family:helvetica;
font-size:30px; }
again, save and reload the page in the browser
your text is now red, larger and using the helvetica font :DD
dya want that font smol as heck? font-size:3px;
want the font blue instead of red? color:blue;
want it in cursive? font-family:cursive;
obviously it does get more and more complex the more you delve into it but the fundamental rule is that it's called a cascading style for a reason - because it can be styled however you want!
try this one out for size (again - between yr style tags):
.dankbox {
background-color:black;
width:300px;
padding:3px;
font-family:helvetica;
font-size:30px;
color:white;
text-shadow: 0 0 2px 2px;
border:2px solid cyan; }
so now we've created a brand new element called dankbox
and we need declare that if we wanna see it on our page
this next bit goes between them <body></body> tags
<div class="dankbox">whatever the heck text u want here</div>
again, save & reload the page and you can see yr fab new dankbox :D
want the box a smaller width? width:100px;
want no borders? border:none;
want more padding? padding:30px;
see how easy this stuff is
again, any aspect like color, font, text size, border etc - these can all be changed
the only real limitation is your own creative output :O
further reading btw
w3schools.com/css/default.asp
developer.mozilla.org/...Core/Styling_basics
blog.spacehey.com/entry?id=1588394
<33
Comments
Displaying 17 of 17 comments ( View all | Add Comment )
Rein
omg I love this thank youuuuuu :D
yer v welcome!! :DD
by GOAT; ; Report
Ina
Notepad++ is great for that and allows people to install plugins, one of which is to see a browser version of what's being input.
There's no need to push people to use Notepad only when they can use Notepad++ for their HTML and CSS stylesheet needs (even PHP but that's another thing). It's free and open source, helps with using tags faster and has a nice UI.
Visual Studio Code is also free.
If you want even older software, Microsoft Frontpage was a good deal back in the day.
But whatever floats your boat. It's also good that there are blog entries helping people.
tbf there are so many different editors geared towards programming and markup language
some people swear by vim, some by gedit, some by notepad++ etc etc
i use xed on linux mint which isn't very fancy, but does highlight syntax like so many others :o
only reason i mentioned notepad is that for many, its the default option available
also lacking syntax highlighting and real time viewing is the equivalent of being thrown in the deep end
which imo is one of the best ways to learn
xoxo
by GOAT; ; Report
ubamanu
You are amazing, thank you, I love you
<33!!
by GOAT; ; Report
Thea
THANKS ALOT MAN
hey no prob :DD
by GOAT; ; Report
Holster
neato!
but i still think the layouts should reopen again
lets hope that happens
so i can post nicolas cage themed layouts XDD
by GOAT; ; Report
Stargirl
I'm new here thank you so much for this
you're v welcome!! :3
by GOAT; ; Report
Bluenajarala
this doesn't work
It does, some commands are incorrect though. Instead of putting "font-colour" just put "colour"
Mac + Linux = In TextEdit (i need ai to know this) you need to tweak the program before typing your thingo. Basically when you open TextEdit, go to the bar at the VERRYY top of the screen that says "TextEdit" press it, and then press the "Settings" button. Under "New document" switch from "Rich text" to "Plain text". Under "Open and save" tick the very first (top) tick-box on the screen. Then close the pop-up and create the note, and once youve pasted the text in and you go to save it, make sure it saves as a html not a txt. If you save it and it auto does it as txt, go into finder and double click the name to rename it as a html.
Windows - I have 0 clue but i used to have one and im pretty sure you just go into notes, type the text and save it as a html and itlll work straight away. Goodluck loll
by 𝕬𝖇𝖇𝖊𝖞; ; Report
lol ty for correctin bit of an oversight typing on autopilot at speed these things do happen XD
but the rest of it all is fine i think :o
will amend when im back kn desktop <333
by GOAT; ; Report
nvm its le fix
thought it would be annoyin af to do that on mobile XD
ty again!! xoxo
by GOAT; ; Report
also re: this stuff not working
adding all them html head body n title tags wont work
IF you do it on spacehey
this post is for showing how to create html docs OFFLINE
and in doing so, learning how html/css works
xoxo
by GOAT; ; Report
jackie66
Thank you so much for this!!!
yr v welcome!! <33
by GOAT; ; Report
Jwana<3
Thanks professor I needed this<33
yer v welcome!! <33
by GOAT; ; Report
hex
really neat for an absolute beginner; i do also recommend MDN web docs, it documents most things in greater detail (if youre a NERD!!!!)
for websites, i recommend also using tutorials off neocities. most give really great advice for setting up your own websites.
mdn is a fab resource too omg
def adding that in <33
by GOAT; ; Report
venus7
bro im gonna need to know how you added the text at the top that like bounces back and forth between colors its so coollllll
ahhh that's just styling the blog header :o
THIS is adding text at the top :DD
https://blog.spacehey.com/entry?id=1603034 <--
by GOAT; ; Report
omg KKB
by phenomenal✮cat; ; Report
lol sry that link is ded now
blog.spacehey.com/entry?id=1611374
:D
by GOAT; ; Report
gooble
thank you professor
dank 101: dankology :DD
by GOAT; ; Report
SleepyPhoenix
THANK YOU!!
omg yr v welcome :D
by GOAT; ; Report
heysteven
thanks! sensei -- arigatoo
np!! <33
by GOAT; ; Report
✶Rib𓆩𓁺𓆪Eye Black Dragon✶
I'm stuck in tutorial hell and I don't know how to get out
this is a pretty dank and helpful tutorial in all honesty (◍•ᴗ•◍)
can i have a link to the tutorial hell and is it me :O
by GOAT; ; Report
angel_wings..*
you are a godsent for this
just makin sure there's nuff dank to go round <33
by GOAT; ; Report
benny // whalefall
brilliant, thank you
ayyy np fren! <3
by GOAT; ; Report