Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Writing and opening a HTML code

T

tue

macrumors newbie
Original poster
Jun 9, 2008
6
0
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
 
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
pawprint.gif
 
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:

<html>
<head>
<title>Hello World example</title>
<!-- Title that appears on the window -->
</head>
<body>
Hello World
<!-- Text that will appear inside the window -->
</body>
</html>
Click to expand...
(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:
 
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
 

Attachments

  • Picture-1.gif
    Picture-1.gif
    20.5 KB · Views: 104
tue said:
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
Click to expand...

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/
 
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;
}
 
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>
 
Got it right now!

Thanks for your time and support :)

/tue
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back