Signups are currently closed. Check back soon!

Studio X Help Guide

HTML Basics

Text, links, pictures, lists and tables.

HTML is made of tags. Most come in pairs: an opening tag like <p>, your content, and a closing tag with a slash like </p>. Whatever's between them gets that tag's meaning.

<p>This is a paragraph.</p>

Tags can have attributes, extra settings inside the opening tag, like where a link goes:

<a href="https://example.com">This is a link</a>

Headings and text

<h2> and <h3> become header bars on your profile. Use <p> for paragraphs, and these for emphasis:

Try it: edit the code and watch the resultAdd to my profile

<h2>Text Stuff</h2>
<p>This is a normal paragraph. Long lines wrap on their own.</p>
<p><b>Bold</b>, <i>italic</i>, <u>underlined</u>, <s>crossed out</s>,
   <mark>highlighted</mark> and <small>small</small> text.</p>
<p>A line break goes here,<br>and the text keeps going on the next line.</p>
<hr>
<p>That line above is an &lt;hr&gt;, a divider.</p>

Loading...

Links

The href is where the link goes. Links on profiles always open in a new tab.

Try it: edit the code and watch the resultAdd to my profile

<p>Find me on <a href="https://example.com">my website</a>.</p>
<p>Email me: <a href="mailto:you@example.com">you@example.com</a></p>
<p>Link to a friend's Xinsto: <a href="https://www.xinsto.com/profile.php?id=xinsto">xinsto</a></p>

Loading...

Tip: Always include the https:// part for links to other sites, or the link won't work.

Pictures

<img> doesn't need a closing tag. src is the picture's web address, and alt describes it for people who can't see it.

Try it: edit the code and watch the resultAdd to my profile

<img src="https://www.xinsto.com/images/help/sunset.png" alt="A pixel-art sunset" width="240">

<p>Make a picture a link by wrapping it in &lt;a&gt;:</p>
<a href="https://www.xinsto.com/images/help/stars.png">
  <img src="https://www.xinsto.com/images/help/stars.png" alt="Stars" width="120">
</a>

Loading...

Where do pictures come from? Xinsto doesn't host pictures yet, so put yours on an image host and use its direct link (one that ends in .jpg, .png or .gif). Only use pictures you're allowed to share.

Lists

Try it: edit the code and watch the resultAdd to my profile

<h3>Things I love</h3>
<ul>
  <li>Late-night diners</li>
  <li>Thunderstorms</li>
  <li>That one song</li>
</ul>

<h3>Top 3 albums</h3>
<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

Loading...

Tables

Tables are rows (<tr>) of cells (<td>, or <th> for headings). Great for Buddy Info.

Try it: edit the code and watch the resultAdd to my profile

<table border="1" cellpadding="6" style="border-collapse: collapse">
  <tr><th>Screen name</th><td>sam2006</td></tr>
  <tr><th>Location</th><td>The Internet</td></tr>
  <tr><th>Mood</th><td>Chillin'</td></tr>
</table>

Loading...

Boxes: div and span

<div> is a box that takes up its own line. <span> is an inline bit of text. They don't look like anything on their own; you give them a class (or an id) and style them with CSS. You'll use them constantly.

Try it: edit the code and watch the resultAdd to my profile

<style>
  .note { background: #fff4b8; padding: 10px; border: 1px dashed #c9a800; }
  .shout { color: crimson; font-weight: bold; }
</style>

<div class="note">This div is a sticky note.</div>
<p>And this is a <span class="shout">loud bit</span> in the middle of a sentence.</p>

Loading...

Use class for things that can appear many times and id for one-of-a-kind things (each id should only appear once).

Special characters, symbols and emoji

Because < and > start tags, you write them as < and > when you want to show them. Emoji can be typed or pasted straight in.

Try it: edit the code and watch the resultAdd to my profile

<p>&lt;3 &amp; &copy; &trade; &hearts; &star; &rarr; &frac12;</p>
<p>&#9733; &#9835; &#9775; &#9731; &#10047;</p>
<p>✨ 🎧 🛹 🍕 👾</p>

Loading...

Comments

Anything between  is a note to yourself. It doesn't show up on the page (but people can still see it if they view your code).

<!-- TODO: add my new playlist here -->

Music and video

If you have a link to an audio or video file you're allowed to share, the browser's own player can play it. Please don't use autoplay with sound; nobody likes a profile that yells at them.

<audio controls src="https://example.com/my-song.mp3"></audio>

<video controls width="320" src="https://example.com/my-clip.mp4"></video>

About embeds: players copied from other sites (an “embed code” with an <iframe>) sometimes refuse to work inside the profile sandbox, because many of them need things the sandbox blocks for safety. If one doesn't work, link to it instead.

Next up

Your page has stuff on it. Now make it look like you: CSS Basics »

« Start Here CSS Basics »