Working with HTML

HTML (Hypertext Markup Language), a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages

HTML stands for Hyper Text Markup Language
HTML is a markup language
A markup language is a set of markup tags
The tags describe document content
HTML documents contain HTML tags and plain text
HTML documents are also called web pages

You don't have to be an expert in HTML in order to make small changes within your site.

Code and formatting not allowed in your site

Currently, Google Sites does not allow the use of JavaScript, iFrames or CSS tags because the use of these languages could leave your site open to security risks. If not protected against, these forms of code could allow people to insert malicious code that could harm you or visitors to your site

You can edit the HTML of any page within your site by putting your mouse within the area that you are editing and click on the HTML icon (while in the editing mode)

The HTMl box looks something like this depending on how much content is already in that area.

Note you have an Update and Cancel button at the bottom, as well as an "x" in the upper right hand side of the HTML editor box.

Some basics of HTML code that you need to know.

HTML Tags

HTML markup tags are usually called HTML tags

HTML tags are keywords (tag names) surrounded by angle brackets like <html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, with a forward slash before the tag name
Start and end tags are also called opening tags and closing tags

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1>This is a heading</h1>

<h2>This is a heading</h2>

<h3>This is a heading</h3>

HTML Paragraphs

HTML paragraphs are defined with the <p> tag.

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

HTML Links

HTML links are defined with the <a> tag.

HTML Images

HTML images are defined with the <img> tag.

**Note that this indicates the size of the image. You can change the size of your image using this code.

Some other Important characters/tips

<br>-Line Break- This is the one of few takes that does not require a pair.

<div></div>- The <div> tag defines a division or a section in an HTML document.

When you want to insert some code

Adjust tables within a site

The only way to adjust the size of one row or one column within a table is to edit the HTML.

Click on the HTML icon on the tool bar within the Page Editor.
Replace the "60px" with whatever number you want the size to be for whichever column or row you want to edit.
Once you've finished making your changes click "Update" and your changes should appear.

Please keep in mind that the table feature auto sizes depending on what content you place in it. In most cases, the table will resize proportionally correct for what has been input and shouldn't require manual re-sizing.

Also, if you remove the width attribute from every cell in a column, the browser will automatically resize the cells based on content width.

Images in a row (side-by-side)

To get images in a row you will need to edit the HTML to remove the <div></div> tags inserted by Google Sites to align the images - follow these instructions:

Insert your first image by going to Insert then Image
Insert your second and subsequent images in the same way
Edit the HTML by using the HTML button
In the HTML remove the <div style="display: block; text-align: left;"> and </div> that surrounds each image (you can get rid of the links to the image if you want also)

This will put your images in a row. If you want them centred then select the images and use the centre text tool.

Also, don't forget that you can embed any object (like the weather object) anytime you see an option to get an embed code.

Page updated

Report abuse