Basic Coding

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://parlourtalk.com/">My Clip Store</a>

And some do not allow text or tags inside them, like <img src="clip-preview.gif" /> or <br/>

Here are some of the common tags that always come in handy:

Text

<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 <br/> tag.
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

Formatting Text

There are a number of tags available to change the formatting of text:

You can make text <b>bold</b>

Place <em>emphasis on it</em>

<u>Underline</u> key parts.

Denote it as having strong <strong>importance</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>

Becomes:

Centre the text
in the area it is placed.
We can even do formatted text in here.

Special Characters

Certain characters cannot be put in html, as they would be interpreted as tags such as the < character.

In order to use them, we instead type a html entity code.

  • &gt; is a >
  • &lt; is a <
  • Another useful code is &nbsp; , 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 HTML

Images

Images are controlled entirely by their attributes,

The only required one is src, which you set to the URL of the image.

The alt tag is shown when the image hasn’t loaded or is read by screen readers.

The width and height attributes control the size in pixels of the image on the 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://parlourtalk.com/wp-content/uploads/2019/05/parlourtalk.png" alt="Parlour Talk" width="188" height="75" />

 

Without the width or height tags, an image will try to show at it’s normal size.

<img src="https://parlourtalk.com/wp-content/uploads/2019/05/parlourtalk.png" alt="Parlour Talk"/>

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" />

a plant

Links

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="http://parlourtalk.com/">This is a link</a>

This is a link

Links can also be wrapped around images.

<a href="http://parlourtalk.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>

Sponsor a plant

Sponsor a plant

Lists

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://parlourtalk.com">Item 3</a></li>
</ul>

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li><a href="https://parlourtalk.com">Item 3</a></li>
</ol>
  1. Item 1
  2. Item 2
  3. Item 3

Further Reading

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:

Skip to content