Geek Proud, GeekOut.

Web Development

Growing up, I have always had the internet in my life. No, seriously – When I was younger, it was a little trickier to be connected, because it was expensive, but it was available to me at least from when I was in the later years of my primary (elementary) school. As such, I’ve spent much of my life using and perusing the many files that make up the world wide web, so it’s a subject close to my heart.

In this post, I look to expose a few of the major web technologies that are out there, so you know just how the internet is made up and why we do a few weird things on the internet. Weird things such as these tags enclosed in the less than and more than symbols (<tag>, for example). I’m going to explain the uses of each of the technologies then at the end, explain how you can learn more for free.

HTML

HTML5_Logo_512

Many of you are aware as to what a HTML file is, but for those who don’t know, it stands for HyperText Markup Language. This is the barebones of a website, the <tags> that I previously mentioned. It’s a simple concept really, you use these to tell the browser about certain content you want and how you want them placed on the website. You can’t make it look very good with HTML, but think of a tag as a container for information.

You would always start with a doctype, which explains to your browser “hey, use this version of HTML.” Since the latest release of HTML, known as HTML5, the doctype has gotten a lot easier. It used to be something along the lines of:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”&gt;
I mean that’s an ugly looking tag. Instead, they’ve replaced it with <!doctype html> That’s better!
Next up, you declare the start of your page with an <html> tag. All tags must be closed off with a tag that has a forward slash inside of it, so to close off the html tag, it’d look like </html>. Have you ever used a forum? If so, you may be used to seeing the words “HTML messages are enabled” or something like that. This means you can use some tags, such as <strong> </strong> to make something bold. You can use <img src=”” /> to get an image and so on.
Your basic page structure can be copied from a website called Example. If you right click on the page and click View Source, you’ve got yourself the logic behind the website. No need to write out the barebones by yourself, you can just take and modify that one. Yes: It’s fine to do so. On the web, HTML is easily viewable by nearly all websites, meaning you can edit existing pages to fit your own needs.

CSS

CSS3_Logo

CSS is not as well known as HTML. CSS stands for Cascading Style Sheets, which is a really funky way to say “I’m the code that makes your pages look pretty!” You can do some really cool things with CSS, such as making your links display in different colours. With many different applications such as applying different fonts or sizes to different elements of the page if you want to.
You can write CSS code directly into your html file. Once you’ve written your html document, you save it as “page_name.html” where page_name is the name of your page. Usually your website’s home page will be saved as index.html, but in essence there’s no need to worry about this. Once you’ve done this, you can write your CSS code. So how does CSS look different to HTML? Here’s a sample of the custom CSS we use here on GeekOut South-West:
h3 {
color: #B00000;
font-size: 16pt;
}
This code says: You know the 3rd largest header? Here’s the details for it. We want it to use the colour #B00000 and we want it to be 16 points. You can specify size by point, although it’s not recommended. I only used this unit as other units already specified by WordPress were in pt.
So you define the element that you want to apply a style to. In this case, I chose h3. We open the css code with the right curly brace { and then we put in our CSS code. Notice the word colour is the American spelling? This is incredibly important to CSS, so please remember to use color. This changes your font colour. You can also change background colours with background-color: #your colour. Finally, close the CSS with a left curly brace.

JavaScript

JavaScript-logo

Instead of giving you examples of JavaScript, let me explain what this is used for. JavaScript is a powerful programming tool which people have used to make fully fledged games in with engine such as Unity. But did you know it’s really useful in web development?

You can use JavaScript for client-side scripting. What this means is this is stuff that happens whenever the client does something to make it happen. For example, you can use JavaScript to make an image appear if the user clicks on a button or a link. JavaScript tutorials are very extensive and are embedded in your html code with the script tag.

<script>
document.getElementById(“demo”).innerHTML = “Hello JavaScript!”;
</script>

So the above code means that JavaScript will write the words “Hello JavaScript!” in your websites document. It doesn’t change anything in your code, but on a website with this embedded, you will get the words “Hello JavaScript!” displayed.

PHP & MySQL

c0d23d2d6769e53e24a1b3136c064577-php_logo

PHP, which used to stand for Personal Home Page, is server-side scripting. This means that if there are any operations which requires information to be sent to your website, you would use PHP for this. As an example, let’s say that you fill out a form to sign up to a website. Your information has to go from the website to the websites servers in some way. The information will usually be stored in a database. You can manipulate elements of html with PHP, meaning that you can make a form in html, then retrieve the information in PHP to put into your database. PHP tags look very strange:

<?php
echo “My first PHP script!”;
?>

This example does basically what the JavaScript example does. It displays text. So in this case, it displays the text “My first PHP script!”.

logo-mysql-170x115

MySQL is the database language that most websites out there use. Databases are how we keep important information secure and safe, as well as an easy way for a website to retrieve data to display. This is how peoples login details are stored, allowing you to draw out the data you need only when you need it. MySQL is usually maintained away from a website but it’s referenced in PHP so data can be manipulated properly.

Resources

I’d heavily recommend checking out some of these resources:

W3Schools – Free resource for learning about Web Development
Example.com – The barebones for your website!
Color Picker – Gives you the hexadecimal reference number for a colour of your choice.Udemy – Check out this particular course. It goes into great details in a short amount of time. This one isn’t free, but sometimes they have a sale which takes this down to about £9.

That’s all for today, but if you feel there are more web resources to be shared then please share them below, over on Facebook or Twitter. How much exposure have you had to web development?

2 responses

  1. Too complicated for me. I can’t even make a good looking page on WordPress.

    Like

    June 4, 2015 at 10:59 am

    • Well then, perhaps it’s time for me to step up and deliver a group of basic web development “classes” here on GeekOut… Simple projects, building into something much bigger and much more exciting!

      Liked by 1 person

      June 4, 2015 at 7:37 pm

Drop us a line

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s