Basic HTML Guide ~ What I Use For My Profile/Blog #1

★basic HTML guide!★

recording for personal use but feel free to use, will be adding to it over time~

Text Effects and Colour

Bold: Text Here

Italic: Text Here

~~Strikeout:~~ <s>Text Here</s>
Underlined: Text Here
Colour: Text Here
Highlighted:Text Here

Blink effect: <blink>Text Here</blink>*

Marquee(scrolling text): <marquee>Text Here</marquee>

all text effects can be paired with each other and with colour; for example, you may have a piece of text that is both in italic and red. you can use hexadecimal code if you want a specific colour, otherwise "red" or "blue" etc. will suffice.
here is an example of text that is both italic and red!

and the HTML would look like this;

here is an example of text that is both italic and red!

you may also change the size of text by using a number scale from 1-7.

here is an example of size 5 text!

and the HTML would look like this;

here is an example of size 5 text!

you can also have your text placed to the left, right or center. the HTML for this is;

Text Here

to center text you may also use <center>Text Here</center>

to add a line break, simply use in-between lines

*in order to change the colours for blinking text, use this HTML;

<style>

blink{

animation:blinkingcolors 0.5s linear infinite}

@keyframes blinkingcolors{

0%{color:#ff0000}

50%{color:#ffffff}

100%{color:#ff0000}}

</style>

Adding Images and Links

add image: <img src="Image URL Here">

align image left/right: <img src="Image URL Here" align="right">

align image center: <center><img src="Image URL Here"></center>

align image left/right with text:

Text Here

image to link: <a href="Site URL Here"><img src="Image URL Here"></a>

text link: <a href="Site or Image URL Here">Text Here</a>

specify link colour:

<style>

a:link {
  color: Colour Here;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
color: Colour Here;
background-color: transparent;
text-decoration: none;
}

a:hover {
color: Colour Here;
background-color: transparent;
text-decoration: underline;
}

a:active {
color: Colour Here;
background-color: transparent;
text-decoration: underline;
}
</style>

you can also adjust the size of your image by including width and height. as with text, these HTML can all be combined. example below;

text goes here! ꙰ૈ☆

this is an example of an image aligned to the left, with text and specified size.

to specify size, simply add width= and height= just after the image URL; eg. <img src="Image URL Here" width=200 height=200>

Miscellaneous

tip: if your image is too large and you are unsure of what to scale it to, you can right-click on the image to bring up "inspect" and find its current size.

tip: you can use the HTML that you have used for your profile theme to customise your blog posts! just paste it into the blog post through the "view HTML" button on the top left, next to formatting.

you can also check out my blog post on useful sites (for media, graphics, etc.) here!

24 Kudos