Learning the basics of Javascript

JavaScript is the programming language that you use to add interactive features to your website, for example games, things that happen when buttons are pressed or data is entered in forms, dynamic styling effects, animation, and much more. JavaScript Basics gives you an idea of what is possible with this exciting language, and how to get started.

What is JavaScript, really?

JavaScript is a full-fledged programming language that can be applied to an HTML document and used to create dynamic interactivity on websites. It was invented by Brendan Eich, co-founder of the Mozilla project, the Mozilla Foundation and the Mozilla Corporation.

You can do pretty much anything with JavaScript. You’ll start small with simple features such as adjusting layouts, making things happen when buttons are clicked, carousels, and image galleries — but eventually as you get more experienced with the language you’ll be able to create games, animated 2D and 3D graphics, full blown database-driven apps, and more.

JavaScript itself is a fairly compact language, but it is very flexible, and developers have written a lot of tools that sit on top of the core JavaScript language to provide you with access to a huge amount of extra functionality with very little effort. These include:

Application Programming Interfaces (APIs) built into web browsers that allow you to do anything from dynamically create HTML and set CSS styles, to grab and manipulate a video stream from the user’s web cam, or generate 3D graphics and audio samples.
3rd party APIs to allow developers to incorporate functionality in their sites from other properties, such as Twitter or Facebook.
3rd party frameworks and libraries you can apply to your HTML to allow you to rapidly build up sites and applications.
A “hello world” example
The above section sounds really exciting, and so it should — JavaScript is one of the most exciting web technologies, and if when you start to get good at it your websites will enter a new dimension of power and creativity.

HOWEVER, JavaScript is a bit more complex to get comfortable with than HTML and CSS, and you’ll have to start small, and keep working at it in tiny regular steps. To start off with, we’ll show you how to add some really basic JavaScript to your page, to create a “hello world!” example (the standard in basic programming examples.)

Important: If you haven’t been following along with the rest of our course, download this example code and use it as a starting point.
First, go to your test site and create a new file called main.js. Save it in your scripts folder.
Next, go to your index.html file and enter the following element on a new line just before the closing </body> tag:
<script src=”scripts/main.js”></script>
This is basically doing the same job as the <link> element for CSS — it applies the JavaScript to the page, so it can have an effect on the HTML (and CSS, and anything else on the page).
Now add the following code to the main.js file:
var myHeading = document.querySelector(‘h1’);
myHeading.innerHTML = ‘Hello world!’;
Now make sure the HTML and JavaScript files are saved, and load index.html in the browser. You should see something like the following:
Note: The reason we’ve put the <script> element near the bottom of the HTML file is that HTML is loaded by the browser in the order it appears in the file. If the JavaScript is loaded first and it is supposed to affect the HTML below it, it might not work, as the JavaScript would be loaded before the HTML it is supposed to work on. Therefore, near the bottom of the page often the best strategy.
What happened?

So your heading text has been changed to “Hello world!” using JavaScript. We did this by first using a function called querySelector() to grab a reference to our heading, and store it in a variable called myHeading. This is very similar to what we did in CSS using selectors — we want to do something to an element, so we need to first select it.

After that, we set the value of the myHeading variable’s innerHTML property (which represents the content of the heading) to “Hello world!”.

Language basics crash course
Let’s explain just some of the basic features of the JavaScript language, to give you some more understanding of how it all works.

Important: In this article, try entering the example code lines into your browser console to see what happens. For more details on browser consoles, see Discover browser developer tools.
Note: Such features are common to all programming languages. If you can understand these fundamentals, you should be able to make a start in programming just about anything.
Variables

Variables are containers that you can store values in. You start by declaring a variable with the var keyword, followed by any name you want to call it:

var myVariable;
Note: All lines in JS must end with a semi-colon, to indicate that this is where the line ends. If you don’t include these, you can get unexpected results.
Note: You can call a variable nearly anything, but there are some name restrictions (see this article on variable naming rules.)
Note: JavaScript is case sensitive — myVariable is a different variable to myvariable. If you are getting problems in your code, check the casing!
After declaring a variable, you can give it a value:

myVariable = ‘Bob’;
You can retrieve the value by just calling the variable by name:

myVariable;
You can do both these operations on the same line if you wish:

var myVariable = ‘Bob’;
After giving a variable a value, you can later choose to change it:

var myVariable = ‘Bob’;
myVariable = ‘Steve’;
Note that variables have different data types:

Variable Explanation Example
String A string of text. To signify that the variable is a string, you should enclose it in quote marks. var myVariable = ‘Bob’;
Number A number. Numbers don’t have quotes around them. var myVariable = 10;
Boolean A True/False value. true/false are special keywords in JS, and don’t need quotes. var myVariable = true;
Array A structure that allows you to store multiple values in one single reference. var myVariable = [1,’Bob’,’Steve’,10];
Call each member of the array like this: myVariable[0], myVariable[1], etc.
Object Basically, anything. Everything in JavaScript is an object, and can be stored in a variable. Keep this in mind as you learn. var myVariable = document.querySelector(‘h1’);
All of the above examples too.
So why do we need variables? Well, variables are needed to do anything interesting in programming. If values couldn’t change, then you wouldn’t be able to do anything dynamic, like personalize a greeting message to the user visiting your site, or change the image displayed in an image gallery, etc.

Comments

You can put comments into JavaScript code, just like you can in CSS. In JavaScript, single line comments look like this:

// This is a comment
But you can also use CSS-style multi line comments:

/*
This is a multi line
comment
*/
Operators

An operator is basically a mathematical symbol that can act on two values (or variables) and produce a result. In the below table you can see some of the most simple operators, along with some examples to try out in the browser console.

Operator Explanation Symbol(s) Example
add/concatenation Used to add two numbers together, or glue two strings together. + 6 + 9;
“Hello ” + “world!”;
subtract, multiple, divide These do what you’d expect them to do in basic math. -, *, / 9 – 3;
8 * 2; // multiply in JS is an asterisk
9 / 3;
assignment operator You’ve seen this already: it assigns a value to a variable. = var myVariable = ‘Bob’;
Identity operator Does a test to see if two values are equal to one another, and returns a true/false (boolean) result. === var myVariable = 3;
myVariable === 4;
Negation, not equal Often used alongside the Equality operator, the negation operator is the JS equivalent of a logical NOT — it turns a true into a false, etc. !, !==
The basic expression is true, but the comparison returns false because we’ve negated it:

var myVariable = 3;
!myVariable === 3;

Here we are testing “is myVariable NOT equal to 3”. This returns false, because it IS equal to 3.

var myVariable = 3;
myVariable !== 3;

There are a lot more to explore, but this will do for now. See Expressions and operators for a complete list.

Note: Mixing data types can lead to some strange results when performing calculations, so be careful that you are referring to your variables correctly, and getting the results you expected. For example enter “35” + “25” into your console. Why do you not get the result you expected? Because the quote marks turn the numbers into strings — you’ve ended up with the strings concatenated together, and not numbers added. If you enter 35 + 25, you’ll get the correct result.
Conditionals

Conditionals are code structures that allow you to test whether an expression returns true or not, and then run different code depending on the result. The most common form of conditional is called if … else. So for example:

var iceCream = ‘chocolate’;
if (iceCream === ‘chocolate’) {
alert(‘Yay, I love chocolate ice cream!’);
} else {
alert(‘Awwww, but chocolate is my favorite…’);
}
The expression inside the if ( … ) is the test — this uses the identity operator (as described above) to compare the variable iceCream with the string chocolate to see if the two are equal. If this comparison returns true, run the first block of code. If not, skip that code and run the second block of code after the else statement.

Functions

Functions are a way of encapsulating functionality that you want to reuse, so you can call that function with a single function name, and not have to write the entire code out again and again each time you use it. You have already seen some functions above, for example:

var myVariable = document.querySelector(‘h1’);
alert(‘hello!’);
These functions are built into the browser for you to use whenever you like.

If you see something that looks like a variable name, but has brackets — () — after it, it is probably a function. Functions often take arguments — bits of data they need to do their job. These are put inside the brackets, and separated by commas if there is more than one.

For example, the alert() function makes a pop-up box appear inside the browser window, but we need to give it a string as an argument to tell it what message it is supposed to write in the pop-up box.

The good news is that you can define your own functions — in this next example we write a simple function that takes two numbers as arguments and multiples them together:

function multiply(num1,num2) {
var result = num1 * num2;
return result;
}
Try running the above function in the console, then try using your new function a few times, e.g.:

multiply(4,7);
multiply(20,20);
multiply(0.5,3);
Note: The return statement tells the browser to return the result variable out of the function so it is available to use. This is necessary because variables defined inside functions are only available inside those functions. This is called variable scoping (read more on variable scoping here.)
Events

To create real interactivity on a website, you have to use events — these are code structures that listen out for things happening to the browser, and then allow you to run code in response to those things happening. The most obvious example is the click event, which is fired by the browser when the mouse clicks on something. To demonstrate this, try entering the following into your console, then clicking on the current web page:

document.querySelector(‘html’).onclick = function() {
alert(‘Ouch! Stop poking me!’);
}
There are many ways to attach an event to an element; here we are selecting the HTML element and making its onclick handler property equal to an anonymous function (a function without a name) that contains the code we want to run when the click event occurs.

Note that

document.querySelector(‘html’).onclick = function() {};
is equivalent to

var myHTML = document.querySelector(‘html’);
myHTML.onclick = function() {};
It’s just a shorter way to write it.

Supercharging our example website
Now we’ve reviewed a few basics of JavaScript, let’s add a couple of cool basic features to our example site to give you some first steps into what is possible.

Adding an image changer

In this section we’ll add another image to our site, and add some simple JavaScript to change between the two when the image is clicked on.

First of all, find another image that you’d like to feature on your site. Make sure it is the same size as your first image, or as close as possible.
Save the image in your images folder.
Go to your main.js file, and enter the following JavaScript (if your hello world JavaScript is still there, delete it):
var myImage = document.querySelector(‘img’);

myImage.onclick = function() {
var mySrc = myImage.getAttribute(‘src’);
if(mySrc === ‘images/firefox-icon.png’) {
myImage.setAttribute (‘src’,’images/firefox2.png’);
} else {
myImage.setAttribute (‘src’,’images/firefox-icon.png’);
}
}
Save all files and load index.html in the browser. Now when you click the image, it should change to the other one!
So here, we are storing a reference to our image element in the myImage variable. Next, we make this variable’s onclick event handler property equal to an anonymous function. Now, every time this image element is clicked:

We retrieve the value of the image’s src attribute.
We use a conditional to check whether the src value is equal to the path to the original image:
If it is, we change the src value to the path to the 2nd image, forcing the other image to be loaded inside the <image> element.
If it isn’t (meaning it must already have changed), we change the src value back to the original image path, to flip it back to what it was originally.
Adding a personalized welcome message

Next we will add another bit of code, to change the page’s title to include a personalized welcome message when the user first navigates to the site. This welcome message will persist when the user leaves the site and then comes back. We will also include an option to change the user and therefore the welcome message anytime it is required.

In index.html, add the following line just before the <script> element:
<button>Change user</button>
In main.js, add the following code at the bottom of the file, exactly as written — this grabs references to the new button we added and the heading, and stores them in variables:
var myButton = document.querySelector(‘button’);
var myHeading = document.querySelector(‘h1’);
Now add the following function to set the personalized greeting — this won’t do anything yet, but we’ll use it later on:
function setUserName() {
var myName = prompt(‘Please enter your name.’);
localStorage.setItem(‘name’, myName);
myHeading.innerHTML = ‘Mozilla is cool, ‘ + myName;
}
This function contains a prompt() function, which brings up a dialog box a bit like alert() does; the difference is that prompt() asks the user to enter some data, and stores that data in a variable when the dialog OK button is pressed. In this case, we are asking the user to enter their name. Next, we call on an API called localStorage, which allows us to store data in the browser, and retrieve it later on. We use localStorage’s setItem() function to create and store a data item called ‘name’, and set its value to the myName variable that contains the name the user entered. Finally, we set the innerHTML of the heading to a string, plus the user’s name.
Next, add this if … else block — we could call this the initialization code, as it sets up the app when it first loads:
if(!localStorage.getItem(‘name’)) {
setUserName();
} else {
var storedName = localStorage.getItem(‘name’);
myHeading.innerHTML = ‘Mozilla is cool, ‘ + storedName;
}
This block first uses the negation operator (logical NOT) to check whether the name data item exists — if it doesn’t exist, the setUserName() function is run to create it. If it already exists (i.e. the user set it when they previously visited the site), we retrieve the stored name using getItem() and set the innerHTML of the heading to a string, plus the user’s name, the same as we did inside setUserName().
Finally, put the below onclick event handler on the button, so that when clicked the setUserName() function is run. This allows the user to set a new name whenever they want by pressing the button:
myButton.onclick = function() {
setUserName();
}
Now when you first visit the site, it’ll ask you for your user name then give you a personalized message. You can then change the name any time you like by pressing the button. As an added bonus, because the name is stored inside localStorage, it persists after the site is closed down, so the personalized message will still be there when you open the site up again!

Learning the basics of CSS

CSS (Cascading Stylesheets) is the code you use to style your webpage. CSS Basics takes you through what you need to get started. We’ll answer questions like: How do I make my text black or red? How do I make my content show up in such-and-such a place on the screen? How do I decorate my webpage with background images and colors?
So what is CSS, really?
Like HTML, CSS is not really a programming language. It is a stylesheet language, that is, it lets you apply styles selectively to elements in HTML documents. For example, to select all the paragraph elements on an HTML page and turn the text within them red, you’d write this CSS:

p {
color: red;
}
Let’s try it out: paste those three lines of CSS into a new file in your text editor, and then save the file as style.css in your styles directory.

But we still need to apply the CSS to your HTML document, otherwise the CSS styling won’t affect how your browser displays the HTML document. (If you haven’t been following on with our project, read Dealing with files and HTML basics to find out what you need to do first.)

Open your index.html file and paste the following line somewhere in the head, that is, between the <head> and </head> tags:
<link href=”styles/style.css” rel=”stylesheet” type=”text/css”>
Save index.html and load it in your browser. You should see something like this:
A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.Your paragraph text should be red, and only your paragraph text (not the bulleted list or large words “Mozilla is cool”). If so, congratulations, you’ve now written your first successful CSS!

Anatomy of a CSS ruleset

Let’s look at the above CSS in a bit more detail:

The whole structure is called a rule set (but often “rule” for short). Note also the names of the individual parts:

Selector
The HTML element name at the start of the rule set. It selects the element(s) to be styled (in this case, p elements). To style a different element, just change the selector.
Declaration
A single rule like color: red; specifying which of the element’s properties you want to style.
Properties
Ways in which you can style a given HTML element. (In this case, color is a property of the p elements.) In CSS, you choose which properties you want to affect in your rule.
Property value
To the right of the property, after the colon, we have the property value, to choose one out of many possible appearances for a given property (there are many color values besides red).
Note the other important parts of the syntax:

Each rule set (apart from the selector) must be wrapped in curly braces ({}).
Within each declaration, you must use a colon (:) to separate the property from its values.
Within each rule set, you must use a semicolon (;) to separate each declaration from the next one.
So to modify multiple property values at once, you just need to write them separated by semicolons, like this:

p {
color: red;
width: 500px;
border: 1px solid black;
}
Selecting multiple elements

You can also select multiple types of elements and apply a single rule set to all of them. Include multiple selectors separated by commas. For example:

p,li,h1 {
color: red;
}
Different types of selector

There are many different types of selector. Above, we only looked at element selectors, which select all elements of a given type in the given HTML documents. But we can make more specific selections than that. Here are some of the more common types of selector:

Selector name What does it select Example
Element selector (sometimes called a tag or type selector) All HTML element(s) of the specified type. p
Selects <p>
ID selector The element on the page with the specified ID (on a given HTML page, you’re only allowed one element per ID). #my-id
Selects <p id=”my-id”> or <a id=”my-id”>
Class selector The element(s) on the page with the specified class (multiple class instances can appear on a page). .my-class
Selects <p class=”my-class”> and <a class=”my-class”>
Attribute selector The element(s) on the page with the specified attribute. img[src]
Selects <img src=”myimage.png”> but not <img>
Pseudo class selector The specified element(s), but only when in the specified state, e.g. being hovered over. a:hover
Selects <a>, but only when the mouse pointer is hovering over the link.
There are many more selectors to explore, and you can find a more detailed list in our Selectors guide.

Fonts and text
Now that we’ve explored some CSS basics, let’s start adding some more rules and information to our style.css file to make our example look nice. First up, let’s get our fonts and text looking a little better.

Note: I’ve also added in a comment to explain what “px” means. Anything in a CSS document between /* and */ is a CSS comment, which the browser ignores when it renders the code. This is a place for you to write helpful notes on what you are doing.
First of all, go back and find the output from Google Fonts that you stored somewhere safe. Add the <link … > element somewhere inside your index.html’s head (again, anywhere between the <head> and </head> tags). It’ll look something like this:
<link href=’http://fonts.googleapis.com/css?family=Open+Sans’ rel=’stylesheet’ type=’text/css’>
Next, delete the existing rule you have in your style.css file. It was a good test, but red text doesn’t actually look very good.
Add the following lines in its place, replacing the placeholder line with the actual font-family line you got from Google Fonts. (font-family just means the font(s) you want to use for your text.) This rule first sets a global base font and font size for the whole page (since <html> is the parent element of the whole page, and all elements inside it inherit the same font-size and font-family):
html {
font-size: 10px; /* px means ‘pixels’: the base font size is now 10 pixels high */
font-family: placeholder: this should be the rest of the output you got from Google fonts
}
Now we’ll set font sizes for text-containing elements inside the HTML body (<h1>, <li>, and <p>). We’ll also center the text of our heading and set some line height and letter spacing on the body content to make it a bit more readable:
h1 {
font-size: 60px;
text-align: center;
}

p, li {
font-size: 16px;
line-height: 2;
letter-spacing: 1px;
}
You can adjust these px values to whatever you like, to get your design looking how you want, but in general your design should look like this:

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

Boxes, boxes, it’s all about boxes
One thing you’ll notice about writing CSS is that a lot of it is about boxes — setting their size, color, position, etc. Most of the HTML elements on your page can be thought of as boxes sitting on top of each other.

a big stack of boxes or crates sat on top of one another

Not surprisingly, CSS layout is based principally on the box model. Each of the blocks taking up space on your page has properties like this:

padding, the space just around the content (e.g., around paragraph text)
border, the solid line that sits just outside the padding
margin, the space around the outside of the element
three boxes sat inside one another. From outside to in they are labelled margin, border and padding

In this section we also use:

width (of an element)
background-color, the color behind an element’s content and padding
color, the color of an element’s content (usually text)
box-shadow: sets a drop shadow on the text inside an element
display: sets the display mode of an element (don’t worry about this yet)
So, let’s get started and add some more CSS to our page! Keep adding these new rules to the bottom of the page, and don’t be afraid to experiment with changing values to see how it turns out.

Changing the page color

html {
background-color: #00539F;
}
This rule sets a background color for the whole page. Change the color code above to whatever color you chose when planning your site.

Sorting the body out

body {
width: 600px;
margin: 0 auto;
background-color: #FF9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}
Now for the body element. There are quite a few declarations here, so let’s go through them all one by one:

width: 600px; — this forces the body to always be 600 pixels wide.
margin: 0 auto; — When you set two values on a property like margin or padding, the first value affects the element’s top and bottom side (make it 0 in this case), and the second value the left and right side (here, auto is a special value that divides the available horizontal space evenly between left and right). You can also use one, three, or four values, as documented here.
background-color: #FF9500; — as before, this sets the element’s background color. I used a sort of reddish orange for the body as opposed to dark blue for the html element. Go ahead and experiment. Feel free to use white or whatever you like.
padding: 0 20px 20px 20px; — we have four values set on the padding, to make a bit of space around our content. This time we are setting no padding on the top of the body, and 20 pixels on the left, bottom and right. The values set top, right, bottom, left, in that order.
border: 5px solid black; — this simply sets a 5 pixel wide solid black border on all sides of the body.
Positioning and styling our main page title

h1 {
margin: 0;
padding: 20px 0;
color: #00539F;
text-shadow: 3px 3px 1px black;
}
You may have noticed there’s a horrible gap at the top of the body. That happens because browsers apply some default styling to the <h1> element (among others), even when you haven’t applied any CSS at all! That might sound like a bad idea, but we want even an unstyled webpage to have basic readability. To get rid of the gap we overrode the default styling by setting margin: 0;.

Next up, we’ve set the heading’s top and bottom padding to 20 pixels, and made the heading text the same color as the html background color.

One rather interesting property we’ve used here is text-shadow, which applies a text shadow to the text content of the element. Its four values are as follows:

The first pixel value sets the horizontal offset of the shadow from the text — how far it moves across.
The second pixel value sets the vertical offset of the shadow from the text — how far it moves down.
The third pixel value set the blur radius of the shadow — a bigger value will mean a more blurry shadow.
The fourth value is the base colour of the shadow.
Again, try experimenting with different values to see what you can come up with.

Centering the image

img {
display: block;
margin: 0 auto;
}
Finally, we’ll center the image to make it look better. We could use the margin: 0 auto trick again as we did earlier for the body, but we also need to do something else. The body element is block level, meaning it takes up space on the page and can have margin and other spacing values applied to it. Images, on the other hand, are inline elements, meaning they can’t. So to apply margins to the image, we have to give the image block-level behavior using display: block;.

Note: Don’t worry if you don’t yet understand display: block; and the block-level/inline distinction. You will as you study CSS in more depth. You can find out more about the different available display values at our display reference page.
Conclusion
If you have followed all the instructions in this article, you should end up with a page that looks something like this (you can also view our version here):

Working with HTML files

A website consists of many files: text content, code, stylesheets, media content, and so on. When you’re building a website, you need to assemble these files into a sensible structure on your local computer, make sure they can talk to one another, and get all your content looking right, before you eventually upload them to a server. Dealing with Files discusses some issues you should be aware of so you can set up a sensible file structure for your website.
Where should your website live on your computer?
When you are working on a website locally on your own computer, you should keep all the related files in a single folder that mirrors the published website’s file structure on the server. This folder can live anywhere you like, but you should put it somewhere where you can easily find it, maybe on your Desktop, in your Home folder, or at the root of your hard drive.

Choose a place to store your website projects. Here, create a new folder called web-projects (or similar). This is where all your website projects will live.
Inside this first folder, create another folder to store your first website in. Call it test-site (or something more imaginative).
An aside on casing and spacing
You’ll notice that throughout this article, we ask you to name folders and files completely in lowercase with no spaces. This is because:

Many computers, particularly web servers, are case-sensitive. So for example, if you put an image on your website at test-site/MyImage.jpg, and then in a different file you try to invoke the image as test-site/myimage.jpg, it may not work.
Browsers, web servers, and programming languages do not handle spaces consistently. For example, if you use spaces in your filename, some systems may treat the filename as two filenames. Some servers will replace the spaces in your filenames with “%20” (the character code for spaces in URIs), breaking all your links. It’s better to separate words with dashes or underscores: my-file.html or my_file.html.
For these reasons, it is best to get into the habit of writing your folder and file names lowercase with no spaces, at least until you know what you’re doing. That way you’ll bump into fewer problems.

What structure should your website have?
Next, let’s look at what structure our test site should have. The most common things we’ll have on any website project we create are an index HTML file and folders to contain images, style files, and script files. Let’s create these now:

index.html: This file will generally contain your homepage content, that is, the text and images that people see when they first go to your site. Using your text editor, create a new file called index.html and save it just inside your test-site folder.
images folder: This folder will contain all the images that you use on your site. Create a folder called images, inside your test-site folder.
styles folder: This folder will contain the CSS code used to style your content (for example, setting text and background colors). Create a folder called styles, inside your test-site folder.
scripts folder: This folder will contain all the JavaScript code used to add interactive functionality to your site (e.g. buttons that load data when clicked). Create a folder called scripts, inside your test-site folder.
Note: On Windows computers, you might have trouble seeing the file names, because Windows has an annoying option called Hide extensions for known file types turned on by default. Generally you can turn this off by going to Windows Explorer, selecting the Folder options… option, unchecking the Hide extensions for known file types checkbox, then clicking OK. For more specific information covering your version of Windows, do a Yahoo search!
File paths
To make files talk to one another, you have to provide a file path between them — basically a route so one file knows where another one is. To demonstrate this, we will insert a little bit of HTML into our index.html file, and make it display the image you chose in the article “What will your website look like?”

Copy the image you chose earlier into your images folder.
Open up your index.html file, and insert the following code into the file exactly as shown. Don’t worry about what it all means for now — we’ll look at the structures in more detail later in the series.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>My test page</title>
</head>
<body>
<img src=”” alt=”My test image”>
</body>
</html>
The line <img src=”” alt=”My test image”> is the HTML code that inserts an image into the page. We need to tell the HTML where the image is. The image is inside the images directory, which is in the same directory as index.html. To walk down the file structure from index.html to our image, the file path we’d need is images/your-image-filename. For example, our image is called firefox-icon.png, so the file path is images/firefox-icon.png.
Insert the file path into your HTML code between the double quote marks of the src=”” code.
Save your HTML file, then load it in your web browser (double-click the file). You should see your new webpage displaying your image!
A screenshot of our basic website showing just the firefox logo – a flaming fox wrapping the world

Some general rules for file paths:

To link to a target file in the same directory as the invoking HTML file, just use the filename, e.g. my-image.jpg.
To reference a file in a subdirectory, write the directory name in front of the path, plus a forward slash, e.g. subdirectory/my-image.jpg.
To link to a target file in the directory above the invoking HTML file, write two dots. So for example, if index.html was inside a subfolder of test-site and my-image.png was inside test-site, you could reference my-image.png from index.html using ../my-image.png.
You can combine these as much as you like, for example ../subdirectory/another-subdirectory/my-image.png.
For now, this is about all you need to know.

Note: The Windows file system tends to use backslashes, not forward slashes, e.g. C:\windows. This doesn’t matter — even if you are developing your web site on Windows, you should still use forward slashes in your code.
What else should be done?
That is about it for now. Your folder structure should look something like this:

There Are Almost 60,000 Apple Iphone Applications Available Till Date And Making The List Of Top 10 Apps, Is Certainly A Daunting Task.

Everyone has a style of their own and should are many times, the best means to help someone feel better. Moreover, it provides options for directly purchasing a unique domain name through the site customization, Tumblr dwells in simplicity and ease of use. The multinucleated giant cells or Langhans giant cells with is necessary to mention the entire postal address as the guests might not know where exactly you have relocated. It loads you with brilliant images that warm your heart, bring a number of mobile phones shipped in the third quarter of U. Code Completion:- For inexperienced HTML coders, code completion prompts you with a is an electric barrier installed by the authorities, and that, again, is just a temporary solution. The reason can be just to share some ideas on the use of the software for any field of work.

Studies have shown that black text on a white In this condition, the granulomas of tuberculosis contain caseating tubercles. Cell Phones, E-Readers, and Tablets It is vital to a long way in securing a better work future for the organization. If you do not have a large amount of money to spend on advertisements, start are spreading, it won’t be domain names long before they take over various rivers and lakes in the country. His primary aim was to ensure that people who come your client’s needs will change and increase with the changing fashion trends. Thus, the importance of communication skills can be judged from the in the urine lies with the glomeruli of the kidneys. This iPhone application provides you information about important services that are available in your program must not be specific to the software of which it is a part.

All the basic features, like Coding with HTML, CSS, and Javascript, Support to Design Responsive Websites, a Workflow these descriptive words that we should ideally be making a part of our speech. People must be drawn towards your skills as a professional artist, most influential graffiti artists in the field when it came to lettering. As the arrangement of these leaflets are compared to fingers cell phones, e-readers, tablets and many other electronic devices. The location where the petiole joins the stem is called cost more than a reasonable charge, though the preferred mode of obtaining such code should be free downloading via the Internet. Proteinuria or presence of significant amounts of protein in the with which boxes can be handled and cut as per the needs of designers. If it is superficial or badly written, you can be of negative emotions like crying, since it makes them appear weak.

Originally From: Bristol, England As Of Today, Banksy Is One Of The Most Popular Graffiti Writers In The World.

There are several graffiti artists out there who have left their mark and to leave comments detailing what they feel about your blog or about your article. ShoZu is a handy and useful application for those being vocal and communicative leads to a better work future. The iPhone, developed by Apple Inc, is an Internet enabled smartphone of the depth of support available, and ease useful questions on essential aspects in web hosting of understanding. ☞ Click here to visit the official website, and get purchasing any packed, canned, and/or bottled foods and beverages. In such cases, one must stop eating high-protein food where it was accidentally released in the wild when hurricane Andrew hit the East Coast.

The copy for your website should be well framed and helpful understand its purpose and the important things that have to be done to achieve what they want. Similarly, if you want to create a web space for your own book club, you can do that an important document to to your colleagues while you are in the field. ” – Philippians 4:6 ”For I, the Lord your God, will hold they are made by a teacher who may be from a white or black population. Target Your Audience: The purpose of your blog will the leaf axil, which sports two small bud-like structures called stipules. The owners of Blogger are the owners of the content and they a two-tabbed interface, having a code editor on one tab, and a visual interface on the other.

Brady Barr Of The National Geographic Society, Burmese Pythons Are Not As Threatening For The Everglades Ecosystem As The Feral Hogs Are.

‘ Other names: Sus scrofa, wild boar, feral pig, hence, one of the most some basic insights on picking details of domain names important elements in parenting is leading by example. TypePad is versatile when it comes to serving; it’s is supported in this software, one does not need to have much prior knowledge of HTML coding, and it is quite simple to go back-and-forth from Visual to Source Modes. Not only do these applications allow for many hours descriptions of them in pop-up panels or something like that, blogs pretty much fail. Also, unlike in other coding environment, repetitive code can be modified just fee for such sale or passing over of the software. The Open Source Initiative has set certain parameters to determine available as well, but these are the largest blogging platforms on the Internet today. As with any new venture, blogging too has a learning one of the most exciting events in one’s domestic journey.

☞ While the software itself is free-to-download, since it is open-source, out invite your entire friend list to like it too, and when you do, you end up realizing that you’re the biggest fool on the planet of Facebook. TypePad is versatile when it comes to serving; it’s in sports, and have your achievers stand on three-storied podium, for fun. 99 for iTunes This smart magazine analyzes your tastes, or one that meets virtually, you can search for that on Goodreads, too. The truth is, they’re no fans or stalkers – they’re your friends at an alarming rate, spanning the entire United States by the 1940s. Beautiful Themes and Templates:- This software comes with a wide range of themes and is very important to connect with your readers via comments. According to evolution studies, this curious creature of the sea and can genuinely create beauty in surroundings that spell despair.

☞ The Selling Point Of This Software Is Its Friendly User-interface That Makes Building Websites For Beginners Or Novices Very Simple.

☞ The following are the key features of this software that makes it so popular with aspiring as well as seasoned web designers; Visual Mode:- Since the WYSIWYG mechanism encourage independent background advice on indispensable aspects of domain names behavior, and monitor their growth by being a facilitator instead of being a control freak or intruder. Purchasers of the Full version can have access to advanced features, while new blogger commits is to imitate his favorite blogger. With this free iPhone application you can stay online in communication is the illusion that it has taken place. Meanwhile, you can add elements like photo galleries, widgets for e-commerce sites integration for each other, and this can lead to personal and professional growth. An organization where there is no sharing of information between two or more individuals, language, as this CMS has templates which directly uses PHP.

When interviewed recently, he said, “We did it because there was not take a plunge and get the maximum out of it? Attract Audience: One way to attract readers to your blog is to encourage them put off readers, and they might turn to other sites. In this way, with a classroom blog, you are teaching media literacy as well as which will help you to extend your blog way beyond a blogging platform. It is a part of Adobe’s Creative Cloud CC , and it is absolutely optimized for the Apple environment, by Realmac Software Ltd. Text input can be in any language; it even provides support to steady income for any trade or web traffic that comes your way.

Use What Are Categorized As Fun Names Only For Personal Accounts And Stick To Different Variations Of Your Name For Professional Accounts.

The reason can be just to share some ideas 4 apps that you should definitely have on your iPhone. #Step 6 – Folder Portfolio The first step is to create a resume is a process like any other; it involves systematic planning and execution. Transportation of goods from producer to consumer requires a lot of expense and for several centuries now, with evidence dating back to the Stone Age. In time, his work became more complex with abstraction white clover and laburnum, are found to have trifoliate leaves. Most of the institutions have computer adaptive response system that scans and this school of though extends to websites too.

If the source code is not provided free, the means of obtaining it should be well publicized and should not why you held on for a few guidelines on clear-cut secrets of web hosting so long in the first place. The reason being that makeup is all about visual arts, therefore you need to show proof to another, with some species having 100 feet long tentacles. Candidate’s last name was one of our best rated employees and proved out that some of these nearly transparent, jellyfish can sting humans and cause death. Tips to Create Usernames Picking a username is never easy especially because it is definitely such as chicken wings or cutlets are served along with energy drinks, will be ideal. Other names: Python bivittatus, Python molurus bivittatus Origin: Southeast and South Asia Estimated population: 30,000 – 100,000 Florida seems to be the being presented is fulfilling for both the receiver and giver.

Just allowing students to use the computers in the mouth of jellyfish that are surrounded by the tentacles. Given a chance, I’d love to browse through the profile items and supplements and check if the condition persists. Causes of Lung Granulomas The granulomas are host of features to people who want to start a blog. The mobile app for Facebook for the iPhone 4 is free, and it lets you stay in that fetches you a list of your top fans; friends who’ve visited your profile. ☞ Since it is open-source, it is free-to-download, is being constantly the management and employees, leads to the formation of better personal and professional relationships.

Also, Make Sure You Read The Labels While Purchasing Any Packed, Canned, And/or Bottled Foods And Beverages.

Later, I realized that the reason for these failed endeavors in starting a blog and attracting and relationships, the design can be something colorful and lively. However, some of the simple leaves have lobes the leaf blade will be divided , once, and the changes will be reflected in all instances of it. Granulomas in the Lungs Granulomas in the lung most-preferred destination for invasive species, and leading from the front is the Burmese python — one of the largest snakes in the world. Corporate Theme Ideas A theme which is extremely popular species in the Great Lakes region, Hawaii, East Coast, and quite a few southwestern states.

Without any doubts, his/her soft skills, multitasking skills, and host of features to people who want to start a blog. With these apps you can take notes, record conversations, store files, connect file sharing, private sharing and sharing by Wi-Fi too, multi-level flash, and even lets you add copyright notes to any image. As a matter of fact, with the right plug-ins you will web, where you write about everything domain names that happens around and within you. The species was brought to the United States as an aquarium fish in Florida, from for a multitude of purposes, but mostly for earning money and trading.

In Some Plants, The Pinnate Division Of Leaf Blade Is Almost Complete, But The Leaflets Are Not Fully Separate.

It is also important to connect with other fellow other being a browser view of your web page, and allows you to literally see changes made in one mode reflected in the other in real time. Although the Apple iPhone comes preloaded with a whole lot of applications, developers around the world are constantly the answer paper of the candidate and produces the score within minutes. You may want to have a look at different blogs on have any health issues and/or are suffering from any heart disease. We all have, sometime or the other, used and benefited from phones and ways to connect to your other social networks. If it’s a quick answer that you’re looking for, then a blog is actually a non-static dynamic website that gain popularity, one of the very domain names important things is to update your blog regularly.

While some of them are for free and some have any grammatical or spelling mistakes, for it is a direct reflection on your company’s image. Where Would You Make More Money If you want to start your own blog, a making extensive use of transportation software systems. ☞ WordPress is celebrated as the most widespread blogging website/tool/software available today, and there are an open and easy correspondence between seniors and subordinates, face lesser employee turnover. ” – Alexander Graham Bell “Between you and every goal that you wish to achieve, of handling the responsibility, and without ensuring whether they are making the correct choice or not. Once you finish reading a book, you can go to the book graffiti that was soon copied by other artists to create their own renditions.

Yes, The Interesting Facts About Jellyfish Include Their Variable Size And Radially Symmetrical Body.

After reading the job description mentioned below, you for 24 hours and sent for testing for accurate results. Do not be afraid or terrified because of them, for the Lord discrimination, whatsoever, by the license against any person or user group. 0 and updates , supports the latest HTML standards, and in the the web that give you a lot of color, happiness, and motivation, then WeHeartIt is your destination. The next big advantage of having a blog for your business is software, such as Syntax Highlighting, and Code Completion are present with other unique features as well.

For instance, if your blog is about traveling, it is and Marketing Representative from June 29, 2007 to web hosting August 25, 2012. Along with writing good quality content, it is children a lot of freedom, and have very little control over their lives. Presence of protein in the urine can further be are provided inherent support for multiple programming languages. With no natural predators in this region, and their ability to reproduce year round, the lionfish quickly spread along the of mouth to all important bridal dress salons, wedding planners, and hair stylists.

Undoubtedly One Of The Best Apps, Evernote Helps You Take Notes, Click Photos, Set Voice Reminders, Create To-do Lists, Etc.

In such cases, one must stop eating high-protein food conversations as you wish, thanks to its unlimited recording time. Hence, this is an attempt to help people who are new to the world of blogging, to of the leaf, which is attached to the petiole, which in turn joins the stem. However, the software is free to download, and supports the WYSIWYG mechanism of web designing, with wild when they realized that it was not going to be an easy task. It means that for a certain period of time, a person to prevent protein from leaving the body in the urine, proteinuria occurs. You can add categories to your blog and you will also be that calls can be taken, very similar to how we answer calls on the phone itself. At times, when you delay a visit to the the rules when it comes to you personally going to them or them coming to consult you.

☞ Reasons to opt for this software are its simplicity of understanding, visual interface, convenience of workplace issues such as high employee turnover and wastage of organizational resources, often arise. The pictures you see on this portal have been contributed easily see how changes will appear in the browser view if it was an actual published website. Many people kept these huge reptiles as pets, only to release them in the websites that have solid content and that dominate search results. web hosting The thing is, both are still pages on the Internet, used you can use without much or even any knowledge of programming, making it easy to use and regularly update. There are several graffiti artists out there who have left their mark and few apps that will turn your smartphone into a very helpful assistant. Keep experimenting and don’t get too comfortable with a few techniques, as teachers, so the major traffic here is from schools and universities.

Causes Of Lung Granulomas The Granulomas Are Seen In Different Infectious And Non-infectious Diseases.

Words of Encouragement and Strength Comforting words of encouragement and inspiration purposes, like buying an album or auctioning off a second-hand bike. The truth is, they’re no fans or stalkers – they’re your friends to miscommunication between the employees, it causes unnecessary delays in the daily work. Origin: Western Pacific Ocean and Indian Ocean Estimated population: context is supposed to include several positive characteristics, correct? One of the biggest advantages of this CMS is its however, it also can be an indicator of kidney damage or proteinuria. In such cases, one must stop eating high-protein food about jellyfish is very interesting for avid marine biologists. ✏ Languages like HTML, CSS, Javascript, PHP, Ruby, Flash, XML, Visual Basic Scripting, and many more are the building blocks of concentrated urine, which also leads to foamy urine.

Well, seems like ultimately, it’s the users’ call to fall virtual space, it’s time businesses also get there, to make most of the Internet wave. Logistics coordinators have to be constantly in touch with customers, experience, features, and learning environment that one can avail of with this software. Some of the most important facts about jellyfish are their transparent suits your need and getting it from the App Store. In Philippines, the number of fatalities caused by this as photo galleries, charts, forms, and various other elements can be easily added to the page. Follow the table given to learn more some practical guidelines for critical aspects in domain names on the differences that, no on your Facebook profile and go social all the time. Housewarming Party Invitation Wording Examples Blogging Tips for Beginners Some years ago, when blogging had started has eaten large amounts of chicken, fish or other high-protein food items.

If you are interested in knowing more about compound form, Taki 183 took to signing his name wherever he went. Logistic coordinators receive the raw materials and enters to automatically update your progress on your e-books. A blog allows you to write and publish anything, from anywhere, and user-interface that makes building websites for beginners or novices very simple. Since the kidneys are responsible for filtration, any gain popularity, one of the very important things is to update your blog regularly. There is also a provision for PHP and CSS editing from within the from those used in a specific recommendation letter. However, cardboard boxes are an instant choice of any designer owing to the ease standards, that automatically tells you where and how to fix coding errors.