Notepad Website

How to Create a Website using HTML on Notepad | Notepad++

To Insert audio file in HTML We have Audio Tags for That.
Inside the SRC attribute, we have to Give our Audio file’s Path.
Controls attribute will give us some controls to Control Audio File on our HTML File.

Adding a Video File in HTML:

To Insert audio file in HTML We have Video Tags for That.
Inside the SRC attribute, we have to Give our Video file’s Path.
Controls attribute will give us some controls to Control Video File on our HTML File.

Styling HTML Elements:

To Style HTML Elements we use CSS.

Including CSS in HTML Webpage:

To Include CSS in HTML we have to Write HTML’s Style Tag inside the Header Tags.

Selecting HTML Elements in CSS:

index.html [Selecting HTML Element using Tag Name]

index.html [Selecting HTML Element using ID Name]

index.html [Selecting HTML Element using Class Name]

Styling HTML using CSS:

index.html [Changing Font Size using CSS]

index.html [Changing Font Color using CSS]

index.html [Changing Background Color using CSS]

index.html [Changing Text Alignment using CSS]

index.html [Changing Opacity using CSS]

index.html [Changing Margin using CSS]

index.html [Changing Padding using CSS]

index.html [Changing width using CSS]

index.html [Changing Height using CSS]

index.html [Changing Text’s Line Height using CSS]

Источник

HTML File Text Editor – How to Open Web Page Code in Windows Notepad

Kolade Chris

Notepad is a built-in text editor that comes pre-installed on Windows machines of all versions – XP, Windows 7, Windows 8, Windows 10, and so on.

It is the default Windows text editor. You can think of Notepad as your VS Code or favorite text editor with fewer capabilities.

Coding with Notepad is great for beginners, because you have no access to syntax highlighting, formatting, and other such automated features.

Without these aides, you’ll learn attention to detail, perseverance, resilience, and how to format your code yourself, before you start coding with other text editors like VS Code, Sublime Text, or Atom.

So, in this article, I will walk you through how to use Windows Notepad, and how to open any web page code with it by making a simple website with HTML, a little bit of CSS, and JavaScript.

How to Code a Simple Website in Notepad

You can use Notepad to code in two ways: launch Notepad directly from your Windows machine and start coding and then save the code later, or create the file and open it with Notepad.

In this tutorial, I will focus on the second method, so I’m going to create the files first, then open them with Notepad.

Step 1: Create a folder anywhere on your computer
Step 2: On the main menu section of the folder, click on the «View» tab and make sure «file name extensions» is ticked. This will give you access to creating a file and specifying the extension as well.

Step 3: Inside the folder, create an HTML file called index.html , a CSS file called styles.css , and a JavaScript file called app.js .

These names are due to convention. You can name the files whatever you want if you don’t want to follow the conventions.

Step 4: Right-click on the index.html and hover on the “open with” option. This will show apps with which you can open the file. Choose Notepad.

By default, the index.html file will be opened by your default browser, so make sure you don’t double-click the file.

If Notepad is not shown within the options, click “Choose another app”, select “More apps” in the next popup, and you will see Notepad within the apps listed.

Now, you should have opened the HTML file with Notepad. You will see something like this (if you get things right):

Step 5: Paste in the following HTML Code:

       
This is heading 1
 
This is heading 2
 
This is heading 3
 
This is heading 4
 
This is heading 5
 
This is heading 6
 
This is a paragraph with some placeholder texts: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, mollitia quo quasi voluptatum quam soluta debitis praesentium molestias nam magnam aperiam deserunt eos modi odit incidunt ut vitae cum maiores.
 This is a bolded sentence 
This is an italicised text 
This is a link to freeCodeCamp, a platform where you can learn to code for free
 
Below is freeCodeCamp logo:
    

Your Notepad app should now be filled with code:

Save the file by pressing Ctrl + S, or go to File and click “Save”.

If your code isn’t indented like mine, don’t worry. Notepad doesn’t do it for you automatically, so you have to do it manually.

Step 6: Now the HTML file is ready. Go back to the folder in which you created the HTML, CSS, and JavaScript files in Step 3. Double-click the HTML file to open it in your default browser.

The website should now look like this:

Open the CSS file you created in Step 3 and paste in the following code:

If you reload the page, you will see there are no changes. Don’t worry at all. This is because the h1 tag with the class of page-heading in the HTML file is empty.

Now, you can insert some text into that h1 tag dynamically with JavaScript.

Open the JavaScript file created in Step 3 and paste in the following code:

const pageHeadingText = "This is a Simple Website coded with Windows Notepad"; const pageHeading = document.querySelector(".page-heading"); pageHeading.innerHTML = pageHeadingText; 

What is the JavaScript code above doing?

I declared a variable called pageHeadingText and set it to a string, “This is a Simple Website coded with Windows Notepad” .

I declared another variable called pageHeading to select the empty h1 tag in the HTML. I did this with the DOM (Document Object Model) querySelector method.

In the third line of the JavaScript code, I used the DOM’s innerHTML method to set the text content of the h1 to the value of the pageHeadingText variable, which I set to “This is a Simple Website coded with Windows Notepad” .

Now, go back to the website and reload it. There’s still no difference. Don’t worry once again. This is because you have to link the CSS and JavaScript files.

To link the CSS file, paste the following code in the head section of the HTML:

To link the JavaScript file, paste in the code below right before the closing body tag in the HTML:

The HTML file should now have the CSS and JavaScript files linked like this:

        
This is heading 1
 
This is heading 2
 
This is heading 3
 
This is heading 4
 
This is heading 5
 
This is heading 6
 
This is a paragraph with some placeholder texts: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, mollitia quo quasi voluptatum quam soluta debitis praesentium molestias nam magnam aperiam deserunt eos modi odit incidunt ut vitae cum maiores.
 This is a bolded sentence This is an italicised text 
This is a link to freeCodeCamp, a platform where you can learn to code for free
 
Below is freeCodeCamp logo:
   

If you now reload the page, you should see a difference:

The code in the CSS and JavaScript files is now working.

Conclusion

The Windows Notepad is a text editor just like S Code, Atom, Sublime Text, and others. It just does not have the features of other more advanced text editors like syntax highlighting, text formatting, built-in terminal, and so on. But it still performs all the functions of a text editor as you can code in any programming language with it.

To get more comfortable coding, you can download and install a more feature-rich text editor like VS Code (it’s free!). It gives you syntax highlighting, text formatting, and pretty much any functionality you want through a rich library of extensions available in the VS Code marketplace.

Apart from VS Code, other text editors you can use are Atom, Sublime Text, Vim, and Notepad++, a hybrid version of Windows Notepad.

Thank you for reading this article. If you find it helpful, share it with your friends and family.

Источник

Writing HTML in Notepad

Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML.

HTML provides the structural foundation of web pages, and any web designer will need to have an understanding of this language. The software that you use to code that language is up to you, however. In fact. if you use Windows, you don’t need to buy or download an editor in order to write HTML. You have a perfectly functional editor built into your operating system — Notepad.

This software has is limitations, but it will absolutely allow you to code HTML. Since Notepad is already included with your operating system, you can’t beat the price and you can get started writing HTML immediately!

There are only a few steps to creating a web page with Notepad:

Open Notepad: Notepad is nearly always found in your Accessories menu.

Start writing your HTML: Remember that you need to be more careful than in an HTML editor. You won’t have elements like tag completion or validation. You are really coding from scratch at this point, so any mistakes you make will not be ones that the software can catch for you.

Save your HTML to a file: Notepad normally saves files as .txt. But since you’re writing HTML, you need to save the file as .html. If you do not do this, all you will have is a text file that has some HTML code in it.

If you’re not careful in the third step, you’ll end up with a file named something like filename.html.txt.

Remember HTML isn’t terribly hard to learn, and you don’t actually need to buy any additional software or other items in order to put up a basic web page. There are, however, advantages to using a more advanced HTML editing software.

Using Notepad++

A simple upgrade to the free Notepad software is Notepad++. This software is a free download, so if you are trying to write HTML without purchasing expensive software, Notepad++ still has you covered.

While Notepad is a very basic software package, Notepad++ has additional features that make it a great choice for coding HTML.

First off, when you save a page with the .html file extension (thereby telling the software that you are, indeed, writing HTML), the software will add line numbers and color coding to what you are writing. This makes it much easier to write HTML since it replicates the features you will find in more expensive, web design-centric programs. This will make it easier to code new web pages. You can also open existing web pages in this program (and in Notepad) and edit them. Once again, the additional features of Notepad++ will make this easier on you.

Using Word for HTML Editing

While Word does not come automatically with Windows computers the way that Notepad does, it is still found on many computers and you may be tempted to try to use that software to code HTML. While it is, indeed, possible to write HTML with Microsoft Word, it is not advisable. With Word, you get none of the benefits of Notepad++, but you have to struggle with the software’s desire to make everything into a text document. Can you make it work? Yes, but it will not be easy, and realistically, you are much better of using Notepad or Notepad++ for any HTML or CSS coding.

Writing CSS and Javascript

Like HTML, CSS, and Javascript files are really just text files. This means that you can also use Notepad or Notepad++ to write Cascading Style Sheets or Javascript. You would simply save the files using the .css or .js file extensions, depending on which kind of file you are creating.

Original article by Jennifer Krynin. Edited by Jeremy Girard.

Источник