Page 1 of 1

Notepad++ and Beginning HTML Rate Topic: ***** 2 Votes

#1 EnvXOwner   User is offline

  • D.I.C Lover
  • member icon

Reputation: 358
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Posted 28 November 2010 - 12:07 PM

*
POPULAR

In these tutorial series I assume that you are a complete noob or that you have seen my other tutorials! These should be somewhat easy, but if you have a question just ask!

In this tutorial I'll show you where to download Notepad++ and how to use, header, paragraph, link, and image tags.
Put this in your text editor:
<html>
     <body>
     
     </body>
</html>

As you can notice, the tags are all lowercase; right now it don't matter if you do uppercase or lowercase for in my next tutorial I'll introduce you to 
<!DOCTYPE>
. All the elements that you want the visitor of your website to see will be in the 
<body></body>
tags.
Header tags go from 
<h1></h1>
to 
<h6></h6>
. You may not think these are important, but when we make a WordPress theme they will be :). Here is the code I used in the video:
<h1>Hello Youtube</h1>
<h2>Hello Youtube</h2>
<h3>Hello Youtube</h3>

When you display that in your web browser you should notice that the text is bold and the font is huge; you should also notice how the font size decrease as the header number increases. You can now assume that 
<h6></h6>
is the smallest.
<p></p>
defines a paragraph. There is a lot of styling you can do with paragraphs that I will show you when I start the CSS tutorial series. Here is the code I used in the video:
<p>This is an example of a paragraph.</p>

There really isn't much to explain about the paragraph right now.
When we begin creating full fledged websites we will be using links to create magnificent navigation bars. Links may be a little tricky to remember because they don't have one letter or one number for the syntax. Here is the code that I used in the video:
<a href="http://www.youtube.com/">YouTube</a>

When you deploy that in your web browser you will notice that the font color is blue, it's underlined blue, and that if you click on it you will be at YouTube. Then if you go back to the file the text and underline will probably be purple. This looks rather ugly, but we shall make it look beautiful when we finish CSS.
Images are very similar to the links. I try to use a photo from Newegg, which I fail to do. lol. Here is the code I used in the video for images:
<img src="http://images10.newegg.com/WebResource/Themes/2005/Nest/logo.gif" width="235" height="68" />

You begin by declaring an image. You then declare the source of the image and give the URL. You then declare the height and width of the image. It's in pixels.

I hope you liked my tutorial. If you have any suggestions or questions leave a comment!

Is This A Good Question/Topic? 6
  • +

Replies To: Notepad++ and Beginning HTML

#2 RyanRobinson   User is offline

  • D.I.C Head
  • member icon

Reputation: 39
  • View blog
  • Posts: 227
  • Joined: 31-March 10

Posted 28 November 2010 - 03:49 PM

I know this tutorial is aimed at complete beginners but I think it's important that you give them a little introduction on Doctypes and whether to use XHTML or HTML, strict or transitional.
Was This Post Helpful? 2
  • +
  • -

#3 EnvXOwner   User is offline

  • D.I.C Lover
  • member icon

Reputation: 358
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Posted 28 November 2010 - 04:04 PM

View PostRyanRobinson, on 28 November 2010 - 04:49 PM, said:

I know this tutorial is aimed at complete beginners but I think it's important that you give them a little introduction on Doctypes and whether to use XHTML or HTML, strict or transitional.

That's what my second video is about. I uploaded it to Vimeo for D.I.C. The new tutorial should be up before 8 p.m.
Was This Post Helpful? 1
  • +
  • -

#4 RyanRobinson   User is offline

  • D.I.C Head
  • member icon

Reputation: 39
  • View blog
  • Posts: 227
  • Joined: 31-March 10

Posted 29 November 2010 - 03:15 AM

Great stuff. It's good to know that people will be teaching people about standards and the theory behind it.

By the way. The Vimeo video is private so you can only watch it if your signed in on Vimeo. I don't have an account and I'm pretty sure not everyone else does. Could you upload it on Youtube or maybe make the video public?

Thanks.
Was This Post Helpful? 0
  • +
  • -

#5 EnvXOwner   User is offline

  • D.I.C Lover
  • member icon

Reputation: 358
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Posted 29 November 2010 - 04:14 AM

View PostRyanRobinson, on 29 November 2010 - 04:15 AM, said:

Great stuff. It's good to know that people will be teaching people about standards and the theory behind it.

By the way. The Vimeo video is private so you can only watch it if your signed in on Vimeo. I don't have an account and I'm pretty sure not everyone else does. Could you upload it on Youtube or maybe make the video public?

Thanks.

The videos are first uploaded to YouTube. I'm only using the Vimeo so that I can share the videos with the dream.in.code channel.

This post has been edited by EnvXOwner: 30 November 2010 - 04:55 AM

Was This Post Helpful? 0
  • +
  • -

#6 Janitor   User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 56
  • Joined: 30-July 10

Posted 19 January 2011 - 11:42 AM

While using Notepad++...Remember to set it's syntax high-lighting to HTML.
BTW, you missed out two of the most important markup tags.

The head element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more. <head></head>

The <title> tag defines the title of the document. <title></title>

You could also mention CSS style sheets...if you're planning on compiling another tutorial.
Was This Post Helpful? 1
  • +
  • -

#7 EnvXOwner   User is offline

  • D.I.C Lover
  • member icon

Reputation: 358
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Posted 19 January 2011 - 01:31 PM

I have made tutorials about the head and doctype, I have the video on here and YouTube. The tutorial was disapproved for I haven't been giving it my all. I'm going to redo the text version of my tutorial and make it more informational.
Was This Post Helpful? 1
  • +
  • -

#8 Fungle   User is offline

  • D.I.C Regular
  • member icon

Reputation: 265
  • View blog
  • Posts: 337
  • Joined: 06-March 10

Posted 20 January 2011 - 04:57 PM

View PostJanitor, on 19 January 2011 - 06:42 PM, said:

While using Notepad++...Remember to set it's syntax high-lighting to HTML.
BTW, you missed out two of the most important markup tags.

The head element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more. <head></head>

The <title> tag defines the title of the document. <title></title>

You could also mention CSS style sheets...if you're planning on compiling another tutorial.


In Notepad++, The language is automatically determined by it's file type, unless you have not saved it then you need to set the syntax to HTML.

Also, The head can link in JS Library's too.
Was This Post Helpful? 3
  • +
  • -

#9 BenAthar   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 22-April 11

Posted 02 May 2011 - 06:42 AM

View PostFungle, on 20 January 2011 - 04:57 PM, said:

View PostJanitor, on 19 January 2011 - 06:42 PM, said:

While using Notepad++...Remember to set it's syntax high-lighting to HTML.
BTW, you missed out two of the most important markup tags.

The head element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more. <head></head>

The <title> tag defines the title of the document. <title></title>

You could also mention CSS style sheets...if you're planning on compiling another tutorial.


In Notepad++, The language is automatically determined by it's file type, unless you have not saved it then you need to set the syntax to HTML.

Also, The head can link in JS Library's too.


That's always nice when you can use the head link in JS's Library. Sort of can clean up the page a bit. depending on what else is on the page.
Was This Post Helpful? 0
  • +
  • -

#10 farondomenic   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 16-January 13

Posted 16 January 2013 - 03:09 PM

This is not what I am looking for, but instead I was looking for an "instructional manual" on HOW TO USE Notepad++; not coding part and your post is about coding - not the Notepad++. But, here's link for those who want to squeeze every feature out Notepad++ to make our work in coding much easier. Anyhow - the link is great find. http://tinyurl.com/ap7hlob
Was This Post Helpful? 0
  • +
  • -

#11 James_Smith   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 20-July 12

Posted 08 March 2013 - 02:12 AM

It's a useful and easily understandable tutorial to learn HTML from beginning for newbie with appropriate description and video.
Was This Post Helpful? 0
  • +
  • -

#12 eugenerudenko   User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 47
  • Joined: 13-March 13

Posted 25 March 2013 - 07:58 AM

View Postfarondomenic, on 16 January 2013 - 03:09 PM, said:

This is not what I am looking for, but instead I was looking for an "instructional manual" on HOW TO USE Notepad++; not coding part and your post is about coding - not the Notepad++. But, here's link for those who want to squeeze every feature out Notepad++ to make our work in coding much easier. Anyhow - the link is great find. http://tinyurl.com/ap7hlob

Good video to start with.
Was This Post Helpful? 0
  • +
  • -

#13 rude_boy   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 21-January 14

Posted 21 January 2014 - 10:18 AM

:bigsmile: yes this tutorial gives me a little intro about basics of HTML a little idea about HTML. thanks for your post.

This post has been edited by macosxnerd101: 21 January 2014 - 10:35 AM
Reason for edit:: Removed quote

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1