PubWriter Sandbox Tutorial

<div class="sandbox">

# Images

To insert an image on a page, you'll need to first save the image to your img folder. Give it a minute to upload after you copy it. Next, you have to point to the image like this:

![PubWriter Logo](https://pubwriter.net/images/logo1.png "PubWriter Logo")

Let's break it down:

`![IMAGE NAME (for Google)](THE URL "Name to appear when you hover over the image")`

You can point any image on the net, but anytime you point to an image on another website, you run the risk of that link disappearing (when the link goes away).

The image name and hover name are optional, but recommended. It's the only way google can 'read' what your image is.

## Change the size

Note: SVGs (vector images) scale best

***

***

Make it clickable:
To make it clickable, add `<a href=`

Spin it:

Use `<div id="rotator">` - don't forget closing `<div>`

Pull it to the right side:
`Use <p align="right">`

Center it:
`Use <p align="center">`

## Adding Alt Tags and Title (for google and hover):

# Best practices when working with images...

* Use https URL to image location (ie: https://pubwriter.net/images/blue.jpg)
* Provide an `alt=" "` for accessibility (and SEO since google can't read images)
* Provide an `title=" "` for hover text (optional)

Live example:

<https://read.pubwriter.com/seo>

> Q. Does 'Title' alone satisfy the requirement for 'Alt'? No.

Here's [one answer](https://www.wpromote.com/blog/seo/image-alt-vs-title-using-alt-title-attributes-in-image-tags).

## Floating images to the left or right

This is not ideal for mobile users, but you can float your images left and right pretty easily:

I believe the best way to learn is to learn by doing! This short set of 10 tutorial allows you to see 'under the hood' of your PubWriter page and see in real-time how what you write will appear on your website.

The left side this page is an editable sandbox. **Go Ahead, give it a try!**