My First Taste Of HTML Code

Wildfire 4Pro

I’ve been required to make a webpage for a simple project at school for computer application technology (CATN), and I finally got going with html code. I’ve set up my notepad++ with html and a preview html plugin (if you need to know why it doesn’t work, some kind of “hash” error, I found a solution).

So I started with the basics… the syntax came first, of course, the <> signs and the slashes “/”.
Opening with <html> and closing with </html>… and all the time it’s the <> and </>, that I ended up copying the “</>”…

I got to know a bit of the font - italics, and , as well as bold, which is a “b” instead of an “i”. Not really knowing what the <body> really does, I started typing stuff, and changed the font with bold and italics. Haven’t done underlining though, I should underline that as a next priority come to think of it…
I also started using the headings, h1, h2, all the way to h6, following the same <> stuff and </> stuff which is now always on my clipboard.

I also learned that some don’t have the slash at the beginning like and , but rather like the horizontal like and the break… and <hr/>, and you only type it once…

Once I got the hang of that, I learned on how to actually export the html file… so I could view it on the web… and there it was - all pretty… I learned about the horizontal lines, and the shift+enter you would do in word … marking paragraphs and … well it stopped there for the day. Other than that, I made a structure folder, which contained the main elements of a html file, the title, body, and the html opening and closing of course. I use it and say “Save As” every time, so I don’t need to retype everything… it’s like a blueprint. Here’s my final, very first html code: (at it’s first sight)!

What I learned:

<html>, </html>, <title>, </title>, <b>, </b>, <i>, </i>, <br/>, <hr/>, <h(a number from 1 -> 6)>, </h(a number from 1 -> 6>

PeterJones

@Wildfire-4Pro ,

Welcome to the Community.

I’ve set up my notepad++ with html and a preview html plugin

Congratulations on getting that set up (especially with the hash error) – by the way, for future readers, the PreviewHTML “hash” error when you try to install it from Plugins Admin is talked about here – fortunately, @rdipardo has come to our rescue and made a fixed version of the installer, so that starting in the next release of Notepad++ (presumably to be called v8.7), it will no longer give the hash error.

I use it and say “Save As” every time, so I don’t need to retype everything… it’s like a blueprint.

That was a good idea.

There are actually a few “snippets” plugins – the one I use is called the Quick Text plugin – which make it easy to have blueprints for smaller chunks of things. The QuickText even can have multiple “insertion points” in the “blueprint”/“snippet” – so if you’ve added a shortcut for Plugins > Quick Text > Replace Tag (I use Ctrl+Shift+Enter, but using the Preferences > Shortcut Mapper > Plugin commands and Filter for Replace, you can Modify the shortcut to whatever you want). Once that’s set up, then you can use that keyboard shortcut to make things really efficient. For example, set up with my keystroke, I could type html-body then do Ctrl+Shift+Enter, and it will insert

<html>
<head>
		<title>$</title>
	$
	</head>
	<body>
	$
	</body>
</html>

– except it won’t show those $ characters. Instead, the first time you did Ctrl+Shift+Enter, it would take you to the first $ location, so you can easily type your title; then do the keystroke again, and it will allow you to type more in the header; then do it a third time, and it will allow you type in the body. That plugin comes with a lot of snippets for HTML, and you can add your own if you have groups of HTML “blueprints” that you want to use frequently.

Other ideas for setting up Notepad++ for HTML development

The “HTML Tag” plugin in Plugins Admin can be very useful for easily entering HTML tags.
Settings > Preferences > Auto-Completion > Auto-Insert > ☑ html/xml close tag will make it so if you type , Notepad++ will automatically insert the  for you, which can be helpful as well.
If you will be eventually uploading your HTML to a web host, the NppFTP plugin will help make it easy to edit the remote copies of your files.

If you have questions about how to use Notepad++ or the plugins, you can ask them in our Help Wanted section. (But this is a Notepad++ forum, not an HTML forum, so asking us about how to use HTML is off topic; since you’re taking a class at school about it, that’s the right place to ask questions about the specifics of HTML, not here.)

Enjoy your use of Notepad++, both for this class and beyond!

Wildfire 4Pro

@PeterJones Ahh so sort of like tab stops?

PeterJones

@Wildfire-4Pro said in My First Taste Of HTML Code:

Ahh so sort of like tab stops?

I had never thought of it like that, but yes, I guess it is a bit like tab stops.

Wildfire 4Pro

@PeterJones So for interest sake, as I’m starting out with HTML (yesterday I covered lists, and CSS styles, also realized that you hadn’t add a slash to <hr> horizontal line, or a break line . Always thought I had to say … or?)
I was wondering how in demand it is… HTML and CSS. It also does take rather a while to become a professional at it (easier than C# and Java though, right?).

PeterJones

@Wildfire-4Pro ,

I was wondering how in demand it is… HTML and CSS

Since essentially the entirety of the web includes HTML and CSS, I will allow you to draw your own conclusions.

But remember, as I said earlier, “This is a Notepad++ forum, not an HTML forum” – we’re focused on the editor and how to use it, not the various things that can be typed with it.

Wildfire 4Pro

@PeterJones One interest leads to another, don’t it?

PeterJones

@Wildfire-4Pro ,

There are 80+ other programming languages other than HTML that Notepad++ can syntax highlight natively (and thus “understands” as well as it does HTML), and it can be used to edit other code not natively supported (either with UDL-based or lexer-plugin-based syntax highlighting, or without any syntax highlighting) and an uncountable number of types of text files that aren’t coding related (my favorite is described in the “cookie recipies” FAQ – by the way, read that FAQ)

Expecting a forum about a specific text editor to also be a place to talk about the ins-and-outs of every one of those 80 (plus the uncountable) languages is a bit ambitious, especially when the forum is very clear that it’s about the editor, not everything that can possibly be typed in that editor.

If you want a place to talk about random programming topics, there’s a stack overflowing with programming questions that you can find elsewhere, plus plenty of topic-specific forums elsewhere.

Your original blog post was reasonable, because it had some HTML, but it also had significant discusion about how you used Notepad++ for that HTML. And I, as a moderator of the forum, am just trying to steer you so that you keep your discussion in this forum focused on the Notepad++; if you want to talk about the other aspects, those discussions can go elsewhere.

Wildfire 4Pro

@PeterJones Completely understood, you won’t have to repeat yourself!