Post Friends My journal
stutterflies in omonatheydidnt

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

Jun 06, 2015 12:00

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:

your text here
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 element and the element to make my text both bold and underlined.

example → example

( back to top)
The Basics
Text Styling & Formatting 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 this much and spiders by this much.
Result:
OP enjoys looking at bunnies by this much and spiders by this much. source: stutterflies 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 pink because of carotenoids, the chemicals that make carrots orange, 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 or Bolds text [Click to reveal example]Example:
The capybara, a large rodent native to South America, is capable of running as fast as a horse!
Result:
The capybara, a large rodent native to South America, is capable of running as fast as a horse! source: Wikipedia or Italicizes text [Click to reveal example]Example:
Scaptia beyonceae is a species of horse fly found in the Atherton Tablelands in north-east Queensland, Australia.

Scaptia beyonceae 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 Underlines text [Click to reveal example]Example:
Although the venom of a platypus causes excruciatingly painful effects, it is not lethal to humans.
Result:
Although the venom of a platypus causes excruciatingly painful effects, it is not lethal to humans. source: Wikipedia 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 1 mile 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 Highlights text [Click to reveal example]Example:
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.
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 Defines superscript text [Click to reveal example]Example:
Puppies to the power of infinity (i.e. puppies∞) 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> 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 (H2O2) 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
Creates a link to the specified URL [Click to reveal example]Example:
OMONA THEY DIDN'T!
Result:
OMONA THEY DIDN'T! Creates a link anchor [Click to reveal example]Example:
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: link to example anchor

link to example anchor
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: link to example anchor

link to example anchor
Images
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:


Result:

 width="VALUE" Specifies the width of the referenced image [Click to reveal example]Example:

width="100">
Result:

 height="VALUE" Specifies the height of the referenced image [Click to reveal example]Example:

height="100">
Result:

( back to top)
Paragraph Formatting
Line Breaks
Inserts a line break [Click to reveal example]Example:
The Southern Sea Otter
has the densest fur
in the animal kingdom,
with about 1,000,000 hairs
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
Defines a paragraph [Click to reveal example]Example:
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.

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 Sets text to center alignment [Click to reveal example]Example:
The sea lemon is a hermaphroditic sea slug native to the British Isles.
Result:
The sea lemon is a hermaphroditic sea slug native to the British Isles. source: ARKive
Sets text to left, right, center, or justified alignment [Click to reveal example]Example:

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.

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 , , Defines headings on a page [Click to reveal example]Example:
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
Result:
Types of Animals
animals animals animals animals animals animals animals animals animals animalsTypes of Birds
birds birds birds birds birds birds birds birds birds birdsPuffins
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 Sets text in a block quote [Click to reveal example]Example:
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.

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 Defines a piece of computer code (and sets text to the browser's default monospaced font) [Click to reveal example]Example:

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

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

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

( back to top)
Content Organization & Ordering
Lists
    Defines an ordered list (i.e. uses numericals or letters)
      Defines an unordered list (i.e. uses bullet points)
    • CHILD TAG Defines a list item
      [Click to reveal example]Example:
      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
        • Hummingbirds
        • Ducks
        • Owls
        • Parrots

      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
      Defines a data table CHILD TAG Defines a table header CHILD TAG Defines a table row CHILD TAG Defines a table cell CHILD TAG Specifies a group of one or more columns in a table for formatting CHILD TAG Specifies column properties for each column within a element
      [Click to reveal example]Example:

      Types of Animals Fish Invertebrates Mammals Bony fish
      Cartilaginous fish
      Lampreys and hagfishes Arthropods
      Cnidarians
      Echinoderms
      Molluscs
      Segmented worms
      Sponges Bats
      Marsupials
      Primates
      Rodents
      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 Draws a horizontal line across the page [Click to reveal example]Example:
      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.
      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 Creates a multiple-line text input field Example: