Shop Mobile More Submit  Join Login
×

:icongasara: More from Gasara


Featured in Collections

Journals by BrightHeaven




Details

Submitted on
October 5, 2013
Link
Thumb

Stats

Views
16,135 (27 today)
Favourites
552 (who?)
Comments
77
×

Basic HTML Formatting Guide

Sat Oct 5, 2013, 8:39 AM

Introduction



HTML is a markup language used to create web pages. It primarily consists of content placed between named tags that define the layout or style of that content.


Is it just me or does trying to explain HTML and what it does always seem to make it sound more complicated than it actually is? Very simply, HTML is the building blocks of the web. With it you can create a web page right from the foundations of the layout to the finishing touches of style. Don't get me wrong, it is a fairly involved topic but it really is quite simple to pick up the basics.

What I'll be helping you with here is the formatting aspect of HTML. These are the things that add colour to your page and make your font fancy.

Below you will find a number of examples of HTML formatting that you can use to style your own web pages, dA profiles and journals. All you need to do is copy/paste the code and replace the sample text with your own content. Along with the quick reference I've also written a brief glossary of terms and provided a list of useful links in case you wish to do some further reading.

As always, if you have any questions or problems just let me know.


Text Formatting



Bold text
<b> sample text </b>

Strong
<strong> sample text </strong>

Emphasized
<em> sample text </em>

Italics
<i> sample text </i>

Small
<small> sample text </small>

Superscript
<sup> sample text </sup>

Subscript
<sub> sample text </sub>

Strikethrough
<strike> sample text </strike>

Strikethrough
<s> sample text </s>

Deleted text
<del> sample text </del>

Inserted text
<ins> sample text </ins>

Underlined
<u> sample text </u>

Code
<code> sample text </code>

| Blockquote
<blockquote> sample text </blockquote>

Header
<h3> sample text </h3>
You can define h3 - h6



Font Formatting



Replace the green text in the examples below with your own values.

Face
<font face="verdana"> sample text </font>

Size
<font size="3"> sample text </font>
You can define sizes from 1-7

Color
<font color="#888888"> sample text </font>
<font color="white"> sample text </font>
<font color="rgb(255,255,255)"> sample text </font>
You can define colour using the colour name, hex code or rgb number. Please note that the font color attribute does not work on deviantART profiles.



Paragraphs & Breaks



Paragraph
<p> sample text </p>
Adds a margin around a block of text

Break
sample text <br> sample text
Moves following text to the line underneath. It has no end tag.

Horizontal rule
sample text <hr> sample text
Creates a line to separate sections of content



Layout & Alignment



Division
<div> sample text </div>
Creates a block within which to display content. Used for creating different sections on a web page.

Span
<span> sample text </span>
Defines an area of text that can be styled in-line. It doesn't do anything by itself but allows the use of attributes to style a certain section of text.

Align
<div align="center">sample text</div>
Aligns content.



Images



Image
<img src="http://website.com/image.png">
Used to display images. Replace the green text with your image URL



Links



Text link
<a href="http://website.com"> sample text </a>
Creates a clickable text link. Replace the green text with your page URL.

Image link
<a href="http://website.com"><img src="http://website.com/image.png"></a>
Creates a clickable image link. Replace the green text with your page URL. Replace the blue text with your image URL.



Glossary



HTML (HyperText Markup Language) is a markup language used to create web pages.

Tags are used to define layout and styles. Tag names are enclosed in angle brackets and usually come in pairs consisting of an opening tag and closing tag. The closing tag includes a forward slash before the tag name.
<tag> </tag>


Element refers to the entire content of a pair of tags, including the text between.
<tag> content </tag>


Attributes can be added to an element to further define them. They come in name/value pairs in the form name="value"
<tag color="red"> sample text </tag>


URL (uniform resource locator) refers to the specific location of an item on the internet. It is also refered to as a web address and is used to identify and link to specific pages and content.
http://www.website.com


Hex codes are a string of six digits and letters preceeded by a hash tag used to define a certain colour.
#ffffff


RGB numbers use a combination of red, green and blue numerical values to define a colour.
255,255,255



Helpful Links



deviantART Customisation FAQ
A list of the most frequently asked questions regarding customising your deviantART account. Answers include information and instructions.

Basic CSS style Guide
A quick guide to styling HTML content with CSS.

w3schools
A comprehensive information resource covering all aspects of HTML.

Hex and RGB values
Get hex and rgb numbers for any colour

Google Fonts
A collection of Open Source fonts you can use on your pages for free.


Add a Comment:
 
:iconsmashingsam:
smashingsam Featured By Owner 20 hours ago  Hobbyist Traditional Artist
OK i tried the image display...it worked but i want it bigger...
Reply
:icons-n-o-w-p-a-w:
s-n-o-w-p-a-w Featured By Owner Jan 14, 2015  Hobbyist General Artist
font color doesn't work screams
Reply
:iconrinfoxie:
RinFoxie Featured By Owner Dec 7, 2014  Student Digital Artist
do you know how to display video ?
Reply
:iconwhiteislande:
whiteislande Featured By Owner Dec 20, 2014  Hobbyist Artist
Reply
:iconrinfoxie:
RinFoxie Featured By Owner Dec 20, 2014  Student Digital Artist
thanks :D
Reply
:iconwhiteislande:
whiteislande Featured By Owner Dec 22, 2014  Hobbyist Artist
No problem!!~ ^w^ 
Reply
:iconxxtiffiee:
xxtiffiee Featured By Owner Nov 26, 2014  Hobbyist Artisan Crafter
I have a question: I want to center text in my deviantID box. However, while it does "center" the text, it's not centered in the middle of the box. The code is written correctly and I just can't figure out what the problem is :O
Reply
:iconkeenami:
Keenami Featured By Owner Nov 10, 2014  Hobbyist General Artist
Hi~
First off, this is super helpful, so thank you very much!
Secondly, I have a question.
Do you know how to make a text box go to one side of a custom box? The align code doesn't seem to work for that, so I was just wondering.
Thanks!<3
Reply
:icon4l3ks:
4L3KS Featured By Owner Edited Oct 12, 2014
do you know how to remove the unnecessary < /span> s that show up in my formatting in the artist's comments? they don't show up when editing, so i can't delete them that way.

prntscr.com/4vl9dq
prntscr.com/4vl9i0
Reply
:icontish-marie:
Tish-Marie Featured By Owner Sep 23, 2014
Color code doesn't seem to work, I've tried it in my custom box and it's just black.
Reply
:iconpeepkun:
PeepKun Featured By Owner Sep 29, 2014  Hobbyist General Artist
They said that the color code(s) won't work in dA profiles

"...Please note that the font color attribute does not work on deviantART profiles."
Reply
:iconcaticornia:
Caticornia Featured By Owner Jan 17, 2015  Student Digital Artist
Hhhh even though I barely know you
:iconfoundyouplz:
Reply
:iconpeepkun:
PeepKun Featured By Owner Jan 17, 2015  Hobbyist General Artist
what the hell.
Reply
:iconcaticornia:
Caticornia Featured By Owner Jan 17, 2015  Student Digital Artist
Ikr
Reply
:icontish-marie:
Tish-Marie Featured By Owner Sep 30, 2014
Ah I though dA profiles meant deviant ID box, but That's odd, how does gasara have it working on her front page?? Oh well I found another solution so it's all good, thanks though. :)
Reply
:iconpeepkun:
PeepKun Featured By Owner Sep 30, 2014  Hobbyist General Artist
I think maybe those are like journal skins and like special widget thingies, but you're welcome anyways >.<
Reply
:iconcindymad:
CindyMad Featured By Owner Sep 1, 2014  Student General Artist
ooh kewl
Reply
:icongasara:
Gasara Featured By Owner Sep 7, 2014
:dance:
Reply
:iconthatcrazydinochick14:
ThatCrazyDinoChick14 Featured By Owner Edited Jun 29, 2014  Hobbyist General Artist
Thank you for this! It really works! xD
Reply
:icongasara:
Gasara Featured By Owner Jun 30, 2014
You're welcome! :hug:
Reply
:iconape67:
ape67 Featured By Owner Jun 2, 2014  Hobbyist Artist
╱╲╱╲╱╲╱╲╱╲╱╲THX
╱╲╱╲╱╲╱╲╱╲╱╲FOR
╱╲╱╲╱╲╱╲╱╲╱╲╱╲SHARE
+fav
 
Thumbs UpWink/Razz            
Reply
:iconmirmirs:
mirmirs Featured By Owner Feb 23, 2014  Hobbyist Digital Artist
This is super helpful!!
Reply
:iconmalamute456:
Malamute456 Featured By Owner Feb 13, 2014  Hobbyist Digital Artist
This is perfect! Thanks so much!
Reply
:iconmermaidenne:
mermaidenne Featured By Owner Jan 27, 2014  Hobbyist General Artist
Super helpful! Thanks!
Reply
:icongasara:
Gasara Featured By Owner Feb 5, 2014
You're welcome, my dear!
Reply
:iconamege:
aMege Featured By Owner Jan 24, 2014  Hobbyist General Artist
Thank you very much for this guide! I'm always forgetting my formatting tags, and for some reason dA's explanation drags this stuff out between three different blog/journal posts. Having it all in one place in a very well layed out and easy-to-read format is extremely helpful. :heart:
Reply
:iconpachisu:
pachisu Featured By Owner Jan 17, 2014
So at the moment I'm having issue that when I do < small> or even < sub> in front of the text, it only effects the FIRST word, and not the whole text after I close it off with < /small> < /sub>. Do you know if this is an issue occurring with anyone else? :(
Reply
:iconamege:
aMege Featured By Owner Jan 24, 2014  Hobbyist General Artist
I've been having similar problems as well. Most of my problems tend to occur when I have multiple lines. When I hit return (aka enter) to start a new line it appears to do something unseeable to the html on the page and cancels whatever formatting I'm trying to use. So basically hitting return adds an invisible </tag> to whatever I'm doing. And copy/pasting the tag onto each line doesn't fix it, I've found each has to be typed by hand.
I'm not the only one to have these problems; I think it's safe to assume dA's internals css/html is a bit wonky right now. I think everyone's just trying to ride it out. :heart:
Reply
:iconpachisu:
pachisu Featured By Owner Jan 24, 2014
Thank you so much for the input! I've noticed copy/pasting destroys the HTML system and indeed, you need to type it all by hand for it to work accordingly.

Only recently did I find out ctrl+b and other similar hotkeys, works for bolding and italicizing text.
I've figured out that putting < sub> at the start of the conversation, rather than in between, will make the text subscript, a bit disappointing if you only want certain text in the middle or end of your post to be subscript.

Now my new worry is putting thumbnails into the artist comments. It seems the HTML coding shows up rather than the image. I'm at a loss as to what dA is doing... Almost feel like I should petition for them to work on the artist comments, and less on the sta.sh stuff...
Reply
:iconamege:
aMege Featured By Owner Jan 24, 2014  Hobbyist General Artist
Oh I didn't realize hotkeys worked on dA now either, thanks for letting me know! 
None of the </tag> codes are really closing properly. Using image links hasn't worked properly for awhile now, but I haven't really had problems with :thumb:s up until very recently. No html is very reliable right now--there's about a 50/50 chance something will show up right when you post it.
We should petition, or at least contact dA about it or something. I think a lot of people agree that they need to spend less time on sta.sh stuff.
Reply
:icongiuliariotti:
GiuliaRiotti Featured By Owner Nov 25, 2013  Hobbyist General Artist
Thank you very much! It helps me a lot *-*
Reply
:iconlaladeedadee:
Laladeedadee Featured By Owner Oct 14, 2013  Hobbyist General Artist
Thaanks so muuch! I was wondering how people do those italic words and etc.. But you've helped A LOT!!

Now I know why we studied about HTML codes in our computer class... I took it for granted. -.-"
Reply
:iconblowfishwings:
blowfishwings Featured By Owner Oct 8, 2013  Student General Artist
You. Are. AMAZING. I was having a lot of trouble with this in my class TT_TT  Thank you so much! Just in time!
Reply
:icongasara:
Gasara Featured By Owner Oct 10, 2013

Ah, I hope this helped!

You're welcome, my dear!

Reply
:iconkarinta:
Karinta Featured By Owner Oct 8, 2013  Student General Artist
Thank you SO MUCH! HTML is so versatile...
Reply
:icongasara:
Gasara Featured By Owner Oct 10, 2013
You're welcome ♥
Reply
:iconevenio:
Evenio Featured By Owner Oct 6, 2013  Hobbyist
Inline styling... NOTE! Fot good for building real webpages! But very useful here on DeviantArt :)
Reply
:icongasara:
Gasara Featured By Owner Oct 10, 2013
Very good point. :D
Reply
:iconevenio:
Evenio Featured By Owner Oct 10, 2013  Hobbyist
Just thought I should notice... it's a very nice tutorial you have made :D
Reply
:iconevenio:
Evenio Featured By Owner Oct 6, 2013  Hobbyist
Not xD*
Reply
:iconandaelentari:
Andaelentari Featured By Owner Oct 5, 2013  Professional Digital Artist
thank youuuuuuuuu
Reply
:icongasara:
Gasara Featured By Owner Oct 6, 2013
You're welcome! :dance:
Reply
:icongoron-king-darunia:
Goron-King-Darunia Featured By Owner Oct 5, 2013  Professional Digital Artist
Hey, quick question. When it comes to formatting text in my journals and on anything I do via Sta.sh, if I use the <font> scripts, it will literally only change one line of font, without an ending script, and not change any of the rest of the text... is there some way to work around this? Because even if I copy and paste the <font> scripting at the beginning of every new line, it still only works on the line I typed it out for manually... It's becoming a huge pain in the butt to format anything, and my writing really loses something if I can't format it how I envisioned it... 
Reply
:icongasara:
Gasara Featured By Owner Oct 6, 2013

Oh, this sounds a little strange. If you haven't got and ending tag then the formatting should continue to the end of the text.

 

What attribute are you using with the font tag, face or size?

Reply
:icongoron-king-darunia:
Goron-King-Darunia Featured By Owner Oct 6, 2013  Professional Digital Artist
Sorry, I should have clarified that. I'm using font face. I don't put an end tag, but it will only modify a single line of text... It's never happened to me before, so I don't know if it's something Sta.sh is doing with the way it formats text or if there's a special way you need to script HTML for it to work in Sta.sh.
Reply
:iconmisslunarose:
MissLunaRose Featured By Owner Oct 5, 2013   General Artist
This is a lovely & very clear guide! Thank you for writing it. :aww:
Reply
:icongasara:
Gasara Featured By Owner Oct 6, 2013

Thank you very much.

You're welcome, my dear! ♥

Reply
:iconeumoir:
eumoir Featured By Owner Oct 5, 2013
agreed
Html sounds complicated but its pretty simple once u understand the syntax and the basic codes
Reply
:icongasara:
Gasara Featured By Owner Oct 6, 2013
Indeed. :hug:
Reply
:iconshark-in-training:
Shark-in-training Featured By Owner Oct 5, 2013  Student Traditional Artist
I can finally make my profile all pretty and stuff thanks!
Reply
Add a Comment: