Frontend Development

[BasicHTML] - Learn Simple HTML-Coding #001

Submitted by Weytaan, , Thread ID: 12333

Thread Closed
Is this tutorial helpful for you?
Yes
75.00%
Votes:
3
% of votes:
75.00%
No (please write why!)
25.00%
Votes:
1
% of votes:
25.00%
You have already voted. Click on the dropdown to undo your vote.
04-11-2015, 12:13 AM
This post was last modified: 04-11-2015, 12:22 AM by Weytaan
#1
Heya(:

I want to show you many basics and features etc. from HTML.
In the first lesson you will learn how to create an very basic and simple
HTML page. Means you learn your first HTML commands.

Step 1.
-> Open Notepad ++ or Atom.
Now you write into the Editor

Code:
<!DOCTYPE html>
<html>





<body>






</body>
</html>

After you write that you have your page to that point rdy. But when you now open your page. Nothing will be showed.
Now we change the Title of the Website.

Step 2. [The Website Title]
-> Very simple. Anywhere below the <html> tags you write the following:

Code:
<title> My first HTML Page. </title>

Now your site has an title in the Tablist.
[Image: MEERheszzghx.png]

Step 3. [Your first Text!]
-> Simple too, now we create our first text. We want an middle text and an big
text. for that you write below <body> this:

Code:
<h1><center> Hello. This is my Website! </center></h1>

Now it looks like this:

[Image: LC42aHvqLk4m.png]

[Image: 3SAkXdwPYtMx.png]

Step 4. [Your First Picture!]
-> Yeah what did you think? RIGHT! Simple too:yus:
write the following below <body>.

Code:
<center><img src="Your Picture link!"></center>



Now it looks like this:

[Image: ErvVKfWAgfmw.png]

Yeees, that is it for the first part of my tutorials. Hope you enjoyed it :)
Soon the next part comes out. There you learn how to create an second page.
And an Button to that page.

If you need any help post here.

##############################
Downloads you need for that Tutorial:

Atom - CLICK
or
Notepad ++ - CLICK
##############################
Download Basic HTML Template: (Optional)

Template - CLICK
##############################



Greez,
Weytaan
The crown makes you bigger, but not more powerful.

Users browsing this thread: 4 Guest(s)