If you are interested in what I write, you should go to Sandcurves.com I am not going to add to this blog here for the time being. I will not take away what is already written.
Happy 2010
Thursday, December 31, 2009
Tuesday, October 20, 2009
Tic-TacToe game with JavaScript
I just created a little html game using just plain JavaScript. I don't really want to play the game, so I though why not pass it on, maybe some reader will enjoy it or put it on their own website.
Please note that this may not be the best way to program the game. I am sure that their are shortcuts to iterate more effectively through things. This was basically just a result of to much coffee and not sleeping rather than a serious effort to create a clean game.
So if you are a JavaScript master, and would like to clean it up, please feel free, and send it back to me.
Also note that it was done for Firefox, and though I think for the most part I have stuck with cross browser compatible JavaScript, if I haven't done it fully, let me know and some other non sleeping night I will clean it up a bit.
BTW this is by far the most effective way to learn how to use a computer language (perhaps even a regular language)...play with it. Think of programming/scripting as lego blocks for your computer.
Anyway, Enjoy ;~)
NOTE, since posting it I noticed there are still some errors. If you are keen, see if you can find them. I also uploaded the game to a website just for kicks - http://www.sandcurves.com/tictactoe.htm
<html><head><title>Tic-Tac-Toe</title>
<style type="text/css">
body{
margin:50px 200px 0 200px;
background-color:gray;
}
h1{
color:white;
font-size:200%;
}
p{
color:#cccccc;
font-size:200%;
font-weight:700;
}
input{
background-color:#dddddd;
border:none;
width:inherit;
text-align:center;
font-size:400%;
color:white;
font-weight:800;
}
input[type=reset]{
background-color:gray;
border:1px solid #cccccc;
font-size:150%;
cursor:pointer;
margin-top:50px;
padding:7px;
}
td{
text-align:center;
background-color:#dddddd;
border:gray 4px solid;
width:100px;
height:100px;
}
</style>
<script type="text/javascript">
var playeR = "First";
var zed = 0;
function startOff(){
document.getElementById('whichplayer').innerHTML = playeR;
document.minIn.t1v.value = "";
document.minIn.t2v.value = "";
document.minIn.t3v.value = "";
document.minIn.m1v.value = "";
document.minIn.m2v.value = "";
document.minIn.m3v.value = "";
document.minIn.b1v.value = "";
document.minIn.b2v.value = "";
document.minIn.b3v.value = "";
}
function nextMove(a){
if (playeR == "First"){
playeR = "Second";
var marK = "X";
}
else {
playeR = "First";
var marK = "O";
}
document.getElementById('whichplayer').innerHTML = playeR;
switch (a){
case ('t1'):document.minIn.t1v.value = marK;break;
case ('t2'):document.minIn.t2v.value = marK;break;
case ('t3'):document.minIn.t3v.value = marK;break;
case ('m1'):document.minIn.m1v.value = marK;break;
case ('m2'):document.minIn.m2v.value = marK;break;
case ('m3'):document.minIn.m3v.value = marK;break;
case ('b1'):document.minIn.b1v.value = marK;break;
case ('b2'):document.minIn.b2v.value = marK;break;
case ('b3'):document.minIn.b3v.value = marK;break;
}
var checka = document.minIn.t1v.value;
var checkb = document.minIn.t2v.value;
var checkc = document.minIn.t3v.value;
var checkd = document.minIn.m1v.value;
var checke = document.minIn.m2v.value;
var checkf = document.minIn.m3v.value;
var checkg = document.minIn.b1v.value;
var checkh = document.minIn.b2v.value;
var checki = document.minIn.b3v.value;
if((checka == checkb) && (checkb == checkc)){
if (checka != "" || 0){zed = 1;}
else{ zed = 0; }
}
else if((checkd == checke) && (checke == checkf)){
if (checkd != "" || 0){zed = 1;}
else{ zed = 0; }
}
else if((checkg == checkh) && (checkh == checki)){
if (checkg != "" || 0){zed = 1;}
else{ zed = 0; }
}
else if((checka == checkd) && (checkd == checkg)){
if (checka != "" || 0){zed = 1;}
else{ zed = 0; }
}
else if((checkb == checke) && (checke == checkh)){
if (checkb != "" || 0){zed = 1;}
else{ zed = 0; }
}
else if((checkc == checkf) && (checkf == checki)){
if (checkc != "" || 0){zed = 1;}
else{ zed = 0; }
}
else if((checka == checke) && (checke == checki)){
if (checka != "" || 0){zed = 1;}
else{ zed = 0; }
}
else if((checkc == checke) && (checke == checkg)){
if (checkc != "" || 0){zed = 1;}
else{ zed = 0; }
}
else{
zed = 0;
}
if (zed == 1){
if (marK == "X"){
alert("First player wins");
}
else {
alert("Second player wins");
}
}
}
</script>
</head>
<body onload="startOff()">
<h1>Tic-Tac-Toe</h1>
<p><span id="whichplayer"></span> player</p>
<form name="minIn">
<table>
<tr>
<td id="t1"><input type="text" name="t1v" onclick="nextMove('t1')" /></td>
<td id="t2"><input type="text" name="t2v" onclick="nextMove('t2')" /></td>
<td id="t3"><input type="text" name="t3v" onclick="nextMove('t3')" /></td>
</tr>
<tr>
<td id="m1"><input type="text" name="m1v" onclick="nextMove('m1')" /></td>
<td id="m2"><input type="text" name="m2v" onclick="nextMove('m2')" /></td>
<td id="m3"><input type="text" name="m3v" onclick="nextMove('m3')" /></td>
</tr>
<tr>
<td id="b1"><input type="text" name="b1v" onclick="nextMove('b1')" /></td>
<td id="b2"><input type="text" name="b2v" onclick="nextMove('b2')" /></td>
<td id="b3"><input type="text" name="b3v" onclick="nextMove('b3')" /></td>
</tr>
</table>
<input type="reset" value="CLEAR GAME" />
</form>
</body>
</html>
Please note that this may not be the best way to program the game. I am sure that their are shortcuts to iterate more effectively through things. This was basically just a result of to much coffee and not sleeping rather than a serious effort to create a clean game.
So if you are a JavaScript master, and would like to clean it up, please feel free, and send it back to me.
Also note that it was done for Firefox, and though I think for the most part I have stuck with cross browser compatible JavaScript, if I haven't done it fully, let me know and some other non sleeping night I will clean it up a bit.
BTW this is by far the most effective way to learn how to use a computer language (perhaps even a regular language)...play with it. Think of programming/scripting as lego blocks for your computer.
Anyway, Enjoy ;~)
NOTE, since posting it I noticed there are still some errors. If you are keen, see if you can find them. I also uploaded the game to a website just for kicks - http://www.sandcurves.com/tictactoe.htm
<html><head><title>Tic-Tac-Toe</title>
<style type="text/css">
body{
margin:50px 200px 0 200px;
background-color:gray;
}
h1{
color:white;
font-size:200%;
}
p{
color:#cccccc;
font-size:200%;
font-weight:700;
}
input{
background-color:#dddddd;
border:none;
width:inherit;
text-align:center;
font-size:400%;
color:white;
font-weight:800;
}
input[type=reset]{
background-color:gray;
border:1px solid #cccccc;
font-size:150%;
cursor:pointer;
margin-top:50px;
padding:7px;
}
td{
text-align:center;
background-color:#dddddd;
border:gray 4px solid;
width:100px;
height:100px;
}
</style>
<script type="text/javascript">
var playeR = "First";
var zed = 0;
function startOff(){
document.getElementById('whichplayer').innerHTML = playeR;
document.minIn.t1v.value = "";
document.minIn.t2v.value = "";
document.minIn.t3v.value = "";
document.minIn.m1v.value = "";
document.minIn.m2v.value = "";
document.minIn.m3v.value = "";
document.minIn.b1v.value = "";
document.minIn.b2v.value = "";
document.minIn.b3v.value = "";
}
function nextMove(a){
if (playeR == "First"){
playeR = "Second";
var marK = "X";
}
else {
playeR = "First";
var marK = "O";
}
document.getElementById('whichplayer').innerHTML = playeR;
switch (a){
case ('t1'):document.minIn.t1v.value = marK;break;
case ('t2'):document.minIn.t2v.value = marK;break;
case ('t3'):document.minIn.t3v.value = marK;break;
case ('m1'):document.minIn.m1v.value = marK;break;
case ('m2'):document.minIn.m2v.value = marK;break;
case ('m3'):document.minIn.m3v.value = marK;break;
case ('b1'):document.minIn.b1v.value = marK;break;
case ('b2'):document.minIn.b2v.value = marK;break;
case ('b3'):document.minIn.b3v.value = marK;break;
}
var checka = document.minIn.t1v.value;
var checkb = document.minIn.t2v.value;
var checkc = document.minIn.t3v.value;
var checkd = document.minIn.m1v.value;
var checke = document.minIn.m2v.value;
var checkf = document.minIn.m3v.value;
var checkg = document.minIn.b1v.value;
var checkh = document.minIn.b2v.value;
var checki = document.minIn.b3v.value;
if((checka == checkb) && (checkb == checkc)){
if (checka != "" || 0){zed = 1;}
else{ zed = 0; }
}
else if((checkd == checke) && (checke == checkf)){
if (checkd != "" || 0){zed = 1;}
else{ zed = 0; }
}
else if((checkg == checkh) && (checkh == checki)){
if (checkg != "" || 0){zed = 1;}
else{ zed = 0; }
}
else if((checka == checkd) && (checkd == checkg)){
if (checka != "" || 0){zed = 1;}
else{ zed = 0; }
}
else if((checkb == checke) && (checke == checkh)){
if (checkb != "" || 0){zed = 1;}
else{ zed = 0; }
}
else if((checkc == checkf) && (checkf == checki)){
if (checkc != "" || 0){zed = 1;}
else{ zed = 0; }
}
else if((checka == checke) && (checke == checki)){
if (checka != "" || 0){zed = 1;}
else{ zed = 0; }
}
else if((checkc == checke) && (checke == checkg)){
if (checkc != "" || 0){zed = 1;}
else{ zed = 0; }
}
else{
zed = 0;
}
if (zed == 1){
if (marK == "X"){
alert("First player wins");
}
else {
alert("Second player wins");
}
}
}
</script>
</head>
<body onload="startOff()">
<h1>Tic-Tac-Toe</h1>
<p><span id="whichplayer"></span> player</p>
<form name="minIn">
<table>
<tr>
<td id="t1"><input type="text" name="t1v" onclick="nextMove('t1')" /></td>
<td id="t2"><input type="text" name="t2v" onclick="nextMove('t2')" /></td>
<td id="t3"><input type="text" name="t3v" onclick="nextMove('t3')" /></td>
</tr>
<tr>
<td id="m1"><input type="text" name="m1v" onclick="nextMove('m1')" /></td>
<td id="m2"><input type="text" name="m2v" onclick="nextMove('m2')" /></td>
<td id="m3"><input type="text" name="m3v" onclick="nextMove('m3')" /></td>
</tr>
<tr>
<td id="b1"><input type="text" name="b1v" onclick="nextMove('b1')" /></td>
<td id="b2"><input type="text" name="b2v" onclick="nextMove('b2')" /></td>
<td id="b3"><input type="text" name="b3v" onclick="nextMove('b3')" /></td>
</tr>
</table>
<input type="reset" value="CLEAR GAME" />
</form>
</body>
</html>
Wednesday, October 14, 2009
Number to Ascii Values
Hey, I thought I would just post these values. I know it's rather easy to find out, but often you need to use some of these symbols in your work, so here they are. I was just playing around with php and created a script that would print them out. I'll give the script at the end.
Number Ascii Value
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33 !
34 "
35 #
36 $
37 %
38 &
39 '
40 (
41 )
42 *
43 +
44 ,
45 -
46 .
47 /
48 0
49 1
50 2
51 3
52 4
53 5
54 6
55 7
56 8
57 9
58 :
59 ;
60 <
61 =
62 >
63 ?
64 @
65 A
66 B
67 C
68 D
69 E
70 F
71 G
72 H
73 I
74 J
75 K
76 L
77 M
78 N
79 O
80 P
81 Q
82 R
83 S
84 T
85 U
86 V
87 W
88 X
89 Y
90 Z
91 [
92 \
93 ]
94 ^
95 _
96 `
97 a
98 b
99 c
100 d
101 e
102 f
103 g
104 h
105 i
106 j
107 k
108 l
109 m
110 n
111 o
112 p
113 q
114 r
115 s
116 t
117 u
118 v
119 w
120 x
121 y
122 z
123 {
124 |
125 }
126 ~
127
128 €
129
130 ‚
131 ƒ
132 „
133 …
134 †
135 ‡
136 ˆ
137 ‰
138 Š
139 ‹
140 Œ
141
142 Ž
143
144
145 ‘
146 ’
147 “
148 ”
149 •
150 –
151 —
152 ˜
153 ™
154 š
155 ›
156 œ
157
158 ž
159 Ÿ
160
161 ¡
162 ¢
163 £
164 ¤
165 ¥
166 ¦
167 §
168 ¨
169 ©
170 ª
171 «
172 ¬
173
174 ®
175 ¯
176 °
177 ±
178 ²
179 ³
180 ´
181 µ
182 ¶
183 ·
184 ¸
185 ¹
186 º
187 »
188 ¼
189 ½
190 ¾
191 ¿
192 À
193 Á
194 Â
195 Ã
196 Ä
197 Å
198 Æ
199 Ç
200 È
201 É
202 Ê
203 Ë
204 Ì
205 Í
206 Î
207 Ï
208 Ð
209 Ñ
210 Ò
211 Ó
212 Ô
213 Õ
214 Ö
215 ×
216 Ø
217 Ù
218 Ú
219 Û
220 Ü
221 Ý
222 Þ
223 ß
224 à
225 á
226 â
227 ã
228 ä
229 å
230 æ
231 ç
232 è
233 é
234 ê
235 ë
236 ì
237 í
238 î
239 ï
240 ð
241 ñ
242 ò
243 ó
244 ô
245 õ
246 ö
247 ÷
248 ø
249 ù
250 ú
251 û
252 ü
253 ý
254 þ
255 ÿ
Very easy php script for generating a table withe the ascii values.
The magic is in the chr() function. If you know php you would know that you could jump out of the php and just draw the table in html, but that seems like more work in this situation.
If you don't know php, you do need a server installed to run it. I will cover some of that stuff later in this blog. For now, just a little script for kicks.
<?php
print "<table><tr><th>Number</th><th>Ascii Value</th></tr>";
for ($x=0;$x<256;$x++){
print "<tr>";
$valAscii = chr($x);
print "<td>$x</td><td>$valAscii</td>";
print "</tr>";
}
print "</table>";
?>
Number Ascii Value
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33 !
34 "
35 #
36 $
37 %
38 &
39 '
40 (
41 )
42 *
43 +
44 ,
45 -
46 .
47 /
48 0
49 1
50 2
51 3
52 4
53 5
54 6
55 7
56 8
57 9
58 :
59 ;
60 <
61 =
62 >
63 ?
64 @
65 A
66 B
67 C
68 D
69 E
70 F
71 G
72 H
73 I
74 J
75 K
76 L
77 M
78 N
79 O
80 P
81 Q
82 R
83 S
84 T
85 U
86 V
87 W
88 X
89 Y
90 Z
91 [
92 \
93 ]
94 ^
95 _
96 `
97 a
98 b
99 c
100 d
101 e
102 f
103 g
104 h
105 i
106 j
107 k
108 l
109 m
110 n
111 o
112 p
113 q
114 r
115 s
116 t
117 u
118 v
119 w
120 x
121 y
122 z
123 {
124 |
125 }
126 ~
127
128 €
129
130 ‚
131 ƒ
132 „
133 …
134 †
135 ‡
136 ˆ
137 ‰
138 Š
139 ‹
140 Œ
141
142 Ž
143
144
145 ‘
146 ’
147 “
148 ”
149 •
150 –
151 —
152 ˜
153 ™
154 š
155 ›
156 œ
157
158 ž
159 Ÿ
160
161 ¡
162 ¢
163 £
164 ¤
165 ¥
166 ¦
167 §
168 ¨
169 ©
170 ª
171 «
172 ¬
173
174 ®
175 ¯
176 °
177 ±
178 ²
179 ³
180 ´
181 µ
182 ¶
183 ·
184 ¸
185 ¹
186 º
187 »
188 ¼
189 ½
190 ¾
191 ¿
192 À
193 Á
194 Â
195 Ã
196 Ä
197 Å
198 Æ
199 Ç
200 È
201 É
202 Ê
203 Ë
204 Ì
205 Í
206 Î
207 Ï
208 Ð
209 Ñ
210 Ò
211 Ó
212 Ô
213 Õ
214 Ö
215 ×
216 Ø
217 Ù
218 Ú
219 Û
220 Ü
221 Ý
222 Þ
223 ß
224 à
225 á
226 â
227 ã
228 ä
229 å
230 æ
231 ç
232 è
233 é
234 ê
235 ë
236 ì
237 í
238 î
239 ï
240 ð
241 ñ
242 ò
243 ó
244 ô
245 õ
246 ö
247 ÷
248 ø
249 ù
250 ú
251 û
252 ü
253 ý
254 þ
255 ÿ
Very easy php script for generating a table withe the ascii values.
The magic is in the chr() function. If you know php you would know that you could jump out of the php and just draw the table in html, but that seems like more work in this situation.
If you don't know php, you do need a server installed to run it. I will cover some of that stuff later in this blog. For now, just a little script for kicks.
<?php
print "<table><tr><th>Number</th><th>Ascii Value</th></tr>";
for ($x=0;$x<256;$x++){
print "<tr>";
$valAscii = chr($x);
print "<td>$x</td><td>$valAscii</td>";
print "</tr>";
}
print "</table>";
?>
Friday, October 9, 2009
Tutorial and Guidelines for creating a custom Twitter Background
This post is a reply to a request from a good friend of mine Shem for help on designing a custom Twitter Background. As a serious professional wildlife photographer, Shem is interested in creating a very professional twitter background to reflect his work.
Why should you bother with a customized background image for twitter? Don't most people manage their twitter accounts with programs like TweetDeck and so on? Yes, but still, if someone clicks your "Follow Me on Twitter" link, they will land on that page. So you want to make a good impression if you want followers.
This guideline is a simple step by step way of doing it. Note, I am doing this on Ubuntu Linux and the tools I use may not be what you have, but none of them are hard to get by, basically I just use a browser, a screenshot thingi (to take a picture of your screen), and a graphics editor.
Before we get started, have a look at some of the amazing twitter backgrounds that people have produced. I will show you a step by step way of doing it, but I can't tell you how to make it artistically outstanding, that's up to you. Take a look at this link: http://twitterbackgroundsgallery.com/
1. Open your twitter account as it is now.
2. Okay, the biggest challenge with your twitter background is the fact that it sits behind your main twitter screen, and only overlaps on the sides. This means that you want your most improtant information to stick out of the sides. In order to make sure that even people with really small screens are getting this, first resize your screen to about 1024 width and 768 height. If you don't know how to do this, there is one rather simple way, just use Javascript.
Hit enter and you should have a really small screen.
3. Now use a screenshot tool to take a screenshot of your twitter page in this small resolution.
4. Open your favorite Graphics Editor program. You want to make sure that the program you use allows you to use layers, so most lightweight programs will not do. I use Gimp, which is a very good open source graphics editor. If you don't have Adobe Photoshop or something in that league, I recommend that you download Gimp
5. I am going to carry on with the explanation in Gimp, but I am sure that you will figure out how to do it in your own program. Create a new image. It doesn't matter if you set the background to white or transparent. Create a picture that is 1280px times 1024px (px being Pixils)
6. Now comes the more tricky part. You need to go 'open as layer' or whatever the equivalent is in photoshop, and select the screenshot of your twitter account on the smaller screen, and open it.
7. Use the 'align' tool to set the twitter image to the top left side. It should look something like the image below.
8. Okay, the only real reason for having the upper image is to show us what area we have for our text. So, staying in this layer, use a 'rectangular select' tool and select the area on the left of the main twitter content. This is where you want to write your stuff.
I am not sure how clear this screen shot is to you, but the area left of the white is selected as a rectangular section. You can see that I didn't select right up to the top, that's your choice. But basically this is the area that even on a small screen is not going to get run over by the main twitter content.
9. Create a new layer. In gimp you will still maintain the selection in the new layer.
10. Now, you probably don't want to maintain the selected area, so a simple thing to do is to simply go "Select" and click "invert selection" Now use your fill tool and color the remaining area into one solid color. This color doesn't matter...it's not going to be your background. It is simply there to show you the remaining space that you have to work with.
11. Go to your "layers" dialog box and make the old twitter layer invisible.
15. With this 'background' layer selected you can either put an image in there or simply create a fill with colors. Anything you want. Take a two things into consideration
a. Does it not wash out the dialog created in the other layer.
b. Make sure that it is an image that doesn't matter if a little of it is chopped off, because of the way that gimp resizes on different size screens. Blue sky, open water, or stuff like that. Color and texture.
16. Now it really depends on how your system works, but the best way to do it is to select the layer that had the origional picture you took of your Twitter page and, once you have selected it, go to "layers" and press 'delete layer'.
17. Now click on the top layer again, and go to 'layers' again and press 'merge down' until your whole image is flattened. This is not always necicary, but remember you want this to be on the internet, so you dont' want to keep to much data in the image (in other words, make is smaller in file size).
18. Now Twitter is only going to give you an image size of 800k. You may need to play around a bit to get that right. On Gimp you can go to the Image properties and check it out.
19. Save As, choose your name and file type. I think that with jpg you get the file size you need more easily.
20. Go back to your twitter account. Click on "Settings" and then "Design" Go down to the bottom of that page and click the "Change Background Image"
21. Easy from here. Click 'Browse', find the image on your hard drive and click ''save changes".
22. Now have a look at what it looks like when it uploads. Can you read the text, how does it scrole. Go back an make changes and upload again until you are happy.
23. Go to the 'change colors' settings and change the colors as needed to match your background. You may want to copy and paste the html color values from Gimp in order to get the color values spot on.
[You can see what I came up with after playing around a bit. I used a picture of an old dune. I played around with text sizes and colors until I got something people can read when they hit on my page.
Well, thats how I had done it. Anyone with tips or ideas to share, please feel free. I hope it works for you.
If you are looking for similar tutorials, you may be interested in one of these:
Hide Your Blogger/Blogspot Navbar - Fun blogger hack
Auto-update Your Websites Copyright Dates Each Year - Be a pro
Create And Add A Favicon To Your Website - Easy fun way to improve your website's look
Make Your Main Body Wider In Blogger - With increasing use of wider screens for computers, you may want more space to add your main blog content
Why should you bother with a customized background image for twitter? Don't most people manage their twitter accounts with programs like TweetDeck and so on? Yes, but still, if someone clicks your "Follow Me on Twitter" link, they will land on that page. So you want to make a good impression if you want followers.
[By the way, I just drew this little Twitter bird on Gimp. I think it's an okayish Twitter bird. If you want to use it, go ahead, just give me a link from your blog, follow me on Twitter, or buy me a cup of coffee one day. I believe it is a African Scops Owl crossed with a cross between an Angolan Pitta and Crimson Breasted Shrike. I see those all those time :) ]
[Okay, sorry for the distraction, lets get back to the serious busyness of producing a fine Twitter Background Image]
This guideline is a simple step by step way of doing it. Note, I am doing this on Ubuntu Linux and the tools I use may not be what you have, but none of them are hard to get by, basically I just use a browser, a screenshot thingi (to take a picture of your screen), and a graphics editor.
Before we get started, have a look at some of the amazing twitter backgrounds that people have produced. I will show you a step by step way of doing it, but I can't tell you how to make it artistically outstanding, that's up to you. Take a look at this link: http://twitterbackgroundsgallery.com/
1. Open your twitter account as it is now.
2. Okay, the biggest challenge with your twitter background is the fact that it sits behind your main twitter screen, and only overlaps on the sides. This means that you want your most improtant information to stick out of the sides. In order to make sure that even people with really small screens are getting this, first resize your screen to about 1024 width and 768 height. If you don't know how to do this, there is one rather simple way, just use Javascript.
Here is the majic: Just type this little line in your navigation bar at the top of your screen: javascript:window.resizeTo(1024,768)
Hit enter and you should have a really small screen.
3. Now use a screenshot tool to take a screenshot of your twitter page in this small resolution.
4. Open your favorite Graphics Editor program. You want to make sure that the program you use allows you to use layers, so most lightweight programs will not do. I use Gimp, which is a very good open source graphics editor. If you don't have Adobe Photoshop or something in that league, I recommend that you download Gimp
5. I am going to carry on with the explanation in Gimp, but I am sure that you will figure out how to do it in your own program. Create a new image. It doesn't matter if you set the background to white or transparent. Create a picture that is 1280px times 1024px (px being Pixils)
6. Now comes the more tricky part. You need to go 'open as layer' or whatever the equivalent is in photoshop, and select the screenshot of your twitter account on the smaller screen, and open it.
7. Use the 'align' tool to set the twitter image to the top left side. It should look something like the image below.
8. Okay, the only real reason for having the upper image is to show us what area we have for our text. So, staying in this layer, use a 'rectangular select' tool and select the area on the left of the main twitter content. This is where you want to write your stuff.
9. Create a new layer. In gimp you will still maintain the selection in the new layer.
10. Now, you probably don't want to maintain the selected area, so a simple thing to do is to simply go "Select" and click "invert selection" Now use your fill tool and color the remaining area into one solid color. This color doesn't matter...it's not going to be your background. It is simply there to show you the remaining space that you have to work with.
11. Go to your "layers" dialog box and make the old twitter layer invisible.
12. Now you can work in the white layer doing whatever you want. You may want your name, blog url, a bit about yourself or just some pictures. Be creative. Keep in mind roughly how big that space is going to be after you are done. Also keep in mind that you don't want to fill the background, because you will still be putting a picture or a background fill behind it.
[More bird drawing inspiration, and this time it really does have Angolan Pitta in it somewhere.]
13. Once you have it as you want it on that space, take the fuzzy select tool and select the black space. Press delete.
14. Now go on the 'layers' dialog box and select the original background layer.
15. With this 'background' layer selected you can either put an image in there or simply create a fill with colors. Anything you want. Take a two things into consideration
a. Does it not wash out the dialog created in the other layer.
b. Make sure that it is an image that doesn't matter if a little of it is chopped off, because of the way that gimp resizes on different size screens. Blue sky, open water, or stuff like that. Color and texture.
16. Now it really depends on how your system works, but the best way to do it is to select the layer that had the origional picture you took of your Twitter page and, once you have selected it, go to "layers" and press 'delete layer'.
17. Now click on the top layer again, and go to 'layers' again and press 'merge down' until your whole image is flattened. This is not always necicary, but remember you want this to be on the internet, so you dont' want to keep to much data in the image (in other words, make is smaller in file size).
18. Now Twitter is only going to give you an image size of 800k. You may need to play around a bit to get that right. On Gimp you can go to the Image properties and check it out.
19. Save As, choose your name and file type. I think that with jpg you get the file size you need more easily.
20. Go back to your twitter account. Click on "Settings" and then "Design" Go down to the bottom of that page and click the "Change Background Image"
21. Easy from here. Click 'Browse', find the image on your hard drive and click ''save changes".
22. Now have a look at what it looks like when it uploads. Can you read the text, how does it scrole. Go back an make changes and upload again until you are happy.
23. Go to the 'change colors' settings and change the colors as needed to match your background. You may want to copy and paste the html color values from Gimp in order to get the color values spot on.
[You can see what I came up with after playing around a bit. I used a picture of an old dune. I played around with text sizes and colors until I got something people can read when they hit on my page.
Well, thats how I had done it. Anyone with tips or ideas to share, please feel free. I hope it works for you.
If you are looking for similar tutorials, you may be interested in one of these:
Hide Your Blogger/Blogspot Navbar - Fun blogger hack
Auto-update Your Websites Copyright Dates Each Year - Be a pro
Create And Add A Favicon To Your Website - Easy fun way to improve your website's look
Make Your Main Body Wider In Blogger - With increasing use of wider screens for computers, you may want more space to add your main blog content
Thursday, October 8, 2009
Auto Update Your WebsiteS Copyright Notice Each Year With PHP
If you are like me the years do sometimes just slip by. Visit family you don't see often and you know what I am talking about...the little toddlers and teenagers, that kind of stuff.
But this isn't about philosophy or self help. We have a much easier problem to fix. The dates on your copyright at the bottom of your page.
All it is going to take is just a super simple little script, but in my opinion it is useful and makes a real difference in how professional a website appears to be.
I am sure you see it often. Small business or personal home pages, very often, but sometimes you even find the website of quiet large companies with outdated copyright notices. - Example 1 - and - Example 2 -
Okay, if you have php installed on your server, this is going to be ridiculously easy, but so useful down the line. I will just cover this in a quick manner:
First off, whatever your html page, you need to save the page as a .php page instead of html. If you have links to the page already, make sure that you update them to .php instead of .html or .htm.
Changing that does nothing else to your page as it is already, it just means that you can now embed the php scripts into the page.
Okay, here is the script -
You can simply copy andpaste this into your page where you need it, but I will explain it below:
1. the <?php opens the php code and the ?> closes it. Whatever you write in there is php script.
2. We get the year from the date() function, and by putting the capital 'Y' all we get is the year. So that assigns the current year to the variable called $thisYr. Note that capitalization is important and shouldn't be changed, otherwise you will have trouble with the script.
3. The 'if {} else {}' code blocks are easy to understand. If it is this year, print the one thing, if it isn't print the other. You can change the date to whatever your beginning year is for the copyright.
4. The '©' bit is written like this, but the html page will render it like this '©' It is just the unicode symbols for the little copyright icon.
And that's basically it. You can extend it a little by putting hypertext to the copyright to a link that defines your copyright terms, such as, perhaps, a use and share and backlink or something like that.
If you are creative enough, you may think of other uses for such a simple script. It is one of the wonderful things about these types of scripting languages...small bits of code do really cool things.
But this isn't about philosophy or self help. We have a much easier problem to fix. The dates on your copyright at the bottom of your page.
All it is going to take is just a super simple little script, but in my opinion it is useful and makes a real difference in how professional a website appears to be.
I am sure you see it often. Small business or personal home pages, very often, but sometimes you even find the website of quiet large companies with outdated copyright notices. - Example 1 - and - Example 2 -
Okay, if you have php installed on your server, this is going to be ridiculously easy, but so useful down the line. I will just cover this in a quick manner:
First off, whatever your html page, you need to save the page as a .php page instead of html. If you have links to the page already, make sure that you update them to .php instead of .html or .htm.
Changing that does nothing else to your page as it is already, it just means that you can now embed the php scripts into the page.
Okay, here is the script -
<?php
$thisYr = date("Y");
if ($thisYr > 2009){
print "<br/>copyright © 2009-" . $thisYr;
}
else {print "<br/>copyright © 2009";}
?>
$thisYr = date("Y");
if ($thisYr > 2009){
print "<br/>copyright © 2009-" . $thisYr;
}
else {print "<br/>copyright © 2009";}
?>
You can simply copy andpaste this into your page where you need it, but I will explain it below:
1. the <?php opens the php code and the ?> closes it. Whatever you write in there is php script.
2. We get the year from the date() function, and by putting the capital 'Y' all we get is the year. So that assigns the current year to the variable called $thisYr. Note that capitalization is important and shouldn't be changed, otherwise you will have trouble with the script.
3. The 'if {} else {}' code blocks are easy to understand. If it is this year, print the one thing, if it isn't print the other. You can change the date to whatever your beginning year is for the copyright.
4. The '©' bit is written like this, but the html page will render it like this '©' It is just the unicode symbols for the little copyright icon.
And that's basically it. You can extend it a little by putting hypertext to the copyright to a link that defines your copyright terms, such as, perhaps, a use and share and backlink or something like that.
If you are creative enough, you may think of other uses for such a simple script. It is one of the wonderful things about these types of scripting languages...small bits of code do really cool things.
Monday, October 5, 2009
Non NERD HTML 9 - FORMS
In the last two tutorials we covered lists and tables. Forms follow naturally on from there.
If you have followed along so far, you should be having a lot of fun? We covered the basics of how the page is structured, threw in Favicons for fun, added links and images, and then gave it structure with lists and tables.
So far, though, the only thing that has given your pages any difference from text on a peace of paper has been links, right? Your readers haven't had much to do while they were on your site.
To give them power is in the realm of JavaScript and other scripting languages. The main way that HTML gives your visitors this power of interacting with your website as a program is through forms.
Forms sound rather boring, but in the world of the World Wide Web, forms can let you do a lot of things, and not really appear to be forms.
The problem with forms is that you need scripts to deal with them. It's not tricky, it's just outside the capability of HTML. So I am going to get you started here, but we will visit forms in great detail later when we are working with php.
Form input types:
Some info:
*NOTE* If you don't remember all the others for now, don't worry to much, but try to remember this one. It is the one you are going to use most often.
The 'file' attribute is used when you want your users to load files, such as a photo sharing site like Flickr might have to let users upload their images to the website.
There is another one called 'hidden'. Don't worry about it...it doesn't mean much to us without scripting, so we'll leave it out for now.
Type in the password box...you can see what happens.
The last two are basically for dealing with the form. The Reset button is a courtesy to your users, especially if you have lots of radio or check box buttons. If they messed up, they can 'reset' the form and start over. The 'Submit' button tells the browser that the form is done and can now be sent off.
There is a totally different one. All the above tags fall as attributes of the 'input' tag. But there is one that has it's own tag, and that is 'textarea'
The 'textarea' tag is written totally different. If you look at the code above you will see that two major differences. The one is that the input tags are not closed. Instead we just add a little '/' backslash to the end of them (have a look). The other is that instead of a 'value' attribute, we add the text between the opening and closing tags.
That will be the topic of the next post...the actual structure of html. Just remember it for now.
Okay, lets talk about a couple other aspects. When we make a form, we are going to enclose it in <form> tags. These 'form' tags allow you to say what you want to do with the form.
Now, forms can be really useful, but for now lets just cover the basics.
In the 'form' tag at the top you have two attributes that are typically used with Forms. The first is the 'action' attribute. The action is simply were will we go when the form is submitted. You may simply re-load the current page, but a script in the page detects that there is a variable and accepts this information and does with it whatever it was told to. It may be emailed back to us, it may send them a confirmation email. It may be an automated ordering system. There are many possibilities. A blog post or post on a social media site. Upload pictures. So much of what you do on the web today is done through forms and the scripts behind them.
Aside from the 'action' attribute, there is another that is typically found in the opening 'form' tag, the method. Now again, this isn't going to mean that much to you yet, but will mean a lot when we start scripting. Stick with these tutorials and you will get the power.
Alright, we are almost done with this html tutorial The next section will cover the way the mark up works and include a few new things. After that we will move on to CSS, where we will keep learning some aspects of html as well.
If you have followed along so far, you should be having a lot of fun? We covered the basics of how the page is structured, threw in Favicons for fun, added links and images, and then gave it structure with lists and tables.
So far, though, the only thing that has given your pages any difference from text on a peace of paper has been links, right? Your readers haven't had much to do while they were on your site.
To give them power is in the realm of JavaScript and other scripting languages. The main way that HTML gives your visitors this power of interacting with your website as a program is through forms.
Forms sound rather boring, but in the world of the World Wide Web, forms can let you do a lot of things, and not really appear to be forms.
The problem with forms is that you need scripts to deal with them. It's not tricky, it's just outside the capability of HTML. So I am going to get you started here, but we will visit forms in great detail later when we are working with php.
Form input types:
| Name | The mark-up | How it looks |
|---|---|---|
| Text *NOTE* | <input type="text" name="x" value="Text..." /> | |
| Button | <input type="button" name="x" value="button" /> | |
| Checkbox | <input type="checkbox" name="x" /> | |
| File | <input type="file" name="x" /> | |
| Password | <input type="password" name="x" /> | |
| Radio | <input type="radio" name="x" /> | |
| Reset | <input type="reset" name="x" value="Reset the Form" /> | |
| Submit | <input type="text" name="x" value="Text..." /> |
Some info:
*NOTE* If you don't remember all the others for now, don't worry to much, but try to remember this one. It is the one you are going to use most often.
The 'file' attribute is used when you want your users to load files, such as a photo sharing site like Flickr might have to let users upload their images to the website.
There is another one called 'hidden'. Don't worry about it...it doesn't mean much to us without scripting, so we'll leave it out for now.
Type in the password box...you can see what happens.
The last two are basically for dealing with the form. The Reset button is a courtesy to your users, especially if you have lots of radio or check box buttons. If they messed up, they can 'reset' the form and start over. The 'Submit' button tells the browser that the form is done and can now be sent off.
There is a totally different one. All the above tags fall as attributes of the 'input' tag. But there is one that has it's own tag, and that is 'textarea'
| Name | The mark-up | How it looks |
|---|---|---|
| Textarea | <textarea name="x">Type here</textarea> |
The 'textarea' tag is written totally different. If you look at the code above you will see that two major differences. The one is that the input tags are not closed. Instead we just add a little '/' backslash to the end of them (have a look). The other is that instead of a 'value' attribute, we add the text between the opening and closing tags.
That will be the topic of the next post...the actual structure of html. Just remember it for now.
Okay, lets talk about a couple other aspects. When we make a form, we are going to enclose it in <form> tags. These 'form' tags allow you to say what you want to do with the form.
Now, forms can be really useful, but for now lets just cover the basics.
In the 'form' tag at the top you have two attributes that are typically used with Forms. The first is the 'action' attribute. The action is simply were will we go when the form is submitted. You may simply re-load the current page, but a script in the page detects that there is a variable and accepts this information and does with it whatever it was told to. It may be emailed back to us, it may send them a confirmation email. It may be an automated ordering system. There are many possibilities. A blog post or post on a social media site. Upload pictures. So much of what you do on the web today is done through forms and the scripts behind them.
Aside from the 'action' attribute, there is another that is typically found in the opening 'form' tag, the method. Now again, this isn't going to mean that much to you yet, but will mean a lot when we start scripting. Stick with these tutorials and you will get the power.
Alright, we are almost done with this html tutorial The next section will cover the way the mark up works and include a few new things. After that we will move on to CSS, where we will keep learning some aspects of html as well.
Wednesday, September 30, 2009
Non NERD HTML 8 - TABLES
In the previous tutorial we talked about lists, and they naturally lead on to TABLES, the subject of this post.
If you have kept up so far, then at this point tables become very easy to understand. Really, they are just like lists, only when you create them, they have much for structure. However, it is the most complex thing we have dealt with yet, so there is lots to learn here. But it's not hard, I think? So here is the basic HTML mark-up of a table.
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Okay, lets break it down:
So, all your "td"s fit in the "tr"s, which fit in the "table".
Keep in mind (for now, we'll talk about how to change that lower down) that you want to have the same number of cells (td) per row (tr) all the way down your table.
Well, we are getting into the more advanced stuff in this HTML tutorial now, and if you have followed along so far you should be ready for some more. So lets add one more mark-up tag associated with tables, "th". It's rather simple:
<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
The "th" is for the header row, so you make all the cells of that row "th" and then use "td" the rest of the way down. What it does depends on the browser your visitors are using, and what styling you give it with CSS.
We can add a 'caption' tag if you want:
<table>
<caption>My Table</caption>
<tr>
<th>Game</th>
<th>Fun-o-meter</th>
</tr>
<tr>
<td>Catch</td>
<td>93.5%</td>
</tr>
<tr>
<td>Throw</td>
<td>95.663%</td>
</tr>
</table>
Easy so far? Okay, lets add one more thing that you may use from time to time, the "colspan" attribute. Now, I don't want to get ahead of myself, but really you need some style to understand the "colspan". The "colspan" is an attribute of the "td" or "th" tags. It means that you can extend, on that row, the cell over the distance that you put two or more cells in a "tr" below or above. Are you with me? If not, the example below should help.
<html>
<head><title>Tables</title>
<style type="text/css">
table, caption, tr, th, td{
border:1px solid grey;
background-color:#ffeedd;
}
</style>
</head>
<body style="margin:150px;">
<table>
<caption>My Table</caption>
<tr>
<th colspan="2">Game</th>
<th>Fun-o-meter</th>
</tr>
<tr>
<td>1.</td>
<td>Catch</td>
<td>93.5%</td>
</tr>
<tr>
<td>2.</td>
<td>Throw</td>
<td>95.663%</td>
</tr>
</table>
</body>
</html>
Alright, you can see how I did the style tag, and play around with it if you like for now, but we'll cover all that at length when we get into the CSS tutorial. I am not going to explain what I did there for now.
Just an additional note on style. If you look at the HTML mark up of many websites you will see that tables are used as a styling method. You are welcome to do this if you want, but I would strongly discourage it. HTML is moving along and style and mark-up is increasingly being separated. You can start using nested tables and images for corners and things like that, but I would rather say stay away from that, especially while you are first learning HTML. It is the reason why I have taught this tutorial this way. It makes the HTML rather simple, and the CSS much more tricky to grasp, but it is worth it all in the long run.
There was a lot to learn in this tutorial and the best way to get a feel of it is to play around. Try it out. Put tables into lists and tables in tables. Try out a lot of things. Even just making small changes. If you have different browsers, see what different things look like in the different browsers. If you don't, you can download some browsers for free, just Google "free browsers" and you will get lots of options. If you are on a Linux machine, why not try Lynx, a browser you use in terminal?
The next section will talk about Forms, a little more advanced topic than what we have done so far.
If you have kept up so far, then at this point tables become very easy to understand. Really, they are just like lists, only when you create them, they have much for structure. However, it is the most complex thing we have dealt with yet, so there is lots to learn here. But it's not hard, I think? So here is the basic HTML mark-up of a table.
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Okay, lets break it down:
- The "table" tags, begin and end the table.
- The "tr" tags, begin and end each row (tr - Table Row) in the table.
- The "td" tags, begin and end each cell (td - I don't know what it stands for...look it up and let me know) in the table row.
So, all your "td"s fit in the "tr"s, which fit in the "table".
Keep in mind (for now, we'll talk about how to change that lower down) that you want to have the same number of cells (td) per row (tr) all the way down your table.
Well, we are getting into the more advanced stuff in this HTML tutorial now, and if you have followed along so far you should be ready for some more. So lets add one more mark-up tag associated with tables, "th". It's rather simple:
<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
The "th" is for the header row, so you make all the cells of that row "th" and then use "td" the rest of the way down. What it does depends on the browser your visitors are using, and what styling you give it with CSS.
We can add a 'caption' tag if you want:
<table>
<caption>My Table</caption>
<tr>
<th>Game</th>
<th>Fun-o-meter</th>
</tr>
<tr>
<td>Catch</td>
<td>93.5%</td>
</tr>
<tr>
<td>Throw</td>
<td>95.663%</td>
</tr>
</table>
Easy so far? Okay, lets add one more thing that you may use from time to time, the "colspan" attribute. Now, I don't want to get ahead of myself, but really you need some style to understand the "colspan". The "colspan" is an attribute of the "td" or "th" tags. It means that you can extend, on that row, the cell over the distance that you put two or more cells in a "tr" below or above. Are you with me? If not, the example below should help.
<html>
<head><title>Tables</title>
<style type="text/css">
table, caption, tr, th, td{
border:1px solid grey;
background-color:#ffeedd;
}
</style>
</head>
<body style="margin:150px;">
<table>
<caption>My Table</caption>
<tr>
<th colspan="2">Game</th>
<th>Fun-o-meter</th>
</tr>
<tr>
<td>1.</td>
<td>Catch</td>
<td>93.5%</td>
</tr>
<tr>
<td>2.</td>
<td>Throw</td>
<td>95.663%</td>
</tr>
</table>
</body>
</html>
Alright, you can see how I did the style tag, and play around with it if you like for now, but we'll cover all that at length when we get into the CSS tutorial. I am not going to explain what I did there for now.
Just an additional note on style. If you look at the HTML mark up of many websites you will see that tables are used as a styling method. You are welcome to do this if you want, but I would strongly discourage it. HTML is moving along and style and mark-up is increasingly being separated. You can start using nested tables and images for corners and things like that, but I would rather say stay away from that, especially while you are first learning HTML. It is the reason why I have taught this tutorial this way. It makes the HTML rather simple, and the CSS much more tricky to grasp, but it is worth it all in the long run.
There was a lot to learn in this tutorial and the best way to get a feel of it is to play around. Try it out. Put tables into lists and tables in tables. Try out a lot of things. Even just making small changes. If you have different browsers, see what different things look like in the different browsers. If you don't, you can download some browsers for free, just Google "free browsers" and you will get lots of options. If you are on a Linux machine, why not try Lynx, a browser you use in terminal?
The next section will talk about Forms, a little more advanced topic than what we have done so far.
Non Nerd HTML 7 - LISTS
The Previous Tutorial covered the basics of using images in an HTML document. In this tutorial we are going to talk about lists.
The previous few tutorial sessions have been dealing with rather tricky things. Now we are going to introduce something that is really simple. But don't underestimate the power of lists. As with many aspects of HTML we are going to discover a whole host of uses of lists when we move into styling and beyond into scripting.
Okay, easy lesson. Lists:
We have two kinds of lists in HTML:
Below you can see how to create an un-ordered list. The new tag <li></li> is used to contain the "list item" hence "li"
<ul>
<li>This is one item</li>
<li>This is another</li>
<li>And another</li>
</ul>
You would create an ordered list the same way, except with the <ol></ol> tags.
Right, that was plain and simple. As I said before, once we get to CSS you will find there is a lot you can do with the lists. For now, make sure you learn the two kinds and play around with them. You can make 'nested lists'...lists within lists. See if you can figure that out.
This section leads on to naturally to Tables, and so the next section will be an HTML introduction to Tables.
One other thing. I believe strongly in giving credit where it is due, and for this tutorial I need to keep parsing the HTML so that when I write tags here they don't just get taken as part of the document. To do that I need to parse it. One can do that by hand, but honestly, I don't remember more than about 5 different ones, so I use a tool on this page
The previous few tutorial sessions have been dealing with rather tricky things. Now we are going to introduce something that is really simple. But don't underestimate the power of lists. As with many aspects of HTML we are going to discover a whole host of uses of lists when we move into styling and beyond into scripting.
Okay, easy lesson. Lists:
We have two kinds of lists in HTML:
- Ordered list - Mark-up - <ol></ol> - Renders - like this list we are in, with numbers
- Un-ordered list - Mark-up - <ul></ul> - Renders - with bullets.
Below you can see how to create an un-ordered list. The new tag <li></li> is used to contain the "list item" hence "li"
<ul>
<li>This is one item</li>
<li>This is another</li>
<li>And another</li>
</ul>
You would create an ordered list the same way, except with the <ol></ol> tags.
Right, that was plain and simple. As I said before, once we get to CSS you will find there is a lot you can do with the lists. For now, make sure you learn the two kinds and play around with them. You can make 'nested lists'...lists within lists. See if you can figure that out.
This section leads on to naturally to Tables, and so the next section will be an HTML introduction to Tables.
One other thing. I believe strongly in giving credit where it is due, and for this tutorial I need to keep parsing the HTML so that when I write tags here they don't just get taken as part of the document. To do that I need to parse it. One can do that by hand, but honestly, I don't remember more than about 5 different ones, so I use a tool on this page
Non Nerd HTML 6 - IMAGES
Okay, by the end of this tutorial you can already do quiet a lot with your websites. All it takes is a little creativity. Once we start dealing with style (CSS) later on, we get the whole thing looking much better. But we can already add content in a variety of formats.
This is another really simple technique. What you will need is a digital image on your computer. Take it to the file that your computer stuff is in (copy and paste). If you have a nice camera, then it is likely that your image will be very large. It is a good idea to reduce the size.
If you really don't have any pictures on your computer, perhaps you can get one by ding a Print Screen (Usually there is a button on your keyboard that says something like "Print Scrn"). Otherwise simply make a drawing freehand in Gimp.
Save your picture to the same place that your main html file is.
Now the majic:
<img src="myfathusband.jpg" />
Where "myfathusband.jpg" is the name of your file, as it stands in the folder. If you re-name your image, the html will no longer find it. It needs to be exactly the same.
Alright, that's all you need to know to get the image into your page. However, you should do one other thing, add an 'alt' attribute.
<img src="myfathusband.jpg" alt="My Love" />
If you want to get it from another site, you can, JUST DON'T PLAGIARIZE...ie, don't steal other people's pictures. You are welcome to use any of mine, provided you link back to the site you got it from. My Flickr page is the best to do that from. Click the image below to go to the Flickr page.
In order to put an image file like that into your page you do this:
<img src="http://farm3.static.flickr.com/2445/3936274721_ea1fb3d2e1.jpg" alt="Drill Bit" />
There is a whole host of things we can do with images. For now at least you know how to get them in there. We will get to styling them and doing different things with images when we get into CSS and scripting later on.
There are a whole bunch of file formats for images. Most of the time you are going to deal with jpg, png and gif on your web pages. Be careful of very heavy file formats...pictures become very heavy and make your page load slowly.
In the next section we are going to talk about lists and how to arrange them in HTML. Lists are often used for styling elements, so it's good to get the basics down before moving on to using them with CSS later on.
This is another really simple technique. What you will need is a digital image on your computer. Take it to the file that your computer stuff is in (copy and paste). If you have a nice camera, then it is likely that your image will be very large. It is a good idea to reduce the size.
Open Gimp Image Editor and open the picture's file (open, search through your file hierarchy, and click "open"). Click "Image" go down to "Scale Image", click it, and change the image to something like 200px width. You can play around with this, depending on what you are planning and need the image for.
If you really don't have any pictures on your computer, perhaps you can get one by ding a Print Screen (Usually there is a button on your keyboard that says something like "Print Scrn"). Otherwise simply make a drawing freehand in Gimp.
Save your picture to the same place that your main html file is.
Now the majic:
<img src="myfathusband.jpg" />
Where "myfathusband.jpg" is the name of your file, as it stands in the folder. If you re-name your image, the html will no longer find it. It needs to be exactly the same.
Alright, that's all you need to know to get the image into your page. However, you should do one other thing, add an 'alt' attribute.
<img src="myfathusband.jpg" alt="My Love" />
If you want to get it from another site, you can, JUST DON'T PLAGIARIZE...ie, don't steal other people's pictures. You are welcome to use any of mine, provided you link back to the site you got it from. My Flickr page is the best to do that from. Click the image below to go to the Flickr page.
In order to put an image file like that into your page you do this:
<img src="http://farm3.static.flickr.com/2445/3936274721_ea1fb3d2e1.jpg" alt="Drill Bit" />
There is a whole host of things we can do with images. For now at least you know how to get them in there. We will get to styling them and doing different things with images when we get into CSS and scripting later on.
There are a whole bunch of file formats for images. Most of the time you are going to deal with jpg, png and gif on your web pages. Be careful of very heavy file formats...pictures become very heavy and make your page load slowly.
In the next section we are going to talk about lists and how to arrange them in HTML. Lists are often used for styling elements, so it's good to get the basics down before moving on to using them with CSS later on.
Non Nerd HTML 5 - LINKS
The Previous Tutorial covered the basics of what the head tags are for and what might go into them.
If you understand a little of how the Internet works, then I am sure you have been biting at the bit to get to this part. There are a lot of things involved in linking, but I am going to cover the basics in a very plain and simple manner.
Here is the mark-up:
<a href=""></a>
The "a" right at the beginning tells you that it's an anchor. Don't worry about it, just remember it.
The second part is the href, it is the "hypertext reference" This is telling it, if you press this anchor, take me (or rather, load in my browser) this page.
What page? Okay, we didn't put anything in there yet. There can be three main links from our point of view:
1. Links to other sites.
2. Links to other files within your site
3. Links within a page...basically just jumps down long pages.
The first two are basically exactly the same, it's only how much of the URL you need to write that changes. Okay, lets say you are creating a website that lists great, easy to follow HTML tutorials, and you think this one is just grand. Here is how you link to it:
<a href="http://nonnerd.blogspot.com/"></a>
For the time being we have an anchor, but nothing for the website's user to click on. Basically anything you put between the opening and closing anchor tags becomes a "hyperlink" So, let's put something in there:
<a href="http://nonnerd.blogspot.com/">A simple and comprehensive HTML tutorial</a>
Great, now the user knows where it is going to take him. Now,if you have used the Internet much, you would know that often if you click over a link (or hyperlink) you get a little text that pops up telling you a little about this link. You add this with the "title" attribut in the hyperlink tag. Here's how:
<a href="http://nonnerd.blogspot.com/" title="Non Nerd Hacking HTML tutorial">A simple and comprehensive HTML tutorial</a>
If you want the link to open in a new tab (or new window if your user is using a really old browser) then use the target attribute, like this:
<a href="http://nonnerd.blogspot.com/" target="_blank" title="Non Nerd Hacking HTML tutorial">A simple and comprehensive HTML tutorial</a>
PLEASE, for the sake of web surfers the world over, don't do to much of that. Use it only were really appropriate.
Now, if you are simply navigating your own site, it depends if you put the file in different folders. If it's all in the same place, you simply need the file name:
<a href="index.html" title="Home">Your Website's Home Page</a>
And, lastly, if you want to move within the same page, do it like so:
1. Name the area you would like to 'jump' to:
<a name="#comeHere">The info which we are going to</a>
2. Create a link to go there, further up the page (or down, such as a "back to the top of the page" type link):
<a href="#comeHere">Where we go from</a>
So note that in the first part, "name" replaced "href"
By the way, just to give credit where it is due, I use this last technique so seldom that I had to look it up in another tutorial:
<a href="http://www.w3schools.com/html/html_links.asp" title="HTML Links">www.w3schools.com html links page"</a>
Links are usually blue and underlined. We'll get to styling links when we get to CSS.
Alright, you may have noticed that I keep asking for links to this page. Links are really what the whole world wide WEB is all about, it's the fabric of the web. One page, loaded on a random server, can only be accessed by those whole know the exact URL if they were not able to go there through a link. Can you imagine a website getting hundreds, thousands or even millions of page views if there was no link. No way.
Links build authority. The more links a site has to it, so long as those links themselves are from good, legitimate website, the greater the perceived value of the website being linked to. If you get into web development you will hear about SEO (Search Engine Optimization). It involves all sorts of things, but basically links to your site builds authority with search engines, and that way your site floats to the top in their results.
There is another side to it. There is this mad "link Building" that goes on, with different blogs and websites looking for their place in the sun by collecting a lot of links pointing to their site. It all gets a bit crazy. Be careful with this right from the start. Write good stuff, ask for some links, but don't go to link farms and exchange your links with everyone.
If you stick around for a while, we will one day get to web development and touch on SEO over there. I just wanted to give you an initial 'head's up' about something that is a little crazy on the WWW.
In the next tutorial we are going to start to stick some images into our pages. Fun, fun, fun.
If you understand a little of how the Internet works, then I am sure you have been biting at the bit to get to this part. There are a lot of things involved in linking, but I am going to cover the basics in a very plain and simple manner.
Here is the mark-up:
<a href=""></a>
The "a" right at the beginning tells you that it's an anchor. Don't worry about it, just remember it.
The second part is the href, it is the "hypertext reference" This is telling it, if you press this anchor, take me (or rather, load in my browser) this page.
What page? Okay, we didn't put anything in there yet. There can be three main links from our point of view:
1. Links to other sites.
2. Links to other files within your site
3. Links within a page...basically just jumps down long pages.
The first two are basically exactly the same, it's only how much of the URL you need to write that changes. Okay, lets say you are creating a website that lists great, easy to follow HTML tutorials, and you think this one is just grand. Here is how you link to it:
<a href="http://nonnerd.blogspot.com/"></a>
For the time being we have an anchor, but nothing for the website's user to click on. Basically anything you put between the opening and closing anchor tags becomes a "hyperlink" So, let's put something in there:
<a href="http://nonnerd.blogspot.com/">A simple and comprehensive HTML tutorial</a>
Great, now the user knows where it is going to take him. Now,if you have used the Internet much, you would know that often if you click over a link (or hyperlink) you get a little text that pops up telling you a little about this link. You add this with the "title" attribut in the hyperlink tag. Here's how:
<a href="http://nonnerd.blogspot.com/" title="Non Nerd Hacking HTML tutorial">A simple and comprehensive HTML tutorial</a>
If you want the link to open in a new tab (or new window if your user is using a really old browser) then use the target attribute, like this:
<a href="http://nonnerd.blogspot.com/" target="_blank" title="Non Nerd Hacking HTML tutorial">A simple and comprehensive HTML tutorial</a>
PLEASE, for the sake of web surfers the world over, don't do to much of that. Use it only were really appropriate.
Now, if you are simply navigating your own site, it depends if you put the file in different folders. If it's all in the same place, you simply need the file name:
<a href="index.html" title="Home">Your Website's Home Page</a>
And, lastly, if you want to move within the same page, do it like so:
1. Name the area you would like to 'jump' to:
<a name="#comeHere">The info which we are going to</a>
2. Create a link to go there, further up the page (or down, such as a "back to the top of the page" type link):
<a href="#comeHere">Where we go from</a>
So note that in the first part, "name" replaced "href"
By the way, just to give credit where it is due, I use this last technique so seldom that I had to look it up in another tutorial:
<a href="http://www.w3schools.com/html/html_links.asp" title="HTML Links">www.w3schools.com html links page"</a>
Links are usually blue and underlined. We'll get to styling links when we get to CSS.
About Links
Alright, you may have noticed that I keep asking for links to this page. Links are really what the whole world wide WEB is all about, it's the fabric of the web. One page, loaded on a random server, can only be accessed by those whole know the exact URL if they were not able to go there through a link. Can you imagine a website getting hundreds, thousands or even millions of page views if there was no link. No way.
Links build authority. The more links a site has to it, so long as those links themselves are from good, legitimate website, the greater the perceived value of the website being linked to. If you get into web development you will hear about SEO (Search Engine Optimization). It involves all sorts of things, but basically links to your site builds authority with search engines, and that way your site floats to the top in their results.
There is another side to it. There is this mad "link Building" that goes on, with different blogs and websites looking for their place in the sun by collecting a lot of links pointing to their site. It all gets a bit crazy. Be careful with this right from the start. Write good stuff, ask for some links, but don't go to link farms and exchange your links with everyone.
If you stick around for a while, we will one day get to web development and touch on SEO over there. I just wanted to give you an initial 'head's up' about something that is a little crazy on the WWW.
In the next tutorial we are going to start to stick some images into our pages. Fun, fun, fun.
Non Nerd HTML 4 - Adding a Favicon
The Previous Tutorial covered the basics of what the head tags are for and what might go into them.
This tutorial is put in here just for a little fun. It's not that important at this point, but if you browse the internet with most modern browsers you will see a little icon on the browser's bar and tabs next to the title of the page you are on. These little things are called 'Favicons' and I am going to go through how you can make one and put it onto your website.
Here is a icon which can be used for a favicon:
So, lets do this backwards. First I am going to show you how to put it into your site, using my favicon, and the I will show you how to make it.
So, below is the page we have worked on before, with one new line added after the <title> line. This line has a favicon of mine in there, just so you can try it out.
<html>
<head>
<title>Your Page Title</title>
<link rel="icon" type="image/gif" href="http://vernforms.googlepages.com/NonNerd.ico" />
</head>
<body>
<p>Learning HTML is not that hard. Actually, it is rather fun. It is amazing how easy it is to learn the initial stuff that helps me get web pages up in my web browser.</p>
<p>I will test this in my browser to see what it does shortly. I guess that if I start building lots of websites, the paragraph tag will become important to me</p>
</body>
</html>
Lets break down that line a bit:
This tutorial is put in here just for a little fun. It's not that important at this point, but if you browse the internet with most modern browsers you will see a little icon on the browser's bar and tabs next to the title of the page you are on. These little things are called 'Favicons' and I am going to go through how you can make one and put it onto your website.
Here is a icon which can be used for a favicon:
So, lets do this backwards. First I am going to show you how to put it into your site, using my favicon, and the I will show you how to make it.
So, below is the page we have worked on before, with one new line added after the <title> line. This line has a favicon of mine in there, just so you can try it out.
<html>
<head>
<title>Your Page Title</title>
<link rel="icon" type="image/gif" href="http://vernforms.googlepages.com/NonNerd.ico" />
</head>
<body>
<p>Learning HTML is not that hard. Actually, it is rather fun. It is amazing how easy it is to learn the initial stuff that helps me get web pages up in my web browser.</p>
<p>I will test this in my browser to see what it does shortly. I guess that if I start building lots of websites, the paragraph tag will become important to me</p>
</body>
</html>
Lets break down that line a bit:
- Link - This tells the browser that you want to use something from another page in this page.
- rel - This describes the RELATIONSHIP that that page has with this one.
- type - Well, what type is it, of course. No points for guessing that one!
- href - We'll get to this more later, but this links to another page. It is a "Hypertext Reference". Hypertext is all hyper, it wants to reach out somewhere out of your page.
http://vernforms.googlepages.com/NonNerd.ico
This is called a URL (Uniform Resource Locater...if you just needed to know), and it tells you where that file is. This favicon is located on my own Googlepages, which I mainly use just for this kind of stuff. For now, go ahead and just use mine. If you want to use it on a website on the Internet, please feel free. You can download it and stick it on your server...we'll get to all that later. Just do me one favor if you use that, or any other image of mine...give me a link back to this site.
Anyway, if you save that page as is you will now see the little favicon displayed when you load that web page into your browser. So, how do we go about making one of these. There could be many ways, but I will show you with Gimp.
Alright, lets do this step by step:
1. Get Gimp at www.Gimp.org
2. I will assume that you installed everything fine. Then start up Gimp.
3. Go to "File" in the main section. Not in the little Toolbar floating section.
4. Under "File" choose "New"
5. When the "New" dialog box comes up, change the values for the size of the image to 160px by 160px. BEFORE you close, also go down and change the "Advanced Options" and click that to open it up. Go down to where it says "Fill With" and choose "Transparency"
6. The new image opens up. The squares indicate the "transparent" layer.
7. Do what you want. Keep in mind that you will need to keep it simple in order to still see it well when you create a Favicon.
8. Okay, once you have it as you want it, you need to decrease the size. Go to "Images" and look for "Scale Image". Where it says "Width" change the value from 160 to 16. You don't have to worry about the width...you'll see the little change link on the right which shows you that the two are linked (which they are by default...if not, just click it to lock them). Click "Scale" on the bottom right.
9. Okay, now the important part. Save the thing. Go to "File" "Save As" and navigate to the file that you want to save it in. In the name bar, type the file name you want for it, and then end it with a file extension ".ico" so you may want something like "myFavicon.ico" or "I.ico" or whatever. It will ask you about a 32bit compression, just click "Save"
This tutorial was created for use on Gimp 2.6.6 on Ubuntu Linux. If you have another version, you should have no problem following along. It may just require a little more innovation to get the thing working. It is, after all, a rather simple process.
In the next tutorial we will look at perhaps the most important thing about html and the world wide web...LINKS.
This is called a URL (Uniform Resource Locater...if you just needed to know), and it tells you where that file is. This favicon is located on my own Googlepages, which I mainly use just for this kind of stuff. For now, go ahead and just use mine. If you want to use it on a website on the Internet, please feel free. You can download it and stick it on your server...we'll get to all that later. Just do me one favor if you use that, or any other image of mine...give me a link back to this site.
Anyway, if you save that page as is you will now see the little favicon displayed when you load that web page into your browser. So, how do we go about making one of these. There could be many ways, but I will show you with Gimp.
Alright, lets do this step by step:
1. Get Gimp at www.Gimp.org
2. I will assume that you installed everything fine. Then start up Gimp.
3. Go to "File" in the main section. Not in the little Toolbar floating section.
4. Under "File" choose "New"
5. When the "New" dialog box comes up, change the values for the size of the image to 160px by 160px. BEFORE you close, also go down and change the "Advanced Options" and click that to open it up. Go down to where it says "Fill With" and choose "Transparency"
6. The new image opens up. The squares indicate the "transparent" layer.
7. Do what you want. Keep in mind that you will need to keep it simple in order to still see it well when you create a Favicon.
8. Okay, once you have it as you want it, you need to decrease the size. Go to "Images" and look for "Scale Image". Where it says "Width" change the value from 160 to 16. You don't have to worry about the width...you'll see the little change link on the right which shows you that the two are linked (which they are by default...if not, just click it to lock them). Click "Scale" on the bottom right.
9. Okay, now the important part. Save the thing. Go to "File" "Save As" and navigate to the file that you want to save it in. In the name bar, type the file name you want for it, and then end it with a file extension ".ico" so you may want something like "myFavicon.ico" or "I.ico" or whatever. It will ask you about a 32bit compression, just click "Save"
This tutorial was created for use on Gimp 2.6.6 on Ubuntu Linux. If you have another version, you should have no problem following along. It may just require a little more innovation to get the thing working. It is, after all, a rather simple process.
In the next tutorial we will look at perhaps the most important thing about html and the world wide web...LINKS.
Friday, September 25, 2009
Non Nerd HTML 3
This is the third post in a series of posts to help teach you HTML. It's really simple to learn the basics of HTML and this tutorial will take you through step by step.
In the first part of this tutorial I showed you how to just get started and be able to view something in a browser such as Firefox or Google Chrome.
In the second part of the tutorial I taught you the basics of formatting body text, using the paragraph, header and div tags.
In this part I am going to explain the basic header tags and explain what the header is for.
Lets start with what we had before and carry on from there:
If you use Firefox or most modern browsers, you will have the option of tabbed browsing. If you run the above page in your browser, you will see that the tabs don't give you a nice name for your page. How do you change that? With the title tags.
<title>Your Page Title</title>
The title tags are important for many reasons, including telling search engines what your page is all about. Various browsers will display the text of the title tag in different places, but often it shows up on the top left hand side of the browser on your screen.
There are many things that can also go into your web page between the head tags. These include:
1. DOCTYPE Declaration - where you tell the browser which 'flavor' of html you are using. We will cover that later.
2. Meta tags - or the "about" tags. These tell search engines, browsers and servers information about your page, and can even have simply the name and contact for the webmaster (in this case - you.) We'll get to these.
3. Various scripting tags...We'll talk about these in future tutorials such as when we start with JavaScript.
4. Style tags - These help us keep the styling of our page separate, and let us put it into a separate file, or into the header. We'll cover this in great depth in the CSS tutorial.
5. There are various other things that can go in here. Our next tutorial will be a brief one of these, just for fun...adding a favicon
As you can see, an html head section, i.e. the bit between the head tags, is basically providing information about your page, how you want it styled, displayed, searched and what stuff you want to go on on the page with scripts.
In the first part of this tutorial I showed you how to just get started and be able to view something in a browser such as Firefox or Google Chrome.
In the second part of the tutorial I taught you the basics of formatting body text, using the paragraph, header and div tags.
In this part I am going to explain the basic header tags and explain what the header is for.
Lets start with what we had before and carry on from there:
<html>
<head></head>
<body>
<p>Learning HTML is not that hard. Actually, it is rather fun. It is amazing how easy it is to learn the initial stuff that helps me get web pages up in my web browser.</p>
<p>I will test this in my browser to see what it does shortly. I guess that if I start building lots of websites, the paragraph tag will become important to me</p>
</body>
</html>
<head></head>
<body>
<p>Learning HTML is not that hard. Actually, it is rather fun. It is amazing how easy it is to learn the initial stuff that helps me get web pages up in my web browser.</p>
<p>I will test this in my browser to see what it does shortly. I guess that if I start building lots of websites, the paragraph tag will become important to me</p>
</body>
</html>
If you use Firefox or most modern browsers, you will have the option of tabbed browsing. If you run the above page in your browser, you will see that the tabs don't give you a nice name for your page. How do you change that? With the title tags.
<title>Your Page Title</title>
The title tags are important for many reasons, including telling search engines what your page is all about. Various browsers will display the text of the title tag in different places, but often it shows up on the top left hand side of the browser on your screen.
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
<p>Learning HTML is not that hard. Actually, it is rather fun. It is amazing how easy it is to learn the initial stuff that helps me get web pages up in my web browser.</p>
<p>I will test this in my browser to see what it does shortly. I guess that if I start building lots of websites, the paragraph tag will become important to me</p>
</body>
</html>
<head>
<title>Your Page Title</title>
</head>
<body>
<p>Learning HTML is not that hard. Actually, it is rather fun. It is amazing how easy it is to learn the initial stuff that helps me get web pages up in my web browser.</p>
<p>I will test this in my browser to see what it does shortly. I guess that if I start building lots of websites, the paragraph tag will become important to me</p>
</body>
</html>
There are many things that can also go into your web page between the head tags. These include:
1. DOCTYPE Declaration - where you tell the browser which 'flavor' of html you are using. We will cover that later.
2. Meta tags - or the "about" tags. These tell search engines, browsers and servers information about your page, and can even have simply the name and contact for the webmaster (in this case - you.) We'll get to these.
3. Various scripting tags...We'll talk about these in future tutorials such as when we start with JavaScript.
4. Style tags - These help us keep the styling of our page separate, and let us put it into a separate file, or into the header. We'll cover this in great depth in the CSS tutorial.
5. There are various other things that can go in here. Our next tutorial will be a brief one of these, just for fun...adding a favicon
As you can see, an html head section, i.e. the bit between the head tags, is basically providing information about your page, how you want it styled, displayed, searched and what stuff you want to go on on the page with scripts.
Non Nerd HTML 2
This is the second post in a series of posts to help teach you HTML. It's really simple to learn the basics of HTML and this tutorial will take you through step by step.
In the first part of this tutorial I showed you how to just get started and be able to view something in a browser such as Firefox or Google Chrome.
Now in this second part I am going to deal with the most important tags in your body element. This lets us design our body a little bit, rather than just having a plain bunch of text running down the page.
So in this page we will cover the most basic tags for the body section. This is the stuff that you will see displayed in the browser:
1. Paragraph tags <p>Paragraph Tag</p>
2. Header tags <h1>You get from h1</h1><h6>Through to h6</h6>
3. Division tags <div>Division Tag</div>
If you read the previous HTML tutorial on this blog, then this becomes rather easy to implement. However, there are a few new things to learn about how these tags are used.
As mentioned above, this tag goes into the body part of your html document. This tag is rather simple, it is for distinguishing one paragraph from another. Let's create a simple example and then I want you to try it out in your text editor and see if you can get it to work:
Okay, lets learn a few things. First of all, you should notice that we don't have the <body> and </body> tags on the same line any more. This is important, so pay attention: In HTML spaces are ignored except for spaces between lines of text, which simply add an additional space.
Also important is that in a line, only one space is used. Therefore, if you look at the way that I have written he HTML code above, after the end of each sentence there is a little bit of 'code' in there, . This little bit of HTML code means "please add another space here." It is very useful, because you can put in multiple spaces wherever you need them in your text. It is the only way to get a double space.
You can do the same thing with a line return and then the peace of code. Experiment and see if you understand how it works.
The paragraph tag, and same with the header tags below, take you onto a new line and divide the text from other text in the page.
Therefore, if you did this:
It would do the same as if you had written the code on different lines. It is so important to 'get' the concept of spaces in html versus what you will get on the page, that you should play around with a few example of it...try it out and see what you get. The more you practice at this stage, the more firm your foundation will be once we start adding style and later scripting to your HTML page.
If you understood the paragraph tag, then the header tags are really easy to understand as well. They are for making headers in your page. Of course.
There are six levels of tags, and for a number of reasons it is usually best to start with the biggest..the <h1> tag (perhaps if you use it for the actual title of your page) and then work your way down the list. It is not a hard and fast rule, simply a good idea. You will find you seldom come to the <h6>. Most of the time you will probably be fine with <h1>, <h2>, <h3> and <h4>.
Just like the paragraph tag, these header tags all start on a new line, and the lines themselves correspond to the size of the lettering in that title tag. Again, play with them and see what happens.
The actual style of these tags are not set, and so different browsers display the tags slightly differently. That's an important thing to start to learn about HTML, that you need to try to always develop your pages as a compromise between different browser. That discussion belongs more in the styling section, when we will learn CSS.
The previous two tags seem functional right from the beginning. In fact, just learning the little bit of html you have up to here, you could produce a web page, that you could put up online, and show nicely separated text and titles as a peace of written work.
But the Division or rather 'div' tag actually does very little by itself. However, think of it as a marker for the different parts of your page. This is going to become more important as you learn styling and eventually scripting later on. It gives you sections of your text to work on...So you could have a header section, a main body section, a navigation section (we'll talk about navigation in a tutorial soon), a footer and so on. Each of these bits can be styled differently or told to do different things. For now only worry about remembering to put them in as you divide up the different parts of your HTML document.
<div>Division</div>
In the first part of this tutorial I showed you how to just get started and be able to view something in a browser such as Firefox or Google Chrome.
Now in this second part I am going to deal with the most important tags in your body element. This lets us design our body a little bit, rather than just having a plain bunch of text running down the page.
So in this page we will cover the most basic tags for the body section. This is the stuff that you will see displayed in the browser:
1. Paragraph tags <p>Paragraph Tag</p>
2. Header tags <h1>You get from h1</h1><h6>Through to h6</h6>
3. Division tags <div>Division Tag</div>
If you read the previous HTML tutorial on this blog, then this becomes rather easy to implement. However, there are a few new things to learn about how these tags are used.
Paragraph Tags
Lets start with the Paragraph Tag <p>As mentioned above, this tag goes into the body part of your html document. This tag is rather simple, it is for distinguishing one paragraph from another. Let's create a simple example and then I want you to try it out in your text editor and see if you can get it to work:
<html>
<head></head>
<body>
<p>Learning HTML is not that hard. Actually, it is rather fun. It is amazing how easy it is to learn the initial stuff that helps me get web pages up in my web browser.</p>
<p>I will test this in my browser to see what it does shortly. I guess that if I start building lots of websites, the paragraph tag will become important to me</p>
</body>
</html>
<head></head>
<body>
<p>Learning HTML is not that hard. Actually, it is rather fun. It is amazing how easy it is to learn the initial stuff that helps me get web pages up in my web browser.</p>
<p>I will test this in my browser to see what it does shortly. I guess that if I start building lots of websites, the paragraph tag will become important to me</p>
</body>
</html>
Okay, lets learn a few things. First of all, you should notice that we don't have the <body> and </body> tags on the same line any more. This is important, so pay attention: In HTML spaces are ignored except for spaces between lines of text, which simply add an additional space.
Also important is that in a line, only one space is used. Therefore, if you look at the way that I have written he HTML code above, after the end of each sentence there is a little bit of 'code' in there, . This little bit of HTML code means "please add another space here." It is very useful, because you can put in multiple spaces wherever you need them in your text. It is the only way to get a double space.
You can do the same thing with a line return and then the peace of code. Experiment and see if you understand how it works.
The paragraph tag, and same with the header tags below, take you onto a new line and divide the text from other text in the page.
Therefore, if you did this:
<p>I am going</p><p>break up this little</p><p>peace of text</p>
It would do the same as if you had written the code on different lines. It is so important to 'get' the concept of spaces in html versus what you will get on the page, that you should play around with a few example of it...try it out and see what you get. The more you practice at this stage, the more firm your foundation will be once we start adding style and later scripting to your HTML page.
Header Tags
If you understood the paragraph tag, then the header tags are really easy to understand as well. They are for making headers in your page. Of course.
There are six levels of tags, and for a number of reasons it is usually best to start with the biggest..the <h1> tag (perhaps if you use it for the actual title of your page) and then work your way down the list. It is not a hard and fast rule, simply a good idea. You will find you seldom come to the <h6>. Most of the time you will probably be fine with <h1>, <h2>, <h3> and <h4>.
Just like the paragraph tag, these header tags all start on a new line, and the lines themselves correspond to the size of the lettering in that title tag. Again, play with them and see what happens.
The actual style of these tags are not set, and so different browsers display the tags slightly differently. That's an important thing to start to learn about HTML, that you need to try to always develop your pages as a compromise between different browser. That discussion belongs more in the styling section, when we will learn CSS.
Division Tags
The previous two tags seem functional right from the beginning. In fact, just learning the little bit of html you have up to here, you could produce a web page, that you could put up online, and show nicely separated text and titles as a peace of written work.
But the Division or rather 'div' tag actually does very little by itself. However, think of it as a marker for the different parts of your page. This is going to become more important as you learn styling and eventually scripting later on. It gives you sections of your text to work on...So you could have a header section, a main body section, a navigation section (we'll talk about navigation in a tutorial soon), a footer and so on. Each of these bits can be styled differently or told to do different things. For now only worry about remembering to put them in as you divide up the different parts of your HTML document.
<div>Division</div>
Non Nerd HTML 1
Lets see where we are:
I am making the following assumptions:
1. You have a computer at your disposal
2. You do know how to turn it on, and get your operating system up and running.
3. You know what a web browser is - the program that you click on to get to the Internet.
4. More seriously, do you know how to find a file and navigate your file directory?
5. Do you know what a text editor is?
6. I use
Ubuntu Linux, and it is going to be easiest to follow along if you do to. If not, don't worry, we will still get you up to speed. If you use Internet Explorer and can't get certain things to work, please email me or leave a note in the comments. Alternatively, you could send me a tweet.
Good, if you are still with me, then lets jump right in.
We'll get to the "what is" stuff later. Lets get right into making our first web page.
Open a text editor, a really plain, basic one. If you are on Windows, use Notepad and if you are on Linux, use the default text editor. Whatever you use, don't use the
html is typed in mark-up. Don't get to worried about that for now. Type the following:
<html>
<head></head>
<body></body>
</html>
Now go "Save As" and choose a location in your file system to save it. You'll want a folder for all this stuff, because we are going to do a lot of this. Why not make a folder called "Webs" and save this file as "WebOne.htm"
So what have you got now. You have a fully functional web page that you can upload to the Internet, if you wanted to (please don't...there is enough rubbish as it is.)
Your web page does....nothing. Nothing yet. Lets look at what we have so we can understand a little of how the whole thing works.
We basically have three 'containers' each of which starts with an opening tag and a closing tag. are the three opening tags and, of course, and are the three closing tags. Get use to this...It's basically what HTML is all about.
Now, lets do something with it. We want some content. Think of the stuff in the body tags as being the bit that actually ends up on the screen. So, lets add some stuff here.
In your text editor add a little text between the 'body' tags:
<html>
<head></head>
<body>Shine on you crazy... </body>
</html>
Now go ahead and save it. You need to save it with either a .html or .htm file extension. Either will do fine.
The next step is to actually see it in your browser. Open your browser (Internet Explorer, or even better, Mozilla Firefox.)
Note: In this tutorial I will later on start to talk about various browsers, but while we are learning the basics, I am going to mostly assume that you are using Firefox.
Go to the place where you enter the websites that you want to go to and clear whatever is there (probably your default home page.) Now type the file path to your new HTML file. In Linux it is going to be something like this:
file:///home/you/webs/WebOne.htm
Saving the file in Ubuntu Linux.
Saving on Windows XP
And hit return/enter and you should see your page displayed. If it didn't work, please post in the comments or on send me a message on Twitter
Thats the first step. A really easy first step. To get it right you would now have learned:
1. The three basic mark up tags that form a web page (html, head and body)
2. Where the stuff that you see on the page goes (i.e. between the body tag)
3. How to save your htm file
Right, so now you can put readable content into an html page. That's great. Celebrate. But it was easy, wasn't it. In the next section we are going to cover the basics of formating the stuff in your body.
If you enjoy learning html with me, please subscribe to this blog
I am making the following assumptions:
1. You have a computer at your disposal
2. You do know how to turn it on, and get your operating system up and running.
3. You know what a web browser is - the program that you click on to get to the Internet.
4. More seriously, do you know how to find a file and navigate your file directory?
5. Do you know what a text editor is?
6. I use
Ubuntu Linux, and it is going to be easiest to follow along if you do to. If not, don't worry, we will still get you up to speed. If you use Internet Explorer and can't get certain things to work, please email me or leave a note in the comments. Alternatively, you could send me a tweet.Good, if you are still with me, then lets jump right in.
We'll get to the "what is" stuff later. Lets get right into making our first web page.
Open a text editor, a really plain, basic one. If you are on Windows, use Notepad and if you are on Linux, use the default text editor. Whatever you use, don't use the
html is typed in mark-up. Don't get to worried about that for now. Type the following:
<html>
<head></head>
<body></body>
</html>
Now go "Save As" and choose a location in your file system to save it. You'll want a folder for all this stuff, because we are going to do a lot of this. Why not make a folder called "Webs" and save this file as "WebOne.htm"
So what have you got now. You have a fully functional web page that you can upload to the Internet, if you wanted to (please don't...there is enough rubbish as it is.)
Your web page does....nothing. Nothing yet. Lets look at what we have so we can understand a little of how the whole thing works.
We basically have three 'containers' each of which starts with an opening tag and a closing tag. are the three opening tags and, of course, and are the three closing tags. Get use to this...It's basically what HTML is all about.
Now, lets do something with it. We want some content. Think of the stuff in the body tags as being the bit that actually ends up on the screen. So, lets add some stuff here.
In your text editor add a little text between the 'body' tags:
<html>
<head></head>
<body>Shine on you crazy... </body>
</html>
Now go ahead and save it. You need to save it with either a .html or .htm file extension. Either will do fine.
The next step is to actually see it in your browser. Open your browser (Internet Explorer, or even better, Mozilla Firefox.)
Note: In this tutorial I will later on start to talk about various browsers, but while we are learning the basics, I am going to mostly assume that you are using Firefox.
Go to the place where you enter the websites that you want to go to and clear whatever is there (probably your default home page.) Now type the file path to your new HTML file. In Linux it is going to be something like this:
file:///home/you/webs/WebOne.htm
Saving the file in Ubuntu Linux.
Saving on Windows XP
And hit return/enter and you should see your page displayed. If it didn't work, please post in the comments or on send me a message on Twitter
Thats the first step. A really easy first step. To get it right you would now have learned:
1. The three basic mark up tags that form a web page (html, head and body)
2. Where the stuff that you see on the page goes (i.e. between the body tag)
3. How to save your htm file
Right, so now you can put readable content into an html page. That's great. Celebrate. But it was easy, wasn't it. In the next section we are going to cover the basics of formating the stuff in your body.
If you enjoy learning html with me, please subscribe to this blog
Wednesday, September 23, 2009
Mark Shuttleworth Announces Ubuntu 10.04: Lucid Lynx
I just had to stick this one in here. A couple days ago Mark Shuttleworth, one of the most significant free software personalities in the world, announced the the next long term release of Ubuntu Linux which is going to be called "Lucid Lynx." Lucid Lynx will come out next year in April. Before that there is one more release due, Karmic Koala.
If you don't know what Ubuntu is, check out their website. Ubuntu is a free operating system, created both for desktop computers and servers.
If you don't know what Ubuntu is, check out their website. Ubuntu is a free operating system, created both for desktop computers and servers.
Tuesday, September 22, 2009
Beginner Comprehensive Web Authoring Tutorial 1 An Introduction
Welcome to the Non Nerd Free Comprehensive Web Authoring Tutorial.
If you are a total beginner to the whole idea of designing a website, but would love to try it, and maybe learn it properly, then this blog is for you. I am going to take you incrementally through, step by step, from knowing nothing to deploying very clever websites on the Internet.
I will not try to pretend that I provide the best tutorial. There are many many web authoring tutorials out there. As we go along I will give lots of links so you know where I may have learned my stuff from, and so that you can choose where you want to learn. You may find that I teach one aspect better than another, and so choose to learn other things from those who teach them best...great. But this blog will depend on readership. If after a while I see that there is no real traffic, and no comments, I will can the project and assume that you found better tutorials elsewhere.
Now, what do I want to teach you. Well, if we carry on with this long enough, EVERYTHING. Let me summarize my goals:
1. Teach you what a website is, what HTML is and teach you the basic syntax of HTML. This bit is fun and easy. I will be focusing on development on HTML 5 the soon to be released version of HTML.
2. CSS - The styling of your web pages.
3. Basic JavaScript - Breath a little life into your otherwise dull pages.
4. A little about servers and uploading websites...Get what you have done so far out there.
5. More advanced JavaScript and an intro to Ajax.
6. Blogging with online content management systems, and customizing them...we'll start with blogger.
7. Move on to more complex things...PHP, Databases and on and on. At this point you will need to download a server to your computer...don't worry, it's not that scary.
8. SEO and usability...here will be preaching and stern words.
9. Perhaps, later on, we may also start with Flash.
10. We'll move into more detail on servers...now only with Apache.
11. Freelance Web Design and making a living from doing websites.
12. If we are still together, then it will be Python next,
13. And Java (which is not JavaScript.)
13. Well, it all depends on what's happening with this blog, what's happening with the world wide web, and if I am still interested, finding the time and so on.
What am I not going to teach you? Things like Dreamweaver or Frontpage. I want you to cut the code by yourself...especially in the beginning. I think you will thank me later.
What are the characteristics of my tutorials...I teach in a very simple manner...almost like I teach my kids. I love teaching and it has been a big part of how I guide.
I have been, and I am still, teaching myself these things. I am not an expert, but I do LOVE to learn and I LOVE to teach. Come along for the ride...it's going to be fun. Please leave comments, ask questions, correct me when I am wrong, and lets get to know each other through this experience.
If you are a total beginner to the whole idea of designing a website, but would love to try it, and maybe learn it properly, then this blog is for you. I am going to take you incrementally through, step by step, from knowing nothing to deploying very clever websites on the Internet.
I will not try to pretend that I provide the best tutorial. There are many many web authoring tutorials out there. As we go along I will give lots of links so you know where I may have learned my stuff from, and so that you can choose where you want to learn. You may find that I teach one aspect better than another, and so choose to learn other things from those who teach them best...great. But this blog will depend on readership. If after a while I see that there is no real traffic, and no comments, I will can the project and assume that you found better tutorials elsewhere.
Now, what do I want to teach you. Well, if we carry on with this long enough, EVERYTHING. Let me summarize my goals:
1. Teach you what a website is, what HTML is and teach you the basic syntax of HTML. This bit is fun and easy. I will be focusing on development on HTML 5 the soon to be released version of HTML.
2. CSS - The styling of your web pages.
3. Basic JavaScript - Breath a little life into your otherwise dull pages.
4. A little about servers and uploading websites...Get what you have done so far out there.
5. More advanced JavaScript and an intro to Ajax.
6. Blogging with online content management systems, and customizing them...we'll start with blogger.
7. Move on to more complex things...PHP, Databases and on and on. At this point you will need to download a server to your computer...don't worry, it's not that scary.
8. SEO and usability...here will be preaching and stern words.
9. Perhaps, later on, we may also start with Flash.
10. We'll move into more detail on servers...now only with Apache.
11. Freelance Web Design and making a living from doing websites.
12. If we are still together, then it will be Python next,
13. And Java (which is not JavaScript.)
13. Well, it all depends on what's happening with this blog, what's happening with the world wide web, and if I am still interested, finding the time and so on.
What am I not going to teach you? Things like Dreamweaver or Frontpage. I want you to cut the code by yourself...especially in the beginning. I think you will thank me later.
What are the characteristics of my tutorials...I teach in a very simple manner...almost like I teach my kids. I love teaching and it has been a big part of how I guide.
I have been, and I am still, teaching myself these things. I am not an expert, but I do LOVE to learn and I LOVE to teach. Come along for the ride...it's going to be fun. Please leave comments, ask questions, correct me when I am wrong, and lets get to know each other through this experience.
About Me
I live in Namibia and grew up in Kenya. I did study some programming at school, actually for a number of years, but it was always in Basic. At the time I loved it, but eventually got into sports and things like that, and dropped my interest in programming. I carried on doing well with maths and had some interest in graphic design and things like that.
But for year, till today, another interest took the lime light...nature. I studied Nature Conservation Management before moving to Namibia in 1998 to take up tour guiding.
I started working at a lodge, and in 2003 I bought a computer and started to learn stuff. I found a book that my wife had bought in her study years, "HTML by Example" A. Navarro & T. Stauffer, 2000, Dean Miller, USA. It got me off to a good start. Each day I couldn't wait to get home to dig into my book.
I started a website for a company I wanted to start...www.frantic-naturalist.com, and headed strait into the recession. I was aiming at niche market travel, something you want to start in peak times. Anyway, the website is still up, but sort of lost. I did that website on a Windows machine using Frontpage, which was determined by my host.
Soon after that I discovered blogging, and created my first blog http://frantic-naturalist.blogspot.com, which, at the time of writing has over 120 posts and more than 30 people subscribed.
I also have more of a story telling blog, http://africanbushstories.blogspot.com/ which has it's theme of stories from the wilds of Africa.
Those are fun blogs, and I actually started a whole bunch more, but reduced them to those. There was one other blog that I held on to, this one. I was planning to eventually delete it, but I started to see that it was catching on even when I hardly had any content. So I decided it was worth working on.
I live in Windhoek, Namibia (which is in Africa) and live with my wife and two small boys. I still guide, but I am trying to do more to stay home, and I hope that this blog, and designing websites in general will help to contribute to that.
I use Ubuntu Linux, though I still run windows on a partition of my main computer's hard drive. I love open source, especially since I started to learn a lot of this stuff when I had very little money to waste on it.
I also enjoy learning to fly, and it's one of my reasons to use Microsoft...I think FlightGear still needs some work to catch up with Microsoft Flight Simulator
But for year, till today, another interest took the lime light...nature. I studied Nature Conservation Management before moving to Namibia in 1998 to take up tour guiding.
I started working at a lodge, and in 2003 I bought a computer and started to learn stuff. I found a book that my wife had bought in her study years, "HTML by Example" A. Navarro & T. Stauffer, 2000, Dean Miller, USA. It got me off to a good start. Each day I couldn't wait to get home to dig into my book.
I started a website for a company I wanted to start...www.frantic-naturalist.com, and headed strait into the recession. I was aiming at niche market travel, something you want to start in peak times. Anyway, the website is still up, but sort of lost. I did that website on a Windows machine using Frontpage, which was determined by my host.
Soon after that I discovered blogging, and created my first blog http://frantic-naturalist.blogspot.com, which, at the time of writing has over 120 posts and more than 30 people subscribed.
I also have more of a story telling blog, http://africanbushstories.blogspot.com/ which has it's theme of stories from the wilds of Africa.
Those are fun blogs, and I actually started a whole bunch more, but reduced them to those. There was one other blog that I held on to, this one. I was planning to eventually delete it, but I started to see that it was catching on even when I hardly had any content. So I decided it was worth working on.
I live in Windhoek, Namibia (which is in Africa) and live with my wife and two small boys. I still guide, but I am trying to do more to stay home, and I hope that this blog, and designing websites in general will help to contribute to that.
I use Ubuntu Linux, though I still run windows on a partition of my main computer's hard drive. I love open source, especially since I started to learn a lot of this stuff when I had very little money to waste on it.
I also enjoy learning to fly, and it's one of my reasons to use Microsoft...I think FlightGear still needs some work to catch up with Microsoft Flight Simulator
This site will live
I have just had a look at Google Analytics for this site, and in the last month this site has had 127 unique visitors. I have not links to this site anywhere, it isn't linked in my blogger profile, I haven't done anything to promote it. And yet they come.
So, I guess, I am going to start off producing some posts on this blog.
So please dear random visitor, tell me what do you want me to post about. I think at this point I could do posts on the following, all at really beginner level:
1. Full web authoring tutorial for the beginner ...from nothing to getting your page up on the internet
2. Just html (to easy, I think)
3. Html and css
4. Intro to Javascript
5. Intro to php
6. Blogging general
7. Blogging promotion
8. Blogger specific tips and tricks
Leave comments, take my survey or even send me an email (frantic.naturalist @ gmail.com)
So, I guess, I am going to start off producing some posts on this blog.
So please dear random visitor, tell me what do you want me to post about. I think at this point I could do posts on the following, all at really beginner level:
1. Full web authoring tutorial for the beginner ...from nothing to getting your page up on the internet
2. Just html (to easy, I think)
3. Html and css
4. Intro to Javascript
5. Intro to php
6. Blogging general
7. Blogging promotion
8. Blogger specific tips and tricks
Leave comments, take my survey or even send me an email (frantic.naturalist @ gmail.com)
Monday, September 21, 2009
Contact Details
You are welcome to email me at vernon[you know what comes here]sandcurves.com
Please also follow me on Twitter at http://twitter.com/Namibnat/.
I enjoy taking pictures and you can see some of the fun ones at my Flickr Photostream. Please leave a comment on pictures you like, and ask questions if you want help with Photography.
Please feel very free to contact me about any web development stuff you have. If I don't know, I may be able to find out, and we can learn together.
Please also follow me on Twitter at http://twitter.com/Namibnat/.
I enjoy taking pictures and you can see some of the fun ones at my Flickr Photostream. Please leave a comment on pictures you like, and ask questions if you want help with Photography.
Please feel very free to contact me about any web development stuff you have. If I don't know, I may be able to find out, and we can learn together.
Friday, September 18, 2009
sandcurves
Hey, gained a new follower. Well, if you look at the dates on this blog you can see I don't come here often. But I do plan soon to kick off my own blog called Sandcurves. It will have lots of things relating to blogging, web design, photography and photo editing and anything else that I have an interest in. I am in the process of changing my whole life to do more web/photographic stuff and less tour guiding. Stick around, I will post when the blog is up and running (perhaps another two or three weeks)
the url is http://www.sandcurves.com/
the url is http://www.sandcurves.com/
Tuesday, May 19, 2009
New Blog on it's way
I have spend the best part of the last month working on building a new blog. It has meant getting to grips with php and mysql and various other things. I actually started off with Java, but switched to php because I will be helping Safari Wise with their website and their website is based on php. And since starting, I LOVE it!
So my new blog is still just a few files in my machine, but I have registered a new domain at Sandcurves.com and will be putting the blog their soon.
So my new blog is still just a few files in my machine, but I have registered a new domain at Sandcurves.com and will be putting the blog their soon.
Saturday, April 11, 2009
I am trying a new favicon
I decided to try a new favicon on my Website. I still only have it on the index page and some of the sandbox pages that I use for testing. It's a leaf. I love it. Do you?
I guess, after a lot of reading, that xforms are still not used by most browsers. I feel a little frustrated because I have such a limited amount of things that I can use on my server. Perhaps it's time I changed. Trouble is, I get it for free from my father-in-law. Free is a really good price. But he isn't interested in loading php or python or anything else because he just creates pure html/database websites and uses FrontPage for everything.
I guess, after a lot of reading, that xforms are still not used by most browsers. I feel a little frustrated because I have such a limited amount of things that I can use on my server. Perhaps it's time I changed. Trouble is, I get it for free from my father-in-law. Free is a really good price. But he isn't interested in loading php or python or anything else because he just creates pure html/database websites and uses FrontPage for everything.
Friday, April 10, 2009
What I'm working on
I am busy working on my website at the moment. I thought I would post a list of goals here so that I can refer to it when people are trying to help me.
My website is at http://www.frantic-naturalist.com/
I created a folder called Sandbox, which has the pages that I am working on.
The main page that I have been working on is http://www.frantic-naturalist.com/sandbox/test_ul_nav.htm
My goals:
http://www.frantic-naturalist.com/sandbox/sandbox.xml
http://www.frantic-naturalist.com/sandbox/sandbox.htm
The time frame depends on how much else I have to do. Any help or advice, or even questions, would be appreciated.
My website is at http://www.frantic-naturalist.com/
I created a folder called Sandbox, which has the pages that I am working on.
The main page that I have been working on is http://www.frantic-naturalist.com/sandbox/test_ul_nav.htm
My goals:
- Well, you can tell from the name...make a drop down menu using the <ul> tags - This part is done
- New look - I can't resist. It's always changing. It's getting there, but you can still expect some tweeking
- Totally get away from Tables for the page's design. Why, I just want to.
- Comply with the sticktest w3c standards that I can manage (xhtml and css)
- Use xml for my bird lifelist and the nature tours directory
- Use xforms for comments or well, whatever. To learn what xforms are all about, what is the support like for them from browsers
- In terms of content I would like to divide the website up a bit more from the start, in order to have the directory as one part, but Namibia info as a big part of the site.
http://www.frantic-naturalist.com/sandbox/sandbox.xml
http://www.frantic-naturalist.com/sandbox/sandbox.htm
The time frame depends on how much else I have to do. Any help or advice, or even questions, would be appreciated.
Tuesday, March 24, 2009
Make the main body wider in blogger
I thought I would just add this little post.
This is just a simple tutorial for making the main body part of a regular blog template (I was using "Minima") wider. It's already well covered
Google results.
It's rather easy. I just did it to try to make the last post look a little better and it took me just a couple minutes.
Go to blogger → Layout → Edit HTML → Expand Widget Templates
Then scroll down (or control/f) to
to find...
Add an amount to increase the width by. I went from 660 to 860, adding exactly 200px.
Now, you need to keep the whole thing together, so next go down to...
and change the width by the same amount.
Next,
and add the same amount again. Remember, it is the amount you add that must stay the same, not the total amount. The "main-wrapper" is going to be smaller than the "outer-wrapper" because the "outer-wrapper" is also containing the side bar (unless, of course, you did away with the sidebar)
Save and check it. Your blog's main body portion should be wider now.
This is just a simple tutorial for making the main body part of a regular blog template (I was using "Minima") wider. It's already well covered
Google results.
It's rather easy. I just did it to try to make the last post look a little better and it took me just a couple minutes.
Go to blogger → Layout → Edit HTML → Expand Widget Templates
Then scroll down (or control/f) to
#header-wrapper {
to find...
width:...px;
Add an amount to increase the width by. I went from 660 to 860, adding exactly 200px.
Now, you need to keep the whole thing together, so next go down to...
#outer-wrapper {
and change the width by the same amount.
Next,
#main-wrapper {
and add the same amount again. Remember, it is the amount you add that must stay the same, not the total amount. The "main-wrapper" is going to be smaller than the "outer-wrapper" because the "outer-wrapper" is also containing the side bar (unless, of course, you did away with the sidebar)
Save and check it. Your blog's main body portion should be wider now.
Hide your blogger navbar
Introduction: In a blogger blog (...blogspot.com/) you will always find that you get a navigation bar at the top.
I don't think everyone will want to get rid of it, but if you want to personalize your blog a bit, you may think about throwing it away.
How to do that? Well, it's rather easy to just get rid of it, but there are a few additional things you could do to.
I don't think everyone will want to get rid of it, but if you want to personalize your blog a bit, you may think about throwing it away.
How to do that? Well, it's rather easy to just get rid of it, but there are a few additional things you could do to.
Just get rid of the Nav bar: This is really easy. Follow here step by step and you will have no navbar.
- Sign in to blogger, and go to "dashboard".
- Click on "Layout" for the blog with the doomed navbar.
- Select "Edit HTML"
- Select "Expand Widget Templates"
- Now either press 'Ctrl' + 'f' and search for 'body {'.
The image shows how this can be done in firefox:Or you could just scroll down.
The "body" element is the first one in the CSS portion of your blogger template.
It's not that far down. - Now just add the following code just after the body {....} css element
#nabvar {
display:none;
}
But if you don't want to go all the way, there are some ways to just hide it a little. Some people are scared of Google taking it out on them if they don't follow the rules. Well, this is how you do that...
Come and go: In this example you make the navbar disappear while until you hover over it with simple css.
I found this bit of code on various people's blog and so it's hard to credit the original author. It's not me, and I am sure it would have taken me some time to figure it out, being a non-nerd type. Try it. All you need to do is add this code where I told you to add the code mentioned above, just below the body {...} section in your blogspot template code.
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
Reference: This bit of code seems to have been plagarized by loads of people in endless tutorials. I tried to find the oldest version of it that I could. This seems to be the oldest post that I could find on this peace of code.
Come and go a little: So, this is my own little edition. Most of what I learn ends up being just like this. I find an interesting thing to try, try it, and then try to change it and understand how it works (or at least have an idea how it works.) How I learn for guiding influences a great deal how I learn for computers. Both are related: I want to understand how things work. It makes me a successful guide, and makes blogging (and other 'computer' related things) FUN!
So, why not just play with the Opacity and see where it takes us:
#navbar-iframe{opacity:0.3;filter:alpha(Opacity=30)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
Now it's not totally hidden ever, but just get's a little see through.
If you want to learn more about transparency, visit these pages:
www.w3schools- css image transparency and
www.w3.org - css3 color - transparency.
Tuesday, March 17, 2009
New comments test
Part of the reason for a blog like this is just to have somewhere to try things. Since various people are now reading this blog I will do my best to make that testing interesting and useful. I am playing around with my main blog, Frantic Naturalist, a lot, but want to try things elsewhere before they go there. I just thought that I would try to get to know IntenseDebate, and so I am trying it here.
Oh, please comment. Say anything. Promote yourself, whatever. Just keep it clean. I am just testing right now. Of course I think there are only about two or three people reading this blog at the moment, so if nobody does comment, forgive me for commenting myself. I am just trying it out.
Oh, please comment. Say anything. Promote yourself, whatever. Just keep it clean. I am just testing right now. Of course I think there are only about two or three people reading this blog at the moment, so if nobody does comment, forgive me for commenting myself. I am just trying it out.
Subscribe to:
Posts (Atom)
