Use Mary Sunshine as a model
advertisement
Quia Advanced Handout 1 HTML Editing in Quia
HTML Code Template and Instructions for Modifying Quia Webpages
These are examples of some of the types of modifications that teachers want to make on their Quia pages.
Document Styles
Font Size
Font Colors
Font Families
Text Alignment
Paragraph Spacing (breaks)
Inserting graphics
Uploading Graphics and Files to the Quia filing cabinet
Inserting Graphics onto the Quia Page
Ordered Lines
Unordered Lines
Tables
This document is your template for setting up code in the notepad document that will form the basis for your Quia
page. Notice that we are using notepad instead of typing directly into Quia. We are doing this so that we can test
the page display and edit the code without worrying about destroying existing content on the Quia page. When we
finish, we will copy and paste it into Quia. So –there is a method to the madness.
Starting Notepad and Setting Up the HTML Editor
Go to Start Programs Accessories Notepad. (For our purposes there is a shortcut in your participant
folder.)
Go to File Save as and type a name (no spaces---all lowercase) for the file followed by .htm and save it into a
folder called _____. At the top of the page type this tag <html>. It means start html. Go to File Save. Each time
we add to the page, or preview the page---repeat the save process.
We will be using this notepad document to write code for copying and pasting into Quia. It will also serve as your
template document when you leave. If we set it up correctly---you should only have to change text and graphics
within the code---not the code itself.
Document Styles
Next you will modify the code below to set up 6 different styles for your document. We will then copy and paste
this code to the top of the notepad document and it will apply the formatting to any text you add to the document.
You can change the look of the text styles by editing the red options below.
Let’s practice.
Deciding on Your Personal Document Styles:
These heading styles set up font information.
You will copy and paste your modifications to notepad for transferring to your Quia page
They are labeled H1-H6 and go from largest font to smallest.
Set up 6 styles that you might want to use in your page. The red words and numbers indicate the options
you change. Change them in this document so you can see the color red and notice what to change.
Remember---we will later copy and paste them into notepad.
Quia Html Handout By June Jones PDA 2008
1
Quia Advanced Handout 1 HTML Editing in Quia
<STYLE TYPE="text/css">
<!-H1
{ font-family: 'Comic Sans MS';
color:purple;
font-size:24pt;
font-style:bold;}
-->
</STYLE>
<html>
<H1> This code will produce text that looks like
this. </H1>
Here is what you can change:
font style: normal, italic, bold
font sizes: from 72- 10 (there are 72 points in an inch---so size 72 will result in inch high letters)
color: red, navy, purple, green, etc. (other colors are available at http://plantphys.info/demo/Colors.html )
Customize Your Style Options Now Following the Directions on the Next Page
<STYLE TYPE="text/css">
<!-<STYLE TYPE="text/css">
<!-H1
{ font-family: 'Comic Sans MS';
H4
color:purple;
{ font-family: 'Comic Sans MS';
font-size:24pt;
color:navy;
font-style:bold;}
font-size:16pt;
-->
font-style:normal;}
</STYLE>
-->
</STYLE>
<STYLE TYPE="text/css">
<STYLE TYPE="text/css">
<!-<!-H2
H5
{ font-family: 'Comic Sans MS';
{ font-family: 'Arial';
color:red;
color:pink;
font-size:20pt;
font-size:14pt;
font-style:bold;}
font-style:bold;}
-->
-->
</STYLE>
</STYLE>
<STYLE TYPE="text/css">
<!-H3
{ font-family: 'Comic Sans MS';
color:green;
font-size:18pt;
font-style:italic;}
-->
</STYLE>
Quia Html Handout By June Jones PDA 2008
<STYLE TYPE="text/css">
<!-H6
{ font-family: 'Georgia';
color:black;
font-size:12pt;
font-style:normal;}
-->
</STYLE>
2
Quia Advanced Handout 1 HTML Editing in Quia
Instructions:
1. Change the red options using the choices in the box on the previous page.
2. Save this document.
3. Using the shift-click method, click at the beginning of the first style. Scroll to the end of the last style.
Hold down shift and click.
4. Use ctrl+c to copy.
5. Use alt+tab to switch to the notepad document. Use ctrl+v to paste.
6. Save and alt+tab back to the Word document.
Aligning Text on the Page
Here is the code for centering text on the page. The options in red are the ones that can be altered. Green indicates
where to type text between the code.
<H1 align=center>Welcome to the 2008-09 School Year</h1 align=center>
<H1 align=left> Welcome to the 2008-09 School Year </h1 align=left>
<H1 align=right> Welcome to the 2008-09 School Year </h1 align=right>
Heading style: H1- H6
Here is what you can change:
Alignment: left, right, center
Centering Instructions:
<H1 align=center> Welcome to the 2008-09 School Year </h1 align=center>
1.
2.
3.
4.
5.
Highlight the code and press Ctrl+ c to copy
Alt+tab to switch to notepad
Ctrl+v to paste it under the styles
Save it and Alt+tab to switch to the open folder with the notepad icon and the folder called schoolpage.
Double click the page you saved (look for the blue E and the page name you chose) and your page will
display in Internet Explorer.
6. Congratulations!!! You have used HTML code to create a page.
Paragraph Breaks
<P> starts a new paragraph – you do not need an end paragraph code
Instructions:
Change the text, alignment and heading below. Note the <P>. Copy and paste the code into notepad. Press enter
and make a new <P> to create a new paragraph. Save. Alt+tab to the notepad icon. View your page and note the
changes.
<P><H1 align=left>My name is _____</h1 align=left>
Adding Graphics
<DIV ALIGN=CENTER> <the quia picture code goes here border=3 width=150 height=107></div>
Notice the file name is in red. You can add a border—the higher the number—the thicker the border. You can
change the dimensions by increasing the numbers to make the dimensions of the graphic larger.
Quia Html Handout By June Jones PDA 2008
3
