Cam/Clip sites have come a long way since their inception, but a lot still rely on you writing HTML code to make your profile.
HTML is made out of tags, like
<p>Hello <b>there</b></p>, that go around text and other tags.
They can have attributes, like
<a href="https://therubyumbrella.com/">My Clip Store</a>
And some do not allow text or tags inside them, like
<img src="clip-preview.gif" /> or
Here are some of the common tags that always come in handy:
<p> tags are for paragraphs. Most sites tend to style paragraphs so that they have a gap between them.
To make the text go onto a new line without a gap, we use the
This is especially useful on sites like iWantClips to separate lines of text.
This is our first paragraph
Without putting a br tag in,
this all becomes one line
This is the second paragraph, note the gap between them.
This third paragraph has br tags.
Note how even if when we write them on one line,
a tag will still create a new line
There are a number of tags available to change the formatting of text:
You can make text
<em>emphasis on it
</u> key parts.
Denote it as having strong
You can also change how the text is aligned, such as centreing it:
<center> Centre the text<br/> in the area it is placed.<br/> We can even do <b>formatted text</b> in here. </center>
Centre the text
in the area it is placed.
We can even do formatted text in here.
Certain characters cannot be put in html, as they would be intepreted as tags such as the < character.
In order to use them, we instead type a html entity code.
>is a >
<is a <
- Another useful code is
, this looks the same as the space between these words, but a browser will not break the sentence onto a new line at that space.
A full list can be found here: https://entitycode.com/#common-content
None text bits:
Images are controlled entirely by their attributes,
The only required one is
src, which you set to the URL of the image.
alt tag is shown when the image hasn’t loaded, or is read by screenreaders.
height attributes control the size in pixels of the image on screen.
(This will shrink or expand an image, but be aware that an expanded image will look blurry, and using a large HD image for a small preview will make the page load slower.)
<img src="https://therubyumbrella.com/wp-content/uploads/2019/05/The-Red-Umbrella-Line.png" alt="The Ruby Umbrella" width="478" height="125" />
height tags, an image will try to show at it’s normal size.
<img src="https://therubyumbrella.com/wp-content/uploads/2019/05/The-Red-Umbrella-Line.png" alt="The Ruby Umbrella"/>
You can also use gifs for clip previews.
<img src="https://media.giphy.com/media/xUA7aOIFDR4ZgqLy8w/giphy.gif" alt="a plant" width="200" height="200" />
Links are fairly simple, we just need to tell it which URL we want the link to go to.
Your main concern will be following the rules for particular sites regarding which other sites you are allowed to link to.
<a href="https://therubyumbrella.com/">This is a link</a>
Links can also be wrapped around images.
<a href="https://therubyumbrella.com/pretend-store/sponsor-plant"> <img src="https://media.giphy.com/media/xUA7aOIFDR4ZgqLy8w/giphy.gif" alt="Sponsor a plant" width="200" height="200" /><br/> Sponsor a plant </a>
Lists come in two flavours, unordered (
<ul>) and ordered (
<ol>) , both require the tags inside them to be
<li>, but you can put other tags inside them:
<ul> <li>Item 1</li> <li>Item 2</li> <li><a href="https://therubyumbrella.com">Item 3</a></li> </ul>
- Item 1
- Item 2
- Item 3
<ol> <li>Item 1</li> <li>Item 2</li> <li><a href="https://therubyumbrella.com">Item 3</a></li> </ol>
- Item 1
- Item 2
- Item 3
We’ve only covered a small part of html, the kind of tags usually allowed in cam profiles and clip store descriptions.
More information and tutorials on html can be found at these links: