First thing's first- sign up for Neocities, get yourself some sweet free static web hosting!
Once that's taken care of head over to the dashboard
And let's edit your index (this is always the main page of your HTML document)
And this is what your editor looks like!
CONGRATS! Lets start making sites-
Think of this as learning a new language, the language of the internet. You can compare it to the dawn of reading and writing, with this tutorial you will be among the literate in an age of mass illiteracy. I don't mean to offend anyone by saying this, but it's true.
These are TAGS
<>
This is an HTML ELEMENT
<element>
You close it like THIS
</element>
Most HTML documents need these essential elements to funtion
<!DOCTYPE html> <html> <head> <title>Cat Worms</title> </head> <body> <h1>I will explain what the <h1> means later</h1> </body> </html>
Anyway!
Websites have their own anatomy, notice the HEAD and the BODY
The HEAD is where you place information ABOUT the page, like the <title> that appears in this thing...
<head> <title>Cat Worms</title> </head>
..but the BODY is where the real meat is.
Doing this
<p>THIS CAT HAS WORMS</p>
allows you to write words into your HTML, you can write as much as you want!
You create HEADINGS with these <h1></h1> tags
<h1>THIS IS A REDUNDANT HEADING</h1>
This tag allows you to insert an IMAGE
<img src="cat-worms.gif">
This tag allows you to create a LINK
<a href="URL-goes-here.com">LINK TITLE!</a>
You can easily turn an image into a link by inserting the image element INSIDE the tags of the link element
<a href="URL-goes-here.com"><img src="cat-worms.gif"></a>
what else...
I usually use lists to create my navigation menu, but they have many uses. The element looks like this:
<ul> <li>Cats</li> <li>Worms</li> <li>Veterinarians</li> </ul>
<ul> stands for unordered list, <li>'s are the individual items on the list, they always go inside the <ul>
These things are THE BEST! Sometimes they are referred to as blocks, but you always write them like this
<div></div>
They are useful for all sorts of things! it's kind of like having a blank element to group other elements into, this means that anything within the div will be affected by the div, it's how the sliding panels, code boxes and the border around this tutorial were created.
<div id="cat-box"> <img src="cat.png"> </div>
Tables act like grids, they have colums and rows, and can be used for everything from spreadsheets to image galleries. This is how you write a table
<table> <tr> <td>Cat 01</td> <td>Cat 02</td> <td>Cat 03</td> </tr> <tr> <td>Worm 01</td> <td>Worm 02</td> <td>Worm 03</td> </tr> </table>
You start by defining the TABLE, followed by the table ROWS, and finally adding the table DATA
Get creative with the Tables!
Iframes are a way to display web pages within web pages, and you could potentially put web pages within those web pages
this is the code for an Iframe
<iframe style="margin-left:-40px;" src="http://thebookoffur.neocities.org/" width="950" height="200"></iframe>
I know half or you are going to want to do this. It's almost as irresistable as animated GIFS.
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> </video>
<audio controls> <source src="sound.mp3" type="audio/mp4"> <source src="sound.ogg" type="audio/ogg"> </audio>
<iframe width="420" height="345" src="http://www.youtube.com/embed/XGSy3_Czz8k"> </iframe>
This is a page break
<br>
it
breaks
lines
up
You do NOT need to close this tag with a </br>
Now for some text formatting
This is strong
This is italic
This is emphasized
This is Small
This is Marked
This is red blue
This is subscripted
This is superscripted
<p><strong>This is strong</strong></p> <p><i>This is italic</i></p> <p><em>This is emphasized</em></p> <pre>This is <small>Small</small></p> <p>This is <mark>Marked</mark></p> <p>This is <del>red</del> blue</p> <p>This is <sub>subscripted</sub></p> <p>This is <sup>superscripted</sup></p>
One last thing I need to show you about HTML, COMMENTS! Comments do NOT show up on your page, you use it to annotate your code so you and others can keep track of what you are doing
<!--This is a comment-->
CSS is where you alter the LOOKS of your page (it stands for cascading style sheets.. something like that)
CSS looks like this:
selector{ declaration: value; }
OR IN REALITY
body{ background-image: URL("holo-4.gif"); background-color: red; font-family: Verdana; }
You can use selectors to control entire elements:
body{ background-image: URL("holo-4.gif"); background-color: red; font-family: Verdana; }
OR you can make your own selectors using CLASS and/or ID. This must be done in the HTML element
<p class="CLASS_NAME" >Learning how to code</p>
<p id="ID_NAME">Learning how to code</p>
Okay now head over to where you are writing your CSS
Your CLASS will begin with a . like this
.class{ background-image: URL("holo-4.gif"); background-color: red; font-family: Verdana; }
You start your ID's with a # symbol like so
#ID{
background-image: URL("holo-4.gif"); background-color: red; font-family: Verdana;
}
Classes and ID's are very useful when you need changes made to a set of elements all at once, anything with the .CLASS or #ID will be affected
<a style="color: red;" href="URL-goes-here.com"></a>
<style> .class{ background-image: URL("holo-4.gif"); background-color: red; font-family: Verdana; } </style>
<head> <link href="/style.css" rel="stylesheet" type="text/css" media="all"> </head>
#HEX, RGB(R, G, B), valid colors (red, white, black, etc)
url("something.gif")
repeat, repeat-x, repeat-y, no-repeat, initial, inherit
scroll, fixed, local, initial, inherit
left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom, xpos, ypos, initial, inherit
The background is usually put in a BODY selector like so
body{
background-image: URL("holo-4.gif"); background-color: red; background-repeat: no-repeat; background-position: right top; background-attachment: fixed; }
Here I will show you how to add CSS to your text!
#HEX, RGB(R, G, B), valid colors (red, white, black, etc)
right, left, center, justify
overline, line-through, underline, none
uppercase, lowercase, capitalize
0-100%
0-100%
0px
0px
ltr, rtl, initial, inherit
p{
color: red; text-align: right; letter-spacing: 25%; line-height: 10px; }
Times New Roman, Verdanda, Courier, etc.
normal, italic, oblique
0px, %, em
normal, bold, bolder, lighter, 100 - 900
normal, small-caps
p{
font-family: Verdanda; font-style: normal; font-size: 50px; }
The CSS border properties allow you to specify the style, width, and color of an element's border
solid, dashed, dotted, double, groove, ridge, inset, outset, none, hidden
border: 1px solid black;
There are four states that CSS uses to stylize links they are
#HEX, RGB(R, G, B), valid colors (red, white, black, etc)
#HEX, RGB(R, G, B), valid colors (red, white, black, etc)
none, underline
You can also change the font-family, the size, or give the link a border. Check it out!
a: link{ font-family: Verdanda; color: red; font-size: 50px; } a: hover{ font-family: courier; background-color: blue; color: white; font-size: 70px; }
To specify table borders in CSS, use the border property.
solid, dashed, dotted, double, groove, ridge, inset, outset, none, hidden
seperate, collapse, initial, inherit
length
top, bottom, initial, inherit
show, hide, initial, inherit
table{ border: 2px solid blue; } tr{ font-family: Verdanda; color: red; font-size: 50px; } tr, td{ background-color: blue; }
The display property specifies if/how an element is displayed. The default display value for most elements is block or inline.
inline, block, flex, inline-block, inline-flex, inline-table, list-item
div{ background-color: blue; display: inline-block; }
The position property specifies the type of positioning method used for an element (static, relative, fixed or absolute)
auto, length, %, initial, inherit
auto, shape, initial, inherit
alias, all-scroll, auto, cell, context-menu, col-resize, copy, crosshair, default, e-resize, ew-resize, grab, grabbing, help, move, n-resize, ne-resize, nesw-resize, ns-resize, nw-resize, nwse-resize, no-drop, none, not-allowed, pointer, progress, row-resize, s-resize, se-resize, sw-resize, text, URL, vertical-text, w-resize, wait, zoom-in, zoom-out, initial, inherit
auto, length, %, initial, inherit
visible, hidden, scroll, auto, initial, inherit
visible, hidden, scroll, auto, initial, inherit
visible, hidden, scroll, auto, initial, inherit
static, absolute, fixed, relative, initial, inherit
auto, length, %, initial, inherit
auto, length, %, initial, inherit
and my favorate, z-index! You use this declaration to layer objects on your page, just imagine it as simulating an extra dimension of space, this is the z axis!
positive or negative numerical values
#thing1{ background-color: blue; display: inline-block; position: absolute; z-index: -1; } #thing2{ background-color: blue; display: inline-block; position: absolute; z-index: 2; }
JavaScript is the most popular programming language in the world, it is the programming language of HTML and the Web!
Hear's how you use it
You can place any number of scripts in an HTML document. Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both
<script> <p id="demo">Check out what JS can do!</p> document.getElementById("demo").innerHTML = "My First JavaScript"; </script>
External scripts are practical when the same code is used in many different web pages. JavaScript files have the file extension .js
<head> <script src="myScript.js"></script> </head>
One of many HTML methods is getElementById()
Check out what JS can do!
<p id="demo">Check out what JS can do!</p> <button type="button" onclick="document.getElementById('demo').innerHTML = 'WOO!'"> Click</button>
YEAH! Now try it with an image!
Click the DRAGON
<script> function changeImage() { var image = document.getElementById('myImage'); if (image.src.match("FAicon")) { image.src = "FAicon.jpg"; } else { image.src = "FAicon02.jpg"; } } </script>
Okay, so in before we get into writing our own Javascript code we need to learn about the nuts and bolts, starting with VARIABLES
var cats = 5; var worms = 15; var cat_worms = cats + worms;
In Javascript, variables act like containers for storing DATA TYPES- you can call them anything, just be sure to name them!
Aside from numbers, variables can also store words called STRINGS
var cats = "meow"; var worms = "Hello kind feline, we are a colony of tapeworms";
Here are a few ways you can write variables
var cats = "meow", dogs = "woof", horses = "hello my friends"; //or var cats = "meow" dogs = "woof" horses = "hello my friends";
You can also leave the variable empty, and give it a value later
var cats; cats = "meow";
Here's a simple example of how a variable can be inserted into your HTML
<p id="cat"></p> <script> var catName = "Penelopie"; document.getElementById("cat").innerHTML = catName; </script>
The value of <p> will change from being empty to saying: Penelopie
Some operators are intuitive
+ , - , * , /
Others however have special significance when it comes to programming javascript
% (modulus), ++ (increment), -- (decrement)
The modular operator (%) returns the division remainder
The increment operator (++) increments numbers.
The decrement operator (--) decrement numbers.
JavaScript variables can hold many data types: numbers, strings, arrays, objects and more!
var length = 20; // Number var catName = "Penelope"; // String var cats = ["Siamese", "Tabby", "Persian"]; // Array var x = {catName:"Penelope", status:"Not Infected"}; // Object var worm = false; // Boolean
You can do wierd things like this:
var x = 3 + 7 + 10 + "Cats";
this would return 20Cats! That's because it reads the imput as numbers until it reaches the string.
But if you write it backwards, with the string FIRST
var x = "Cats" + 3 + 7 + 10;
This would print Cats3710 - that's because once the variable reads "Cats" as a string, it reads the numbers as strings too.
A JavaScript function is a block of code designed to perform a particular task.
Functions are the meat of Javascript, this is where the magic happens
function name(parameter1, parameter2, parameter3) { code to be executed }
You start a JavaScript function the function keyword, followed by a name, followed by parentheses ()
Keep in mind you can name a function with letters, digits, underscores, and dollar signs (same rules as variables)
These parentheses usually include parameter names separated by commas: (parameter1, parameter2, etc...)
Finally, the code to be executed by the function is placed inside curly brackets: {}
SO- say I'm an object
Say I'm a cat!
As a cat, I have certain properties- I can assign these properties to myself as follows
var cat = {breed:"Tabby", type:"Shorthair", color:"Orange", gender:"Female"};
Here's one way you call an object
document.getElementById("demo").innerHTML = car.type;