The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
Reply to this topicStart new topic
> Need Help with Syntax Errors, Syntax Errors
spinlady
post Oct 10 2018, 01:10 PM
Post #1





Group: Members
Posts: 5
Joined: 10-October 18
Member No.: 26,729



Greetings, All,

I’m new to HTML and CSS, and working with a Word for Mac file exported as HTML. It’s an 836-page ebook with 353 photos and 3,000 links. It looked and worked almost as I wanted it to right out of the chute. Working with BBEdit, I tinkered with it, and it looks and works perfectly in BBEdit preview, Kindle App for Mac, Kindle Previewer 3, Google Chrome, Firefox, Safari, Opera, and Vivaldi. Yet it has 4,721 syntax errors. Some I can fix, but as to the most of them I’m at a loss.

The following 6 errors consistently repeat within the first 1,000 listed errors, and as the book is pretty consistent throughout, probably account for most of them. Any suggestions as to how to correct them would be greatly appreciated.

1. Warning: The name attribute is obsolete. Consider putting an id attribute on the nearest container instead.
From line 2322, column 68; to line 2322, column 89
<p class="Titles" style='margin-bottom:0cm;margin-bottom:.0001pt' ><a name="Title_Page" ></a><a href="#TOC" ><span lang=EN-US ><img alt="Title Page" width="100%" height="auto" id="Picture 24"

2. Error: Bad value 100% for attribute width on element img: Expected a digit but saw % instead.
From line 2322, column 128; to line 2323, column 73
ng=EN-US ><img alt="Title Page" width="100%" height="auto" id="Picture 24"↩src="_____ms_spinsters_save_to_web_utf_8_sept_22_18_files/image001.png" ></span

3. Error: Bad value auto for attribute height on element img: Expected a digit but saw a instead.
From line 2322, column 128; to line 2323, column 73
ng=EN-US ><img alt="Title Page" width="100%" height="auto" id="Picture 24"↩src="_____ms_spinsters_save_to_web_utf_8_sept_22_18_files/image001.png" ></span>

4. Error: Bad value Picture 24 for attribute id on element img: An ID must not contain whitespace.
From line 2322, column 128; to line 2323, column 73
ng=EN-US ><img alt="Title Page" width="100%" height="auto" id="Picture 24"↩src="_____ms_spinsters_save_to_web_utf_8_sept_22_18_files/image001.png" ></span>

5. Error: The clear attribute on the br element is obsolete. Use CSS instead.
From line 2325, column 75; to line 2326, column 44
Roman"' ><br↩clear=all style='page-break-before:always' >↩</spa

6. Error: The align attribute on the p element is obsolete. Use CSS instead.
From line 2365, column 1; to line 2366, column 36
></span>↩↩<p class=MsoNormal align=center style='margin-bottom:0cm;margin-bottom:.0001pt;↩text-align:center;text-indent:0cm' ><span

From line 2380, column 1; to line 2380, column 61
</a></p>↩↩<p class=SingleSpace align=center style='text-align:center' ><b ><s

From line 2551, column 1; to line 2551, column 56
pan></p>↩↩<p class=Headings14 align=left style='text-align:left' ><span

Many thanks in advance for any assistance you can offer.

David

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 10 2018, 02:32 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,026
Joined: 9-August 06
Member No.: 6



What validator did you use? And what doctype?

1. Correct. Use id rather than name. But why on earth would you use it with a container? Global Find and Replace does the trick. Find 'name=', replace with 'id='.

2. I assume you use HTML5? If you do, this is also correct. HTML5 seems to have banned the use of percent for width and height. If you use an earlier version of HTML percent is fine. If you use HTML5 and need the document to validate, use CSS for this instead.

3. Correct. There is no value "auto" for width (in HTML - there is in CSS). You want the image to stretch and keep its aspect ratio, right? Just leave the height attribute out altogether. Or in case of HTML5 and the point above, use CSS instead.

4. Correct. If HTML5 hasn't changed anything you can read about allowed characters in an ID name here: http://htmlhelp.com/reference/html40/attrs.html .
Do you have some funky character there too? Shows like a crooked arrow symbol for me.

5. Correct. 'clear' was deprecated in HTML 4.0 already. The CSS equivalent is 'clear: both'.

6. Correct. Same as above. You want to use CSS float.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 10 2018, 03:48 PM
Post #3


.
********

Group: WDG Moderators
Posts: 7,919
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Oct 10 2018, 09:32 PM) *

1. Correct. Use id rather than name. But why on earth would you use it with a container?

Did you mean an empty container? Agreed.

QUOTE
2. I assume you use HTML5? If you do, this is also correct. HTML5 seems to have banned the use of percent for width and height. If you use an earlier version of HTML percent is fine. If you use HTML5 and need the document to validate, use CSS for this instead.

Or simply change Doctype from HTML5 to one for HTML4 Transitional. This alone may avoid lot of the errors, and with no negative practical consequences.

QUOTE
4. Correct. If HTML5 hasn't changed anything you can read about allowed characters in an ID name here: http://htmlhelp.com/reference/html40/attrs.html .

Seems like almost anything goes in HTML5 except spaces: https://mathiasbynens.be/notes/html5-id-class

QUOTE
Do you have some funky character there too? Show like a crooked arrow symbol for me.

Isn't that the validator's illustrative arrows that show up at every error? unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 10 2018, 03:56 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,026
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ Oct 10 2018, 10:48 PM) *

Did you mean an empty container? Agreed.

No. What I said, why use it with a container?


QUOTE
Or simply change Doctype from HTML5 to one for HTML4 Transitional. This alone may avoid lot of the errors, and with no negative practical consequences.


Yeah. Unless you use HTML5 features, or want to use them in the future.

QUOTE
QUOTE
4. Correct. If HTML5 hasn't changed anything you can read about allowed characters in an ID name here: http://htmlhelp.com/reference/html40/attrs.html .

Seems like almost anything goes in HTML5 except spaces: https://mathiasbynens.be/notes/html5-id-class


T i r e s o m e... dry.gif

QUOTE
QUOTE
Do you have some funky character there too? Show like a crooked arrow symbol for me.

Isn't that the validator's illustrative arrows that show up at every error? unsure.gif


Right. Probably that.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 10 2018, 06:12 PM
Post #5


.
********

Group: WDG Moderators
Posts: 7,919
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Oct 10 2018, 10:56 PM) *

No. What I said, why use it with a container?

Then I don't understand. mellow.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 11 2018, 01:30 AM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,026
Joined: 9-August 06
Member No.: 6



No? So what's wrong with using it with the A?

BTW I didn't understand what you meant with empty container. How can a container for A (or any other element) be empty?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
spinlady
post Oct 11 2018, 02:11 AM
Post #7





Group: Members
Posts: 5
Joined: 10-October 18
Member No.: 26,729



Many thanks, Pandy, and Christian J for your much valued help.

QUOTE
1. Correct. Use id rather than name. But why on earth would you use it with a container? Global Find and Replace does the trick. Find 'name=', replace with 'id='.

I thought id must only be used once in a document. So you can have multiple ids, but each can only be used once in a document? Is that right? I replaced 1,068 instances of “name=” with “id=”, and I’m now down to 3655 errors.

QUOTE
2. I assume you use HTML5? If you do, this is also correct. HTML5 seems to have banned the use of percent for width and height. If you use an earlier version of HTML percent is fine. If you use HTML5 and need the document to validate, use CSS for this instead.

Yes, I’ve used <!DOCTYPE html>. I tried <!DOCTYPE HTML4 Transitional> per Christian J’s suggestion and got 112,658 errors. How would I write the CSS for the width and height? And do I place it anywhere within the CSS section at the head of the document?

QUOTE
3. Correct. There is no value "auto" for width (in HTML - there is in CSS). You want the image to stretch and keep its aspect ratio, right? Just leave the height attribute out altogether. Or in case HTML5 and the point above, use CSS instead.

Yes, I want to keep the aspect ratio. Again, how would I write and place the CSS? And how do I exempt those photos that I don't want to be 100% width?

QUOTE
4. Correct. If HTML5 hasn't changed anything you can read about allowed characters in anhttp://htmlhelp.com/reference/html40/attrs.html.40/attrs.html .
Do you have some funky character there too? Show like a crooked arrow symbol for me.

I fixed 361 instances by eliminating the space between “Picture” and the number.
Yes, I have the crooked arrow symbol too.

QUOTE
5. Correct. 'clear' was deprecated in HTML 4.0 already. The CSS equivalent is 'clear: both'.

Do I eliminate everything within the break tag besides "br"? Is ‘clear: both’ used in conjunction with 'page-break-before:always' in the CSS? How would I write it?

QUOTE
6. Correct. Same as above. You want to use CSS float.

Again, I don’t know how to write the CSS.


Please accept my apologies for being in the larva stage with all of this.

David

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 11 2018, 02:49 AM
Post #8


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,026
Joined: 9-August 06
Member No.: 6



QUOTE
QUOTE
1. Correct. Use id rather than name. But why on earth would you use it with a container? Global Find and Replace does the trick. Find 'name=', replace with 'id='.

I thought id must only be used once in a document. So you can have multiple ids, but each can only be used once in a document? Is that right? I replaced 1,068 instances of “name=” with “id=”, and I’m now down to 3655 errors.


Yes. It's the name that's unique.

2. I assume you use HTML5? If you do, this is also correct. HTML5 seems to have banned the use of percent for width and height. If you use an earlier version of HTML percent is fine. If you use HTML5 and need the document to validate, use CSS for this instead.
Yes, I’ve used <!DOCTYPE html>. I tried <!DOCTYPE HTML4> Transitional per Christian J’s suggestion and got 112,658 errors. How would I write the CSS for the width and height? And do I place it anywhere within the CSS section at the head of the document?

The doctype must be correctly written, it's case sensitive and all. Copy-paste, don't type it. You find a list of doctypes here: http://htmlhelp.com/tools/validator/doctype.html .
I suggest you use HTML 4.01 Strict though. Otherwise browsers will be thrown into quirks mode and emulate older and buggier versions of themselves.
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


Yeah, you place it anywhere in your CSS, in head or in an external style sheet. You need a selector. Since I assume this image stretching only concerns one image you could give it an id if there's nothing else that can be used. Let's say you use id="stretchy". Then you just go...

CODE
#stretchy    { width: 100% }


QUOTE
QUOTE
3. Correct. There is no value "auto" for width (in HTML - there is in CSS). You want the image to stretch and keep its aspect ratio, right? Just leave the height attribute out altogether. Or in case HTML5 and the point above, use CSS instead.

Yes, I want to keep the aspect ratio. Again, how would I write and place the CSS? And how do I exempt those photos that I don't want to be 100% width?


As I said before, just use with and leave height out. The browser will scale it correctly. As I said above, you need to use a selector that targets this image. You might already have something you can use in your HTML, if not, use an id.

QUOTE
QUOTE
5. Correct. 'clear' was deprecated in HTML 4.0 already. The CSS equivalent is 'clear: both'.

Do I eliminate everything within the break tag besides "br"? Is ‘clear: both’ used in conjunction with 'page-break-before:always' in the CSS? How would I write it?


Yes, you could do it that way. You could also use a class (you probably have or will have more than one BR that needs clearing) and put it in your style sheet. Using the style attribute is handy when you test things, but it makes the page hard to edit and adds extra bytes. It's much easier to change one row in a style sheet than to find every occurrence of what you want to change in your pages.

QUOTE
QUOTE
6. Correct. Same as above. You want to use CSS float.

Again, I don’t know how to write the CSS.


Well, all always you need a selector. Then it's as simple as 'float: left' or 'float: right'. In most cases float works pretty much as align did.

QUOTE
Please accept my apologies for being in the larva stage with all of this.


No need to apologize. We've all been there. But I think you should read the CSS introduction at this site.
http://htmlhelp.com/reference/css/
Start at the very top. It's old and it's just CSS1. But the basics still apply and it's short and easy to follow. If you get what's in it down pat you have a good base for moving to more advanced CSS later. CSS has grown so big now so I think if you start with reading a CSS3 introduction you might get confused and give up. I find it easier to grasp something new if the topic is somehow limited and I make sure I understand and can use that limited set of features before I go on.

If there's something else you wonder about, just ask away. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 11 2018, 02:56 AM
Post #9


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,026
Joined: 9-August 06
Member No.: 6



The board mess up the whole post if I quote #3. After doing all quotes over and over several times I gave up and used bold and italic instead. bbCode is much harder than HTML! cool.gif happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 11 2018, 06:15 AM
Post #10


.
********

Group: WDG Moderators
Posts: 7,919
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Oct 11 2018, 08:30 AM) *

BTW I didn't understand what you meant with empty container. How can a container for A (or any other element) be empty?

I just meant that the A element in the OP's code example has no child content:

QUOTE
CODE
<a name="Title_Page" ></a>

If you want an ID it's better to use it with any of the existing elements. Even if using a NAME attribute, there's an existing A element next to it that might be used.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 11 2018, 07:08 AM
Post #11


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,026
Joined: 9-August 06
Member No.: 6



Ah, I didn't notice there are two As after each other. Then delete the empty on and use id with the one with content. BTW the SPAN probably isn't needed either.

But do you think that's what the validator is on about? Maybe it is.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 11 2018, 07:27 AM
Post #12


.
********

Group: WDG Moderators
Posts: 7,919
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Oct 11 2018, 02:08 PM) *

But do you think that's what the validator is on about? Maybe it is.

You mean this part:

CODE
Consider putting an id attribute on the nearest container instead.

? No idea, maybe it's just a boilerplate response. Besides that it just complained about the NAME attribute. It's not even an actual error, just a warning:

CODE
Warning: The name attribute is obsolete.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
spinlady
post Oct 11 2018, 12:17 PM
Post #13





Group: Members
Posts: 5
Joined: 10-October 18
Member No.: 26,729



Thanks a lot, Pandy and Christian J:

I took your advice, Pandy, and pasted in

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

I tried it and got 9929 errors.

Then I tried, as Christan J suggested,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


This yielded only 390 errors, of which 349 are ‘height=”auto” '. So that only leaves 41 errors, mostly stray tags and duplications, which I can fix.

I’m going to read the CSS section now, per your suggestion, Pandy, and will come back here when I’m a little more conversant.

I really appreciate your time and all your help. I’m beginning to see the light at the end of the trauma!

David
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 11 2018, 01:23 PM
Post #14


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,026
Joined: 9-August 06
Member No.: 6



Great! Put please, move on to HTML 4.01 Strict pretty soon. You'll just learn bad habits otherwise and will probably also encounter some CSS problems with different rendering in different browsers.

Think about that the extra stuff that you can use in Transitional but can't in Strict was deprecated at the same time the HTML 4.01 spec came out. Or really in HTML 4.0 that was very short-lived. That all happened back in 98. Do you really want to use stuff that was deemed obsolete 20 years ago?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 11 2018, 04:23 PM
Post #15


.
********

Group: WDG Moderators
Posts: 7,919
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Oct 11 2018, 09:49 AM) *

I suggest you use HTML 4.01 Strict though. Otherwise browsers will be thrown into quirks mode and emulate older and buggier versions of themselves.

Not necessarily, with

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

you get at least "almost standards" mode. And not even

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

achieves "full" standards mode in all the browsers at https://hsivonen.fi/doctype/ --it's an old table, though, I don't know about today's browsers.


QUOTE(spinlady @ Oct 11 2018, 07:17 PM) *

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


This yielded only 390 errors


QUOTE(pandy @ Oct 11 2018, 08:23 PM) *

Great! Put please, move on to HTML 4.01 Strict pretty soon. You'll just learn bad habits otherwise

First of all, avoid MS Word. smile.gif But since the OP already used Word for this project, it's probably best to insert the HTML4.01 Doctype above. But once you start writing HTML by hand it's best to use the HTML5 Doctype:

CODE
<!doctype html>

(almost everything that's valid HTML4.01 Strict is also valid HTML5).





User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 12 2018, 02:06 AM
Post #16


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,026
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ Oct 11 2018, 11:23 PM) *

Not necessarily, with

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

you get at least "almost standards" mode. And not even

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

achieves "full" standards mode in all the browsers at https://hsivonen.fi/doctype/ --it's an old table, though, I don't know about today's browsers.


No, but there's a big difference. Given HTML 4.01, Strict with an URL is the best you get.

I don't really think the OP needs to learn all of this right now.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 12 2018, 06:51 AM
Post #17


.
********

Group: WDG Moderators
Posts: 7,919
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Oct 12 2018, 09:06 AM) *

No, but there's a big difference.

Not between Strict and the Transitional Doctype above (mostly some vertical margins that differ, IIRC).

QUOTE
I don't really think the OP needs to learn all of this right now.

Yes it's mostly of historical interest nowadays, but in practice it's simple:

- Transitional gives the least amount of errors, but the CSS may render slightly different in some cases. The OP can simply try and see.

- Strict gives more errors, but the CSS should render the same as with the HTML5 Doctype <!doctype html>.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
spinlady
post Oct 15 2018, 04:51 PM
Post #18





Group: Members
Posts: 5
Joined: 10-October 18
Member No.: 26,729



Pandy and Christian J.

My apologies for not getting back sooner. Elsewhere I was advised to stick with HTML 5, that the others are obsolete for newly created documents. That appealed to me, so I went with it, and I am happy to say that I was able to correct ALL syntax errors. The only iatrogenic complication is that the CSS (replacing ‘width=”100%” height=”auto”)

img {
width: 100%;
height: auto;
}

makes all 350 photos 100%, whereas I want 5 of them to be their declared pixel size. I’ve tried, unsuccessfully, writing an image class to exempt them, but all images remain 100%, or all their declared pixel size. This is the last thing I need to fix (famous last words) in order to publish. Hope you can get me over the final hurdle.

Thanks a bunch,

David
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 15 2018, 05:22 PM
Post #19


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,026
Joined: 9-August 06
Member No.: 6



Did you write a new CSS rule? Maybe you forgot to delete the old one.

Good work, anyhow. happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Oct 15 2018, 07:20 PM
Post #20


Programming Fanatic
********

Group: Members
Posts: 1,544
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



You should write a class for the 5 images you want special handling. Like this:

.example {
width: 100%;
height: auto;
}

Now use the class for those 5 images, you can name the class whatever you want. Example: <img class="example">

This post has been edited by CharlesEF: Oct 15 2018, 07:21 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 20th October 2018 - 07:43 PM