W3 Schools Tryit Editor v1.4 - Fun Stuff! Really!
I was thinking about all the things I wanted to learn about HTML. W3 Schools Tryit Editor v1.4 is great for that. It gives you basic code which you can then play around with and edit. After you have what you think will amount to something, you simply click the “Edit text and click me button” to see how you did.
Skimmed fairly simple things and selected a number of tutorials relating to things I wanted to learn or things I thought would be useful for the creation of a website.
Tried caps - no changes to the text. Added a 'b' tag next to the paragraph text.(Also figured out I can't use the <> when I use examples because Blogger reads them as tage too! How to get around this? hmmm...). Anyway when I added the 'b' tage I got the following:
Here is something handy, the 'br' tag. It breaks the text into lines. Excellent if you need to fit something into a small space or copy down a few lines of poetry. I created this awful little piece while practicing:
The snow
is absent
but it is Christmas.
Who cares?
not the people who have to drive.
Headings - It was fairly easy to figure out that the heading number dictated the size of the heading’s text in relation to the other heading numbers. So, the lower the heading number the larger the text. This would be good for titles and subtitles throughout a large text document. If I wanted a heading further down in the text to be larger, I just had to make the tag correspond with another heading tag which was the appropriate size.
Some thoughts on posting this stuff -people probably won’t care about my learning curve ( or is it a straight vertical line upward?) But I will give a plug for the W3 Schools Tryit Editor v1.4 because they are so easy to use and you can always refer back if you need them. Plus they are free!
Skimmed fairly simple things and selected a number of tutorials relating to things I wanted to learn or things I thought would be useful for the creation of a website.
Tried caps - no changes to the text. Added a 'b' tag next to the paragraph text.(Also figured out I can't use the <> when I use examples because Blogger reads them as tage too! How to get around this? hmmm...). Anyway when I added the 'b' tage I got the following:
I WILL WRITE IN CAPS AND SEE WHAT HAPPENS.
WHAT IF I BOLD IT?
This is a paragraph.
Paragraph elements are defined by the p tag.
Hmm - forgot to close the 'b' tag and everything after it was bolded, not just the line I wanted. Okay, lesson learned.
Here is something handy, the 'br' tag. It breaks the text into lines. Excellent if you need to fit something into a small space or copy down a few lines of poetry. I created this awful little piece while practicing:
The snow
is absent
but it is Christmas.
Who cares?
not the people who have to drive.
Headings - It was fairly easy to figure out that the heading number dictated the size of the heading’s text in relation to the other heading numbers. So, the lower the heading number the larger the text. This would be good for titles and subtitles throughout a large text document. If I wanted a heading further down in the text to be larger, I just had to make the tag correspond with another heading tag which was the appropriate size.
Number 1
Number 2
Number 3
Number 4
Some thoughts on posting this stuff -people probably won’t care about my learning curve ( or is it a straight vertical line upward?) But I will give a plug for the W3 Schools Tryit Editor v1.4 because they are so easy to use and you can always refer back if you need them. Plus they are free!
posted by Kelly Lewis | 2:50 PM
7 Comments:
Kelly, I care about your learning curve! I think that we should often be more open about the ways we learn things - about our respective learning curves. I am at the same stage in learning HTML as you are, it seems, and it's really useful for me to read your post! We need to foster conversation about how we're learning, and there's no better way to do that than to make the whole process visible. I think it's fabulous.
I couldn't get the tryit editor to work offline so I wrote something similar that seems to work great offline and I wanted to share it to see if anyone else liked it, here is the code.
<html>
<head>
<title>TryMe Code Edit</title>
<style type="text/css">
body {
background-Color: #0066aa;
margin-top: 3px;}
textarea {
Border-Top-Color: #0000dd;
Border-Bottom-Color: #00aadd;
Border-Left-Color: #0000dd;
Border-Right-Color: #00aadd;
Border-Top-Style: Solid;
Border-Bottom-Style: Solid;
Border-Left-Style: Solid;
Border-Right-Style: Solid;
Border-Top-width: 3px;
Border-Bottom-width: 4px;
Border-Left-width: 3px;
Border-Right-width: 4px;
Padding: 0px;}
html {
overflow: hidden;
Border-Top-Color: #00aadd;
Border-Bottom-Color: #0000dd;
Border-Left-Color: #00aadd;
Border-Right-Color: #0000dd;
Border-Top-Style: Solid;
Border-Bottom-Style: Solid;
Border-Left-Style: Solid;
Border-Right-Style: Solid;
Border-Top-width: 4px;
Border-Bottom-width: 3px;
Border-Left-width: 4px;
Border-Right-width: 3px;
Padding: 0px;}
.viewer {
Border-Top-Color: #0000dd;
Border-Bottom-Color: #00aadd;
Border-Left-Color: #0000dd;
Border-Right-Color: #00aadd;
Border-Top-Style: solid;
Border-Bottom-Style: solid;
Border-Left-Style: solid;
Border-Right-Style: solid;
Border-Top-width: 3px;
Border-Bottom-width: 4px;
Border-Left-width: 3px;
Border-Right-width: 4px;
Padding: 0px;}
</style>
</head>
<body>
<table Border="0" width="100%" border="0" cellpadding="5" cellspacing="0">
<tr>
<td colspan="2">
<input name="submit" type="submit" value="Edit the text and click" onclick="display()">
<input name="submit" type="submit" value="New Window" onclick="open_new()">
</td>
</tr>
<tr>
<td>
<TextArea width="470px" height="450px" style="width:470px;height:450px;overflow:auto;" id="code" wrap="logical" rows="21" cols="42">
</TextArea>
</td>
<td>
<iframe FrameBorder="0" width="470px" height="450px" Class="viewer" style="width:470px;height:450px;background-color:ffffff;" name="view" src="about:Blank"></iframe>
</td>
</tr>
</table>
<Script type="text/javascript">
function display()
{
var result = window.open('about:Blank','view','');
var tmp = result.document;
tmp.write(document.getElementById('code').value);
tmp.close();
return false;
}
{
display()
}
function open_new()
{
var result = window.open('about:Blank','','toolbar=yes, location=yes, directories=yes, status=yes, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes');
var tmp = result.document;
tmp.write(document.getElementById('code').value);
tmp.close();
return false;
}
</Script>
</body>
</html>
hey john...thanks mate. i was looking for exactly such a thing. no other site have i noticed that gives such an explicit code. thanks man. thanks a lot.
Source code Tryit editor
http://www.mediafire.com/?racm24zyzy5
Copyright : John and W3schools creators
this is much better: thegameweb.webs.com/tryit or download it from code.google.com/p/tryiteditor
John try it editor code is useful.I am not able to find it on any other web site on the net.Thanks John
Sky Bet offer a £10 no deposit required skybet free bet. Sign up to Sky Bet and receive £10 credited to your account instantly using promo code BET10.
Post a Comment
<< Home