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": „
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?
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? :)
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
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:
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
it gets really exciting! Just take a look and decide for yourself if PHP could be something for you!
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
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!