Web Design in the Late 90s: Part 2
If you haven't read Part 1, you really ought to before you continue. Also, here's another link to Adrianna's page in case you need it.
It was recently brought to my attention that Adrianna is, in fact, dead. I guess she died of cancer. I have no idea when, but due to comments as late as early this year in her guestbook I can only assume that either she died recently or that people have been leaving comments in a dead girl's guestbook. Please keep in mind that sloppy web design is sloppy web design even after the designer is dead. I will still finish this post as I had originally intended, but out of respect to Adrianna I will be fair and honest, and not refer to her as a rattlesnake, a dragon, Hillary Clinton, or any other mythical creature.
Warning: What you are about to read is nerdy. If you don't know any HTML, don't bother. If you only know enough HTML to make bold text and hyperlinks, this probably isn't for you. If you speak fluent HTML on a day to day basis, feel free to keep on reading.
Throughout Adrianna's site, you may notice the <header> tag. This is not a real HTML tag, and as such some browsers have trouble with it. Adrianna took it one step further and used it inconsistently. I will describe how it's used on each page.
Front Page: Tag is used as a substitute for <head>. Other than that, it's correct.
Home Page: Tag is closed where <head> would probably be closed, but it's never actually opened.
Prayer Page: Tag is used in the same manner that <title> would be used. In fact, it's opened immediately after <title> is closed, and has exactly the same contents inside.
Saint Page: Tag is opened where <head> would probably be opened, but it's never actually closed.
Pro Life Page: Tag is unused. There is no correct <head> in its place, as well as no <title>.
Adrianna is not off to a good start. Technically, she wasn't off to a good start when none of her pages had doctypes, but doctypes were not commonly used or even known about at the time so it's quite an excusable mistake.
Another thing I noticed on this site is that all but the Pro Life page have the HTML for a background image, but no background image actually shows up. This is not due to a mistake in the HTML, but due to the fact that every background referenced was hosted on Angelfire. Apart from Angelfire's strong unreliability, they don't allow off-site image direct linking. Though they may have at the time when Adrianna made this page, it has never been considered polite to use up other peoples' bandwidth like that. Actually, the only images on the site that ARE hosted by GeoCities (Adrianna's host) are a few circles, to be used as bullets for lists. These circles were defaults that anybody could use at the time, and I'm actually kinda surprised that GeoCities hasn't taken them down after all these years.
<h1> through <h6> are intended to be used as headings. You place them around a bit of text, and that bit of text shows up sized differently, with h1 being the biggest and h6 being the smallest, but all of them larger than plain text. Adrianna used them to resize text even when it wasn't being used as the heading for a paragraph or section. This was actually one of the most common web design mistakes of the time, though, and it technically worked as she intended it to work, so there's not too much of a problem.
<font size=3> is a mostly acceptable tag. The 3 should be in "quote marks" but most browsers will accept it anyway. The problem lies in how she closed this tag: </font size=3>. She does the same thing not just with sizes, but also with colors. This was a common mistake in 1997, and it's a common mistake today. You don't need to re-state an attribute (such as size) when you close a tag, stating it when you open the tag is enough. If you didn't already know this, you probably aren't reading this, but still it needs to be pointed out to everybody, because it's such a common mistake. This mistake wasn't even forgivable then, and if somebody were to do that today I'd kick that person in the appendix.
I also came across this gem:
<a href="mailto:[removed]@adsnet.com?cc=[removed]@hotmail.com""subject=Adrianna's homepage"> <IMG SRC="http://www.hal.com/users/larson/gif/emailed.gif"> click here to email me </a>
For the most part this is correct. The subject shouldn't be in separate quotes, though. If you want to put a cc AND a subject in the same mailto link, you put an ampersand (&) between them. This is something that other "email me" links didn't mess up, and she even got it partly right in this link, which shows that she looked up how to do it. I don't understand how a person can look up instructions for something and get it wrong anyway, but this was 1997, a time when proper code meant closing your <b> when you were done with it.
On her prayer...</b>
Sorry about that. I forgot to close my tag when I was done with it.
On her prayer page, she uses the <indent> tag which, as anybody who knows HTML will tell you, doesn't exist. While it seems logical enough to the non-experienced, an indent tag would be rendered inconsistently across browsers, displaying in different widths depending on the browser if such a thing existed. Even if it were real, it would have been much smarter to specify a specific length for the indent, in either pixels, pts, or inches.
In addition, she uses the <blink> tag, which is not a standard tag and will not work in all browsers. Actually, blink was part of the 1990s browser wars, in which the competing browsers (mainly Netscape and Internet Explorer) each added exclusive new features which were mainly useless and went against standards, in order to bring more users to their own browser so that people could see these features. Nowadays it's considered common courtesy to use javascript or animated gifs to accomplish this effect, as both are more standardized and more compatible. CSS technically offers a "blink" solution, but as I recall it has the same compatibility issues as the original <blink> tag.
Yet another mistake in the prayers page is in the links. Most of them are correctly formed, but a few of them are missing quote marks around the address they link to, making them effectually dead.
The Saint page uses yet another made up tag, <space>. I'm guessing that Adrianna tried this after discovering that <indent> doesn't do anything. This tag is vague enough that no such thing could possibly exist without some sort of attributes attached to it, but she didn't put any.
<body bgcolor"http://www.angelfire.com/images/color06.gif"body background="http://www.angelfire.com/bg/clouds.jpg" text "navy" link"blue">
This is the most broken tag I've ever seen. If you know HTML, your challenge is to know what she's trying to do and know how to fix it. You do not need to post the solution in my comments, because I already know it.
On the Pro Life page, Adrianna uses a button that says "This site is and probably always will be under construction!" as an email link. She surrounds it with a table that is supposed to have a pink border, but in reality doesn't display, because this table has no cells defined. If I had to guess, I'd say that she was probably attempting to make a button that looked pink, but it's just as possible she wanted the button to have a pink rectangle loosely surrounding it. Either way, she did it wrong.
Readers, your challenge is to find a page on the internet from the mid-to-late '90s with more design flaws, oddities, and HTML mistakes than Adrianna's page! Feel free to email me your submissions, or just leave them in the comments. This will be an ongoing challenge, so you don't need to look immediately, but keep me in mind if you happen to find one.
It was recently brought to my attention that Adrianna is, in fact, dead. I guess she died of cancer. I have no idea when, but due to comments as late as early this year in her guestbook I can only assume that either she died recently or that people have been leaving comments in a dead girl's guestbook. Please keep in mind that sloppy web design is sloppy web design even after the designer is dead. I will still finish this post as I had originally intended, but out of respect to Adrianna I will be fair and honest, and not refer to her as a rattlesnake, a dragon, Hillary Clinton, or any other mythical creature.
Warning: What you are about to read is nerdy. If you don't know any HTML, don't bother. If you only know enough HTML to make bold text and hyperlinks, this probably isn't for you. If you speak fluent HTML on a day to day basis, feel free to keep on reading.
Throughout Adrianna's site, you may notice the <header> tag. This is not a real HTML tag, and as such some browsers have trouble with it. Adrianna took it one step further and used it inconsistently. I will describe how it's used on each page.
Front Page: Tag is used as a substitute for <head>. Other than that, it's correct.
Home Page: Tag is closed where <head> would probably be closed, but it's never actually opened.
Prayer Page: Tag is used in the same manner that <title> would be used. In fact, it's opened immediately after <title> is closed, and has exactly the same contents inside.
Saint Page: Tag is opened where <head> would probably be opened, but it's never actually closed.
Pro Life Page: Tag is unused. There is no correct <head> in its place, as well as no <title>.
Adrianna is not off to a good start. Technically, she wasn't off to a good start when none of her pages had doctypes, but doctypes were not commonly used or even known about at the time so it's quite an excusable mistake.
Another thing I noticed on this site is that all but the Pro Life page have the HTML for a background image, but no background image actually shows up. This is not due to a mistake in the HTML, but due to the fact that every background referenced was hosted on Angelfire. Apart from Angelfire's strong unreliability, they don't allow off-site image direct linking. Though they may have at the time when Adrianna made this page, it has never been considered polite to use up other peoples' bandwidth like that. Actually, the only images on the site that ARE hosted by GeoCities (Adrianna's host) are a few circles, to be used as bullets for lists. These circles were defaults that anybody could use at the time, and I'm actually kinda surprised that GeoCities hasn't taken them down after all these years.
<h1> through <h6> are intended to be used as headings. You place them around a bit of text, and that bit of text shows up sized differently, with h1 being the biggest and h6 being the smallest, but all of them larger than plain text. Adrianna used them to resize text even when it wasn't being used as the heading for a paragraph or section. This was actually one of the most common web design mistakes of the time, though, and it technically worked as she intended it to work, so there's not too much of a problem.
<font size=3> is a mostly acceptable tag. The 3 should be in "quote marks" but most browsers will accept it anyway. The problem lies in how she closed this tag: </font size=3>. She does the same thing not just with sizes, but also with colors. This was a common mistake in 1997, and it's a common mistake today. You don't need to re-state an attribute (such as size) when you close a tag, stating it when you open the tag is enough. If you didn't already know this, you probably aren't reading this, but still it needs to be pointed out to everybody, because it's such a common mistake. This mistake wasn't even forgivable then, and if somebody were to do that today I'd kick that person in the appendix.
I also came across this gem:
<a href="mailto:[removed]@adsnet.com?cc=[removed]@hotmail.com""subject=Adrianna's homepage"> <IMG SRC="http://www.hal.com/users/larson/gif/emailed.gif"> click here to email me </a>
For the most part this is correct. The subject shouldn't be in separate quotes, though. If you want to put a cc AND a subject in the same mailto link, you put an ampersand (&) between them. This is something that other "email me" links didn't mess up, and she even got it partly right in this link, which shows that she looked up how to do it. I don't understand how a person can look up instructions for something and get it wrong anyway, but this was 1997, a time when proper code meant closing your <b> when you were done with it.
On her prayer...</b>
Sorry about that. I forgot to close my tag when I was done with it.
On her prayer page, she uses the <indent> tag which, as anybody who knows HTML will tell you, doesn't exist. While it seems logical enough to the non-experienced, an indent tag would be rendered inconsistently across browsers, displaying in different widths depending on the browser if such a thing existed. Even if it were real, it would have been much smarter to specify a specific length for the indent, in either pixels, pts, or inches.
In addition, she uses the <blink> tag, which is not a standard tag and will not work in all browsers. Actually, blink was part of the 1990s browser wars, in which the competing browsers (mainly Netscape and Internet Explorer) each added exclusive new features which were mainly useless and went against standards, in order to bring more users to their own browser so that people could see these features. Nowadays it's considered common courtesy to use javascript or animated gifs to accomplish this effect, as both are more standardized and more compatible. CSS technically offers a "blink" solution, but as I recall it has the same compatibility issues as the original <blink> tag.
Yet another mistake in the prayers page is in the links. Most of them are correctly formed, but a few of them are missing quote marks around the address they link to, making them effectually dead.
The Saint page uses yet another made up tag, <space>. I'm guessing that Adrianna tried this after discovering that <indent> doesn't do anything. This tag is vague enough that no such thing could possibly exist without some sort of attributes attached to it, but she didn't put any.
<body bgcolor"http://www.angelfire.com/images/color06.gif"body background="http://www.angelfire.com/bg/clouds.jpg" text "navy" link"blue">
This is the most broken tag I've ever seen. If you know HTML, your challenge is to know what she's trying to do and know how to fix it. You do not need to post the solution in my comments, because I already know it.
On the Pro Life page, Adrianna uses a button that says "This site is and probably always will be under construction!" as an email link. She surrounds it with a table that is supposed to have a pink border, but in reality doesn't display, because this table has no cells defined. If I had to guess, I'd say that she was probably attempting to make a button that looked pink, but it's just as possible she wanted the button to have a pink rectangle loosely surrounding it. Either way, she did it wrong.
Readers, your challenge is to find a page on the internet from the mid-to-late '90s with more design flaws, oddities, and HTML mistakes than Adrianna's page! Feel free to email me your submissions, or just leave them in the comments. This will be an ongoing challenge, so you don't need to look immediately, but keep me in mind if you happen to find one.
posted by Covarr at 8:09 AM
Permanent Link | Linking Blogs | 0 comments
0 Comments:
Post a Comment
<< Home