K
kode_block
NOTE: This Tutorial was written by Me. I've just copied and pasted it from it's Original-Place(Codeforum.org - A Coding Forum by @Malcolmjr96), just to save time of having to write everything. Anyways, I hope you like it. There may also be some parts that are a bit off in which in that case, I do apologize.
Hey there. I figured that since I've seen some People on this Forum wanting to get into HTML5, I thought: "Why not make a Tutorial for Beginners". And so that's what I'm doing.
So to get started with, make sure you have a Text-Editor or IDE. Notepad, Notepad++, Visual Studio 2017 or any other Programming Tool that supports HTML is fine. I'll be using the Version of the Eclipse IDE that was made for Web Development. Once you've gotten your IDE or Text-Editor, just go through the Steps to Set-Up your Project(Which shouldn't take long) and after that, we can get started.
So to start our HTML5 Development, we'll need to write a few things that tells us that this is a HTML File. So write this code first in your IDE/Text-Editor:
Every HTML File should contain those Tags. <!DOCTYPE html> & <html> are required for every HTML File, <head> is for things like what charset you're using and the Title that's displayed on your Browsers Tabs. <body> is where all of the Content that's in your Webpage will be displayed(So things like Text, Audio, Video and Images will be displayed in this). If you would like to know more about these Tags then visit w3schools.com to know more and check out the References.
Now that we've declared the Basic things required for every Webpage, we can now get onto adding Content to our Website. We'll start with a Heading. Now in HTML, there are 6 Types of Headings:
These are all Heading Tags starting from the Biggest(<h1>), to the Smallest(<h6>). Here's an example Photo of them:
That's an Example of what the Headers will look like.
Now, write this in your Code:
Once you have done that, click 'Save As' on your Text-Editor/IDE and save it as 'index.html' or 'index.htm'(.html and .htm are the File Extensions for HTML Files) After you've saved it, open it up in whatever Browser you use, either it be IE, Firefox, Opera or Safari. I'm using Firefox for all of these Examples so depending on your Browser, things may be different. Now once you've opened it, you'll now be able to see your Heading.
Now, let's move onto Paragraphs and Text. A Paragraph or Text is defined using the <p> Tag. All it does is display some Text. Simple. Now let's add it to our 'index.html' Document:
Save your 'index.html' File again and open up your Webpage again(If your Browser still has the Webpage open after saving, just refresh to see the changes). You should now see your Text being displayed on your Webpage. Note: You can write Text without using the <p> Tag but your advised to always contain everything in a Tag.
Well, you should now have a Basic Webpage that can be opened up and now know hot Set-Up a Basic Webpage in HTML5. I hope you liked it. Tell me what you think and I'll hopefully Improve the next one.
You can find my Original-Post, here: https://codeforum.org/threads/begin...alongside-some-headings-and-paragraphs-1.166/
Hey there. I figured that since I've seen some People on this Forum wanting to get into HTML5, I thought: "Why not make a Tutorial for Beginners". And so that's what I'm doing.
So to get started with, make sure you have a Text-Editor or IDE. Notepad, Notepad++, Visual Studio 2017 or any other Programming Tool that supports HTML is fine. I'll be using the Version of the Eclipse IDE that was made for Web Development. Once you've gotten your IDE or Text-Editor, just go through the Steps to Set-Up your Project(Which shouldn't take long) and after that, we can get started.
So to start our HTML5 Development, we'll need to write a few things that tells us that this is a HTML File. So write this code first in your IDE/Text-Editor:
HTML:
<!DOCTYPE html>
<html>
<head>
<body>
</body>
</head>
</html>Now that we've declared the Basic things required for every Webpage, we can now get onto adding Content to our Website. We'll start with a Heading. Now in HTML, there are 6 Types of Headings:
- <h1>(The Largest)
- <h2>
- <h3>
- <h4>
- <h5>
- <h6>(The Smallest)
These are all Heading Tags starting from the Biggest(<h1>), to the Smallest(<h6>). Here's an example Photo of them:
That's an Example of what the Headers will look like.
Now, write this in your Code:
HTML:
<!DOCTYPE html>
<html>
<head>
<body>
<!--This is your Heading. Just so you know. I'm a Comment. You'll learn about me later.-->
<h1>Beginner HTML</h1>
</body>
</head>
</html>Once you have done that, click 'Save As' on your Text-Editor/IDE and save it as 'index.html' or 'index.htm'(.html and .htm are the File Extensions for HTML Files) After you've saved it, open it up in whatever Browser you use, either it be IE, Firefox, Opera or Safari. I'm using Firefox for all of these Examples so depending on your Browser, things may be different. Now once you've opened it, you'll now be able to see your Heading.
Now, let's move onto Paragraphs and Text. A Paragraph or Text is defined using the <p> Tag. All it does is display some Text. Simple. Now let's add it to our 'index.html' Document:
HTML:
<!DOCTYPE html>
<html>
<head>
<body>
<!--This is your Heading. Just so you know. I'm a Comment. You'll learn about me later.-->
<h1>Beginner HTML</h1>
<!--This is your Paragraph. It displays Text. I'm just another Commnet which you'll learn about
soon.-->
<p>Hey there. I'm a Beginner in HTML. I'm learning the Basics just now but I will be moving on to
the more advanced stuff soon.</p>
</body>
</head>
</html>Save your 'index.html' File again and open up your Webpage again(If your Browser still has the Webpage open after saving, just refresh to see the changes). You should now see your Text being displayed on your Webpage. Note: You can write Text without using the <p> Tag but your advised to always contain everything in a Tag.
Well, you should now have a Basic Webpage that can be opened up and now know hot Set-Up a Basic Webpage in HTML5. I hope you liked it. Tell me what you think and I'll hopefully Improve the next one.
You can find my Original-Post, here: https://codeforum.org/threads/begin...alongside-some-headings-and-paragraphs-1.166/
