Синтаксис html для notepad

Coding HTML with Notepad++

Whilst Notepad++ is not a full WYSIWYG like Adobe Dreamweaver it does offer a fair amount of help to the HTML coder. It is well worth your while to have a look at some of the settings as one or two small tweaks can really make a difference to how you code (Cracking HTML in the CAT syllabus has a few more recommendations for improving your HTML). Remember: your file must already have been saved with an .html extension for these features to work.

1. Word wrap

The simplest and most important setting to check is Word wrap. If it is not activated your code will run off the screen on the right and you will have to scroll horizontally which is a nightmare! The Word wrap setting can be activated in the View menu:

2. Auto-completion

The code AutoComplete feature in Notepad++ can be confusing as apart from anything else it offers you options that are not in the curriculum or are not relevant to HTML . The screengrab below illustrates this; in addition to the correct option — p — being displayed, a whole list of additional options (most of which are CSS attributes and could not be used at this point in the code) are offered:

3. Auto-insert

This is a setting I highly recommend you learn to use. Navigate to the Auto-Insert options: Settings » Preferences:

1. On the Preferences dialogue window
2. Select the Auto-Completion tab
3. Activate the html/xml close tag option

Now, when you finish typing an opening tag the appropriate closing tag will automatically be inserted and the cursor will be in between the opening and closing tags for you to type the content. This is a great way to ensure you always match your tags correctly.

4. Highlight Matching Tags

Probably the most useful feature is the highlighting of matching tags — use the slider to view what happens:

In the before-and-after image below you can see how code highlighting can help you pick up a common error: an tag where a lowercase “L” has been used instead of a 1 (the digit one).

This is also invaluable for checking that you have nested your tags correctly.

If you find that the default highlight colour (the dull purplish colour) is not obvious enough, you can even change that! Navigate to: Settings » Style Configurator…:

1. Open the Style Configurator
2. Select Global Styles
3. Select the Tags matching highlight option
4. Click on the Background colour swatch and select a colour
5. Click the Save & Close button

5. Coding like a pro: keyboard shortcuts

Now that you are writing code you will find that you are typing quite a bit and it will help if you adjust your style of working to rely on keyboard shortcuts. Your fingers will soon dance across the keyboard as you code your web pages:

1. CNTRL + S to save changes in your file ( CNTRL + SHIFT + S to save changes in all open files) in Notepad++
2. ALT + TAB to switch to your browser
3. f5 to refresh the page in the browser to see your changes
4. ALT + TAB to switch back to Notepad++

For more keyboard shortcuts and related skills, read the post: Being selective: navigating the Microsoft environment.

Refer to the W3C’s HTML Style Guide for the low down on formatting your code correctly.

6. “Prettify” your HTML with XML Tools

OK so you may not be able to install this extension on the computer you work on at school, so it is mostly just a bonus extra for those of you who are bitten by the bug and do a lot of HTML coding at home.

Using this extension you simply select your HTML code and the extension will format it correctly, indents and all! This can be super useful when you are working on someone else’s code who has not followed the basic HTML code formatting standards.

1. Plugins >>Plugins Admin and select the Available tab
2. Search for and select XML Tools
3. Click the Install button
4. The extension will now appear on the Installed tab

The screenshots below demonstrated the use of the extension; the “prettified” HTML is visible in the “After” screenshot:

1. Select the Plugins menu
2. Select the XML Tools option
3. Select the Pretty print option from the sub-menu

References:

1. HTML Style Guide and Coding Conventions (2023). Available at: https://www.w3schools.com/html/html5_syntax.asp (Accessed: 10 June 2023).
2. Notepad++, H. (2011) How To Auto-Format / Indent XML/HTML in Notepad++, Stack Overflow. Available at: https://stackoverflow.com/questions/7117949/how-to-auto-format-indent-xml-html-in-notepad/8786249#8786249 (Accessed: 10 June 2023).

Источник

Format HTML Code in Notepad++

The tutorial will introduce a plugin, XML tools , allowing us to format or indent HTML code in Notepad++. The tutorial guides through the installation of the plugin and demonstrates its use.

Use the XML tools Plugin to Indent the HTML Code in Notepad++

Notepad++ does not have a feature of indentation by default. Therefore, we have to install a plugin to get indentation or code auto-format feature.

We can use the XML tools plugin in Notepad++ to get the feature of indentation. We have to install this plugin and restart the Notepad++ to use it.

First, go to Plugins in the menu bar of Notepad++.

Then click on Plugins Admin .

Another window will open with the Available , Update , and Install tabs.



There will be a search bar in the Available tab.

Search for XML tools . The result will show XML tools .

Check the XML tools and click on the Install option.



After clicking on Install , it will ask for permission to restart Notepad++ and install the XML tools plugin. Just click on Yes for that permission.

Источник