Markup: HTML Tags and Formatting

Headings

Header one

Header two

Header three

Header four

Header five
Header six

Blockquotes

Single line blockquote:

Stay hungry. Stay foolish.

Multi line blockquote with a cite reference:

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things.

Steve Jobs – Apple Worldwide Developers’ Conference, 1997

Tables

Employee Salary
John Doe $1 Because that’s all Steve Jobs needed for a salary.
Jane Doe $100K For all the blogging she does.
Fred Bloggs $100M Pictures are worth a thousand words, right? So Jane x 1,000.
Jane Bloggs $100B With hair like that?! Enough said…

Definition Lists

Definition List Title
Definition list division.
Startup
A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.
#dowork
Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.
Do It Live
I’ll let Bill O’Reilly will explain this one.

Unordered Lists (Nested)

  • List item one
    • List item one
      • List item one
      • List item two
      • List item three
      • List item four
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four

Ordered List (Nested)

  1. List item one
    1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four

HTML Tags

These supported tags come from the WordPress.com code FAQ.

Address Tag

1 Infinite Loop
Cupertino, CA 95014
United States

Anchor Tag (aka. Link)

This is an example of a link.

Abbreviation Tag

The abbreviation srsly stands for “seriously”.

Acronym Tag (deprecated in HTML5)

The acronym ftw stands for “for the win”.

Big Tag (deprecated in HTML5)

These tests are a big deal, but this tag is no longer supported in HTML5.

Cite Tag

“Code is poetry.” —Automattic

Code Tag

You will learn later on in these tests that word-wrap: break-word; will be your best friend.

Delete Tag

This tag will let you strikeout text, but this tag is no longer supported in HTML5 (use the <strike> instead).

Emphasize Tag

The emphasize tag should italicize text.

Insert Tag

This tag should denote inserted text.

Keyboard Tag

This scarcely known tag emulates keyboard text, which is usually styled like the <code> tag.

Preformatted Tag

This tag styles large blocks of code.

.post-title {
	margin: 0 0 5px;
	font-weight: bold;
	font-size: 38px;
	line-height: 1.2;
	and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}

Quote Tag

Developers, developers, developers… –Steve Ballmer

Strike Tag (deprecated in HTML5)

This tag shows strike-through text

Strong Tag

This tag shows bold text.

Subscript Tag

Getting our science styling on with H2O, which should push the “2” down.

Superscript Tag

Still sticking with science and Isaac Newton’s E = MC2, which should lift the 2 up.

Teletype Tag (deprecated in HTML5)

This rarely used tag emulates teletype text, which is usually styled like the <code> tag.

Variable Tag

This allows you to denote variables.

Markup: Text Alignment

blog4

Default

This is a paragraph. It should not have any alignment of any kind. It should just flow like you would normally expect. Nothing fancy. Just straight up text, free flowing, with love. Completely neutral and not picking a side or sitting on the fence. It just is. It just freaking is. It likes where it is. It does not feel compelled to pick a side. Leave him be. It will just be better that way. Trust me.

Left Align

This is a paragraph. It is left aligned. Because of this, it is a bit more liberal in it’s views. It’s favorite color is green. Left align tends to be more eco-friendly, but it provides no concrete evidence that it really is. Even though it likes share the wealth evenly, it leaves the equal distribution up to justified alignment.

Center Align

This is a paragraph. It is center aligned. Center is, but nature, a fence sitter. A flip flopper. It has a difficult time making up its mind. It wants to pick a side. Really, it does. It has the best intentions, but it tends to complicate matters more than help. The best you can do is try to win it over and hope for the best. I hear center align does take bribes.

Right Align

This is a paragraph. It is right aligned. It is a bit more conservative in it’s views. It’s prefers to not be told what to do or how to do it. Right align totally owns a slew of guns and loves to head to the range for some practice. Which is cool and all. I mean, it’s a pretty good shot from at least four or five football fields away. Dead on. So boss.

Justify Align

This is a paragraph. It is justify aligned. It gets really mad when people associate it with Justin Timberlake. Typically, justified is pretty straight laced. It likes everything to be in it’s place and not all cattywampus like the rest of the aligns. I am not saying that makes it better than the rest of the aligns, but it does tend to put off more of an elitist attitude.

imaxes

aquí podes ver algunha imaxe do noso estudo

Donec Vehicula Cursus Ante

Nulla facilisis imperdiet molestie. Nulla tempus sodales orci quis egestas. Donec quis leo elit. Nulla facilisi. Pellentesque quis ultricies quam. Fusce volutpat, neque id varius venenatis, dolor enim eleifend mauris, vulputate consectetur leo turpis ac lacus. Suspendisse quis libero id arcu posuere aliquam. Maecenas leo lacus, imperdiet id placerat in, porta vitae urna. Sed blandit semper metus eu euismod. Mauris facilisis bibendum quam a placerat.

Cras neque metus, convallis sit amet feugiat in, sagittis non sapien. In consectetur viverra libero nec malesuada. Aliquam aliquam, lorem eu posuere posuere, augue purus tristique nibh, eget pharetra felis quam nec dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean vel elit lorem. Morbi erat turpis, varius nec convallis at, sagittis sit amet lectus. Donec vitae augue eget ipsum malesuada interdum. Etiam tristique nunc ac libero ultricies eget mattis tortor consectetur. Cras a viverra nunc. Aenean eget ipsum vulputate lorem volutpat elementum eget tempus elit. Proin nisi mi, pretium cursus facilisis vel, pulvinar vitae enim. Proin in quam at lorem interdum consectetur. Maecenas et turpis vel leo rutrum dictum.

Proin sit amet odio dolor, vel varius lectus. Donec feugiat est vel lacus ultricies faucibus. Cras convallis posuere luctus. Vivamus tristique, lacus ut blandit pretium, orci justo laoreet turpis, a blandit ipsum justo eget purus. Praesent eu gravida est. Nullam faucibus est quis risus aliquam non rutrum ipsum gravida. Nulla porttitor eros non nisi rutrum lobortis. Nullam aliquam tempor mi, nec suscipit tellus rutrum sit amet. In sed nibh nec nulla aliquam sagittis. Pellentesque commodo consectetur tellus vel commodo. Phasellus accumsan, urna eget convallis egestas, mauris risus varius est, et rhoncus purus felis vitae purus. Suspendisse laoreet, lectus sit amet ullamcorper accumsan, purus neque tristique tortor, ac vulputate purus justo id tortor. Sed faucibus porttitor enim nec commodo. Curabitur vitae sodales dolor. Nunc in justo vel ante vestibulum sodales.

Ut pharetra leo vel elit feugiat porttitor. Phasellus ultricies rutrum ultrices. Mauris id velit tortor, sit amet dictum libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer ultricies viverra neque nec ullamcorper. Aenean a dolor ante, ac varius justo. Ut accumsan metus sit amet lorem sollicitudin at dapibus tortor venenatis. Vestibulum hendrerit ullamcorper mauris, eget ornare purus euismod in.

Post with Image Preview

This is a normal post with a featured image thumbnail. Photography by Christopher Macquet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in quam odio. In eget porttitor nibh. Integer varius ante id elit mattis blandit. Fusce a mi convallis nisi dictum fringilla. Duis orci nisl, laoreet et feugiat non, ultricies at elit. Nunc id ante vel nisi venenatis pretium eu aliquet mauris. Suspendisse in fermentum elit. Ut metus velit, aliquam nec convallis ut, lobortis in nisl. Curabitur et felis ut dolor euismod porttitor. Integer ut lacus lectus. Donec semper quam a nibh varius tincidunt. Nam vestibulum hendrerit tincidunt. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate, odio vel luctus malesuada, erat leo semper dolor, at molestie metus erat vel mauris.

Donec nec tristique libero. Nunc ac lacus id ante vehicula pulvinar. Ut condimentum consequat nunc, eget sagittis enim tempus sed. Proin nisi dui, pulvinar a tincidunt quis, imperdiet sed nunc. Aenean hendrerit rutrum blandit. Maecenas augue erat, gravida eget condimentum eget, aliquet vitae justo. Maecenas eleifend congue elit eu pellentesque. Quisque sed neque sed velit imperdiet vestibulum eu in diam. Nam egestas pellentesque laoreet. Donec iaculis nulla aliquet tellus ultricies vitae ullamcorper nunc condimentum. Vestibulum non metus non lectus eleifend lacinia. Sed eget nisl feugiat est accumsan sodales. Ut molestie turpis et enim suscipit tincidunt. Vestibulum vel sem in augue tristique placerat eu ac libero. Ut malesuada velit mi, vel consequat nunc.

Aenean sollicitudin bibendum consequat. Sed non est in elit consectetur suscipit. Proin ornare leo sit amet massa cursus varius sollicitudin metus porta. Mauris consequat, ipsum sit amet pretium semper, est urna sodales mauris, a ultrices enim sapien in orci. Nullam mattis orci et arcu posuere molestie. Proin vel ante tellus. Praesent porttitor tortor volutpat nisi interdum eleifend. Aenean vulputate venenatis nisl, a pellentesque ipsum ultrices at. Donec sagittis, massa ut tincidunt facilisis, nunc nisi condimentum ipsum, et mattis tortor risus ac libero. Vestibulum lacinia tempus massa eu sagittis. Mauris condimentum, velit semper ullamcorper commodo, nulla nunc interdum leo, in eleifend est elit porta felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam quis interdum tellus. Aenean vitae dui nisl. Donec ut nunc nisl, eu tempus orci.

Post with User Comments

This is a post that has some comments by users. Comments can be nested and display their respective gravatar.

Donec vehicula cursus ante, at pulvinar quam mollis quis. Etiam nibh nisl, imperdiet quis iaculis pretium, egestas vel risus. Nullam erat felis, molestie id tempor vel, dignissim eu nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ut nisl tellus, ac auctor felis. Ut facilisis, elit vitae venenatis rutrum, nisi lacus dictum erat, nec fermentum dui ligula vel risus. In semper arcu et diam gravida id fermentum augue suscipit. Maecenas eros felis, consectetur et aliquam eget, vehicula ut felis. Sed in mauris ipsum.

Duis euismod quam sit amet ligula mattis commodo. Aenean ac orci risus. Duis eget magna nisi, non porttitor lacus. Morbi facilisis tortor ac urna molestie hendrerit. Fusce nulla nibh, laoreet imperdiet dignissim vitae, eleifend at dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque et lobortis urna. Integer ultricies erat vel purus vehicula a rhoncus urna rhoncus. Nulla lobortis, elit vel faucibus vulputate, magna libero varius urna, quis venenatis purus orci sed sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Post with Embedded Images

A rainy day. Bring your umbrella!
A rainy day. Bring your umbrella!

Vivamus dolor sem, cursus sed scelerisque eu, luctus id neque. Phasellus lacinia vulputate ultricies. Ut lobortis tincidunt eleifend. Aliquam ac nulla eu mi varius luctus. Quisque et odio adipiscing quam placerat ornare. Proin venenatis fermentum lobortis. Aliquam aliquam adipiscing velit ac imperdiet. Cras condimentum tincidunt felis, sagittis adipiscing neque suscipit id.

Etiam lacinia lacus a ligula cursus lacinia. Pellentesque est risus, pharetra non tincidunt ac, vulputate sed turpis. Proin eu augue nisl. Nulla sit amet tortor vel lectus hendrerit vulputate. Quisque venenatis auctor scelerisque. Mauris quis dui et risus sagittis ultrices vel ac magna. Vestibulum at faucibus turpis.

Don't get soaked.
Don’t get soaked.

Cras blandit ultricies dictum. Pellentesque sed ligula nec diam varius hendrerit. Quisque eu felis mi, quis auctor est. Vivamus sed est at leo ornare varius vitae nec massa. Vivamus ultricies ultrices sem, nec cursus urna aliquam et. Proin nunc arcu, tempus at varius vel, interdum in ligula. Nullam ante dolor, dictum a consectetur eget, laoreet ornare lacus. Duis vitae justo suscipit metus tristique tristique.

Vivamus sagittis pharetra orci a luctus. Nunc eros sapien, imperdiet imperdiet consectetur eget, elementum id dui. Maecenas a tellus vitae felis gravida tempus. Donec id ligula non ligula imperdiet commodo. Sed nulla enim, elementum eu luctus at, tristique eget nunc. Aliquam erat volutpat. Integer gravida venenatis eros, et ultricies nibh facilisis non. Duis at mi ipsum. Maecenas vel metus purus, sed ultricies risus. Suspendisse mollis pulvinar ornare.

Standard Post Layout

This is a standard post without images or a custom excerpt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in quam odio. In eget porttitor nibh. Integer varius ante id elit mattis blandit. Fusce a mi convallis nisi dictum fringilla. Duis orci nisl, laoreet et feugiat non, ultricies at elit. Nunc id ante vel nisi venenatis pretium eu aliquet mauris. Suspendisse in fermentum elit. Ut metus velit, aliquam nec convallis ut, lobortis in nisl. Curabitur et felis ut dolor euismod porttitor. Integer ut lacus lectus. Donec semper quam a nibh varius tincidunt. Nam vestibulum hendrerit tincidunt. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate, odio vel luctus malesuada, erat leo semper dolor, at molestie metus erat vel mauris.

Donec nec tristique libero. Nunc ac lacus id ante vehicula pulvinar. Ut condimentum consequat nunc, eget sagittis enim tempus sed. Proin nisi dui, pulvinar a tincidunt quis, imperdiet sed nunc. Aenean hendrerit rutrum blandit. Maecenas augue erat, gravida eget condimentum eget, aliquet vitae justo. Maecenas eleifend congue elit eu pellentesque. Quisque sed neque sed velit imperdiet vestibulum eu in diam. Nam egestas pellentesque laoreet. Donec iaculis nulla aliquet tellus ultricies vitae ullamcorper nunc condimentum. Vestibulum non metus non lectus eleifend lacinia. Sed eget nisl feugiat est accumsan sodales. Ut molestie turpis et enim suscipit tincidunt. Vestibulum vel sem in augue tristique placerat eu ac libero. Ut malesuada velit mi, vel consequat nunc.

Markup: Image Alignment

Welcome to image alignment! The best way to demonstrate the ebb and flow of the various image positioning options is to nestle them snuggly among an ocean of words. Grab a paddle and let’s get started.

On the topic of alignment, it should be noted that users can choose from the options of NoneLeftRight, and Center. In addition, they also get the options of ThumbnailMediumLarge & Fullsize.

Image Alignment 580x300

The image above happens to be centered.

Image Alignment 150x150The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is left aligned.

As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we’ll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it’s thang. Mission accomplished!

And now for a massively large image. It also has no alignment.

Image Alignment 1200x400

The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.

Image Alignment 300x200

And now we’re going to shift things to the right align. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there… Hey guy! Way to rock that right side. I don’t care what the left aligned image says, you look great. Don’t let anyone else tell you differently.

In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah… Just like that. It never felt so good to be right.

And just when you thought we were done, we’re going to do them all over again with captions!

Image Alignment 580x300
Look at 580×300 getting some caption love.

The image above happens to be centered. The caption also has a link in it, just to see if it does anything funky.

Image Alignment 150x150
Itty-bitty caption.

The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is left aligned.

As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we’ll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it’s thang. Mission accomplished!

And now for a massively large image. It also has no alignment.

Image Alignment 1200x400
Massive image comment for your eyeballs.

The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.

Image Alignment 300x200
Feels good to be right all the time.

And now we’re going to shift things to the right align. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there… Hey guy! Way to rock that right side. I don’t care what the left aligned image says, you look great. Don’t let anyone else tell you differently.

In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah… Just like that. It never felt so good to be right.

And that’s a wrap, yo! You survived the tumultuous waters of alignment. Image alignment achievement unlocked!