Open Code in English - Innovation Manager

Back to the homepage
Fr | Eng


Day 1 - Basics

What about coding?
Today we are beginning with easy tasks: I'm gonna explain you how I designed the page you are actually visiting. And you are going to code it step by step with me!

We will see:
1. Domain name and hosting
2. Your first page: index.html
3. The basics tags
4. You play now: edit and create the page you want!

First observation: General style of this page
Have a look on the page you are visiting: in fact, it's simply the web without any graphic style. This is the basic style of html coding on the internet: black and white. When you begin to code, and look for a content there is no styling aspects by default. So the page you will create will look like this, but don't worry, I will tech you how to edit it in a good way!
So there is something very cool with this page: it will evolve! "Days after days" the look and feel of this page will change, and I will tech you this step by step. So we begin with a virgin base, and we will improve it: a little like a "word" document! ;)

basic page

Let's go!
In order to create a website, you will need a computer with a little software: free and easy to use. The first problem will come from your computer itself, but also from the web browser that you will use!
For the computer:
- If you have a windows, you will need to use a small code editor which name is Notepad++. It's simply a text editor: it's kind of a "Microsoft word" software but dedicated in writing html code. You will download it just right here: www.notepad-plus-plus.org/fr/ It's a small software, easy to use! Be confident!
- If you have an Apple computer, you will need to use SMULTRON, which is exactly the same as Notepad++ but for Mac OS. I think this software in included by default in your macbook, but you can also download it here: www.peterborgapps.com/smultron/ These softwares are free and quite similar: I used both of them, and it's quite the same!

softwares

Once you downloaded and installed your software, we will begin!
But just before this:
Concerning your web browser:
You need to know that depending on the web browser that you're using, you website won't work the same! You may have probably already see this: between Firefox, Chrome, or safari you don't have the same look and feel for the same website? So now you know! ;)

browsers

1. Domain name and hosting
Generally speaking, you are visiting a website on the internet... But this is not the only way!
In fact, you can also visit a website locally, on your computer, without internet acces: this is what you will do in order to design your website. For this you will use the HTML language (this is the name of the language, like you with English!), and HTML is visible locally on your computer. I will show you, when you will code your first page.
Now let's think about the Online consultations: "Right now you are just visiting my page which is hosted, and reachable under the domain name www.open-code.innovation-manager.fr" If you understood this sentence, I'm done, you know everything!
In fact, the "domain name" of a website is only the www.mygreatwebsite.fr, it's a little like your personnal phone number... The Hosting is what we could define as your phone credit provider: the guy who give you credit in order to call you mom! The hosting is your top-up, and the host is your AT&T... The hosting give you a definied amount of data storage on your host server: It's like dropbox!
In order to give you an idea, for this website, for a year, I'm paying 1,19€ for a domain name, and 7,80€ for the hosting... 8,99€... It's quite cheap! If you wanna know how, just e-mail me
So let's sinthetize:
A domain name allows you to have an adress in order to visit your website online, and a hosting is just only the size of storage you have at your disposal in order to post and publish your website! If it's still not clear enough: e-mail me! :)


2. Your first and main page: index.html
A first simple manipulation that you can do directly on the internet inside your web browser.
In order to understand quickly what does coding looks like, I recommend you a little "Right clic" on any webpage you are visiting: try to find a "show the source code of the page option", a small box is openning, have a look on it, you won't be disapointed!
You can see a preview of what is coding: some well organised signs that want to say something, and whi command to your web browser what to show to visitors.

source

Well, go back to your computer and open Notepad++ or smultron taht we downloaded and installed a couple of minutes ago. Create a new document: don't be affraid, it's white, that's normal, there is nothing on it, but we are going to complete it!
A little tips for you: the basic document for a normal html page looks like this: (feel free to copy and paste in notepad or smultron)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Open Code in english - Innovation Manager</title>
</head>
<body>

This is the Body of your website!!

</body>
</html>

So this looks like a non user-friendly structure, but be confident, it's very EASY:
- These first two lines are recognition standards, always the same, you need them in order to tell your browser that it is a html website page.
- The third line is has the <head> tag! This is the head of your page, not that complicated! You have inside: the title of your page, the description, the author, the favicon, and the stylesheet... But we will see it later!
- Line 4 and 5, we have the content of the <head> tag.
- Line 6, this is the end of the </head> tag! As you can see there is a little slash inside the tag: it simply symbolize the end of the tag, this is the same for a lot of tags, and you need to close the tag most of the time!
- Then we have the openning tag of the <body> of your page: and gess what? you're right: this is for the body of your page!
- The closing tag </body>
- And the general closing tag of the page </html>

And there we are! Our first page is fully created!!

I still have recommandations for you before going further!
Do not forgot to CLOSE a tag when opened! Or your code will simply WON'T WORK!
All these explanations can be a little frustrating: because nothing of what you did from now is visible. Don't be affraid: you just did/understood the worst part!
Now you need to "Save under..." your document! Name it: index.html And you're done! Don't forget the .html this is the base: it's like a "Microsoft word" document with his .doc

3. The basics Tags!
In this first page you just created, you discovered what we call the "tags". These are terms signaled by these <signs>.
These tags elements are indicating to the browser what kind of content you want to display. For example the <title> tag helps you to define the title of your page: this is the main title that you have in your brwsers tab. Here this is : "Open Code in English - Innovation Manager".
In the tags I used to create this page, you will find :
</br> Which is the "Break" tag: in order to go to the next line, or skip a line! (no need to "open" and "close" this tag, you simply write </br> and the line is skipped).
<p> Is the openning tag for a Paragraph! Paragraphs are generally composing your page, depending on your content, and you can apply them a deninef style: font-color, font-size... I will explain you later. This: close the paragraph </p>
<i> To write some text in italic! Closing tag: </i>
<h1> This is the first level of title, the biggest one: this title is diplayed in black, in BIG at the beginning of this page "Open Code in English - Innovation Manager" When you define a <h1> gives you the biggest title, the more important on the page. Closing tag: </h1>
You will also find: <h2> <h3> <h4> They have basics values defined under the h1 value: you can change these values with a specific style: we will see later!

Now two MAIN tags!
Links
You will have noticed at the beginning of this page some different links that you can clic, they are redirecting to other websites. The tag we are going to use to create some links is:

<a href="http://www.facebook.com">FACEBOOK</a>

Which will simply give:
Facebook
You just need to replace the facebook adress by the one you want to redirect to. Take care to keep the quotation marks, or the tag won't work!
You will aslo add if needed: style="target: _blank" in order to open you link in another tab of your browser, if your link is pointing toward another website for example.
You will have the following line:
<a href="http://www.facebook.com" style="target: _blank">Facebook</a>


Pictures
For pictures, the "How to do" is kind of the same than for links.
The picture tag is this one:
<img src="nom-de-mon-image.jpg">

In order to insert an image, you will take care of certain details:
- Your image and the index.html page needs to be inside the same folder: for example both on your desktop, or both inside a "mywebsite" folder or in anyplace but together!
- You also need to be really careful concerning the name of your image: it need to be exactely the same in you code! If not: too bad Game over!
- You can edit the size of your picture by adding the width and height properties in pixel, like this:

<img src="nom-de-mon-image.jpg"style="width: 300px; height: 200px;">

You will see on your screen:
photo base
- You can also mix between an image and a link: by adding a picture at the place of th link button, like this:

<a href="http://www.facebook.com" style="target: _blank"><img src="nom-de-mon-image.jpg" style="width: 300px; height: 200px;"></a>

As you can see, I just added the picture at the exact place of the FACEBOOK clicking area.

4. Your turn to play!
Here we are! You just created your first web page thanks to the HTML language. You can now create your own website! Be creative! And share it!
You can take the basic document you have at the beginning of this page, copy and paste it in a new index.html file in smultron or notepad!
Do never forget that your code must be written between the <body> and </body> tags.
Another very important thing is to SAVE your document each time you edit it! If you don't: you won't see the modifications you've made! So the track is: edit - save - open in browser (or refresh browser) - see the modifications.
Good luck for creating your first page!
I'm waiting for your feedbacks on this "Day 1"!
You will see: it's not that hard! Be confident!
And if you're lost: send me an email!

Piem


Back to the Homepage? or Go on to Day 2?