Writing and opening a HTML code

Discussion in 'Web Design and Development' started by tue, Jan 28, 2010.

  1. tue
    macrumors newbie

    Joined:
    Jun 9, 2008
    #1
    Hi :apple:-people.

    I have been experimenting with creating a website. I want to make it from the bottom - no fancy editor, just real html codes. I have tried to write the codes in textedit. I have saved the file as: .htm, .html, .txt, .rtf, but when I open the file in a browser (firefox/safari), the code is shown as it is written, not as a website. I have tried TextWrangler but can't figure it out? Can anyone help finding a proper program for html writing?

    In advance thank you :)

    Tue, Denmark
     
  2. macrumors P6

    MacDawg

    Joined:
    Mar 20, 2004
    Location:
    "Between the Hedges"
    #2
    You can try Smultron, but you really need to take the time to figure out TextWrangler

    If you can't use TextWrangler, you aren't likely to find anything else to suit your needs

    Woof, Woof - Dawg [​IMG]
     
  3. macrumors 6502

    Joined:
    Jul 24, 2002
    Location:
    New Jersey
    #3
    Ok, are you sure you have all the syntax correct? There are also various tags that are required to tell the browser that it is really looking at an HTML file.

    Here's good old "Hello World" in HTML:

    (btw - <!-- and --> are HTML comment delimiters. You need both)

    The Second thing that you may need to do on your Mac is to check the name of that file... Sometimes, even though you say to save your file as "myFile.html", the Mac actually saves it as "MyFile.html.txt", and so Safari sees it as a ".txt", not a ".html". Make sure that "hide extensions" is turned OFF in the save dialogs, so you see the actual, full file name.

    Do a "Get Info" on the file to check.

    Good luck!

    :apple::apple:
     
  4. macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #4
    You also need to make sure, when you're using TextEdit, that you are typing you're code in 'plain text' rather than rich text. If you're typing code in rich text and you save it as HTML, you will see the tags in the browser.

    I've attached a screenshot of the 'plain text' format option in the menu for you.

    /Doug
     

    Attached Files:

  5. macrumors 6502a

    Joined:
    May 26, 2009
    #5
    Do you have the finder set up to show you the file extensions?

    I bet you think are calling the file index.html

    but the real name is index.html.rtf

    I've seen textedit do that.

    Try:
    http://www.barebones.com/products/TextWrangler/
    or
    http://www.aptana.org/
     
  6. macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #6
  7. tue
    thread starter macrumors newbie

    Joined:
    Jun 9, 2008
    #7
    Thank you for all your answers. Much appreciated! I have got it now by using the plain text in textedit.

    If anyone have got the time and the passion, I really need help with this z-index. I have learned it from a web site, where the html + the css is described but the syntax is wrong. I am not sure how to get it straight:

    Just as an example I have used some album covers. (the homepage isn't public). The covers are shown on the web site, but not as a z-index:confused:
    HTML:
    HTML:
            <div id="iwillnotlisten">
    	<img src="iwillnotlisten.jpg" alt="iwillnotlisten">
    	</div>
    
    	<div id="thereisabeatinallmachines">
    	<img src="thereisabeatinallmachines.jpg" 
    	alt="thereisabeatinallmachines">
    	</div>
    
    	<div id="iknowthatyouknow">
    	<img src="iknowthatyouknow.jpg" width="114" height="114"
    	alt="iknowthatyouknow">
    	</div>
    
    	<div id="crushingdigits">
    	<img src="crushingdigits.jpg" alt="crushingdigits">
    	</div>
    
    	<div id="wht">
    	<img src="wht.jpg" width="114" height="114" alt="wht">
    	</div>
    
    	<div id="blck">
    	<img src="blck.jpg" width="114" height="114" alt="blck">
    	</div>	
    
    CSS:
    HTML:
    #iwillnotlisten.jpg 
    {
    	position: absolute;
    	left: 100px;
    	bottom: 100px;
    	z-index: 1;
    }
    
    #thereisabeatinallmachines.jpg
    {
    	position: absolute;
    	left: 115px;
    	bottom: 115px;
    	z-index: 2;
    }
    
    #iknowthatyouknow.jpg
    {
    	position: absolute;
    	left: 130px;
    	bottom: 130px;
    	z-index: 3;
    }
    
    #crushingdigits.jpg
    {
    	position: absolute;
    	left: 145px;
    	bottom: 145px;
    	z-index: 4;
    }
    
    #wht.jpg
    {
    	position: absolute;
    	left: 160px;
    	bottom: 160px;
    	z-index: 5;
    }
    
    #blck.jpg
    {
    	position: absolute;
    	left: 175px;
    	bottom: 175px;
    	z-index: 6;
    }
     
  8. Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    Don't add .jpg to the CSS selectors. You only put the id attribute, not the src path. Your selectors are actually looking for elements with the class name of jpg that have the id of the name you give. For example, #iwillnotlisten.jpg is looking for a tag like,

    HTML:
    <div id="iwillnotlisten" class="jpg"></div>
     
  9. tue
    thread starter macrumors newbie

    Joined:
    Jun 9, 2008
    #9
    Got it right now!

    Thanks for your time and support :)

    /tue
     

Share This Page