Rss Feed

‘Web Coding’ Category

  1. Javascript / PHP- PHP Includes

    July 24, 2009 by Katie

    PHP Includes are great for if you just want to change a header and footer whenever you make a new layout instead of changing every single page.

    1. First, your website must be php enabled, basically meaning that a lot of free sites won’t cut it.

    2. Rename all your pages as .php instead of .html or .htm.

    3. Make a new page called header.txt and one called footer.txt (the file extension can also be .php).

    4. In the header, put all the stuff before the actual content comes. This would mean it has the top banner, title, maybe the navigation, all that jazz. In the footer put all the copyright info and ending tags for your layout such as the end div tags.

    5. Then, on every page, erase the layout (if you have one) and replace it with:

    <?php include(“header.txt”) ?>

    ..at the top of your page, and:

    <?php include(“footer.txt”) ?>

    .. at the bottom of your page.

    Wallah! Now you can change the header and footer as many times as you want
    and it will be on every page. :)

    PHP Require

    The alternative to php(include) is php(require). Require will mean that if for some reason your header or footer doesn’t work, your page will display an error message and not show up. This is mostly useful if you’re using this to display something with a script (this is often used for forums and blogging scripts) as a security measure – in other words, if the one script isn’t working, then someone can’t breach your site’s security either. But keep in mind that for just regular headers and footers it probably isn’t necessary. :)

    <?php require(“page url”) ?>

    Category Web Coding | Tags: | No Comments

  2. Javascript / PHP- Display the Date

    by Katie

    Both javascript and php can be used to display the date.

    Javascript

    Today is

    Today is
    <script type=”text/javascript”>
    var d=new Date()
    var weekday=new Array(“Sunday”, “Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”, “Saturday”)
    var monthname=new Array
    (“January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December”)
    document.write(weekday[d.getDay()] + “, “)
    document.write(monthname[d.getMonth()] + ” “)
    document.write(d.getDate() + “, “)
    document.write(d.getFullYear())
    </script>

    Today is

    Today is
    <script type=”text/javascript”>
    var d=new Date()
    var weekday=new Array(“Sunday”, “Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”, “Saturday”)
    var monthname=new Array
    (“January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December”)
    document.write(weekday[d.getDay()] + “, “)
    document.write(monthname[d.getMonth()] + ” “)
    document.write(d.getDate() + ” “)
    </script>

    Today is

    Today is
    <script type=”text/javascript”>
    var d=new Date()
    var monthname=new Array
    (“January”, “February”, “March”, “April”, “May”,”June”, “July”,”August”, “September”,”October”,”November”,”December”)
    document.write(monthname[d.getMonth()] + ” “)
    document.write(d.getDate() + “, “)
    document.write(d.getFullYear())
    </script>

    Today is

    Today is
    <script type=”text/javascript”>
    var d=new Date()
    var monthname=new Array
    (“1″,”2″,”3″, “4″,”5″,”6″, “7″,”8″,”9″, “10″,”11″,”12″)
    document.write(monthname[d.getMonth()] + “/”)
    document.write(d.getDate() + “/”)
    document.write(d.getFullYear())
    </script>

    PHP

    Today is echo date("n/j/Y");
    ?>

    Today is <?php
    echo date(“n/j/Y”);
    ?>

    Today is echo date("F j, Y");
    ?>

    Today is <?php
    echo date(“F j, Y”);
    ?>

    Today is echo date("l, F j, Y");
    ?>

    Today is <?php
    echo date(“l, F j, Y”);
    ?>

    Today is echo date("l, F j");
    ?>

    Today is <?php
    echo date(“l, F j”);
    ?>

    echo date("g:i a");
    ?>

    <?php
    echo date(“g:i a”);
    ?>

    Category Web Coding | Tags: | No Comments

  3. Javascript / PHP- Intro

    by Katie

    Javascript and PHP are great ways to add interactivity and dynamics to your site. They can do simple things such as display the date, or php can do amazing things like run an entire forum or a topsite.

    Javascripts are contained within the following tags:

    <script type=”text/javascript”>
    fancy stuff here
    </script>

    And php is contained within these tags:

    <?php
    fancy stuff here
    ?>

    Add to Favorites

    If you want a visitor to be able to bookmark your site, this is the code to use.

    Example: Add to Favorites

    <a href=”#” onclick=”window.external.AddFavorite(location.href, document.title);”>Add to Favorites</a>

    Set as Homepage

    If you want a visitor to be able to set your website as their homepage, use this code.
    Example: Set as Homepage

    <a href=”#” onclick=”this.style.behavior = ‘url(#default#homepage)’; this.setHomePage(‘http://YOUR WEBSITE URL’);”>Set as Homepage</a>

    Rollovers

    Image rollovers are very easy and they really add some spice to your website. They can be used with a link for your site navigation.

    <img src=”first image” onmouseover=”this.src=’second image”” onmouseout=”this.src=’first image again’” alt=”" />

    Random Text / Images

    This script can be used for an ad rotation, an image rotation, or just displaying something random. (refresh to see more random text)

    <script type=”text/javascript”>
    <!–
    random = new Array(5);

    random[0] = ” I’m random text! “;
    random[1] = ” This is fun. “;
    random[2] = ” I love my website “;
    random[3] = ” Whee! :) “;
    random[4] = ” Yay! =D “;
    index = Math.floor(Math.random() * random.length);
    document.write(random[index]);
    // –>
    </script>

    Alert Box

    Example: Click me!

    <a href=’javascript:onClick=alert(“TEXT HERE”)’>LINK NAME HERE</a>

    Category Web Coding | Tags: | No Comments

  4. Basics- FTP Programs

    by Katie

    If you happen to have a paid website, you might use an FTP program (file transfer protocol) to publish your website (the alternative is publishing online with CPanel). Basically you make the files on Notepad or something on your computer and use an ftp program to publish those files to the web. For the purposes of this tutorial, I’m using Filezilla, a free program. Note: this is not necessary for free hosts like Webs or Freehostia, only paid hosts.

    1. Open the program

    Since we’re using Filezilla, I’ll use instructions for it specifically, though they are probably similar for most ftp programs. Open it and then go to File- Manage Sites. Click on New Site.

    2. Fill in information

    Next you have to fill out all your information. If you don’t know your information, you can probably find it by logging into your hosting account. The servertype should be FTP- File Transfer Protocol and the Logontype should be Account. User and account will have the same entry (your username). Host is the server of your web hosting company. Click Connect when you’re done.

    3. Publish files

    Now that you’re connected you can publish files. As seen in the diagram below, use number 1 for finding folders on your harddrive, 2 for locating the files and double clicking on them or dragging them, 3 for clicking on specific folders of your website so you can upload files there, and 4 for where you drag all the files you want to publish (they will start publishing as soon as you put them in this box).

    Category Web Coding | Tags: | No Comments

  5. Basics- Coding a Webpage

    by Katie

    Now that you have your first website, you have to learn how to code it. For this you need a host that allows you to freely edit your site (see free edit method on Get Started). Open your index page and paste in the following code:

    <html>
    <head>
    <title>Site name here</title>

    </head>

    <body>

    Content here

    </body>
    </html>

    This is the basic code of all webpages, though technically your site will still show up without it. In the long run, it’s better to just to code the proper way, though, because it increases the odds that your site will look good in all browsers and all on computers. You can have bad coding, but somewhere along the line it’s going to cause you problems and then you’ll have to redo the whole mess. Trust me, I’ve been there. :P

    Let’s go through what all the coding means.

    • Html starts and ends the page (you aren’t limited to just html though, there’s also things like javascript and php too).
    • Head starts and ends the header of the page. Here is where you put your title, css (or external css link), javascript (or external javascript link), or a few other things.
    • Body is where all your content goes, along with most of the layout (except the styling, which is part of the css).

    There are also many codes you can add to your header (the space between the <head> tags) that can improve the accessibility of your site. Accessibility has to do with people from all different kinds of computers and browsers being able to visit your site. You have to remember that some people have poor eyesight, are blind or deaf and have to use special programs to use the internet, choose to turn off images in their browser, or have a slow internet connection, so it’s good to design your site in a way that’s more accessible for everyone.

    The following are called meta tags:

    • <meta name=”description” content=”" />

      Use this to type a description of the webpage where it says content=” “

    • <meta name=”keywords” content=”" />

      Use this to add keywords to a webpage, separated with commas (for example, a page about all types of sponges might have the keywords sponge, kitchen sponge, sea sponge, types of sponges)

    • <meta name=”author” content=”" />

      This one is for defining who the author of the website is.

    • <meta name=”language” content=”EN” />

      This is for what language your site is in (helps screen readers, which are programs that read the words on your screen out loud).

    • <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

      This is for declaring the character set of your website.

    Category Web Coding | Tags: | 1 Comment

  6. Basics- Get Started

    by Katie

    Congratulations – you are now embarking on the fantastic journey of making your own website! Making a website is a very rewarding experience; not only are you carving out your own little corner of the internet (or perhaps a very big corner), you also have the freedom to put anything you want on your site and express yourself however you feel like. I’ll show two ways to make a website – with a template or with free editing.

    Template Method- 1. Find a host

    For the purposes of this guide I’ll assume you want a free host. As stated previously, webs.com, freehostia.com, blogspot.com, piczo.com, and awardspace.com are all good free hosts, but just to simplify things, I’m going to have a step by step guide for signing up with Webs (they had the simplest registration).

    2. Sign up

    Find the signup box on the homepage and fill out your desired site name and password.

    On the following page fill out the rest of the forms, pick a template, agree to the terms of service, and click Create My Site. On the next page select the Basic plan, and then next click Build Page on My Own.

    3. Make the pages

    On the Webs Site Builder, you can now customize your website. Since Webs emphasizes its templates, it’s a good place to start if you’re more focused on getting your content up and don’t really care about coding a layout (i.e. if this is a club, school, or organization’s website, as opposed to a graphic site). When you’re done you can publish your site.

    Here is my masterpiece ;) To tell the truth I actually took off the template, but that’s beside the point. =P

    Free Edit Method- 1. Find a host

    For this I used Free Hostia. It’s basically the same procedure but this particular host asks for quite a bit more information, probably because you sign up the same way for a free account as if you’re getting a paid account. The point of this is that you will have complete control over your pages instead of being confined to a template. The rest of the tutorials in this guide are designed for sites that allow free editing.

    2. Sign up

    For Free Hostia, click on More Info for the Chocolate plan and then click the Take a Bite FREE button. On the Signup Page fill out the information as follows. (ok, I may have made up stuff, but if you’re ever planning on upgrading your site to have more space [aka something you have to pay for] you should probably use real information. But if you’re under 18, make sure your parents/guardians are ok with you using real info)

    3. Make the pages

    For Free Hostia you have to wait to get an email with your username and password, but after that you can log into the Control Panel and get started! From there click on the File Manager icon, then click the link that is the address of your site. To make your homepage, type index.php in the Create New File/Folder box, check the empty file box, and press create. You can reference the extremely detailed (=P) diagram below for a visual.

    Next click the paper with pencil icon and then click Open with plain text editor. From here you can add whatever html you want, add more pages in the file manager, and do whatever you want! You’re not confined to a template! :D

    (P.S. if you want to use Webs for free editing instead, log into your account, click on the My Account Button at the top, scroll down to the Other Settings box, and click on Downgrade Account. This will let you use html and css to edit your site.)

    Category Web Coding | Tags: | No Comments

  7. Basics- Intro

    by Katie

    You’re probably here because you want to learn how to make a website. You’re definitely in the right place! But before we get started on the actual coding, it’s helpful to define some commonly-used web terms so we’re all on the same page. Here are some of the basics:

    What is a domain?

    A domain is a website that has a name like smileyhelper.com

    It’s whatever words you want with a .com, .net, .org, .info, or another ending.

    You have to pay a monthly fee for the web space, and a yearly fee to own the domain name. Unless of course someone else is hosting you for free. :) But even then, they have to pay for it.

    What is a URL?

    A URL stands for Uniform Resource Locator, and that basically means it’s a bunch of text strung together so the computer know where to find a website and at what place. They start with http:// and usually a www. As well as being the location of webpages, it can also be the location of a hosted image or some other file.

    What is an address?

    The same as an URL. :)

    How do I make a website? (for free)

    You just have to sign up at a free web host, of course! =) Some good free hosts are:

    webs.com
    geocities.com
    freehostia.com
    awardspace.com

    What about a paid host?

    I strongly recommend LunarPages, our host. [insert shameless promotion]

    What is HTML, anyway?

    Hyper Text Markup Language. That means it’s a text-based (as opposed to symbols or something..) computer language, and it is used to code websites. Alternately there is XHTML, which we will be delving into, and it is the ‘valid’ version of html.

    Okay.. what does CSS stand for?

    Cascading Style Sheets. They add style to your pages. :) -insert more corny humor-

    What’s Java Script?

    It’s yet another computer language like html and css (more complicated), but you can actually make your pages interactive! =O

    What about PHP?

    Again, it’s just another computer language that can be used for more complex and more secure functions than with just javascript and html alone.

    Category Web Coding | Tags: | No Comments

Newer Entries
refugio animal bizcaya
chase bank usa