Back to Basics: More Advanced HTML

March 26, 2014

Back to Basics HTML

Welcome to our special series on getting to know HTML! Every other week, we've debuted a new article full of valuable tips and tricks that will start you on the path to being an HTML pro. We'll cover everything from the very basics, to tricks with images and headers, to advanced HTML. Miss anything? Check out the other posts in our series: part 1, part 2, part 3, and part 4.

We have covered some of the basics of HTML over the last few weeks, but there are many, many more HTML tags. Here's a quick introduction to some more advanced HTML elements and how you would use them:

Anchor tags are added within the content of a webpage to allow readers to jump to various sections of the post. We use this element often in the Knowledge Base as you can see by visiting this article and clicking a link in the list. Additionally, we have a great tutorial on Anchor Tags in the Knowledge Base.

Script tags are seen in widgets and ads and other dynamic elements added with HTML. For example, if you were to configure the Twitter Timeline widget, you would be provided with a block of HTML including script tags that you can copy and paste into the custom sidebar module. You likely won't need to write your code which includes script tags, but you may see it frequently when adding third-party content to your blog.

Embed tags are commonly used to embed audio and video players. Example: <embed src="http://example.typepad.com/weblog/files/video.mov" height="315px" width="460px" autostart="0"></embed>

Iframe tags are also used to embed content, and if you embed YouTube videos, for example, the share code uses iframe tags. Example: <iframe width="560" height="315" src="http://www.youtube.com/watch?v=N1FNL_iIp5c" frameborder="0" allowfullscreen></iframe>

In our next special series of posts, we will be discussing the basics of CSS to make changes to design elements. CSS uses HTML tags to group together a section of content which can then be formatted using CSS, so it's helpful to understand div and span tags and their associated attributes.

Div (short for division) tags are used to group a large block of content. The content surrounded by div tags is block-line which applies paragraph like formatting with a line break above and below the content.

Span tags are used for small blocks of content typically within a larger paragraph. The content surrounded by span tags is in-line, or inside a paragraph.

The attributes for span and div tags are id and class.

The id attribute is used to identify one element.

The class attribute can be used to classify multiple elements.

Like all HTML tags, it is important to make sure to open and close all div and span tags. An open div tag can cause major display issues on your blog, so make sure every <div> has a corresponding </div>.

Here's an example of how you would use div and span tags:

<div class="author-quote">
<p>To read well, that is, to read true books in a true spirit, is a noble exercise, and one that will task the reader more than any exercise which the customs of the day esteem. <span id="author">Henry David Thoreau in <em>Walden</em></span></p>
</div>

In the next series on the basics of CSS, we'll explain how to then use CSS to make formatting changes to the elements in the div and span containers.

We have certainly not provided a complete list of HTML tags in this series, and we've only touched on some of the tags. A wealth of information is available online, and you'll also find HTML generators that will guide through the process of getting the proper HTML without the need to hand code it. Let us know if there is some HTML you want to learn about in the comments, and we'll write up additional tutorials.

Back to Basics: Understanding and Using Tables

March 12, 2014

Welcome to our special series on getting to know HTML! Every other week, we'll debut a new article full of valuable tips and tricks that will start you on the path to being an HTML pro. We'll cover everything from the very basics, to tricks with images and headers, to advanced HTML. Miss anything? Check out the other posts in our series here.

So far in our HTML series, we've covered the basics, HTML for images, and lists and headers. Today, we're going to learn how tables work and how to use them in blog posts.

It's likely that you've used a table in a spreadsheet or other document - they're great for laying out information in an easy-to-read format. The HTML for tables can be a little tricky to grasp, though. So let's break it down into bite sized pieces.

Let's start with a very basic table, like this:

Name Age Location
Bob 25 California
Lisa 35 New York

First, we'll use a table and a tbody tag to get the table started:

<table>
<tbody>
....
</tbody>
</table>

All of the table elements will go within those tags.

Continue reading "Back to Basics: Understanding and Using Tables" »

Back To Basics: Lists and Headers

February 27, 2014

Welcome to our special series on getting to know HTML! Every other week, we'll debut a new article full of valuable tips and tricks that will start you on the path to being an HTML pro. We'll cover everything from the very basics, to tricks with images and headers, to advanced HTML. Miss anything? Check out the other posts in our series here.

Over the last few weeks, we've been showing you some of the building blocks of HTML.  Today, we're going to look into lists and headers.

Lists can be used for all kinds of things - what books you're reading; your favorite movies; where you want to go on vacation.  It's a great way to make information pop and be easily readable at the same time. You can use either an ordered or an unordered list.

Ordered lists are exactly what they sound like - they're ordered by number.  This is great if there are steps you want to lay out for your readers, songs you want to rank from best to worst, etc.

Ordered lists begin with the <ol> tag.  Then each item within the list starts with a list item tag - <li> - then the item and a closing list item tag - </li>.  Once you've entered all of your items, you end with a closing </ol> tag. Here's an example of my favorite movies, ranked in order:

<ol>
<li>Singin' in the Rain</li>
<li>Jaws</li>
<li>Sense and Sensibility</li>
<li>The Blues Brothers</li>
</ol>

And this is what it would look like when rendered on your blog:

  1. Singin' in the Rain
  2. Jaws
  3. Sense and Sensibility
  4. The Blues Brothers

Unordered lists are exactly the same except they use the <ul> tags instead of the <ol> tags.  Here's an example of how an unordered list of some of the recent movies I've seen looks:

<ul>
<li>My Neighbor Totoro</li>
<li>Nebraska</li>
<li>Big Bad Wolves</li>
<li>Scott Pilgrim vs. the World</li>
</ul>

And this is how it looks when rendered on your blog:

  • My Neighbor Totoro
  • Nebraska
  • Bg Bad Wolves
  • Scott Pilgrim vs. the World

Now let's talk about header tags.

While some people use header tags to make text bold or to stand out, this isn't actually how they should be used.  Header tags should not be used for style purposes but rather to help search engines index the structure and content of your blog.  The headers use the <h1> through <h6> tags.

Typepad uses the first three of these - <h1> though <h3> in its structure.  Let's see where each one is used.

The <h1> tag is used in the banner header for your blog's name.  Your blog's name is the first and most import structural element.  It looks like this when you view your blog's source code:

<h1 id="banner-header"><a href="http://everything.typepad.com/" accesskey="1">Everything Typepad</a></h1>

The <h2> tag is used in three separate locations within your blog's structure.  These are for the blog's description, the date headers on your posts, and the sidebar headers for Typelists, modules like Recent Comments, search, and more.

Here's some examples of the <h2> tag in use:

<h2 id="banner-description">This is my blog's description.</h2>

<h2>Recent Comments</h2>

<h2>02/05/2014</h2>

Finally, there's the <h3> tag that's used for your post titles. Here's a typical example:

<h3><a href="http://kymberlie6.typepad.com/comment_testing/2011/11/blockquote-with-centered-block-image-and-text.html">Blockquote with Centered Block Image and Text</a></h3>

As you can see, while header tags are used in various ways on your blog, all these tags follow the same structure as every other HTML tag.  If there's an opening tag - like <h1> - you must have the corresponding closing tag - </h1> - to complete the tag.

You can read more about header tags and how to use them for SEO purposes here.

We hope you found this useful!  HTML is an exciting language and we're happy to help you learn more about it.

Back To Basics: HTML for your Images

February 13, 2014

Welcome to our special series on getting to know HTML! Every other week, we'll debut a new article full of valuable tips and tricks that will start you on the path to being an HTML pro. We'll cover everything from the very basics, to tricks with images and headers, to advanced HTML. Miss anything? Check out part 1 in the series.

We're back with another installment of "Getting To Know HTML" and today we're going to talk about how to use HTML when adding images to your blog post.  Images are what grabs readers' attention before reading a word so let's make a good first impression and give them a reason to stick around.  

Coffee Mug Image

To follow up our previous HTML post, we are sticking with the Edit HTML tab on the Compose page.   You can still use the Insert Image button while using the HTML tab. The above image was inserted and styled using HTML only (no Aviary or Insert button involved).  We'll break down and explain the components used to create this image's appearance.

The image tag always begins with "img" and followed by an attribute tag to identify the image source ("src" ) and enhancing your images by adjusting the size, adding borders, and descriptions. So we start with our image HTML and we'll build from there:

<img src="http://mperezsay.typepad.com/coffeemug.png">

The original size of this photo is 639 × 638 px was but made smaller by adjusting the  "width" and "height" attribute to width="300" and height="290".

You can also enlarge your picture but it's not recommended as it may distort the quality of the image so remember, it's better to downscale a large image than enlarge a small one. 

To give it a thick solid black border around your image,  you can pull this off by including a style parameters to your code including Width, Style, and Color like so:  style="border: 10px solid black;"

If you hover your mouse over the above image, you should see a little pop-up text that says "Good Morning Typepad!"  This is added by including the Title attribute simply as: title="Good Morning Typepad".   In addition to this, you can add alternative text to your image file so if someone's browser is a little slow to load images, instead of reading "coffeemug.png" in the box, it says "Coffee Mug Image" using the "alt" attribute.

You may notice the placement of the image and spacing around it.  If you don't want to mess around with the <p> tags and don't want to use the Align Center button, you can adjust the spacing by adding hspace for horizontal spacing and vspace for vertical spacing.

So let's put this all together and see the HTML for the image above:

<p><img style="border: 10px solid black;" title="Good Morning Typepad!" src="http://mperezsay.typepad.com/coffeemug.png" alt="Coffee Mug Image" width="300" height="290" hspace="150" vspace="40" /></p>

Like text links, images can be linked to another website. To link an image, you start the HTML the same as a text link which we learned about previously, only this time we're connecting it with the image HTML as shown in this example from our Knowledge Base:

Screen Shot 2014-01-25 at 3.35.27 PM

 

Adding a link to our Coffee Cup image will look like this: 

<a href="http://www.typepad.com" target="_blank"><img style="border: 10px solid black;" title="Good Morning Typepad!" src="http://mperezsay.typepad.com/coffeemug.png" alt="Coffee Mug Image" width="300" height="290" hspace="150" vspace="40" /></a>

You can also try these codes out in your Sidebar if you want to skip using our Sidebar Image Uploader and go strictly with the Embed Your Own  HTML module under Design > Content and insert your image HTML there.

Play around with your image HTML coding skills in your test blog or a saved draft posts and see how much you can do on your own!

Typepad 101: Turn your blog into a book!

February 04, 2014

Welcome to Typepad 101! Whether you want to add some new features to your blog's design, or simply make your blog more functional, Typepad 101 has you covered. The tip is suitable for bloggers at all levels - no special tricks or upgrades needed.

Although Typepad goes to great lengths to back up your blogs, sometimes you want the security of having a copy of your blog on your computer. You can export your blog posts, pages, and comments any time at Settings > Import/Export. The export is in a format that is easy to import to a new blog, but maybe you want a copy of your blog that mirrors your blog's design and includes all your photos.

BooksIf you want a hard copy of your blog to share with your friends and family who don't get their news online, or if you like the idea of having your blog on your bookshelves to flip through any time, you can do that! There are blog to book tools you can use to turn your Typepad blog into a beautiful book filled with your photos and writings.

A couple services we recommend to turn your blog into a book are Blurb and blog2print. Ask about the discounts they offer for Typepad bloggers! By using one of these services, you can design your book featuring all or some of your posts and photos in a soft- or hard-cover book, and the book (or books!) will be delivered to you.

If you simply want a backup copy of all images and other files uploaded to your Typepad account, just let us know! We're happy to do an export of files for you. Just open a help ticket at Help > New Ticket with your request and give us a couple days to complete the export.

Back To Basics: Getting to Know HTML

January 30, 2014

Back_to_basics_header

Welcome to our special series on getting to know HTML! Every other week, we'll debut a new article full of valuable tips and tricks that will start you on the path to being an HTML pro. We'll cover everything from the very basics, to tricks with images and headers, to advanced HTML. Miss anything? Check out the other posts in our series here.

As a blogger, you're probably acquainted with the concept of HTML, even if you don't use it on a daily basis. To put it as simply as possible, HTML is code written into a kind of text document used by browsers like Firefox, Chrome, and Internet Explorer to present text and graphics, arranging them into a format befitting a blog or website.

Understanding HTML can be really helpful if you'd like to have a bit more control over your content or compose your posts and pages in a plain text environment (our Edit HTML option in the Compose Editor), allowing you to manually add paragraphs, create links, and all sorts of other things. It's like learning a language that will help you feel more comfortable and fit right into the blogging world!

Getting Started

Since we're looking at HTML in terms of blogging, and Typepad has neatly arranged all the behind the scenes basics for you, we won't be going over the "bones" of what makes up a web page today. You can learn more about that sort of thing here, though - helpful stuff if you decide to get into using Typepad's Advanced Templates later on. Today we'll focus on things you can do within Typepad's Edit HTML tab in the Compose area, like creating paragraphs and adding links.

To practice your HTML, you can either use Typepad's Compose Editor (we recommend switching to Draft mode so you don't accidentally post any unwanted content to your blog) or use a text editor, like Notepad (typically included in your PC's operating system) or TextEdit (typically included in your Mac's Operating System).

HTML is made up of tags and content. The tags surround the content and give it meaning. When you look at Typepad's Compose Editor in Rich Text mode, you see your text and images the way you can expect to see them on your blog, which is called WYSIWYG, or What You See Is What You Get:

Richtext

You're not seeing the HTML that makes up your content, because the magic happens behind the scenes with Rich Text. Switch over to the Edit HTML tab, though, and it's a bit like taking a peek behind the wizard's curtain:

Edit_html

There you can see the code for a link (outlined in red), and the code for the image (we'll get to that in another post!), along with the opening and closing paragraph tags (<p> and </p>). While working in Typepad's Rich Text tab is super easy, and appropriate for most situations, there are times when using the Edit HTML tab is the way forward, so knowing how to create paragraphs and add links will put you on your way to being an HTML pro.

Continue reading "Back To Basics: Getting to Know HTML" »

Typepad 101: Change the date and time of posts

January 02, 2014

Welcome to Typepad 101! Whether you want to add some new features to your blog's design, or simply make your blog more functional, Typepad 101 has you covered. The tip is suitable for bloggers at all levels - no special tricks or upgrades needed.

Posts published to your blog are ordered by date, and you can change the date of any post to change the order of posts. Marilyn talked about her favorite feature of scheduling posts to publish in the future, and you can use the same feature to:

  • Reorder posts,
  • Use a unique ordering scheme,
  • Publish previous posts anew, and
  • Backdate posts.

To change the date &/or time of a post, go to the Edit Post page and select Publish On from Status menu. This will open the calendar pop-up where you can change publish date and time. Click OK.

Publish On

If you are setting the post to publish now or in the past, make sure Publish is selected from Status menu and click the Publish button. If you are setting the post to publish anew in the future, make sure Publish On is selected from the Status menu and click Publish or Schedule. Learn more.

If you want to add content to your blog that is not ordered by date, you may want to consider using pages. Pages are static and great to be used for more traditional website pages. e.g. biography, contact, shop

Are there other ways you use the Publish On… function? Share it with us in the comments!

Favorite Features: Custom CSS

December 26, 2013

Favorite Features
Welcome to our special series on our favorite Typepad features! Every other week, we'll debut a new article full of valuable tips and tricks for the Typepad team's top feature picks. Each feature is already built-in and available right at your fingertips, ready to help you get the most out of your blogging experience. Miss anything? Check out the other posts in our series here. This week's favorite feature post is from Colleen, who has been part of the Typepad team for over 8 years.

You might notice that we talk about Custom CSS a lot around here. Why? Because it's an awesome feature that allows you to customize your blog's design, no matter what level of expertise you have with coding. Absolute beginners can just copy code, plop it into their design and go on with their day. Or if you're a CSS expert, you can build a whole theme from scratch. You might be surprised how fun it is to see how the code you use translates to the actual blog. It can be really gratifying!

I love Custom CSS because it allows me to change a blog's style without touching the HTML or template tags. I work with a lot of subscribers on creating custom designs for their blogs and I recommend using Custom CSS for most situations. It allows for a great deal of flexibility without losing access to the other design features, like the Content page. If you've been curious about Advanced Templates because you want more flexibility but you're a little intimidated by all the code, then Custom CSS might be the best solution for you.

Three Little Birdies uses the Clean theme and Custom CSS to create a totally unique design
Three Little Birdies uses the Clean theme and Custom CSS to create a totally unique design

Even if you don't want to make a ton of changes to your blog, you can still use Custom CSS to make little customizations to perk things up. Don't like the font your theme uses? Try out a new one. Want to add a snazzy background image to your blog? You can do that, too. You can tweak your banner, style the navigation bar, or even use custom widths for your blog's columns

Are you using Custom CSS on your blog? Tell us it about it in the comments for this post. We love to see our favorite features in action!

Favorite Feature: Scheduled Blog Post

December 17, 2013

Favorite_features_header

Welcome to our special series on our favorite Typepad features! Every other week, we'll debut a new article full of valuable tips and tricks for the Typepad team's top feature picks. Each feature is already built-in and available right at your fingertips, ready to help you get the most out of your blogging experience. Miss anything? Check out the other posts in our series here. This week's favorite feature post is from Marilyn who has blogged with Typepad at Pulp Sushi since 2006 and recently started working with the Typepad support team.

As bloggers with busy schedules, we don't want to let our time get away from us and forget to update our blog.  Typepad's schedule post feature has been a life saver and my favorite feature when working on my own blog. 

Publishon

So if you're full of blog posts ideas but unsure of when you can write it all out, scheduling your posts is the way to go.  My schedule doesn't allow me to write a blog post every day but I still would like to have fresh content to be published daily. This is very easy to do from the Compose page under Status, select Publish On and choose your date and time for publishing.

Screen Shot 2013-12-03 at 8.15.55 PM

If you have a regular feature on your blog that's published monthly or weekly like "Friday Pinterest Picks", why not schedule the entire month in advance?  I like to schedule my blog posts on the weekends for the week ahead.  I use my Google Calendar to map out the month.

Marilyn's Blog Calendar
Here's what my Blog Planner looks like

Having a Blog Planner (many you can find online to download for free) can help make your scheduling even easier.  Here's one you can download and print from Typepad blogger Vale Design.

This could be a helpful tool if you're new to blogging too!  Regularly scheduled blog posts brings structure to your planning, helps build readership, and encourages visitors to come back.

Favorite Features: Rocking the Rich Text Editor

December 10, 2013

Favorite_features_header

Welcome to our special series on our favorite Typepad features! Every other week, we'll debut a new article full of valuable tips and tricks for the Typepad team's top feature picks. Each feature is already built-in and available right at your fingertips, ready to help you get the most out of your blogging experience. Miss anything? Check out the other posts in our series here.

This week's Favorite Feature post is from Mary Helen. Mary Helen has been a professional blogger on The Natural Beauty Workshop and Mary Makes Dinner since 2007, and started working with the Typepad Support Team in June 2013.

If you've been blogging with Typepad for a while, you are probably familiar with the basics of the Rich Text Editor. This is the default method for composing and editing posts on Typepad. This format was designed to be easy to use for everyday blogging, while the HTML tab is available for fine tuning and adding special components such as embed codes. 

While I am a big fan of keeping things simple, there are some special features in the Rich Text Toolbar that go beyond bold, italic, and underline. Today, I'm going to highlight some of my favorite features on the Rich Text Toolbar, helping you make the most out of Rich Text. 

Tips for Formatting Without Hiccups

As a rule, it's best to add formatting to your text after writing your complete post. This helps stop the editor from becoming confused, and can help avoid glitches or errors that can sometimes result from conflicting formatting tags. After you've finished adding the text and images for your post, go back and add changes to font, alignment, and color. 

It's also important to keep in mind that from a design point of view, a little goes a long way when it comes to formatting text. The occasional addition of a larger font or bold lettering can help break up your text, making your posts easier to read. At the same time, adding too many different sizes, colors, and alignments can make your posts look confusing and jumbled. While multi-color fonts can be very exciting, I recommend taking it easy on your readers by keeping things clean and simple.

Blockquote

Have you ever noticed that little quotation-shaped icon in your Rich Text Toolbar? It's easy to overlook the little guy, but by doing so you are missing out on a golden opportunity to customize your blog posts.

The Blockquote tool applies a default set of formatting options detemined by your blog's Theme. Neat, huh? To give you an idea of what Blockquote might look like on your own blog, here's a run-down of how this feature is styled on some of our most popular Themes.

Blockquote indents the text on:

  • Loft
  • Theme Builder
  • Metropolatin
  • Chevron
  • Element 

Blockquote on Loft

Blockquote indents and adds a colored background on:

  • Dapper
  • Block Party
  • Celebration
  • High Bar
  • Polished
  • Tectonic

Blockquote on Dapper

Blockquote indents, and adds a colored background and border on: 

  • Clean
  • Scene

Blockquote on Clean

Unlimited and Premium users can customize the Blockquote on their blog's Theme using Custom CSS. You can choose a border, background color, or even a special font for Blockquote. Check out this Everything Typepad post to learn some simple tricks for Styling the Blockquote tag

So what will you do with your customized Blockquote tool? Blockquote can be used to highlight anecdotes, poems, song lyrics, or of course, quotations. Check out how these Typepad blogs have made use of Blockquote.

  • Mary Makes Dinner: I use Blockquote on my own blog to highlight recipes. 
  • The Ruckus: This blog features song lyrics using a striking white on black Blockquote.

If you are already using Blockquote, leave a link to your blog in the comments below so that we can check it out. If you need help customizing the Blockquote on your blog, just open a help ticket. We'll be happy to help.

Bullets and Numbering

Making a list? Bulleted and numbered lists are great for breaking up long blocks of information. To start a bullet list, simply click the "Unordered List" icon. Start a numbered list by clicking the "Ordered List" icon. Press enter once to add another item to the list. Pressing enter twice will end the list, reverting your list back to regular text. 

Great ways to use lists:

  • List Ingredients
  • Share event dates
  • Linkups and roundups
  • Step-by-step directions

Insert Links, Images, Video, Audio, and Downloadable Files

They say that a picture is worth a thousand words, so how much do you think an mp3 file or pdf goes for? In addition to inserting images into your posts, you can also include audio files, videos, and downloadable files. The Insert Audio feature is great for sharing original music and podcasts. Inserting a video into your post can be a great way to share your favorite music video, recipe tutorial, or YouTube sensation. The Insert File tool is great for sharing spreadsheets, printable PDFs, and full-size graphic files. You can even embed a PDF or Powerpoint File into a post using the File Manager and HTML tab. 

Split Extended Entry

The Split Extended Entry feature allows you to break up your posts into two parts. The shortened version shows up in your Recent Posts, while the full version is available on the post's individual url. If you like to write extra long posts or include lots of photos, videos, or audio files in your posts, you might find that your blog takes a little longer to load than you'd like. Shrinking these posts with the Split Extended Entry feature is a great solution. This tool can also help your readers browse a larger number of posts more easily.

I hope these tips have helped you become a Rich Text Toolbar expert. If you have any questions about the features I've mentioned,  you can leave a comment on this post, start a thread in the Forum, or if you are a Pro Plan user, open a ticket at Help > New Ticket. We'll be happy to help! 

Welcome

Need help?

Follow us!

Typepad on FacebookTypepad on TwitterTypepad on Google+Typepad on PinterestSubscribe to Everything Typepad

Like us!

Typepad Newsletter

Still having trouble? Contact Support.