In the context of this exercise, introducing HTML, how can I start writing my own HTML files?
Answer
You can write your own HTML files using a text editor, a code editor, or an integrated development environment (IDE).
One thing to keep in mind when writing and creating your own HTML files is that the file name must end with the extension .html, for example like index.html, in order to work.
Text editor
Some common text editors are Notepad on Windows, or TextEdit on MacOS.
Code editor
Code editors are usually preferred over text editors because they provide useful features like autocomplete and syntax coloring.
Some popular code editors are Sublime, Atom, and Notepad++.
Online Code editor
There are also online code editors available which let you share and edit your code, and even run your code in the browser.
These include JSFiddle, CodePen, and JS Bin.
Integrated Development Environments (IDE’s)
One useful function of IDE’s is that they can be used for testing and debugging your code.
Some IDE’s include Microsoft Visual Studio, Eclipse, and Adobe Dreamweaver.
Each webpage has a basic layout that is needed for a web browser (like Google Chrome) to display it correctly.
The webpage file needs to be saved with the extension “.html” to be able to open it in a web browser.
The first or home page is usually saved as index.html or sometimes default.html .
You can also create a text file (ex. index.txt) then rename it to index.html. (Remember to turn on "View File Extensions if using Windows)
To edit this file and add content to your webpage, you can use any text editor like Notepad. Ones that are easier to use with HTML, CSS and JavaScript files are Notepad++ or Brackets. They change the colours of HTML tags and make the code easier to read. Both Notepad++ and Brackets have their own advantages, so try both to see which one you prefer.
An example of a layout for a basic webpage is as follows:
The <!DOCTYPE> tag tells the browser which language the document is written in to interoperate and display it correctly. In this case the language is HTML5 or Hypertext Markup Language.
The <html> tags enclose the entirety of the html page content.
The <head> tags contain the metadata of the webpage, like the <title> which is the name displayed on the browser tab or when a bookmark is created.
The <body> tags contain all of the webpage content. This includes pictures, text and links.
Indenting your code like above makes it easier to read and follow. Use the Tab key to do this. Some text editors indent the code for you and some also add the closing tag (has the </>) automatically.
Hey! I’m like brand new at this myself starting through the classes, but from what I understand, I believe “Code” editors and “Text” editors are basically the same, except the “Text” editors are more simple and basic.
The “Text” editor like notepad (mentioned above) doesn’t do the color coding and isn’t as intuitive in terms of helping you make your code easy to recognize and follow along as you’re writing it in notepad.
The “Code” editor helps you out by color coding certain things like the tags. louwding mentioned that SOME text editors add the closing tags for you, but I believe if you’re wanting something more for building your code all nice and neat-like, it would be better to use a code editor.
Hopefully that helps, and if anyone is more experienced or I goofed something up please feel free to chime in!
A text editor can be a word processor like the MS word. A Code Editor is an environment where the editor understand that language you are the writing your code in and assist you in writting the code as well. A very Simple example can be Notepad ++.
There’s no 1 best IDE for any language. I would recommend for beginners replit or CC workspaces since it’s a simple UI a and everything is already set up. For more advanced people I would recommend VS code since there is a lot more customizability with plugins and stuff.
I recently started to use WebStrom IDE and dumped the VSCode text editor, it’s fantastic and really improves my code quality.
It has more options, which makes coding a lot easier. Unfortunately, it is not free but I’m now working with a GitHub student pack license valid for a year.
Pricing afterward gets cheaper every year that you continue to use it. Really worth to try a trail.
To start, we should work literally from the ground up. A simple text editor and a browser is all we need to learn and render HTML. This is a foundational layer that every learner really needs to root themselves in.
Wait for at least a few months of working with the minimum tools to learn where benefits might arise that are not in the text editor’s suite of options. Learn notepad++ inside and out, including the FTP component. Miss that, and you miss the boat.
Only when you are feeling really comfortable with the most primitive environment should you move forward. This is still not the money spending stage. Creep and crawl through free versions of the offerings. Determine which ones let you be the expert in how they are applied. You are the designer, and you get to select the tools that conform to your ideas and intended workflow.
Skip Dreamweaver and all the expensive applications unless you have an employer who is paying for them. Don’t buy them out of pocket. Learn to write the stuff and deploy/render it in as simple an environment as you can employ.
TBH, I’ve never used drag and drop or WYSIWYG environments. I knew what I wanted and how to render it. Easy peasy.
Use what makes you a happy coder. I use VScode. I like it and it is now backed by Github who has deprecated Atom to focus on VScode. That means that some of the good things from Atom is being merged into VScode. I also like Notepad++, but VScode is for me.
I guess you can be dictated by your workplace what to use, but until that happens try what’s out there and find what suits you
Great overview! I agree that using code editors or IDEs is a step up from basic text editors due to their helpful features like syntax highlighting. Online editors like CodePen are also great for quick testing and sharing code.
