Google Sites Help‎ > ‎Images‎ > ‎

Image borders

posted Apr 26, 2012, 4:49 PM by Julie Sharma   [ updated Mar 21, 2013, 6:07 PM ]
html
You can add a border to your images using HTML markup.

For hints about html basics, try HTML basics.

To add a basic border
  1. be sure you are signed in to Google Sites, and then go to your site
  2. click on the penciledit screen pencil to edit the page (top, near-center)
  3. add the image (see these tutorials to add an image from your computer or Picasa)
  4. while still in edit mode, click on the image (to put the cursor in the right section of the computer)
  5. click on <HTML> (top, to the right of the text alignment buttons) menu <-----
  6. look through the html for your image (hint: search for <img to find images in the html). You should find something like this

    <img alt="sample picture" src="https://sites.google.com/site/siteshelphowtos/samplepicture">

     note: your html will be probably have different terms in it

  7. add border style attribute (border ="1"), to get something like

    <img alt="sample picture" src="https://sites.google.com/site/siteshelphowtos/samplepicture"
    style ="border:1;">
  • Formatting with attribute options

    You can change the weight, style, color, which borders to alter, and padding (spacing between border and image) using style attributes:

    image with solid border
    style ="border:1px solid black; padding:5px;"

    1 pixel weight, solid black border with 5 pixels of padding

    image with dotted border
    style ="border:3px dotted red;"

    3 pixel weight, dotted red border without padding

    image with border
    style ="border:5px dashed blue; padding:20px"

    5 pixel weight, dashed blue border 
    with 20 pixels of padding

    image with solid border
    style ="border-top:1px solid black;
    border-bottom:1px solid black;"

    1 pixel weight, solid black border on top and bottom only

    Sample complete html for an image with a 1 pixel solid black border with padding:

    <img alt="sample picture" src="https://sites.google.com/site/siteshelphowtos/samplepicture" 
    style = "border:1px solid black; padding:5px;">

View Related Posts


  Twitter   Facebook   Twitter   More...   Contact 
Comments