Text Editors

There are a variety of ways to create web pages, some of which don't really require a lot of knowledge of HTML. For example, this website is created using Google Sites, which gives you a WYSIWYG interface (What You See Is What You Get) and does all the HTML coding for you behind the scenes.

You can always see the HTML behind a google sites page (or any page) by right-clicking on the page (or ctrl-click on a Mac where right-click hasn't been enabled) and choosing View Page Source. If you are working on a Google Site yourself and are in edit mode, you can also see the HTML (and modify it), by clicking on the <HTML> button in the editing toolbar at the top.

There are also software programs like Dreamweaver that provide you a lot of WYSIWYG interface, the ability to edit the native HTML code, and a lot of management and organizational functions.

But many (most?) programmers tend to use a text editor that has been designed to create web pages, meaning that it recognizes many html tags and tries to help you by autocompleting tags and adding end tags when you start one. They also try to help you with indenting and color. There are many text editors out there, we will be using Brackets (in combination with Trinket to share our work).

Modify the Trinket below to display Hello World!.

Now copy all the HTML from the Trinket above, open up Brackets, paste it in, then save it in your HTML folder within your JavaScript Course folder on your computer with the name helloworld.html. Then navigate to that file on your computer and open it in Chrome. (Alternatively, from within Chrome, you can choose File-->Open File or Command-O (Mac) or ctrl-O (PC), then navigate to helloworld.html and open it that way.)

Once you have the local file open in Chrome, switch back to Brackets and change the Hello World! text to Hello Arapahoe Warriors!. Save the file in Brackets and then refresh the page in Chrome.

We will often use Trinket for examples simply because I can embed it in this site and because I can give you starter html docs to work with, but usually you will actually work with the HTML in Brackets.

Page updated

Google Sites

Report abuse