At this point, it is useful to show how to create an HTML document and render it into a Web page, so that you can use the knowledge in trying out the examples presented in this book. How to create a Web page varies according to the type of tool used. Tools are generally categorized under text editors, HTML editors, WYSIWYG (What You See Is What You Get) HTML editors, and Web content management systems. When using text editors or plain HTML editors, HTML code needs to be typed or pasted into the editor. HTML editors typically color code elements, attributes, and values differently in order to distinguish between them and make the reading of a document easier. In a WYSIWYG HTML editor, you can type in code, in which case, the editor immediately renders the code to show the design, or you can enter content directly, as in a word processor, in which case, the editor automatically creates the corresponding code.
Web content management systems (WCMSs) are like more elaborate versions of WYSIWYG HTML editor. They typically do not require you to enter HTML code to create a Web page; this is done behind the scene by the system. The author usually needs to select one of the available page design templates, complete various forms, import contents onto pages, and specify parameters. Editors that behave in a similar way as a word processor are also usually provided to enter and style text, add links, and insert images. The codes produced by the systems can, of course, also be edited. WCMSs are suitable for wide range of Web applications, including blogs, forums, web stores, photo galleries, and wiki, and commonly used ones include WordPress, Drupal, and Joomla. The tools are available for all major platforms, such as Windows, MAC OS, and Linux, and there are free ones. Here, only how to create a page by using a text editor is discussed.
Whatever the computer platform (PC, Mac, or Linux), the steps followed to create a Web page with a text editor are generally the same:
- You open the editor and type the HTML code in it. Different computer platforms have their own native text editor. For example, Windows has Notepad and MAC has TextEdit. There are also various free text editors on the Web. How a text editor is opened depends on the relevant operating system, but it usually can be opened in the same way as any other application.
- Once HTML code is typed or pasted into the editor, you save it with .html extension in the desire folder. Therefore, assuming that the name of the file is “index,” the name typed in the dialog for saving would be “index.html.” In windows, it may also be necessary to select All Files from the Save as type drop-down menu in the dialog to prevent .txt from being appended to the end of the specified file name. It is useful to note that HTML editors are used in the same way.
- Once the HTML file is saved, it can be opened as a Web page in a Web browser in various ways. One is by right-clicking it and choosing the preferred browser from the context menu; another is by going to the File menu of the browser, selecting Open, navigating to the file in the Open window, selecting it, and clicking the Open button.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.