Privacy

Google is creepy they stalk you….and almost every one is creepy excepted for duckduckgo.com and sites and the IP addresses they do this to put up ads. so remember your being...

more info

JavaScript: Making a Digital Clock

To make a digital clock appear on a website you will need to use JavaScript (while also a bit of HTML and CSS). This is the coding you will need. Below, colours are used as follows: Blue: for HTML Red: for CSS Green: for JavaScript Black: for comments (these are just to help you understand what’s going on, comments don’t have to be in your actual code for your program to work. <!DOCTYPE html> <head>   <title>JavaScript Clock</title>   <style type="text/css">     #clock { font-family: Arial; color: white; background-color: black; padding: 5px; }   </style>   <script type="text/javascript">     function updateClock( )     {        // CREATING YOUR VARIABLES BY MAKING A "DATE" OBJECT - OBTAIN THE CURRENT TIME THROUGH METHODS...

more info

JavaScript: Your First Program

JavaScript is a programming language used by web browsers to make a webpage become interactive and respond to the live input of the user. Check out these examples of really cool webpages with JavaScript: www.hereistoday.com/, www.patatap.com/ and www.cubeslam.com/iutuna. In this post you will learn how to write your very first JavaScript program (of course, if you haven’t done so already). This program involves writing a “cat face” which as a result of your written instructions to the computer will replicate itself by 10 times. The code to be written is the following: var drawCats=function(howManyTimes) { for(var i=0; i<howManyTimes; i++){   console.log(i + "=^.^=");   } }; drawCats(10) The following are the instructions for this program: Open...

more info

CSS: Background Colour and Images

Note: Here in WordPress you can’t set a background colour to your whole post as that would require amending the CSS file of the whole page. You can however create a <div> and then fill its background with a colour of your choosing. For more click here! Setting up the background color of your page with CSS is easy. See the example below for CSS code that will make the background colour of a linked HTML page be light blue. body { background-color: #b0c4de; } To learn more about colours and their codes, click here! You can also use an image as background for your whole post or for a div. If the image...

more info

Picking a Colour

In programming you can express a certain colour in three ways: by its HEX value (e.g. “#ff0000“), by its RGB value (“rgb(255,0,0,0)“) or simply by its colour name (e.g. “red“). Whether it be in HTML or CSS, if you want your website to use a particular colour you have to use one of the three ways above. There are plenty of good websites that allow you to be specific in your colour choosing. A very good one to visit is www.color-hex.com...

more info

CSS: Grouping Selectors

Look at the CSS code written below: h1 { text-align: left; color: #0000ff; } h2 { text-align: left; color: #0000ff; } h3 { text-align: left; color: #0000ff; } Noticed something? Although there are three different selectors (“h1“, “h2” and “h3“), they all use the same properties and values. To avoid writing three different pieces of code, CSS allows you to group the selectors together so that one piece of code as the one below will produce the same output: h1, h2, h3 { text-align: left; color: #0000ff;...

more info

CSS: Applying CSS Rules

CSS is applied by following three simple rules: Identifying the HTML element to style. This element is called the “selector”. Specifying the property of the HTML element which is to be changed (e.g. colour, size, font, etc) Assigning a value (numerical or written) to the chosen property. For example, below is CSS coding at its simplest with a selector (“p“, which in HTML stands for paragraphs), two properties (“text-align” and “color“) and two corresponding values (“center” and “red“). p { text-align: center; color: red; } This piece of CSS code will style all the <p> elements in a linked HTML document so that they are centered and in colour...

more info

CSS: Creating & Linking a CSS file

Note: Here in WordPress you won’t need to create a CSS file as one already exists. To learn how to style HTML elements in WordPress click here! A CSS file is easily created by creating any file that finishes with the extension “.css” (for example, creating a file named “design.css”). Once made, your next job before actually inputting CSS code on your CSS file is to link it to your HTML file which holds all the content of your website. How do you link a CSS file to your HTML file?. You do this by revisiting your HTML document and inputting the CSS file’s name on its <head> element. In the example below, a...

more info

CSS: Adding CSS on WordPress

CSS stands for “Cascading Style Sheets” and is a programming language used to apply style rules to HTML elements. To keep it simple, CSS is the language that determines how a webpage will “look”. There are plenty of ways to apply CSS rules on a website. Normally the most convenient way is to create a separate CSS document to edit. In wordpress though, because each post on dedarwin.net is considered to be individual to each student, the two best way to apply CSS is to edit the post itself in either of the following ways: By using the “style” property within an HTML element directly. Look at the code below for an example. By...

more info

HTML: Creating Classes and IDs

There will be times when you want to use CSS to style multiple HTML tag elements at once. For example, imagine you wanted to select most – but not all – of the <p> tags inside your HTML document at once because you wanted those specific paragraphs you selected to be of the same font size and colour. How can you do this? You can group such tag elements inside your HTML document by using either of two attributes: IDs or classes. You can then use the respective “ID” or “class” value you assigned in CSS to edit all the respective IDs or class elements at once. “IDs” are used to identify a unique...

more info

HTML: Adding a Table

These are some HTML tag elements that can be used to organize data into a table format that can be displayed on your HTML website. TAG DESCRIPTION <table> This tag element allows you to create one table. Attributes used often are: border – to create a visible border to your table. Input a number as its corresponding value. width – to adjust the width of your table. Input a percentage or a pixel number as a value. <caption> Use this tag element to give your table a caption. When used, it usually is placed immediately after the <table>. <tr> A tag element used within a <table> tag to create a row. The following is...

more info

HTML: Adding a Website Link

The <a> tag is the main tag to be used to allow your website user to click on a link that will take them to a different website page. HTML links can be absolute addresses (external documents) or relative addresses (links to other pages within your website). TAG DESCRIPTION <a> Makes any text written within the opening and closing <a> tags to become clickable text that takes you to an absolute or relative address. The <a> tag can be wrapped inside entire paragraphs, lists, tables, pictures and even entire sections of HTML. The <a> tag has some of the following attributes: href=”http://www.google.com” – this attribute has to be used inside an <a> tag to...

more info

HTML: Styling your Text

These are some HTML tag elements that can be used to input specific kinds of text on your HTML document. TAG DESCRIPTION <h1> - <h6> To be used for headings. <h1> provides the biggest size of text for a heading. The lower you go on the numbered size of the heading, the lesser the size of the text will be. Use lower-sized headings for subtitles. <p> To create generic paragraphs. This is one of the most commonly used HTML tags. <blockquote> To quote text that comes from external material such as articles, blog posts, quotes, etc. This tag element by itself cannot contain text, it must be used by holding another tag element inside...

more info

HTML: Adding a Picture

The HTML tag to use for adding pictures is <img>. Within this tag you can use plenty of attributes as per below to further define properties of your image. Remember: make sure your image files are in either of the following formats: GIF, JPEG, PNG or GIF. TAG DESCRIPTION...

more info

HTML: Adding a List

There are three main types of lists that can be created in a HTML document: an “un-ordered list” (ul), an “ordered list” (ol) and a “description list” (dl). TAG DESCRIPTION <ul> To make an un-ordered list (a list displayed in bullet points). These type of lists are used to list a set of related items that have no particular order of organization (e.g. milk, butter, bread, etc). Example <ul> <li>bread</li> <li>coffee beans</li> <li>milk</li> <li>butter</li> </ul> <ol> To group a set of related items in a specific order (e.g. cooking instructions). HTML displays an ordered list in number format. Example <ol> <li>Monday</li> <li>Tuesday</li> <li>Wednesday</li> <li>Thursday</li> <li>Friday</li> <li>Saturday</li> <li>Sunday</li> </ol> <dl> To make a description list...

more info

Change bg colour

usually it is done in the CSS but we can change the background colour in the post <div...

more info

HTML Rollover Effect

<div align=”center”> <img src=”IMAGE1 URL” onmouseover=”this.src=‘IMAGE2 URL‘” onmouseout=”this.src=’IMAGE1 URL‘” width=”300″ height=”300″ /> </div> Here’s some HTML code to create the roll over effect with two different...

more info