Frontend Development

HTML Lessons #1

Submitted by H, , Thread ID: 10979

Thread Closed
08-10-2015, 11:32 AM
#1
I'll try to make this a regular thing!

Today we're going to be creating a basic webpage with 1 line of text and we'll also set a title.

Firstly, open your editor of choice and create a new document.

Then we'll need to create the basics of a HTML page, such as the DOCTYPE and the opening tags for the document. I'll skip this part and just paste the basic page Tongue.

Code:
<!DOCTYPE html>
<html>

<body>

</body>
</html>

This is a bare bones file and this should be the basis for most HTML templates that you're working on.

So, first of all we're going to add a Title. This is much simpler than you'd think.

Below the <html> line of coding, you simply add the following:

Code:
<title>Text for your title.</title>

Simple as that!

Next, we're going to add our line of text. Go down the already open Body tags and we're going to add a paragraph.

To add a Paragraph you only need a <p> tag, so it's really easy and is hard to forget Laugh

You open and close the tags as you would with any other HTML element.

So inbetween the Body tags, you should open your <p> tags and then type what you want, then you go ahead and close them.

Here's an example:

Code:
<p>This is a paragraph</p>

You can add as many as those <p> tags as you like on a page, as they create a new paragraph per tag. So you could write a nice bio (or something with loads of text), quite easily.

I'll post the final coding (yours should look similar, if so then Gold star to you! :noh: )

Code:
<!DOCTYPE html>
<html>
<title>Text for your title.</title>
<body>
<p>This is a paragraph</p>
</body>
</html>

Well that's it, good job on getting through the first lesson. I'm not sure how regular these will be, I could post multiple in a day or one a week, depends how busy I am.

With that said, see you around and get practicing your HTML!!
The Pengest Turkey

[Image: The-Chicken-Connoisseur-PENGEST-TURKEY-1-1.gif]

RE: HTML Lessons #1

#2
Great job!

There should be more people like you who contribute and help people out.
Do not allow the eye to fool the mind.

RE: HTML Lessons #1

#3
Seeing as a few uninformed aspiring web developers may check this tutorial I'd suggest revising this tutorial slightly.

This is a proper barebones HTML document:
Code:
<!DOCTYPE html>
<html>
     <head></head>
     <body></body>
</html>

The title tag would be placed within your head tags, as follows:
Code:
<!DOCTYPE html>
<html>
     <head>
          <title>Website Title</title>
     </head>
     <body></body>
</html>

This tutorial is pretty simple and doesn't really cover getting started from a beginner's perspective. Perhaps elaborate on the purpose of each tag as well as provide examples of how to work with them. Also, I'd suggest explaining how to reference stylesheets from both within and outside of the HTML document. Other than that, good on you for attempting to help website developers. Smile
NulledBB Member Since 2013 | Former Staff Member | Web Designer

Need MyBB/website help? Feel free to message me!

RE: HTML Lessons #1

OP
#4
08-10-2015, 10:50 PM
John Wrote:
Seeing as a few uninformed aspiring web developers may check this tutorial I'd suggest revising this tutorial slightly.

This is a proper barebones HTML document:
Code:
<!DOCTYPE html>
<html>
   <head></head>
   <body></body>
</html>

The title tag would be placed within your head tags, as follows:
Code:
<!DOCTYPE html>
<html>
   <head>
     <title>Website Title</title>
   </head>
   <body></body>
</html>

This tutorial is pretty simple and doesn't really cover getting started from a beginner's perspective. Perhaps elaborate on the purpose of each tag as well as provide examples of how to work with them. Also, I'd suggest explaining how to reference stylesheets from both within and outside of the HTML document. Other than that, good on you for attempting to help website developers. Smile

Yeah I missed some stuff as rushed it whilst at work haha.
The Pengest Turkey

[Image: The-Chicken-Connoisseur-PENGEST-TURKEY-1-1.gif]

RE: HTML Lessons #1

#5
Great job! Thanks for share this tutrial

Users browsing this thread: 3 Guest(s)