12:00 pm - 06/06/2015

Omona! Turn me into an HTML wizard! - A brief guide for your HTML needs



If you've ever wanted to spruce up your posts and comments with HTML, then the time has come! I hope that this post will serve as a useful guide for those of you who are unfamiliar with the workings of HTML. Please use this post as an excuse to ask questions, make suggestions, tickle your crave for sparkle text, criticize OP's taste, etc.

Before you explore the rest of this guide, I HIGHLY RECOMMEND that you switch to the default LJ layout for an infinitely better view of this post. nbd if you don't.

Navigation Links

Introduction to HTML

HTML stands for Hyper Text Markup Language, and it is the way web browsers determine how to display a web page. The content on a web page that you write using HTML is called an HTML document. An HTML document is made of one or more HTML elements. HTML elements are written with HTML tags (this usually includes an opening tag and a closing tag, with content in between; they are essentially keywords enclosed by angle brackets).

HTML tags can be further customized by using HTML attributes, which are specified using values. HTML attributes are separated from the tag name using spaces, and may or may not be used based on what you need to accomplish. All HTML tags can be altered using global attributes, but some tags have additional optional attributes.

Confused? It's easier to understand with a visual aid. Here's an example of how a typical simple HTML code will look like:

<tagname attribute1="value1" attribute2="value2">your text here</tagname>

HTML elements may also contain other HTML elements (this is called nesting). Nesting, in simplified terms, makes HTML elements "stack". Below is an example of nesting the <b> element and the <u> element to make my text both bold and underlined.

<b><u>example</u></b>example


(back to top)


The Basics

Text Styling & Formatting
<font size="VALUE"> Specifies text size

Note: The value can either be prefixed with a "+" or "-", or be left blank.
[Click to reveal example]Example:
OP enjoys looking at bunnies by <font size="6">this much</font> and spiders by <font size="-2">this much</font>.

Result:
OP enjoys looking at bunnies by this much and spiders by this much.
source: stutterflies
<font color="VALUE"> Specifies text color

Note: A color can be written in either its common name or its hex color code.
[Click to reveal example]Example:
Flamingos are <font color="#f5b3e4">pink</font> because of carotenoids, the chemicals that make carrots <font color="orange">orange</font>, in the shrimp they eat.

Result:
Flamingos are pink because of carotenoids (the chemicals that make carrots orange) in the shrimp they eat.
source: livescience
<b> or <strong> Bolds text [Click to reveal example]Example:
The <b>capybara</b>, a large rodent native to South America, is capable of running <strong>as fast as a horse</strong>!

Result:
The capybara, a large rodent native to South America, is capable of running as fast as a horse!
source: Wikipedia
<i> or <em> Italicizes text [Click to reveal example]Example:
<i>Scaptia beyonceae</i> is a species of horse fly found in the Atherton Tablelands in north-east Queensland, Australia.

<em>Scaptia beyonceae</em> is named after Beyoncé -- its golden rear provided the inspiration for its name.

Result:
Scaptia beyonceae is a species of horse fly found in the Atherton Tablelands in north-east Queensland, Australia.

Scaptia beyonceae is a species of horse fly named after Beyoncé -- its golden rear provided the inspiration for its name.
source: Wikipedia
<u> Underlines text [Click to reveal example]Example:
Although the venom of a platypus causes excruciatingly painful effects, it is <u>not</u> lethal to humans.

Result:
Although the venom of a platypus causes excruciatingly painful effects, it is not lethal to humans.
source: Wikipedia
<s> Draws a line through text [Click to reveal example]Example:
A lion's roar is loud enough to be heard from a distance of up to <s>1 mile</s> 5 miles (8 kilometres).

Result:
A lion's roar is loud enough to be heard from a distance of up to 1 mile 5 miles (8 kilometres).
source: Wikipedia
<mark> Highlights text [Click to reveal example]Example:
The <mark>ocean sunfish</mark> has the potential to grow more than 60 million times its birth size, which is arguably the most extreme size growth of any vertebrate animal.

Result:
The ocean sunfish has the potential to grow more than 60 million times its birth size, which is arguably the most extreme size growth of any vertebrate animal.
source: Wikipedia
<sup> Defines superscript text [Click to reveal example]Example:
Puppies to the power of infinity (i.e. puppies<sup>∞</sup>) is still not enough puppies. There's never enough puppies in my life.

Result:
Puppies to the power of infinity (i.e. puppies) is still not enough puppies. There's never enough puppies in my life.
source: stutterfliesspan>
<sub> Defines subscript text [Click to reveal example]Example:
The scientific name of the Bombardier Beetle refers to the crackling sound made by the mixing of hydrogen peroxide (H<sub>2</sub>O<sub>2</sub>) and hydroquinone that is used for its defense mechanism.

Result:
The scientific name of the Bombardier Beetle refers to the crackling sound made by the mixing of hydrogen peroxide (H2O2) and hydroquinone that is used for its defense mechanism.
source: ARKive

Links
<a href="URL"> Creates a link to the specified URL [Click to reveal example]Example:
<a href="https://omonatheydidnt.livejournal.com">OMONA THEY DIDN'T!</a>

Result:
<a name="LABEL"> Creates a link anchor [Click to reveal example]Example:
<a name="anchorexample"></a> This would be the top of the hypothetical page.

The opening and closing tags of the link anchor can either be placed around words or be left blank (as I did at the top of this example). There should not be any spaces in anchor names.

When linking to an anchor on the same page, you can write the link as shown below. However, when linking to an anchor on a separate page/website, you must write the link similar to: <a href="http://domain.com/examplepage.html#anchorexample">link to example anchor</a>

<a href="#anchorexample">link to example anchor</a>

Result:
This would be the top of the hypothetical page.

The opening and closing tags of the link anchor can either be placed around words or be left blank (as I did at the top of this example). There should not be any spaces in anchor names.

When linking to an anchor on the same page, you can write the link as shown below. However, when linking to an anchor on a separate page/website, you must write the link similar to: <a href="http://domain.com/examplepage.html#anchorexample">link to example anchor</a>

link to example anchor

Images
<img src="URL"> Inserts the referenced image on the page

Note: The URL must be a direct link to an image (usually ends in the .gif, .jpg, .png extensions).
[Click to reveal example]Example:
<img src="http://ic.pics.livejournal.com/stutterflies/54418511/7154/7154_original.jpg">

Result:
width="VALUE" Specifies the width of the referenced image [Click to reveal example]Example:
<img src="http://ic.pics.livejournal.com/stutterflies/54418511/7154/7154_original.jpg" width="100">

Result:
height="VALUE" Specifies the height of the referenced image [Click to reveal example]Example:
<img src="http://ic.pics.livejournal.com/stutterflies/54418511/7154/7154_original.jpg" height="100">

Result:


(back to top)


Paragraph Formatting

Line Breaks
<br> Inserts a line break [Click to reveal example]Example:
The Southern Sea Otter<br>has the densest fur<br>in the animal kingdom,<br>with about 1,000,000 hairs<br>per square inch of its body.

Result:
The Southern Sea Otter

has the densest fur
in the animal kingdom,
with about 1,000,000 hairs

per square inch of its body.
source: livescience
<p> Defines a paragraph [Click to reveal example]Example:
An elephant's trunk contains about 100,000 different muscles. <p>African elephants have two fingerlike features on the end of their trunk that they can use to grab small items, whereas Asian elephants have only one.</p>

Result:
An elephant's trunk contains about 100,000 different muscles.



African elephants have two fingerlike features on the end of their trunk that they can use to grab small items, whereas Asian elephants have only one.
source: National Geographic
Note: You probably won't find yourself using these very often. Most sites will automatically insert line breaks for you when you hit "Enter" or "Return" on your keyboard, including Livejournal.

Alignment
<center> Sets text to center alignment [Click to reveal example]Example:
<center>The sea lemon is a hermaphroditic sea slug native to the British Isles.</center>

Result:
The sea lemon is a hermaphroditic sea slug native to the British Isles.
source: ARKive
<p align="VALUE"> Sets text to left, right, center, or justified alignment [Click to reveal example]Example:
<p align="left">Although it is also known as the killer whale, the orca is actually the largest species of dolphin.</p>

<p align="right">Found throughout all of the world's oceans, the orca is thought to be the most widespread mammal after humans.</p>

<p align="center">Orca populations may differ in appearance and behaviour and often specialise on particular prey.</p>

<p align="justify">The orca commonly hunts marine mammals and it is the world's largest predator of warm-blooded animals.</p>

Result:

Although it is also known as the killer whale, the orca is actually the largest species of dolphin.


Found throughout all of the world's oceans, the orca is thought to be the most widespread mammal after humans.


Orca populations may differ in appearance and behaviour and often specialise on particular prey.


The orca commonly hunts marine mammals and it is the world's largest predator of warm-blooded animals.

source: ARKive

Headers
<h1>, <h2>, <h3> Defines headings on a page [Click to reveal example]Example:
<h1>Types of Animals</h1>
animals animals animals animals animals animals animals animals animals animals
<h2>Types of Birds</h2>
birds birds birds birds birds birds birds birds birds birds
<h3>Puffins</h3>
puffins puffins puffins puffins puffins puffins puffins puffins puffins puffins

Result:

Types of Animals

animals animals animals animals animals animals animals animals animals animals

Types of Birds

birds birds birds birds birds birds birds birds birds birds

Puffins

puffins puffins puffins puffins puffins puffins puffins puffins puffins puffins
Note: Omona's layout currently does not support this tag. If you use it, your header will be shown as normal text when viewing in Omona's layout style.

Block Quotes
<blockquote> Sets text in a block quote [Click to reveal example]Example:
About firefly lights:
<blockquote>Fireflies emit light mostly to attract mates, although they also communicate for other reasons as well, such as to defend territory and warn predators away. In some firefly species, only one sex lights up. In most, however, both sexes glow; often the male will fly, while females will wait in trees, shrubs and grasses to spot an attractive male. If she finds one, she'll signal it with a flash of her own.</blockquote>

Result:
About firefly lights:
Fireflies emit light mostly to attract mates, although they also communicate for other reasons as well, such as to defend territory and warn predators away. In some firefly species, only one sex lights up. In most, however, both sexes glow; often the male will fly, while females will wait in trees, shrubs and grasses to spot an attractive male. If she finds one, she'll signal it with a flash of her own.
source: firefly.org
Note: Omona's layout currently does not support this tag. If you use it, your block quote text will be shown as normal text when viewing in Omona's layout style.

Coding
<code> Defines a piece of computer code (and sets text to the browser's default monospaced font) [Click to reveal example]Example:
<code>
body {
   background-color: #d0e4fe;
   font-family: Helvetica;
   font-size: 14px;
   color: #000000;
   }
  </code>

Result:
body { background-color: #d0e4fe; font-family: Helvetica; font-size: 14px; color: #000000; }
<pre> Similar to <code>, but also preserves both spaces and line breaks [Click to reveal example]Example:
<pre>
body {                                 
   background-color: #d0e4fe;
   font-family: Helvetica;
   font-size: 14px;
   color: #000000;
   }
</pre>

Result:
body {
   background-color: #d0e4fe;
   font-family: Helvetica;
   font-size: 14px;
   color: #000000;
   }


(back to top)


Content Organization & Ordering

Lists
<ol> Defines an ordered list (i.e. uses numericals or letters)
<ul> Defines an unordered list (i.e. uses bullet points)
<li> CHILD TAG Defines a list item
[Click to reveal example]Example:
Types of animals:
<ol>
   <li>Amphibians</li>
   <li>Birds</li>
   <li>Fish</li>
   <li>Invertebrates</li>
   <li>Mammals</li>
   <li>Reptiles</li>
</ol>
Example of a nested list:
<ol>
   <li>Amphibians</li>
       <ul>
          <li>Newts</li>
          <li>Salamanders</li>
          <li>Frogs</li>
          <li>Toads</li>
          <li>Caecilians</li>
       </ul>
   <li>Birds</li>
       <ul>
          <li>Cranes</li>
          <li>Hummingbirds</li>
          <li>Ducks</li>
          <li>Owls</li>
          <li>Parrots</li>
       </ul>
</ol>

Result:
Types of animals:
  1. Amphibians
  2. Birds
  3. Fish
  4. Invertebrates
  5. Mammals
  6. Reptiles
Example of a nested list:
  1. Amphibians
    • Newts
    • Salamanders
    • Frogs
    • Toads
    • Caecilians
  2. Birds
    • Cranes
    • Birds of prey
    • Hummingbirds
    • Ducks
    • Owls
    • Parrots

Tables
<table> Defines a data table
<th> CHILD TAG Defines a table header
<tr> CHILD TAG Defines a table row
<td> CHILD TAG Defines a table cell
<colgroup> CHILD TAG Specifies a group of one or more columns in a table for formatting
<col> CHILD TAG Specifies column properties for each column within a <colgroup> element
[Click to reveal example]Example:
<center>
<b>Types of Animals</b>

<table width="500" border="1">
<colgroup span="3" width="500">
<col span="2" width="200"><col span="1" width="100">
</colgroup>
   <tr>
      <th>Fish</th>
      <th>Invertebrates</th>
      <th>Mammals</th>
   </tr>
	
   <tr>
      <td>
      Bony fish
      <br>Cartilaginous fish
      <br>Lampreys and hagfishes
      </td>
		
      <td>
      Arthropods
      <br>Cnidarians
      <br>Echinoderms
      <br>Molluscs
      <br>Segmented worms
      <br>Sponges
      </td>

      <td>
      Bats
      <br>Marsupials
      <br>Primates
      <br>Rodents
      </td>
   </tr>
</table>
</center>

Result:
Types of Animals
Fish Invertebrates Mammals
Bony fish

Cartilaginous fish

Lampreys and hagfishes
Arthropods

Cnidarians
Echinoderms
Molluscs
Segmented worms

Sponges
Bats

Marsupials
Primates

Rodents

Dividers
<hr> Draws a horizontal line across the page [Click to reveal example]Example:
I will not write about wombat butts in this section.
<hr>The wombat lacks a meaningful tail and most of its rump is made of cartilage, which makes it nearly impossible for a predator to bite it from behind.
<hr>Wombutts.

Result:
I will not write about wombat butts in this section.
The wombat lacks a meaningful tail and most of its rump is made of cartilage, which makes it nearly impossible for a predator to bite it from behind.
Wombutts.
source: inhabitat

Text Input Boxes
<textarea> Creates a multiple-line text input field [Click to reveal example]Example:
<textarea>
I ♡ OP ٩(•ᴗ•)۶
</textarea>

Result:
For the sake of convenience, you may copy and paste this into the comments:

cols="VALUE" Specifies the visible width of a text area [Click to reveal example]Example:
<textarea cols="30">
I ♡ OP ٩(•ᴗ•)۶
</textarea>

Result:
For the sake of convenience, you may copy and paste this into the comments:

rows="VALUE" Specifies the visible number of lines in a text area [Click to reveal example]Example:
<textarea rows="5">
I ♡ OP ٩(•ᴗ•)۶
</textarea>

Result:
For the sake of convenience, you may copy and paste this into the comments:



(back to top)


LJ-Exclusive Tags

<lj-cut> Hides text using a lj-cut

Note: This only works in entries. For more info, refer to this page.
[Click to reveal example]Example:
This text will show outside of the cuts.

<lj-cut>This text will be hidden inside the cut.</lj-cut>

<lj-cut text="This is a second cut.">This text will also be hidden, but is hidden by the second cut.</lj-cut>

This text will also show outside of the cuts.

Result:
This text will show outside of the cuts.

( Read more... )

( This is a second cut. )

This text will also show outside of the cuts.
Note: This example is merely a mock-up of how the cuts work, since inserting actual cuts here will break the post.
<lj-spoiler> Hides text in a lj-spoiler

Note: This works in both entries and comments. For more info, refer to this page.
[Click to reveal example]Example:
Titanic spoilers: <lj-spoiler>The ship sinks.</lj-spoiler>

<lj-spoiler text="Here's a .gif of a fennec fox."><img src="http://ic.pics.livejournal.com/stutterflies/54418511/8200/8200_original.gif></lj-spoiler>

Result:
Titanic spoilers: [Spoiler (click to open)]The ship sinks.

[Here`s a .gif of a fennec fox.]
<lj user> Creates a link to the referenced LJ user or LJ community [Click to reveal example]Example:
<lj user="stutterflies">'s favorite place to ogle pretty people is <lj user="omonatheydidnt">.

Result:
stutterflies's favorite place to ogle pretty people is omonatheydidnt.
<lj-embed> Defines embedded media Refer to: Embedding media
Caution: [Click to reveal]Each embedded item on LJ is assigned a number ID when is it posted (it looks like <lj-embed id="VALUE">; these IDs are specific to each journal/community, so be careful when you copy and paste an embed code from one place to another. In other words, <lj-embed id="12345"> on your journal may link to a SHINee MV, but using <lj-embed id="12345"> on Omona may embed a Chad Future MV. You don't want that.


To avoid this problem, simply remove the ID attribute before posting your content.
<lj-poll> Creates a poll For more information on poll creation, refer to this page.

I will not be providing an example for this code because it is much more convenient to use LJ's built-in poll creator than to write the code manually. If you are interested in manually writing the code, please read this guide.


(back to top)


Embedding Media

In most cases, using Livejournal's 'Insert Media' function is the easiest way to embed media from sources such as Youtube, Dailymotion, Twitter, Instagram, Vine, etc. You only need to copy and paste the URL of the item into the box and click 'Insert'. Piece of cake. Below are examples for some popular sites.

This method words for both entries and comments. However, Omona's layout disables the 'Insert Media' button on the comments page, so you'll need to either access this option from the 'Post an entry' page or use the default LJ style (append ?format=light to the page's URL).

See also: <lj-embed>

Youtube videos [Method 1 - Using the LJ`s Insert Media button]Method 1 - Using LJ's Insert Media button:


After clicking 'Insert':
<iframe src="http://www.youtube.com/embed/EgYt0BluEKM" width="450" height="253" frameborder="0" allowfullscreen data-link="http://youtube.com/watch?v=EgYt0BluEKM"></iframe>

Result:
source: BBC

[Method 2 - Using Youtube`s generated embed code]Method 2 - Using Youtube's generated embed code:

1. Click the 'Share' button beneath the video
2. Click the 'Embed' tab
3. Copy the embed code
4. Paste the code into Livejournal's entry/comment box
5. Submit your entry/comment

jsyk: This method will work for most other video streaming sites, but make sure to test it first using the "Preview" option for entries.
Twitter posts [Click to reveal example]Example:


After clicking 'Insert':
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Chicken soup is jjang~~</p>— Lim Kim (@limkim12121) <a href="https://twitter.com/limkim12121/status/552099608877232128">January 5, 2015</a></blockquote>

Result:
source: @limkim12121
Instagram posts [Click to reveal example]Example:


After clicking 'Insert':
<iframe src="//instagram.com/p/0wsOWTgG1Z/embed/" width="450" height="522" frameborder="0" scrolling="no" allowtransparency="true" data-link="http://instagram.com/p/0wsOWTgG1Z/"></iframe>

Result:
source: dlwlrma


(back to top)


Advanced Elements: <span> & <div>

Yikes, where do I even begin with these two? Unlike the other elements that I've covered so far, these two are often said to convey no meaning by themselves. They are commonly used in conjunction with CSS (Cascading Style Sheets) to add visual features to specific parts of text or to group/combine several elements in your document. Examples of their use on Omona can be seen in this post (warning:video heavy!) or this post.

Although Livejournal doesn't allow the use of external style sheets, you can still manipulate <span> and <div> using in-line CSS declarations. In other words, you could use the style="VALUE" attribute as a stand-in for an external style sheet. And unlike HTML, the values for the style="VALUE" attribute are CSS declarations separated by semicolons. OP, what the hell are you talking about?

I'll leave it at that because I'm not skilled enough to explain it at a level that will teach you anything. I just didn't want to end this guide without mentioning them. But hey, if it's any consolation, the code for adding backgrounds to text is included below. That's a start, right?

<span style="color:#ffffff; background:url(http://ic.pics.livejournal.com/stutterflies/54418511/8686/8686_original.gif);">JUST TRY TO LOOK AWAY NOW. YOU CAN'T.</span>
↓ ↓ ↓
JUST TRY TO LOOK AWAY NOW. YOU CAN'T.


(back to top)


Related Links

Thinking about submitting a post to Omona? Have a seat and review these posts:
Itching for more than what I can provide? Check out these resources:
torontok 6th-Jun-2015 08:06 pm (UTC)
Bookmarking this post for future usage, thank you OP!
This page was loaded Sep 16th 2019, 12:41 am GMT.