Beginner - help

paola_marano · April 29, 2011, 6:52am

hi
i’m italian so sorry for my english.
I start reading and doing the exercise of the book “Web site the right way using html and css”

2nd chapter
i wrote in text edit (i’m using an apple) -and then copying and pasting the text from the folder you have to download- everything is asked to write. I have saved everything in .html even if text edit didn’t let me choose the utf-8 code, because there isn’t the option to do it, but when i opened the html page in firefox it doesn’t work. So i didn’t understand why. Also i didn’t understand if in the text i have to edit to do my html page i have to put tab or space…for example if i want to do what is illustrated at page 31 of the book and so i have to write the text they indicated in the second line there a space from the right edge to the first "
have i put the tab space?

I hope you will understan something.Thank you very much

DarthGuido · April 29, 2011, 7:10am

Hi Paola, welcome to the SP forums

You say “it doesn’t work”. What does that mean? An error? A white page? When you right click in your browser window and take a look at the HTML/Source code, what do you see?

And please post your code here (between appropriate code tags), so we can check what you did.

paola_marano · April 29, 2011, 9:57am

Thank you Guido,
i try to explain better my problem. I can’t give you a source because is my source that is not working.

I written in my text edit this:

<DOCTYPE html PUBLIC " - //W3C//DTD XHTML 1.0 Strict//EN"

“http://www.3w.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

 &lt;head&gt;

    &lt;title&gt;The Most Basic Web Page in the world&lt;/title&gt;

   &lt;meta http-equiv="Content-Type"

            content="text/html; charset=utf-8" /&gt;

 &lt;/head&gt;

 &lt;body&gt;

      &lt;h1&gt;The Most Basic Web Page in the world&lt;/h1&gt;

      &lt;p&gt;This is a very simple web page to get you started.

      &lt;/p&gt;This is another paragraph, by the way. Just to show how it works. &lt;/p&gt;

&lt;/body&gt;

</html>

i have saved as an html file.

but when i double click in the saved html file it doesn’t appair to me in firefox this:

The Most Basic Web Page in the World

This is a very simple web page to get you started. Hopefully you will get to see how the markup that drives the page relates to the end result that you can see on screen.

This is another paragraph, by the way. Just to show how it works.

but is shown in firefox all what i have written,so:

<DOCTYPE html PUBLIC " - //W3C//DTD XHTML 1.0 Strict//EN"

“http://www.3w.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

 &lt;head&gt;

    &lt;title&gt;The Most Basic Web Page in the world&lt;/title&gt;

   &lt;meta http-equiv="Content-Type"

            content="text/html; charset=utf-8" /&gt;

 &lt;/head&gt;


 &lt;body&gt;

      &lt;h1&gt;The Most Basic Web Page in the world&lt;/h1&gt;

      &lt;p&gt;This is a very simple web page to get you started.

      &lt;/p&gt;This is another paragraph, by the way. Just to show how it works. &lt;/p&gt;

&lt;/body&gt;

</html>

also i didn’t understand the space inbetween the sencence is doing with the tab taste or with the spacebar…for example i write:

<DOCTYPE html PUBLIC " - //W3C//DTD XHTML 1.0 Strict//EN"

then when i have to wrote the next sentence:

“http://www.3w.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

i have to put the space between “http://etc” or tab space to do have this:

thank you very much Guido

paola_marano · April 29, 2011, 10:02am

noto solo ora from “Italy with love”…forse è meglio se lo spiego in italiano…

praticamente in firefox non mi compare la finestra del risultato del linguaggio in html ma proprio quello che ho scritto.
Il punto è che non riesco a capire nemmeno l’errore dello script, perchè gli spazi che vedo nel libro tra un a capo e l’altro sono fatti con la barra spaziatrice o con il tab?

Chiedo scusa ma non sono alle prime armi ma alle prime armi delle prime armi
grazie

DarthGuido · April 29, 2011, 10:08am

Are you sure you saved it as a html file? I don’t know anything about apples and ‘text edit’, but in windows for example some programs (in certain windows settings) add their own extension to the file name, so if I wanted to call it ‘index.php’ it would be saved as ‘index.php.txt’ for example.

also i didn’t understand the space inbetween the sencence is doing with the tab taste or with the spacebar…for example i write:

<DOCTYPE html PUBLIC " - //W3C//DTD XHTML 1.0 Strict//EN"

then when i have to wrote the next sentence:

“http://www.3w.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

i have to put the space between “http://etc” or tab space to do have this:

thank you very much Guido

To go to a new line, use the enter key. Just like you do when you write your post here.

DarthGuido · April 29, 2011, 10:12am

I already understood (more or less)
You’ll have to try and explain in english, because that’s the language of this forum.

Spaces between words are spaces. Spaces at the beginning of each line can be done by spaces or tabs (as long as you save the file as a text file).

paola_marano · April 29, 2011, 10:30am

yoy right i’m not sure i’m saving in html even if in “text edit” there is the way ti save the file in html. Probably as you said is still a text file. I have to do everything with my pc.
I didn’t understand if i have to put space or not in the “source” yet.
thank you again

xhtmlcoder · April 29, 2011, 10:46am

The indentation doesn’t matter if you use the spacebar or TAB for outside of the tags (alignment) that’s more so you can read it better in the book or when you are writing XHTML

The following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Most Basic Web Page in the World</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<h1>The Most Basic Web Page in the World</h1>
<p>This is a very simple web page to get you started.
Hopefully you will get to see how the markup that drives
the page relates to the end result that you can see on
screen.</p>
<p>This is another paragraph, by the way. Just to show how it
works.</p>
</body>
</html>

Is exactly the same as the this as far as the browser is concerned.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      The Most Basic Web Page in the World
    </title>
    <meta http-equiv="Content-Type"
          content="text/html; charset=utf-8" />
  </head>
  <body>
    <h1>
      The Most Basic Web Page in the World
    </h1>
    <p>
      This is a very simple web page to get you started.
      Hopefully you will get to see how the markup that drives
      the page relates to the end result that you can see on
      screen.
    </p>
    <p>
      This is another paragraph, by the way. Just to show how it
      works.
    </p>
  </body>
</html>

I cannot remember how important saving as UTF-8 is for that book. Though if your are writing text in none English characters it might make it easier to directly input them.

Off Topic:

Although technically <meta http-equiv="Content-Type"content=“text/html; charset=utf-8” /> should go before the TITLE. Even though in the book it asks you to save as UTF-8 but don’t worry.

xhtmlcoder · April 29, 2011, 11:05am

If you are seeing the source code instead of the web page then the file is not getting saved with the *.html extension.

I don’t have a Mac but I do remember some people say there is a TextEdit mode more specially suited to writing markup.

Page 5 and 58, might help you as you need plaintext.

paola_marano · April 29, 2011, 12:06pm

THANK YOU VERY MUCH
I think i got everything
Guido -member of sitepoint- told me the same thing about the way of saving file in html i think is better trying with the pc instead of mac to do that.
Thank you again

paola_marano · April 29, 2011, 12:51pm

maybe could be helpfull to know (thanks to another forum about mac) how to save .html in TextEdit in Mac.
Select all the text then go in the menu “format” click to “make plan text” and then “save as” and keep the extension “.txt” out and place in “.html” (you have to do manually).
Now it works
thanks again

xhtmlcoder · April 29, 2011, 12:57pm

Yes, if you have a PC with Windows you might find it easier saving the files via Notepad. Or maybe a different Mac plain text editor if you are having problems with the settings. Guido did say it needs a *.html extension so the browser knows it a Web Page. The book uses *.html so you’ll need that file extension for all the examples to work.

Edit: I see you found another way to save as *.html for Mac so now it should work.

paola_marano · May 2, 2011, 3:09pm

hi xhtmlcoder!Thank you again
Yes i was very happy now it works…but my happiness finished now because i have another problem, but maybe i’m too much tired today to understand where i’m wrong, in the chapter 3.
I did the css file to change the font style and i made the link in the html pages, but when i open my html file in firefox the title, in this case “BubbleUnder.com”, is still the first i have put, a times. I don’t understand where i failed. I copy and paste the index here, i have the same problem in all the 3 files, in the “contact” and in the “about us”. It seems that the <h1> <h2> <h3> are not changing.

here it is my html:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>Bubble Under - The diving club for the south-west UK</title>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”/>
<link href=“style1.css” rel=“stylesheet” type=“text/css” />
</head>
<body>
<div id=“header”>
<div id=“sitebranding”>
<h1>BubbleUnder.com</h1>
</div>
<div id=“tagline”>
<p>Diving club for the south-west UK - let’s make a splash!</p>
</div>
</div> <!-- end of header div –>
<div id=“navigation”>
<ul>
<li><a href=“index.html”>home</a></li>
<li><a href=“about us.html”>about us</a></li>
<li><a href=“contact us.html”>contact Us</a></li>
</ul>
</div> <!–end of navigation div –>
<div id=“bodycontent”>
<h2>Welcome to our super-dooper Scuba site</h2>
<p>
<img src=“divers-circle.jpg” width=“200” height=“162” alt=“A circle of divers practice their skills”/>
</p>
<p style=“color:red; font-style: italic; font-weight: bold”>the quick brown fox jumps over the lazy dog. </p>
<p>Glad you could drop in and share some air with us! You’ve
passed your underwater navigation skills and successfully
found your way to the start point - or in this case, our
home page.</p>
</div> <!-- end of bodycontent div –>
</body>
</html>

paola_marano · May 2, 2011, 3:17pm

sorry i have to go ahead with the pages is explained in the following pages…sorry i thought it was me instead it is the exercise don’t finish yet sorry

DarthGuido · May 2, 2011, 3:19pm

Try clearing the cache of your browser

paola_marano · May 2, 2011, 3:30pm

yes it’s ok now, thank you, i have refresh and added the changing to h1 - h2 and h3. Thank a lot

zbing · May 2, 2011, 5:44pm

badadeepoopi?

xhtmlcoder · May 3, 2011, 10:47am

You also have the 2 wrong file names for the hyperlinks for that list it should be:

    <ul>
      <li>
        <a href="index.html">Home</a>
      </li>
      <li>
        <a href="[COLOR=Magenta]about.html[/COLOR]">About Us</a>
      </li>
      <li>
        <a href="[COLOR=Magenta]contact.html[/COLOR]">Contact Us</a>
      </li>
    </ul>

[URL=“http://www.sitepoint.com/forums/contact%20us.html”]

paola_marano · May 3, 2011, 12:29pm

thank you xhtmlcoder…now i will change the html, even if i have called my html files “contact us” and “about us” that’s why i have put that name inside…but i get it. thank you …i warry about the future if i would ever have to a web site…i have great dubts i will remember everything

xhtmlcoder · May 4, 2011, 9:59am

It will take time and patience but if you keep practising you will get better and it will become easier by the time you have completed most of the book.