How can I start writing my own HTML files?


#1

Question

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.


#2

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:

<!DOCTYPE html>

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

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.