Step by step and for free to your own homepage
It's hard to start, take your time and read through everything, just follow the instructions and try the examples yourself, you also like to experiment a bit yourself!
Of course, learning programming does not work without programs and tools, first you download a text editor,
then please install this synonymous, for beginners, I can because z. For example, Notepad ++, this is a
very simple and good text editor. By the way, also free !
Well, we have an editor, now you should know what a file system is, at least you should be familiar with the
know the so-called "paths", but the principle is quite simple, you have a main folder in which your entire website should be later. Well, we do not want that
all files in a folder, that would not be a problem with 3 - 10 files, but if you later have hundreds of files in the folder, you will not find your way anymore.
Therefore, a clear folder structure is always important! Let's go now. Create a folder on your hard drive and name it as you like. Eg "Homepage".
Create a text file in this folder and name it "index.html". You can easily do this via the editor, open Notepad++ and go
On File → New (CTRL + N), then save it empty in your previously created homepage directory, this is what we call now "root directory". Have you now?
As far as everything is done right then you have now somewhere on your PC created a folder called "Homepage" or similar and contains a file called "index.html". Is that so? If
yes then congratulations, you have made the start! The so-called "absolute path" is now C: /homepage/index.html - assuming you have called the folder "homepage" and him
under C: created - of course. The relative path (always starting from the root directory) is simply "index.html"! The absolute path also shows the hard disk and the directory
with, if you already had a web server with a domain, the whole thing might look like this: https://your-domain.com/index.html - but we'll come to that later, for the moment you're enough
Computer completely off! Now you know what the paths are about and now you have a text editor, you are now ready! Next go »
If you want to put something on the net, the easiest way to do this is with HTML, for this you only need the editor you already have installed
should. HTML elements are defined by a so-called "tag", a link to another page is created eg. B. with a „<a>Link to another Site</a>“, do you want one
Bold text so you can use the tag "b": „<b>Fettgedruckter Text</b>“.
<a href="javascript:;" class="btn btn-flat aiqia-bg-orange aiqia-font-white">Link</a>“
Well, let's first create a framework that we can then build on. HTML pages always contain typical features and are mostly similar in their basic structure. However, there are a lot of different types of HTML, but I will not go into that here, we turn to the modern HTML5!
Copy this part and paste it into your just created "index.html". Well, what do we see here now? We now have a "backbone" for our site
missed, so she can stand alone. If you were to call the file in your browser, the browser would be able to interpret it, ie. he can do it though
read and view, but there is still no "Content" included. Worth mentioning at this point is also the specification of the language by the "<html lang="de">" in
the 2nd line. If you would like to provide your page in English, you should enter „en" instead of „de“. The visible here "Meta tags" are standard as in ours
Example up here. So we use the character encoding "UTF-8" and also make „viewport" information for use on modern devices, ie Tablet, Mobiles, etc .. We have to get closer
but do not go into the "<head>" section for starters. We now turn to the "<body>"! This is where your homepage is created in the end!
First, we should think about how we want to build our homepage, we all have certainly seen great websites and can also imagine how our website
should look later. You can also just take a sheet of paper and roughly record the typical areas of a web page. It does not have to be a precision movement, even that
coarsest doodle is perfectly adequate, so you do not have to be artistically talented, just stick in the widths from top to bottom, you're welcome to line up several blocks
and or with each other. The main thing is to know where your individual areas should be displayed. This will look nice on the homepage later! But we can also start with that
Just build a "standard" page. But should we optimize for mobile devices right away, but in order to master this you need at least the
Section "CSS / CSS3".
First, we'll build a navigation. HTML5 even offers separate tags for this, we use the tag "nav“ here. And for our navigation links
we use the ul day!
The whole can then z. B. look like this:
Now paste this code into your file by simply copying the above code and pasting it into the "body" area (that is, between "<body> and </body>"). Well have You already built your first own navigation. Of course, that's not enough for a long time. Next we'll build a so-called "header", expand your page with the following lines of code, Just put them directly under the navigation (So after the „</nav>“):
Already inserted? Great, let's take a look at the first interim result. Call up your workstation and navigate to your folder "Homepage", found? to open
You him and right click the file "index.html", go to "Open with" and choose your browser, now the browser should open and you should already have your headings
recognize. Of course, it does not look appealing at first glance, but hey, your first, self-made, homepage! And, if you stay diligent, I promise you
that we will get the whole thing pretty. :)
It is important that you understand what we have done here, if you have not seen through it. The tags "nav" and "header"
So now include more elements with other, different tags, these are used as needed. In the navigation I have z. B. "ul" use, so you can
These can also be normal bullets with numbering as well as simple listings with the classic points ahead. The element "ul" itself contains some "li"
which ultimately contain the link, the links we already know from the beginning, or already forgotten? Then better read again! :)
For starters, we now have enough "source code" to work with. Next, I suggest we go over to the CSS! Next go »
Cascading Style Sheets, short CSS is a very powerful and often underestimated tool for a web designer or programmer. With CSS, you give your homepage the style that the page is you want a predominantly green side? With CSS this is not a problem, color each item to your taste! Well, what do you need to know? You know what elements are already, these elements can be equipped with further so-called "attributes", in order to assign a certain style to a certain element, you have to give your element an "id" or a "class" give, this is not mandatory. In principle, elements can also be addressed in the CSS by tag name, as well as via class names or an ID. An ID may only be one Occur throughout the document, a class you can use infinitely often. So how does it work now? Suppose we first want our navigation neatly "Style". OK, long story short, let's start:
Now go to your editor, go to File → New and insert the above section. Save the file but now in a new subfolder of your home directory, In the Home folder, create another folder named css, and then save the newly created file named style.css. Finished? Now the next step we have to integrate this file in the head area of the page, this is done with the help of a line:
Insert this line BEFORE the "</head>" tag and reopen your index.html in the browser. If you have the file still open in your browser you just need to press F5,
this will refresh the page. How do you like your navigation now?
But now you should understand what we did exactly. The last code snippet, the link tag, indicates which one
css file we want to use for our website. In our case, this is now our self-created style.css. So with the link tag you can add more files to the document (the index.html).
This is also done so with javascript files z. B., but we will come to that later. Let's try to understand what these few lines of CSS code do. Much can already be done
derive from the names, z. For example, we see the attribute "width", you do not have to be a master to understand that I can set the width / width here. We have chosen 100%
so that the navigation also extends across the entire width of the website. U must understand that the element "nav", from our index.html, can be addressed by the "nav {}", everything you
now declaring properties between curly braces is automatically inherited from the "nav" element in our index.html document. The list items I have here with "nav ul> li {}"
addressed, all li-elements will then take over these properties, the nice thing here is that you can make another listing in turn quite different, since we only the ul
within the "nav", therefore: "nav ul", other "ul" outside the "nav" will thus not be affected by these properties. Then let's see what commands b.z.w .. properties
do we still see? We have z. For example, padding and margin, we set distances with these two properties. Margin determines how much distance to the outside should be kept, padding puts the inner
Distance fixed. The distance itself can be specified in different units, the most common is probably px for "pixels". For our purposes, this is sufficient for the time being. Font-size is clear, here we put ours
Font size, color describes our font color, this is specified either in hex code or in RGB / RGBA, this is initially a bit confusing and looks complicated. One more way
there are still fab to declare, you can easily specify the color in English, z. For example: "color: black;", and we would have a black font. Later we will be more specific
it is sufficient for us to know that #aaaaaa (can also be abbreviated #aaa) is a shade of gray. Incidentally, I have also documented the lines all, I can recommend this to anyone with the
Programming starts, so you'll always know exactly what's going on at each point exactly and can therefore find their way easier.
Now let's turn to the header and
make the times a little more appealing, we now grab something deeper in our bag of tricks and use a bit the "power of CSS"! Add the following lines to your CSS:
Finished? Do not forget to save! Then you refresh your page, now you can see very well that this is a website, right? :)
I think it is time to draw a small interim conclusion? How do you manage? Do you understand everything so far? Do you think you could imagine such a thing?
Work to have fun? Great! Then let us just continue. I would like to briefly comment on our CSS supplement and explain it in more detail. For our
As you can see, we used "header" element several times the property "background", if you would do it with "width" the browser will always take the last given one
Value. With "background" the whole thing looks different, here the browsers react very differently, therefore the various browser types are discussed here, so that
the header also looks as nice across browsers as it does in your browser. He will simply ignore any values of properties that a browser does not understand, therefore
So it is not a problem that you declare a certain property several times, the browsers are looking for what they understand. Additional links I will at the end of this
Add tutorials. If you want, you can then work more closely with these topics. That's enough for us now. We will go over to the javascript, we will gradually become ours
Site still develop, a large part comes later still in the range PHP, here then the content, thus the content of our side is created dynamically, so the document builds up quasi
self-contained as if by magic. But do not worry, here is neither conjured nor blundered! Next go »
What is javascript? And what is jQuery? With these questions we enter the next part of our little tutorial "learn programming". Javascript is a client-side Scripting language. On the client side? This means that everything that is done to javascript actually only happens to you on your computer the moment you visit the page. With Javascript, you can bring your page to life, make beautiful animations or even disappear entire pages or make appear. Theoretically, you can do yours generate complete page via js (javascript). To simplify all this, they started to write whole libraries, one of them is jQuery, I want that library To bring you closer to give you a little insight into the matter. Well! Let's open the next chapter! First we have to go with the jQuery Library equip, we can accomplish this just as we have already done with our css file, but not by "link" tag, but with the "script" tag! The "script" tag is, in contrast to the "link" tag, closed at the end again: "</script>"! Download the jQuery file by using this link: jQuery Here you will always find the latest version of jQuery, if you choose one of the versions, a new window opens with the code of jQuery. Now press CTRL + A to select everything and then CTRL + C to copy the selected text. Now go back to your Notepad ++, open a new file there, paste the text there (CTRL + V) and save it as "Homepage / js / jquery.js". That's right, you do not have the "js" folder in your "home directory" yet. All done? Now it can go on! But first? What do we have now? made? If you build websites yourself, you may want to use a picture gallery or similar, in which case it will be similar in principle, you need a "master" file, so we just call it now and then have to respond specifically to your website, here it is then usually to vote any functions on your elements. Say, you are offered something that you can handle with your page, b.z.w.. apply to your website. How exactly does it look like?
Add these lines BEFORE the final body tag „</body>“ on. As you can see, we once included the jQuery file and created a space in line 3 for our own
Javascript code we want to apply right now.
Everything OK? If not, go through it all in peace, do not think too complicated, it's not that hard!
When you are ready, concentrate on the space between the „<script>“ and the „</script>“, always insert the following codes there!
As mentioned before, insert this code between the script tags so that it can be properly recognized and executed by the browser! Using this little snippet, so call it "programmer" like, now wait for the document until it is fully loaded and executes, then the code that stands inside. Right, we have nothing in it! We want to change that now! Add the following lines into the function:
If you have done everything right and you update your page, the title "My first homepage" should now turn black! If not, you have overlooked a trifle!
Do you want to troubleshoot? It works? Well, it was not that hard, was it?
Let's get to the details, first we see the "var headline ...",
what happens here? Do you already know it? Right! here is a variable defined, imagine you have a number that can be regularly different, such as the change in your wallet z. B.,
the actual value changes constantly, a variable stores an arbitrary value! You can use this variable over and over again in the further course of your little script.
At this point, but jQuery helps me, the value I give here is not about the amount of euros I have in my wallet, he refers to an element, namely the h1 within our headers!
In the next line we see "heading" WITHOUT a var in front of it, that's perfectly legitimate as the variable in the line above was defined, so you should predefine your variables at least once with var!
In addition rich a "var xyz;", in the further course the script recognizes the variable also without a "var", you can then, combined with a point, perform functions on b.z.w.. with this variable and do exactly this
I in my example, I define my element and perform a function on it, in my case the function "css", so I can specify and change my CSS properties! More precisely, we'll talk later,
important is that you understand what variables are! Let's go back to our example with the change in the wallet. Everyone has a wallet, so everyone carries a certain amount with them!
So we have: "var portomonaie = x", x is always here for the current value you just carry on change with you! Assuming a friend of yours owed you 20 €, he pays you this debt
back, so:
A semicolon closes always a line, which you can save most of Javascript but there are exceptions, but that would be
this place too much of the good! For starters, you are already very far, if you have understood everything so far! Now all you need is the section "I would like to give you this on my way" and
you'll be fine on your own! Be sure that you've read and understood the HTML, CSS and Javascript sections! And one thing I would like to mention right now, with the areas PHP and MySQL
it gets really exciting! Just take a look and decide for yourself if PHP could be something for you!
But now first in the program, let 's pay attention to our "fictitious" value we specify as change in our wallet (14,43), use a comma (as in our
Example), the specified value is considered a so-called string, these must be enclosed in apostrophes! For example: '23,67'. As well as words b.z.w. whole sentences, these are also considered "string"! A whole
Number or a decimal with a dot (not a comma) is considered an "integer" b.z.w. if the value is given with a dot, that is a decimal number, as a so-called "float", then you do not need it in
To put a comma! But you can do it, so if you give your 14.43 € with an apostrophe this will automatically become a "string", omit the apostrophes, it will remain a "float" b.z.w. If you
an integer indicate an "integer". This is important, if you do calculations with Javascript! For mixed-variable billing, say, if you count strings and integers:
(var a = '4', b = 3; /* You can also specify several variables, as in this example, separated by commas */), you would now want to set this together (var result = a + b;), would you
get the number 43, because javascript puts the string and the integer in this case just together, this is because the + sign is not just for adding! Javascript can be used with the
+ Characters just put strings together! Therefore, the integer in our example is simply treated as a string because you did not use a pure integer, so remove the apostrophe from the 4
As a result you correct the 7!
So again, integers (eg: 145) can only be integers, a decimal always has decimal places (eg: 12.675), but counts as a string, if you use a comma, use instead of the comma
a point, you get a float and can also charge this!
Practice diligently and stick to it, read it through several times and try to understand everything correctly, shortly there will be a kind of support for this site, you
can then leave me a question there and I answer you "as soon as possible"! Shortly it will continue with the Javascript area, PHP and MySqli are still missing! I always try
Keep writing as soon as possible! Stay on the ball and do not forget to press the "Share" button! :)
Have fun learning and good luck!
AIQIA