Image CSS Formating


Contents

  1. 1 Google Sites - Basic Image Upload
  2. 2 Google Sites - Image HTML (alt and title):
  3. 3 Google Sites - Image HTML (CSS Inline Styles: color border and margin):
    1. 3.1 * WYSIWYG Html Examples* Google Sites - HTML BoxAdvanced HTML, Javascript, Google Library APIs and CSSUpdate: HTML Link : Google Sites - Rich Snippet Support


Google Sites - Basic Image Upload


Menu > 'Insert' > 'Image' > Selection: 'Uploaded Images'/Webpage (URL)  > 'Choose' > Select Image > 'Open'

OR

'Attachments' (At the bottom of each page) > 'Choose a file' > 'Choose' > Select file > 'Open'


Live Html Editor [Larger View] 


Edit your Image Html LIVE >>>

Copy and Paste the Following HTML code>>>

<img alt="Goopal google sites examples" border="50" src="http://www.goopal.org/goopal.gif" style="display:block;margin-right:auto;margin-left:auto;text-align:center">

Google Sites - Image HTML (alt and title):



The image will have to uploaded first and you must know it's location

alt = alternative text.

src = image Source.
http:// must be included.

title  = Hover text.

img tag is not self closed />.

<img src="http://www.goopal.org/goopal.gif" alt="Goopal">



Goopal google sites examples



Google Sites - Image HTML (CSS Inline Styles: color border and margin):


Google Sites supports the CSS Inline Style attribute.

border = Full Image Border with color #000 black

margin-top = Margin at the top of the Image

<img alt="Goopal"src="http://www.goopal.org/goopal.gif" style="display: block; margin-right: auto; margin-left: auto; text-align: center;" title="Goopal" border="50">



Goopal google sites examples




Image Map - Embedded Links in a Image