Web Design Made Simple Web Design Made Simple

debbie T Designs - Web Design Made Simple

Saving an xhtml File

Start With a Blank File

Please launch Notepad, TextEdit, or another similar basic text editor.

A blank file will open on your workspace. If you do not see a blank file, choose File>New to create a new file.

Note: If your editor creates a new file with its own bare-bones coding, select all and delete.

You can have several instances of Notepad open at once. They will launch in separate windows. That means you can work on several Web pages all at once, that is, if you get daring enough to do so!

Saving Your File

File>Save. Browse to the folder on your hard drive that you will be using to save your web files. I strongly suggest creating a new folder just for your web page files. If you are "too organized" like me, you also might want to create sub-folders for each web project.

Type "template.html" as your file name. Do not include the quotes – and do not use spaces or capital letters in your file name. Do not save your file as "template.txt" or "template.html.txt" – completely delete the .txt from the file name field before typing the new name.

Windows Notepad Users

HTML and XHTML documents must be saved in plain text formatting. So, underneath the file name, choose Save as type: Text Documents.

If you are using Windows XP, you might also see an option for Encoding. Choose ANSI.

Click the Save button, and your template has been saved.
See below for a screen shot.

save template in notepad

Mac TextEdit Users

For Mac OS X users that are using TextEdit, the program must be set up differently for plain text. Launch TextEdit, choose TextEdit>Preferences and change these settings:

  • New Document tab: change Format to "plain text".
  • Open and Save tab: remove the check "append.txt extension to plain text files" so when saving your web files, you can add the .html extension.
  • Place a check next to the "Ignore rich text commands in HTML files." This will keep your .html documents in code view. (Alternatively, when opening a file, select the "Ignore rich text commands" checkbox.)

textedit preferences for hmtl documents

textedit preferences for hmtl documents

To open an .html file in TextEdit, simply drag the file over the TextEdit icon on the Dock to open as a document, or launch TextEdit and choose File>Open.

Note for Mac users : I find TextEdit to be a clumsy text editor for the Mac. I prefer an editor like TextWrangler or Taco HTML Edit, as they seem to handle text coding much better.

Important File Saving Tips

For all around compatibility on the Web, it is important to follow these simple rules for saving any file that is meant for Web viewing. This includes the (X)HTML files along with any other files uploaded to your Web site.

  • No capital letters in the file name. Use only lower case. Using uppercase letters are not necessarily harmful, but since web page file names are case sensitive, it makes it a lot easier if you use all lowercase.
  • No spaces or special characters. In example: & , " #
  • You may use a -dash or _underscore In example: my-file.html or my_file.html

Keep your blank "template.html" file handy as we delve deeper into XHTML.

FAQ

I cannot seem to save my file properly using Notepad. It shows the .html extension in Windows Explorer, but it isn’t working.

ANSWER: Your file could be saved as a plain .txt in error. Check to make sure your file extensions are not hidden. Open Windows Explorer and choose Tools>Folder Options>View Tab>Files and Folders. Make sure the radio button for "Show hidden files and folders" is checked, and "Hide extensions for known file types" is UNchecked.

9 Comments

  1. Comment by Binu Mathew on July 20th, 2006

    This cleared my doubt.

  2. Comment by Kathy Kostlivy on October 18th, 2006

    Thanks so much for your help. I recently purchased a Mac and decided to learn html. I couldn’t get anything to work, but then I read your article and changed my preferences. Thanks again – your advice kept me from throwing my new Mac out the window!!!

  3. Comment by debbie T on October 19th, 2006

    OOh I would never want you to throw out your Mac! Glad you figured it out…and enjoy your new wonderful Mac!

  4. Comment by Ronald Raga on October 1st, 2007

    hi good morning madam im ronald raga from the island of philippines im so thankful for your website…Ü im a graphic designer & i really want to learn more about the web designing & html etc… Your site is wonderful…i im sorry i dont have a money to enroll to multimedia coures coz the tuition fee is to high… ms debbie thank so much keep up the goodwork… godblessÜ
    maraming salamat…ragaÜ

  5. Comment by debbie T on October 2nd, 2007

    Why thank you so much Ronald! I appreciate that you took the time to comment. Good luck with your quest to learn more about web design.

    There is a vast amount of information online at so many web sites, so I think you will do just fine!

    Have fun!

  6. Comment by Les on May 5th, 2008

    I have a question. Is there supposed to be a difference between page display as an .xhtml or .html? I find this happening using different browsers… which render it one way or another, such as an XML file showing all the code, or not, or both ways…

    For xhtml files, even thought is said you can ommit it, it is correct to put,
    then the Doctype Declaration, !Doctype etc. but when I used this, with an xhml ext., IE parses as an XML file.. but Netscape doesn’t.
    However I do use this XHMTL ext to validate my doc against the DTD by putting,
    , to parse my doc for typo errors. I find it very handy.. Currently I am building a website on XHTML and the translation and understanding of a DTD.

    I do find that many people do show the wrong examples for lists, by nesting them incorrectly. Testing it against a DTD, like I do by temporarily changing the HTML to XHTML to see how it parses, definitely catches your errors. In fact I find this more handy than using Amaya.. However I do use both at times to see what it each of them say about errors.

    Amaya doesn’t tell you if you Doctype is wrong. For example, if you put the dtd in one folder and address it wrong, amaya doesn’t help you with that. I don’t address the w3.org site for my dtd, because I feel it is faster to address your own location, as everyone using the web addresses the w3.org and your page has to wait in line for services rendered.

    I also build my pages offline, so it is important that I have all my DTD’s in tact on my own computer so I can validate for typo’s..

    Anyway, I do find the ACE Explorer browser working just like IE.. And then some. YOu can actually edit the code within the browser or by manipulation of the FILES using *.css, you can also view your css file while you are looking at your page, side by side with the css & html page.

    However, I did find a few things, that I felt could be done with the ACE explorer to make it more handier, but other than that, It’s pretty cool. I personally have amaya,netscape, IE, ace explorer and firefox on my computer..
    I do not like how FIREFOX and NETSCAPE display pages when use CSS. I find them not in compliance, in some really bad cases. Such as, changing from block to inline, works for IE in one of my pages, but for FIREFOX/NETSCAPE, this failed to produce the correct display which is in compliance to CSS code..
    Well, go to go.
    Later..

    Les

  7. Comment by uti on July 27th, 2008

    Hi,
    How do I create an xml file from scratch using textEdit (Mac OSX).

    Thank you
    Uti

  8. Comment by Lisa on October 17th, 2008

    I am having a similar issue. I having downloaded a very nice template from TemplateMonster.com to test it out, and I simply opened the index file in my HTML editor called “NVU”. I edited the text a litle bit withint the template then went to do a “save as” and NVU only specifies saving it as an XHTML file. That won’t work on the web with that file extension.

    I don’t know how to save it so that it serves up on the web properly. Can anyone help me with this. I’m obviously a newbie and don’t know how to releave this problem. It’s a beautiful template but I can’t seem to save the file type correctly in order to use it.

    Thanks! ;)

  9. Comment by debbie T on October 17th, 2008

    Lisa, I can’t believe that Nvu is trying to save as an .xhtml document. It doesn’t make sense, since that isn’t a normal extension.

    Have you tried renaming the file manually in windows explorer (or Mac Finder)?

    You also might try just “save” instead of “save as” that way it will just overwrite the file’s original name, which should be .html