Kids’ Class: Itinerary

Day 1

Vocabulary

Domain name The URL where you can access your website.
Hosting The server where your website lives.
Website The collection of files that display your website.
Browser A software program that allows the user to find and view websites, such as IE, Firefox and Chrome.
Operating System The software that supports a computer’s basic functions, such as Windows 8 or OS X Mavericks.
Search Engine A program that searches for and identifies items that correspond to keywords or characters specified by the user, such as Google, Yahoo or Bing. These websites offer other things as well as search engines.
Web Designer vs Web Developer
Content Management System or CMS a web application designed to make it easy for non-technical users to add, edit and manage a website, such as Drupal, Joomla or WordPress.

Personal information online

Don’t put name/address/ identifying info
Do tell a parent right away if you encounter a problem or feel uncomfortable
Don’t download files or open attachments unless they are from a reliable source.
Don’t copy text/pictures, etc from the internet and use it as your own.
Don’t steal computer programs/files.
Don’t break into other people’s computers. This is a serious crime.
Don’t use profanity or post obscene language or images/videos. You can be sued even though you’re a kid.
Don’t post anything online that you are not comfortable with the everyone in the world seeing. Once something is on the internet, it is out there forever and there is no way to get it back.

What is WordPress?

.com vs .org

Introduction to Cpanel

General overview More details here: http://www.100webhosting.com/siteground-web-hosting-control-panel/
Install WordPress See the video here: https://www.youtube.com/watch?v=moIKoD-ykyw

Dashboard/Settings Overview

Permalinks

Homework:

Fill your site in with some content – text & images.
Look through free themes on WordPress.org and see if there are any that you would like to use.

Day 2

First, any problems when creating pages?

Posts/Pages

Screen options
Page/Post editor
Post revisions
Password protection
See this all here: https://wpdecoder.com/the-basics/wordpress-pages-for-beginners/

Posts/Comments

Moderation of comments
Don’t respond to anything creepy
When in doubt, don’t approve
Approving spam can open you up to much more spam

Theme Installation and Setup

What to look for in a theme (theme functions vs plugin functions)
Which are the best to use
How to install a theme
Basic theme options
Changing themes
Background image – 2012 theme.
images:
minecraft-wallpaper
minecraft-simple-background
kittens

Custom Menus

Images

Media Library
Linking, captions & other basic options
Basic gallery: http://premium.wpmudev.org/blog/wordpress-gallery/
Videos/Music
Copyrights -legal issues including fonts
Dangers of downloading unknown images – viruses

Users

Basic HTML

Keep in mind that all code needs to be EXACT. If you use the even one wrong colon instead of a semi-colon, your code will not work. Create a new page called “Test” and practice writing the code below that is in bold in your Text Editor. When you are ready to view, DO NOT use the Visual tab. Instead, use the Preview Changes button on the far right. Most of the time when you are using HTML, the code will be between < and > brackets. And you will have one set before the text that you want to format and one set with a backslash after the text you want to format. These are called Opening and Closing Tags.

Text here

PX stands for pixels. Try using different numbers here. Make the number smaller and then bigger and see what happens to your text.

Red

The hashtag and numbers that you see here are called the Hex Code. The represent a certain color. Use this link to chose the hex color you want: http://www.w3schools.com/tags/ref_colorpicker.asp Next, see if you can use this code to make a word two different colors. Make the first half of the word one color and the second half another color. Remember that zeros are usually taller and skinnier and the letter “0” will be rounder and fatter.

This text will be bold

This text will be italic

Centered text

<a href=”http://www.w3schools.com”>This is a link</a>

So here, you will need the brackets again. You can replace the URL link with any link you want. Be sure to include the http:// Try linking to your favorite website. Be sure to check the Preview Changes to make sure your link works!

Want to use an image from another website without downloading it to your computer? Try this code:

<img src=”https://wpdecoder.com/wp-content/uploads/2014/06/tabby_kittens.jpg”>

To use the image you want, you can search an image on Google Images and then click the “View image” button. You will see the URL there in the address bar. Copy and paste it to replace the URL in the code above.

To make numbers small at the top use this: 4th

To highlight words, try this Highlighted text

To make a border around your text, try this: Special text

Next try using different numbers of pixels and try using different hex codes for the color. Then, instead of a solid border, try using a dotted or dashed or double.

If you want some more room around your word, try combining more than one style like this:

Special text

Do you see how I have combined these two styles by using a semi-colon in the middle and keeping everything between the parentheses? Try combining other styles too. Try changing the number of pixels to see what happens to the padding.

I hope you will now be interested in learning more HTML. You can find more examples here: http://www.w3schools.com/html/html_basic.asp Here are a few more tips especially for working with WordPress: Basic HTML I would like to see all this next week when you come to class.

Day 3

1. Let’s see how your test page went from last week. If you did not finish all the HTML, go back and do it now. We will need it for the next lesson.

2. Let’s try one more thing with HTML:

<img src=”https://wpdecoder.com/wp-content/uploads/2014/06/tabby_kittens.jpg” style=”margin-left:50px”>

That should make your image move over 50px from the left side.

CSS

CSS is the coding language that styles what you do on your website. CSS stands for Cascading Style Sheets. The code it uses is very similar to what we learned in HTML, except that the idea is to make sure that everything on your website looks the same – so, all your text will be in the same font, all your links will be the same color, all your headings will be the same size, etc. But before we go any further, a word of warning:

CODE IS PRECISE. IF YOU DO NOT PAY ATTENTION AND MAKE SURE YOU ARE USING THE RIGHT PUNCTUATION AND THE RIGHT SPELLING, IT WILL NOT WORK.

You probably noticed this when you were trying to style your text with HTML. If you don’t have the exact right color or semi-colon, it won’t work. With CSS, this is even more important because you will have a whole page of code and you can throw off everything on your site by not putting that semi-colon or bracket that you need.

Plugins

To make this less likely to happen, we are going to install a PLUGIN. Plugins are little bits of code that you can easily add onto your site to give it more functionality. So, let’s install our first plugin.

1. On your left menu, choose Plugins > Add new.

2. Use the search bar at the top left to look for Simple Custom CSS. When you see it, click the Install Now link.

3. That is going to create a new link on your left hand menu where we will be putting all our CSS code.

4. Also search for Pixabay Images and install this plugin. Now go back to your test page and use the new icon at the top of the editor to add some pictures to your page. Choose any that you want.

Basic CSS

1. So, let’s start with the img tag. You will remember from the HTML that img stands for image. So, if we want to style our image, we are going to write something like this in our new Simple Custom CSS section:

img {

border: 1px solid #cc0000;

padding: 5px;

}

Picture from w3schools.com

So with CSS, you will see we first have to list what it is we want to style. This is called our “selector”. Then, we will need an opening curly bracket at the beginning and a closing curly bracket at the end. In between, we will list how we want to style it with each different “property” on a different line. Each property will have a value after it and the line should always end with a semi-colon.

Now write the img declarations shown above in your blank page of your Simple Custom CSS section. Then, you can use your Preview button to see how your images now have a border around them. If they don’t have a border, go back and check to make sure you have copied it exactly. Then try using different colors, paddings, and pixel widths. Remember that you can find different hex codes here:

http://www.w3schools.com/tags/ref_colorpicker.asp

2. Now, we want to be able to style other things on our website. To do that, it is helpful to see what CSS tags are controlling those items. You will want to use Inspect Element. To do that, you should go to your page and right click on what you want to see the code for. When you right click, you should get a menu which allows you to select Inspect Element. If not, and you are using Safari,

Navigate to Preferences > Advanced and check Show Develop menu in menu bar.

Picture from http://blog.technguide.net/

Then when you right click, you should be able to see this:

Picture from http://blog.technguide.net/

3. Once you have done this, go to the front end of your website and right click and choose Inspect Element. A new window will pop-up which is going to show us what kind of CSS is used. All the HTML for the page is shown on the left side and the specific CSS that controls it is shown on the right side. Choose the magnifying glass from the bottom left corner and hover over the element you want to change. You will be able to change the elements that are already defined or add new ones.

So, if you wanted to make these changes on your site, you will put this in your Custom CSS area:

.main-navigation li a {

color: #cc0000;

font-weight: bold;

font-size: 36px;

}

So, you’ll notice that these selectors are not random. Each selector tells what section the element is in. Our web page is separated into different DIVS or divisions. You can see them indicated by “div”. So, in the case of this item, we are in the div called “main-navigation, inside a li or list item, and it is a link so it has an “a” in front of it.

You’ll also notice that the “main-navigation” is proceeded by a period. That’s because this particular div is a CLASS. There are two types of divs, classes and id’s. Classes will always have periods in front of them while id’s will have hashtags in front of them. If you don’t get this indicator right, your code won’t work. So in the case above, if we wanted to use “site-navigation” instead, we would write it like this:

#site-navigation {

So if you want to change something and it doesn’t already have a declarations assigned to it, you can make your own!

Be careful because sometimes when you change one thing, other things will change as well. In that case, you will need to make your selector more precise.

Basic CSS

LINKS: When we have links, there are several different things we need to style. Now, if I tell you that a is a link, you can guess that adding :visited on the end means that it is a link that has been visited and :hover means that it is a link that is being hovered over.

FLOATS: If you want to change what side your sidebar is on, we will change the floats. First, find the div that controls the body and the div that controls the sidebar. If you are using the Twenty Twelve theme, that be the .site-content classes under #primary and #secondary. For .site-content under #primary, just change the float from left to right, and do the opposite for the .site-content under #secondary.

Fonts

I’ve saved changing the fonts for last because it’s a little more complicated. First, a little information about web fonts. Websites have a very limited number of fonts that they can automatically show. You can find that list here:
http://www.w3schools.com/cssref/css_websafe_fonts.asp

Otherwise, you can set your website to show any font that you want, but if the viewer does not have that font installed on their computer, they will not be able to see it.
Note that the CSS for fonts is written like this:

p{font-family:”Times New Roman”, Times, serif;}

So you would list the font that you want first, and then a backup font or two, in case there is some problem displaying the font you want.

In order to get around this incredibly limiting list of fonts, you can pay to download a font or you can use

They can be found here: https://www.google.com/fonts And they are fairly simple to use. Find the one you like and then use the Quick Use icon.

Then scroll down on the page to find these two sections:

For the top section, make sure you choose the @import tab and copy and paste that info above any other CSS in your Custom Style Plugin sheet. This is how it looks on my site:

Then you will copy the font-family info as described on the side.

Homework

This is a good blog for finding out more about WordPress: http://www.wpbeginner.com/ Finally, I hope you will take a look at my blog to find out more about WordPress: https://wpdecoder.com/wordpress/the-basics/

If you want to go an extra step, you can use Firebug instead of Inspect Element. You will need to do this at home so you can use the Firefox browser.

Good luck!