tag:blogger.com,1999:blog-324234892011-07-07T21:49:43.074-07:00Bill Kerrhttp://www.blogger.com/profile/00206808014093631762noreply@blogger.comBlogger51100tag:blogger.com,1999:blog-32423489.post-65586135770417872592009-08-02T20:38:00.000-07:002009-08-17T16:08:14.167-07:00I've asked my students to do this task:<br /><blockquote>Make 5 copies of your website. Then using HTML-Kit develop different good looking banner headlines:<br /><ul><li>One of them very bad</li><li>Three of them good (one of those not using any background images)</li><li>At least one of them unusual and good</li></ul>Experiment with variations in fonts, font size, borders (different top, bottom, left, right), padding, colours, background images, letter spacing, word spacing, width, height, text-align<br /><br />Convert the embedded style (in head section) to inline style and display your five different banner headlines in one blogpost</blockquote>The banner headline does not appear in Preview but it does appear in Compose view and it is published ok<br /><br />Also blogger sometimes changes and capitalises the properties for some reason (but not always, not sure why)<br />eg.<br />border: 10px double #f00; was changed to<br /><br />BORDER-RIGHT: #f00 10px double;<br />BORDER-TOP: #f00 10px double;<br />BORDER-LEFT: #f00 10px double;<br />BORDER-BOTTOM: #f00 10px double;<br /><br /><h1>banner headline</h1><br /><br /><h1 style="BORDER-RIGHT: #f00 10px double; PADDING-RIGHT: 20px; BORDER-TOP: #f00 10px double; PADDING-LEFT: 20px; PADDING-BOTTOM: 20px; MARGIN: 0px; BORDER-LEFT: #f00 10px double; WIDTH: 350px; COLOR: green; PADDING-TOP: 20px; BORDER-BOTTOM: #f00 10px double; FONT-FAMILY: algerian; BACKGROUND-COLOR: yellow; TEXT-ALIGN: center">banner headline</h1><br /><br /><h1 style="font-family: algerian; background-image: url(http://3.bp.blogspot.com/_r-MQun1PKUg/SnjGdNjUs_I/AAAAAAAABAw/OOHvPhVM7xw/s320/cloudz.gif) ; color: green; text-align: center; margin: 0; padding: 20px; border: 10px double #f00; width: 350px;">banner headline</h1><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_r-MQun1PKUg/SnjGdNjUs_I/AAAAAAAABAw/OOHvPhVM7xw/s1600-h/cloudz.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 100px;" src="http://3.bp.blogspot.com/_r-MQun1PKUg/SnjGdNjUs_I/AAAAAAAABAw/OOHvPhVM7xw/s320/cloudz.gif" border="0" alt="" id="BLOGGER_PHOTO_ID_5366257161168270322" /></a><br /><br />To get the background image to appear using inline style upload the image you want to use and then find the src attribute of the image tag. Copy and paste that url into the background-image: url() value<br /><h1 style="font-family: Cooper Black; font-size: 20pt; background-image: url(http://4.bp.blogspot.com/_r-MQun1PKUg/SnlTh1wdshI/AAAAAAAABA4/As9TF8f5xAs/s320/blumarbl.gif); color: blue; text-align: center; padding: 20px; border-top:30px solid blue ; border-bottom:5px dashed blue ;text-transform: uppercase; width: 350px ; "> banner headline</h1><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_r-MQun1PKUg/SnlTh1wdshI/AAAAAAAABA4/As9TF8f5xAs/s1600-h/blumarbl.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 100px;" src="http://4.bp.blogspot.com/_r-MQun1PKUg/SnlTh1wdshI/AAAAAAAABA4/As9TF8f5xAs/s320/blumarbl.gif" border="0" alt="" id="BLOGGER_PHOTO_ID_5366412271819797010" /></a><br /><br /><h1 style="font-family: Times; font-size: 60pt; line-height: 70pt; background-color:#cc33ff ;background-image: url(http://4.bp.blogspot.com/_r-MQun1PKUg/SnlaNAAkhyI/AAAAAAAABBA/0DSDlTrW9vI/s320/rainbow.gif) ;background-repeat: no-repeat;background-position: right;color: green;text-align: right;padding: 0px;border-right:10px double #f00 ;border-left:40px dotted #f00 ;border-top:30px dashed #f00 ;border-bottom:5px ridge #f00 ;width: 350px ;height:350px ; word-spacing: 1em;text-transform: capitalize; ">chunder headline</h1><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_r-MQun1PKUg/SnlaNAAkhyI/AAAAAAAABBA/0DSDlTrW9vI/s1600-h/rainbow.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 67px; height: 320px;" src="http://4.bp.blogspot.com/_r-MQun1PKUg/SnlaNAAkhyI/AAAAAAAABBA/0DSDlTrW9vI/s320/rainbow.gif" border="0" alt="" id="BLOGGER_PHOTO_ID_5366419610375849762" /></a><br /><br /><h1 style="font-family: Impact;background-color: yellow;color: red;text-align: center;padding: 20px;border-right: 30px solid black ;border-left:30px solid black ; border-top: 3px solid black ;border-bottom: 3px solid black ; width: 350px ;text-transform: lowercase;">banner headline</h1><br /><br /><h1 style=" background-color: yellow;text-align: center;border-top: 5px dashed red; border-bottom: 20px double red; width: 650px ;letter-spacing: 20pt;text-transform: capitalize; padding-top: 20pt;font-family:Rage Italic;color:green;"><span style="font-size:50pt;">u</span>nusual<span style="font-size:50pt;">h</span>eadline</h1><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/32423489-6558613577041787259?l=webdesign1001.blogspot.com' alt='' /></div>Bill Kerrhttp://www.blogger.com/profile/00206808014093631762noreply@blogger.com0tag:blogger.com,1999:blog-32423489.post-12500961246449530472009-07-31T17:58:00.000-07:002009-07-31T18:00:50.453-07:00address tag<br /><address><br />Woodville High School<br />11 Actil Avenue<br />Woodville 5011<br /></address><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/32423489-1250096124644953047?l=webdesign1001.blogspot.com' alt='' /></div>Bill Kerrhttp://www.blogger.com/profile/00206808014093631762noreply@blogger.com0tag:blogger.com,1999:blog-32423489.post-91187561438587020462009-07-31T17:42:00.000-07:002009-07-31T17:45:32.231-07:00Comments in the HTML source:<br />1) Place markup around the following sentence so that it will not be displayed in a browser:<br /><br /><!-- This comment will not be displayed --><br /><br />< !-- This comment will not be displayed --><br />I have done this twice, the first time it doesn't appear, the second time I have added a space after the &lt; so that you can sort of see how to do a comment<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/32423489-9118756143858702046?l=webdesign1001.blogspot.com' alt='' /></div>Bill Kerrhttp://www.blogger.com/profile/00206808014093631762noreply@blogger.com0tag:blogger.com,1999:blog-32423489.post-22143695755810009122009-07-20T01:08:00.000-07:002009-07-20T02:17:30.952-07:00How to show html tags<br />3) &lt;h&gt; big heading &lt;/h&gt;<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_r-MQun1PKUg/SmQ2AxVEaVI/AAAAAAAAA_8/x4Rk4PzGOps/s1600-h/html_funny_head_body.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 240px; height: 320px;" src="http://2.bp.blogspot.com/_r-MQun1PKUg/SmQ2AxVEaVI/AAAAAAAAA_8/x4Rk4PzGOps/s320/html_funny_head_body.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5360468843347339602" /></a><br /><br />4) How to show fonts using inline style:<br /><span style="font-family: sans-serif"><strong>SANS-SERIF:</strong></span> <span style="font-family: Verdana">Verdana</span>, <span style="font-family: Arial">Arial</span>, <span style="font-family: Calibri">Calibri</span><br /><br /><br />5) Converting BMP to GIF or JPG<table border="10" cellpadding="10" cellspacing="0" summary=""><tr><td>File name</td><td>File size KB)</td></tr><tr><td>stars.bmp</td><td>260</td></tr><tr><td>stars.gif</td><td>???</td></tr><tr><td>stars.jpg</td><td>???</td></tr><tr><td>stars.png</td><td>???</td></tr></table><br /><br />5) Converting BMP to GIF or JPG<br /><table border="1" cellpadding="10" cellspacing="0" summary=""><br /><tr><td><strong>File name</strong></td><td><strong>File size (KB)</strong></td></tr><br /><tr><td>stars.bmp</td><td>260</td></tr><br /><tr><td>stars.gif</td><td>???</td></tr><br /><tr><td>stars.jpg</td><td>???</td></tr><br /><tr><td>stars.png</td><td>???</td></tr><br /></table><br /><br /><h3>8) Colour awareness</h3><br /><span style="background-color:#ff0000">red:</span> #ff0000<br /><br /><span style="background-color: #008000">green</span> #008000<br /><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/32423489-2214369575581000912?l=webdesign1001.blogspot.com' alt='' /></div>Bill Kerrhttp://www.blogger.com/profile/00206808014093631762noreply@blogger.com0tag:blogger.com,1999:blog-32423489.post-1155078226658584842006-08-08T16:02:00.000-07:002006-11-10T20:27:51.392-08:00Settting up this blog as part of my year 11 semester 2 web design course<br /><br />It is to help my students with their blog creation and work<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/32423489-115507822665858484?l=webdesign1001.blogspot.com' alt='' /></div>Bill Kerrhttp://www.blogger.com/profile/00206808014093631762noreply@blogger.com1