Tutorial creating page stucture in Notepad++ Part 1

darsondrew (58)in #utopian-io • 8 years ago (edited)

Description

Notepad++ is a free (as in "free speech" and also as in "free beer") source code editor and Notepad replacement that supports several languages. Running in the MS Windows environment, its use is governed by GPL License.

What Will I Learn?

You will learn the function of each tag.
You will learn how to add plugin Emmet and other plugin.
You will learn how to create a page structure.

Requirements

Write here a bullet list of the requirements for the user in order to follow this video tutorial.

System Requirements: Program Install Support Install and Uninstall
System Requirements: No special requirements
OS Support : Microsoft Windows

Information

Website & Download: https://notepad-plus-plus.org/
Type : Source code editor
License : GNU General Public License

Difficulty

Intermediate

Tutorial Contents

In this tutorial I explain about the features and structure in Notepad ++

The tools we need are

Notepad++
Emmet Plugin,

First Open Notepad ++
Then before we create an html, I will explain the function of each tag we use in this tutorial,

All html is written inside html tags. Normally you will have an opening and closing tag, like this <html>...</html>

<head> tag usually contains metadata, which describes the current page.

The <body> tag is the tag that displays the actual content. anything that your website visitors will see in the body tag.

< !--comment-- > tags are used to add comments to html.

<! doctype html> is the instruction to the web browser about what HTML version is written on the page.

<meta http-equiv="refresh" content ="3"> works to refresh your page in the browser every 3 seconds.

<title> function to write the title

Now we go into the discussion, The first step is to create an html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tutorial create page structure</title>
    <meta http-equiv="refresh" content="3">
</head>

<body>
    Hello World!
</body>

<html

After you create an html like the example above using Notepad ++, you can go directly to Run > Launch in Chrome (can use other browser)

This is a result :

in html like the example above we use the <meta http-equiv = "refresh" content = "3"> tag. This tag works great for refreshing html pages, if at any time you edit your html file, for example <body> releases at 27 March</body>, you replace it with <body>releases at 29 March </body>.
you just need to change it and then save, then automatically your html contents will change even if your html is active/seen many people. if you change the contents of the tag "3" to "5" then your page will automatically refresh every 5 seconds.

Then we go into the initial html structure :

To get the initial Html structure, you can expand [html:5] abbreviation with Emmet.

If you do not already have Emmet plugin, you can download it in Plugins Manager> Show Plugins Manager, then check Emmet and Install.
If you do not have Plugin manager yet, you can download it here. you can choose according to your needs
to install Plugins, first open the file you downloaded and will appear as shown below:

Copy the two files I selected, then go to Local Disk (C:)> Program Files> Notepad ++> plugins, and paste. then the Plugins manager menu has appeared

Then continue to install emmet and will like the photo below :

Next to get the initial Html structure, you can expand [html:5] abbreviation with Emmet.

After getting the initial Html structure, it will be like this :

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Then write like this :

You can also use [link:css] to attach a CSS file to your HTML.

Next create a new tab with the name style.css then save, then Drag>drop tabs in Notepad++ to open them side-by-side. like this : move to over view

Now we will try to add color, Make it like below on the style.css tab, then save !

Next, choose Run>Launch in Chrome. Then your Html will be like this

Continue by changing the body color html

Next, choose Run>Launch in Chrome. Then your Html will be like this

If you want to add padding, margin on body html. and add width, height, text-align. like this :

Then choose Run>Launch in Chrome. Then your Html will be like this

Now we must to create script.js in the same directory. HTML is using relative paths, so you can use src="../script.js" or "js/script.js" like photo below, I added a new tab with script.js name and added alerts.

Then your Html view will look like this :

So here's how to create a html page structure, if there is a mistake please comment and I will improve as best as possible.

Thank you!

Posted on Utopian.io - Rewarding Open Source Contributors

#tutorial #notepad

8 years ago in #utopian-io by darsondrew (58)

Sort:

roj (61) 8 years ago

Your contribution cannot be approved because it does not follow the Utopian Rules.

Related Rules:

Submissions presenting content creation and simple on-screen instruction will be rejected.
Only contributions made to open source projects with a GitHub repository can be approved.

Clarifications and Suggestions:

First of all, contributions on HTML cannot be approved since there is no proper repository for HTML. You can't use Notepad++'s repository for a tutorial of HTML. Considering the tutorial only includes steps for installing and using a plugin, and their instructions are simple on-screen instructions, it's not also accepted as a Notepad++ tutorial. Since it's unclear, I quoted both rules and formats you would aim, there are different reasons for both to be rejected.

You can contact us on Discord.
[utopian-moderator]

$0.00

STEEM 0.09

TRX 0.30

JST 0.033

BTC 111493.62

ETH 3952.46

USDT 1.00

SBD 0.58