www.webdeveloper.com
Results 1 to 12 of 12

Thread: What would you do about pathethic HTML / CSS markup?

Hybrid View

  1. #1
    Join Date
    Feb 2007
    Location
    New York, NY
    Posts
    27

    What would you do about pathethic HTML / CSS markup?

    Am I sounding like a hyper-critical, cruel, rude, know-it-all? Hope not. But I freaked out when seeing the following code online. Would appreciate comments, suggestions, solutions to correct my assumptions/observations below.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>temporary bios test page</title>'
    <!-- PageID 13628 - published by Open Text Web Solutions 10.1 - 10.1.2.321 - 35513 -->
    . . .
    <link type="text/css" href="/styles.css" rel="StyleSheet" />  
    ...        
    <style>      </style>  
    . . .               
    <style>.serif { font-family:"Times New Roman",Georgia,Serif; }</style> </head>   
    </head>
    <body>
         <div class="columnSecondary">   </div>
         <div class="columnPrimary">
                <ul class="navigationContextual">    <li>> . . .</li> </ul>
           </div>
        <!--*****BEGIN MAIN CONTENT AREA*****-->
            <div class="mainContent">
             <ul class="navigationAncestors">    <li>/ . . . </li>   </ul>            
    <h1 class="subHeader" id="printHeader">temporary test page</h1>
    <div class="bodyCopy">
             <div id="printContent">
                This page is being updated. More to come.
           
    <p><strong><span style="background-color: #00ffff;"><span style="background-color: #ffffff; color: #0000ff;">test page Biographies:</span></span></strong></p>
           
    <p><span><span style="background-color: #f0ffff; color: #0000ff;"><strong><span style="text-decoration: underline;"><span style="background-color: #ffffff;">Firstbio Person<br />
            </span></span></strong><span style="background-color: #ffffff; color: #000000;">I received . . . from . . ... .</span></span></span></p>
            <p><span><span style="background-color: #ffffff; color: #000000;">My advice . . . career.<br />
            </span><span style="background-color: #f0ffff; color: #0000ff;"><br />
            </span></span></p>
           
            <p><span style="text-decoration: underline;"><strong><span style="background-color: #00ffff;"><span style="background-color: #ffffff; color: #0000ff;">Secondbio Person <br /></span></span></strong></span>My name is Secondbio Person.  I received a BFA . . . ... Society. </p>
            <p>I currently . . . . my own design styles.</p>
            <p>My advice . . ..</p>
            <p>Please take a look  <br />
            For making . . .  <a href="http://...">http://...</a>  <br />
            For making ...<a href="http://...">http://...</a> </p>
           
            <p><span style="background-color: #ffffff;"><span style="background-color: #00ffff;"><strong><span style="text-decoration: underline;"><span style="background-color: #ffffff; color: #0000ff;">Thirdbio Person</span></span></strong></span></span><span style="background-color: #ffffff;"><span style="background-color: #00ffff;"><strong><span style="text-decoration: underline;"><span style="background-color: #ffffff; color: #0000ff;"><br />
            </span></span></strong></span><span style="background-color: #ffffff;"><span style="background-color: #ee82ee;">
    <span style="background-color: #f0f8ff;">My name is BIO Person,. . . classes.  </span><span style="background-color: #f0f8ff;">My main goal . . . animation field.</span></span></span></span></p>
            <p><span style="background-color: #f0f8ff;"><span style="background-color: #ffffff;">My advice . . . result, Google it!</span></span></p>
            <p><span style="background-color: #f0f8ff;"><span style="background-color: #ffffff;">Some of the websites I find useful are:  </span></span><span style="background-color: #f0f8ff;"><a href="http://www.w3schools.com"><span style="background-color: #ffffff;">http://www.w3schools.com/</span></a></span><span style="background-color: #f0f8ff;"><span style="background-color: #ffffff;"><br />
            This site . . .codes.</span></span></p>
            <p><span style="background-color: #f0f8ff;">
    <a href="http://library.creativecow.net"><span style="background-color: #ffffff;">
    <a href="http://library.creativecow.net/  ">http://library.creativecow.net<span style="background-color: #ffffff;">/  </span></a></span></a></span>
    <span style="background-color: #f0f8ff;"><span style="background-color: #ffffff;"><span style="background-color: #ffffff;"><br />
            This site . . .video content.</span></span></span></p>
            <p><span style="background-color: #f0f8ff;"><a href="http://www.javascriptlint.com/online_lint.php"><span style="background-color: #ffffff;">http://www.javascriptlint.com/online_lint.php</span></a><span style="background-color: #ffffff;">  <br />
            This website . . .</span></span></p>
            <p><span style="background-color: #f0f8ff;"><span style="background-color: #ffffff;">Google.com  Trust me.... . .I rely on.<br />
            </span></span></p>
    
            <p><span style="background-color: #f0f8ff;"><span style="background-color: #ffffff;"><strong><span style="text-decoration: underline;"><span style="background-color: #00ffff;"><span style="background-color: #ffffff; color: #0000ff;">Fourthbio Person<br />
            </span></span></span></strong>My name is Fourthbio Person, . . . .Design courses.</span></span></p>
            <p><span style="background-color: #f0f8ff;"><span style="background-color: #ffffff;">I love ... ,. . .passionate about.</span></span></p>
            <p><span style="background-color: #f0f8ff;"><span style="background-color: #ffffff;">My advice . . . enjoy yourself!</span></span></p>
            
    <p><span style="background-color: #f0f8ff;"><span style="color: #0000ff;"><span style="background-color: #ffffff;"><strong><span style="text-decoration: underline;">Fifthbio Person<br />
            </span></strong><span style="color: #000000;">I have a BS . . .in nature-oriented activities.</span></span></span></span></p>
            <p><span style="background-color: #f0f8ff;"><span style="color: #0000ff;"><span style="background-color: #ffffff;"><span style="color: #000000;">My advice . . .enjoy.</span><br />
            </span></span></span></p>
           
    <p><span style="background-color: #f0f8ff;"><span style="color: #0000ff;"><span style="background-color: #ffffff;"><strong><span style="text-decoration: underline;">Sixthbio Person<br />
            </span></strong><span style="color: #000000;">I received a BS and MS in ... . . . , ... courses.</span></span></span></span></p>
            <p><span style="background-color: #f0f8ff;"><span style="color: #0000ff;"><span style="background-color: #ffffff; color: #000000;">My advice . . .ask for help!</span></span></span></p>
           
    <p> <span style="background-color: #f0f8ff;"><span style="background-color: #ffffff;"><strong><span style="text-decoration: underline;"><span style="background-color: #00ffff;"><span style="background-color: #ffffff; color: #0000ff;">Seventhbio Person<br />
            </span></span></span></strong>My name is Seventhbio Person. . . . math courses at ....</span></span></p>
            <p><span style="background-color: #f0f8ff;"><span style="background-color: #ffffff;">My interests . . .with analytical and problem solving skills.  </span></span></p>
            <p><span style="background-color: #f0f8ff;"><span style="background-color: #ffffff;">My advice . . . their majors.<br />
            </span></span></p>
           
    <p><strong><span style="text-decoration: underline;"><span style="background-color: #f0f8ff;"><br />
            </span></span></strong><span style="background-color: #f0f8ff;"><br />
            </span></p>
            <p><span style="background-color: #f0f8ff;"><span style="background-color: #f0f8ff;"></span><br />
            </span><span style="background-color: #f0f8ff;"><br />
            </span></p>
            <p> </p>
            <p> </p>
        </div>             
        </div>
            </div>
            <!--*****END MAIN CONTENT AREA*****-->
            <!--*****END STANDARD CONTENT PAGE*****-->
    </body>
    </html>
    The above is not from an individual seeking help or a small school. This is the output of a major USA university with several campuses and a large pool of resources (including Web-savvy staff, faculty, students, alumni). This particular campus prides itself in offering communications and 6 or more Website-design or Web-page-construction courses

    How did such illogical, inaccessible, inefficient and flat-out incorrect (e.g., tag nesting) mark-up slip through?

  2. #2
    Join Date
    Feb 2007
    Location
    New York, NY
    Posts
    27
    It has become a festering problem because concerned students were summarily dismissed when they tried to call attention to flaws that would become a nightmare to correct.

    The above markup excerpt is from a big, complicated Website with a big, complicated linked external CSS document -- which might intimidate a low-level student clerk charged with inputting text. However, note that the page already contains two embedded <STYLE> sections</STYLE>.

    It would be hoped that even a rank-beginner novice would know: embedded <STYLE> rules </STYLE> only affect that particular page; contextually-defined rules make style even more specific; inline style attributes are least efficient but can be applied to any tag; HTML content markup should be semantic and logical; CSS style rules should make HTML markup as clear and clean as possible; multiple space-separated class definitions can be applied to same element; sections should be distinguished by logical semantic headings ... . Anybody familiar with a word-processing or typography/layout program should recognize the benefit of defining and applying a set of styles to an easily-distinguished identifying element, which would make find/replace more efficient.

    The excessive <SPAN> style attributes </SPAN> indicate the heading style of choice to be sans-serif, underlined blue (which is misrepresentation of universal browser default for links). The prevailing external styles for headers in given <DIV> seem to be { color: #000000; font-family: Georgia, "Times New Roman", Times, serif; }and the h4, h5, h6 font-size are extremely small.


    Based on above assumptions, and without considering new HTML5 or CSS3 possibilities, the following might be a simple fix.

    Code:
    <style type="text/css">
    /*.serif was already on page*/
    .serif { font-family:"Times New Roman",Georgia,Serif; }
    /*could add these .bios style rules to page */
    .name { text-align:left; color: blue; border-bottom: navy thin solid; background-color: /*silver*/ #ebebeb; width: 100%; }
    .bios img { float: left; width: 100px; height: auto; border: none; margin: 2px; padding: 2px; }
    .bios h4, .bios h5, .bios h6 { font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 1.2em; line-height:1.2em; letter-spacing: .1em;
    padding: 0 4px; margin: 20px 20px 0 2px;;
    background-color: #ffffff; color: #0000ff;
    text-align: left; }
    .bios h5 { text-decoration: underline; }
    .bios p { text-indent: 2em; text-align: left; text-decoration: none; font: normal 1.0em/1.2em;; color:black; background: white; padding: 0 4px; margin: 0; letter-spacing: 0;}
    .bios p + p { text-indent: 2em; }
    .bios ul { margin:0; padding:0; }
    .bios ul li { font-size: 1em; line-height: 1.2em; padding: 0 4px 0 2px; margin: 0 4px 0 2px;}
    .bios dl { }
    .bios dt { }
    .bios dd { }
    .bios dd p { }
    
    .bios a { }
    .bios a:link { }
    .bios a:visited { }
    .bios a:focus { }
    .bios a:hover { }
    .bios a:active { }
    .bios a:target { }
    </style>
    . . .
    <div class="bodyCopy bios"><!--add BIOS class-->
    <div id="printContent">
    <h3 class="name">This page is being updated. More to come.</h3><!--example alternate to underlined blue-->
    
    <h5><a name="Firstbio Person" id="Firstbio Person">Firstbio Person</a> as a named link</h5>
    <p>I ...</p>
    <p>And so forth ...</p>
    
    <h5>Secondbio Person</h5>
    <p>My name is ... </p>
    <p>My advice to students currently studying . . . if you find you are stuck and do not know how to get a specific result, google it!</p>
    <p>Some of the websites I find useful are:</p>
    <ul>
    <li><a href="http://www.w3schools.com">http://www.w3schools.com/</a></li>
    <li><a href="http://library.creativecow.net/">http://library.creativecow.net</a>
    </ul>
    The <DL> Definition List <DT> Definition Term and <DD> Definition Data seem like natural markup tags for this sort of biographical entry. And a JavaScript, jQuery or even CSS3 expandable accordion content approach would condense page nicely.

    See, for example, http://css-tricks.com/utilizing-the-...finition-list/ and https://mail.google.com/mail/?shva=1...c83981761032e8

  3. #3
    Join Date
    Feb 2007
    Location
    New York, NY
    Posts
    27

  4. #4
    Join Date
    Sep 2006
    Location
    new york
    Posts
    267
    It has become a festering problem because concerned students were summarily dismissed when they tried to call attention to flaws that would become a nightmare to correct.
    Sounds like a futile exercise. Are you just venting your frustration?

    If the lines of communication are broken at the lower end, try going to the top.

    Which college is it? Can you post a URL to the page in question?

  5. #5
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Well the !DOCTYPE is Transitional so it probably is correct if the coder intends to use presentational and deprecated elements, but it oh-so looks like how some blog software creates code for posts.
    Nesting DIV and SPAN while not wrong is really no better than using TABLE layout.

    This snippet of code rewritten could be 50-75% smaller is size if written using semantic markup such as the example waxdoc provided...

  6. #6
    Join Date
    Feb 2007
    Location
    New York, NY
    Posts
    27
    Excuse me! Thank yo WebJoel.

  7. #7
    Join Date
    Feb 2007
    Location
    New York, NY
    Posts
    27
    Humph?
    <!-- PageID 13628 - published by Open Text Web Solutions 10.1 - 10.1.2.321 - 35513 -->
    Wonder what the role of Open Text Web Solutions is?
    ... looks like how some blog software creates code for posts.
    Nesting DIV and SPAN while not wrong is really no better than using TABLE layout.
    Wondered how a breathing, thinking human could have created such tangled gook? Amazing how some people supposedly engaged in Web development don't want to bother with HTML and CSS basics. Looks as bas as using deprecated <FONT> tags all over the place. There were flat-out nesting errors here and there.

    Thanks for the insight track nut.

  8. #8
    Join Date
    Feb 2007
    Location
    New York, NY
    Posts
    27

  9. #9
    Join Date
    Feb 2013
    Posts
    16
    This WebDeveloper site is a community bringing together those seeking help, those offering suggestions, and those just looking on in a celebration of learning.

    Not knowing something is not a sin. The shame of ignorance comes from not searching for information and/or not striving to learn.

    The above is not from an individual seeking help or a small school. This is the output of a major USA university with several campuses and a large pool of resources (including Web-savvy staff, faculty, students, alumni). This particular campus prides itself in offering communications and 6 or more Website-design or Web-page-construction courses.
    Given that the pathetic markup is from a major university with resources, one has to wonder why there was such systemic failure in communications and ask: "Who assigned the task to an unqualified individual who had no concept of compliance to current Web standards?" Or more likely, "Who was the unqualified individual who assumed such a task without seeking assistance?" "Where was the oversight?"

    Which university was it? Can you give a link to the page?

  10. #10
    Join Date
    Feb 2013
    Posts
    16
    This WebDeveloper site is a community bringing together those seeking help, those offering suggestions, and those just looking on in a celebration of learning.

    Not knowing something is not a sin. The shame of ignorance comes from not searching for information and/or not striving to learn.

    The above is not from an individual seeking help or a small school. This is the output of a major USA university with several campuses and a large pool of resources (including Web-savvy staff, faculty, students, alumni). This particular campus prides itself in offering communications and 6 or more Website-design or Web-page-construction courses.
    Given that the pathetic markup is from a major university with resources, one has to wonder why there was such systemic failure in communications and ask: "Who assigned the task to an unqualified individual who had no concept of compliance to current Web standards?" Or more likely, "Who was the unqualified individual who assumed such a task without seeking assistance?" "Where was the oversight?"

    Which university was it? Can you give a link to the page?

  11. #11
    Join Date
    Feb 2007
    Location
    New York, NY
    Posts
    27
    Frustrated like a Wall Street whistle-blower must have felt in 2007.

    With communication channels defunct, it was hoped some caring person at the State University of New York, Fashion Institute of Technology (FIT) campus in NYC would take note of this discussion and clean up http://www.fitnyc.edu/13628.asp (online for several months now).

    Don't mean to be obsessive about yucky coding. It's not world-shattering, but -- for one introduced to things Web via FIT courses — it is personal.

    It is a personal insult when the significance of well-honed Web skills is not recognized by a major institution like SUNY FIT. Exhibiting illogical, incoherent, inaccessible HTML markup (ignoring basic CSS concepts) discredits SUNY FIT students who have striven to learn and improve their Web skills.

  12. #12
    Join Date
    Feb 2013
    Posts
    16
    SHAME, shame on SUNY FIT.

    But don't take it as a personal affront.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles