Google Sites Help‎ > ‎Basics‎ > ‎

HTML basics

posted Apr 18, 2012, 10:58 AM by Julie Sharma   [ updated Aug 8, 2015, 11:14 AM ]

html
You can change many aspects of your Google Sites pages using regular edit mode (also called WYSIWYG for "what you see is what you get"), which is accessed by clicking on the pencil edit screen pencil to edit the page. However, you can have a lot more control over the look of your site in HTML edit mode.

Access HTML mode

  1. Select the pencil edit screen pencil to edit the page 
  2. Select  <HTML> from the toolbar

Get started in HTML

Tags

Each item of an html page is surrounded by a start and end tag, almost like parenthesis ( ), which look like this:

<p> start tag
</p> end tag
<div> start tag
</div> end tag
<font> start tag
</font> end tag

A few points about tags
  • Tags are surrounded by triangle brackets <  > 
  • Start and end tags are the same EXCEPT the end tag has a forward slash: </ >
Example:
  • A paragraph, in html, would look like this:
    <p>Text is in the middle.It can be any length of text. The paragraph will keep wrapping until the end tag. </p>
The gadget spec URL could not be found

Attributes

HTML tags have can attributes to specify size, color, font, borders, etc., many of which can be set with the style attribute, for example: 
<p style ="color: red; font-size: 12pt; font-family: Verdana;"> Red, size-12 Verdana font </p>

A few points about attributes
  • attributes are set by including the attribute (for example color) and the setting (for example red)
  • attribute format is like this:
    <p style ="attribute : setting; "> or <p style ="color:red; ">
  • colon  between attribute and setting
  • semi-colon ; between sets of attributes
  • all attributes are surrounded by quotation marks " " 
  • multi-word attributes (like font-family) are joined with hyphen - 

Div Tags

  • <div> tags are a great way to create html spaces with specific formatting and visually distinguish areas of a web page
  • a <div> tag sets up a division or section in the html
  • you can add text, images, links and more to divs
  • divs can have borders, background colors, and margins

    Example:
  • <div style ="background-color:lightgray; border:1px solid gray; padding:5px; height:1500px; width:250px"> ADD CONTENT HERE </div>

    the above code creates the 150 x 250px box with light gray background, gray border, and padding (so that there is space between the border and content)as shown
HTML can be daunting at first, but the more you work with HTML, the easier it will become!
Google+ Facebook Twitter Addthis
Comments