Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Beginners Guide To HTML5 - Setting Up Our Project alongside some Headings and Paragraphs(#1)

D

Dan-Kode

Guest
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:
[CODE lang="html" title="HTML Document - index.html"]<!DOCTYPE html>
<html>
<head>
<body>

</body>
</head>
</html>
[/CODE]
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:
  • <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:
Mozilla Firefox 12_04_2019 16_41_41.png

That's an Example of what the Headers will look like.

Now, write this in your Code:
[CODE lang="html" title="Heading Example - index.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>
[/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:
[CODE lang="html" title="Paragraphs"]<!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>
[/CODE]
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.
 
Hey. I'm the same User who posted this. Just under an entirely new Account. I will be providing a Part 2 and so forth to this Series. Keep an eye out.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom