Session 10

SESSION10: EDITING HTML CODE & BLOGS OBJECTIVES:  Create a blog  Write basic html code  Edit html code  Practice with hexadecimal color codes Estimated time: Three 50’ sessions

Blogs are Web 2.0 tools. This means that they are a kind of web site, but one that allows some interaction with its users. You can use a blog:  As a platform for information  As a collaborative tool (to share materials with others) 

As a portfolio (to show your assignments)

Blogs are written in html code. You can edit them by changing the html code. ACTIVITY 1 

In pairs, create your blog .Go to www.google.com and set a blog. Use your gmail email address and password

 Choose a template 

Spend some time exploring the options 1

 Go to Format and set it in English  Go to Layout and edit the header TIP: MAKE SURE YOU REMEMBER THE URL OF YOUR BLOG, AND THE USERNAME AND PASSWORD YOU USED TO CREATE IT ACTIVITY 2: HOW TO EDIT THE HTML CODE

HTML CODE Hypertext Markup Language, or HTML code is the language or code used to write web pages. A basic knowledge of this code will allow you to make changes in pages that already write the text in html. Instead of writing the text in letters, you can access the html code and change things. ACTIVITY 1. in your blog, click on “new entry”. Then click on “html “, and in the text box, write the title of the entry using html code. Follow the instructions below: Basic HTML Document Code Structure Begin writing your HTML tags by creating your document's basic layout. Copy and paste this code into your text or HTML editor.

2

<TITLE>YourPageTitle This area will contain everything that will be visible through a web browser, such as text and graphics. All of the information will be HTML coded.

2.

EDIT THE HTML CODE OF SOME OF THE FEATURES OF YOUR BLOG  Go to “Layout” and then “Edit html” then “edit template”  Here go the part “Variable definitions”. These are features like the color of the headers, of the letters, of the backgroung, the sidebar and so on. 

There are two color codes to define each variable, they look like this:

Variable name="bgcolor" description="Page Background Color" type="color" default="#fff" value="#e6e6e6"> 

Colours are written in hexadecimal code. They look like this in html:



Go

#e6e6e6 to

this

page,

http://www.december.com/html/spec/color.html and choose the colors you like. Copy the hexadecimal code of the color you choose, and then paste it in place of the original code in the blog. Paste it twice, in “default “ and in “value” 3



CHANGE THREE DIFFERENT COLOR PARAMETERS IN THE BLOG. CHECK THE RESULTS.

4