Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2014
    Posts
    14
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Question Validation errors resulting from title, image, head (total beginner here)

    Hi everyone. I’m an absolute, total beginner. I’ve always wanted to learn html, and at age 52 I’m finally trying.

    Here’s what’s got me perplexed. I was given an “assignment” to add html (only) to a blurb of instructional text – to kill two birds with one stone.

    Anyhow, I gave it my best shot. It truthfully took me a week.

    ***NOTE: This has two sections – errors before <h> codes (first) and after (second)***
    I had to delete the second part as my post was too long. With (hopefully) help, I’ll work through these and then re-tackle the myriad errors I received after I added <h1 or 2 or 3> tags.

    I got these errors for which I was never able to figure out the fix:

    Validation Output: 4 Errors
    1. Line 10, Column 49: Element head is missing a required instance of child element title.
    <img src="infinite_logo.jpg" alt="Infinite Logo">

    Line 12, Column 7: Stray end tag head.
    </head>

    2. Line 14, Column 6: An body start tag seen but an element of the same type was already open.
    <body>
    3. Line 15, Column 7: Element title not allowed as child of element body in this context. (Suppressing further errors from this subtree.)
    <title>Chapter 13 HTML Forms</title>


    This was what I wrote that generated the errors above:

    [code]

    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta name = "Robots" content = "noindex, nofollow" >
    <!-- Not including these
    <meta name = "description" "html forms"
    <meta name = "keywords" "html forms" -->
    <meta charset="utf-8" />
    <img src="infinite_logo.jpg" alt="Infinite Logo">
    <hr/>
    </head>

    <body>
    <title>Chapter 13 HTML Forms</title>
    <a id="Top"></a>
    <p>HTML FORMS</p>

    <ul>
    <li> <a href="#Typesofdata"> Submission of data from web to server</a></li>
    <li> <a href="#Typesofdataentry"> Types of data entry controls available</a></li>
    <li> <a href="#Submitbutton"> Submit button</a></li>
    <li> <a href="#Getpost"> Get & Post</a></li>
    <li> <a href="#Superglobalvariables"> Superglobal variables</a></li>
    <li> <a href="#Textarea"> Text areas</a></li>
    <li> <a href="#Dropdowns"> Drop downs</a></li>
    <li> <a href="#Buttons"> Buttons</a></li>
    <li> <a href="#Password"> Password fields</a></li>
    </ul>
    <hr/>
    <div>
    <a id="Typesofdata"></a>
    <p>SUBMISSION OF DATA FROM WEB TO SERVER</p>
    <p>One way to transmit data from the web to the server is through an html form <br/>
    You 'submit' the data that is entered through a number of means, the most common is via 'submit button'</p>
    <a href="#Top">Top of Page</a>

    <a id="Typesofdataentry"></a>
    <p>TYPES OF DATA ENTRY CONTROLS AVAILABLE</p>
    <p>There are various different types of data entry controls available...<br/>
    Most of them are described with the '<input />' tag,<br/>
    such as <input type=text>
    To get a text box like you would put your name or city into</p>
    <p>Other types are checkbox and radio</p>
    <a href="#Top">Top of Page</a>

    <a id="Submitbutton"></a>
    <p>SUBMIT BUTTON</p>
    <p>A submit button is <input type=submit>To declare a form on a page, you use &lt;form&gt; &lt;/form&gt; <!-- less than and greater than symbols escaped out to allow display --> tags<br/>
    And all the input types etc go in between them</p>
    <a href="#Top">Top of Page</a>
    </div>

    <div>
    <a id="Getpost"></a>
    <p>COMMON WAYS TO SEND DATA TO THE SERVER</p>
    <p>The two most common ways to send the data to the server... POST and GET<br/>
    GET is the default method. With GET, the variables are sent via name/value pairs which are visible in the url<br/> http://example.com/form.php?name=suzy&amp;job=homemaker</p><!-- ampersand symbol escaped out to allow display -->
    <p>POST is sent via an HTTP post transaction, behind the scenes.</p>
    <p>The form tag has attributes that tell the page:</p>

    <ol>
    <li>whether to use post or get,</li>
    <li>what the name of the form is, if any (generally for use within javascript), and</li>
    <li>what page to load when the form is submitted.</li>
    </ol>

    <p>That looks like: &lt;form method=POST name=blah action=blah.php&gt; &lt;/form&gt;<br/><!-- less than and greater than symbols escaped out to allow display -->
    It is a good idea to use quotes around attribute values.... &lt;form method=&quot;POST&quot; name=&quot;blah&quot; action=&quot;blah.php&quot;&gt; <br/><!-- less than and greater than symbols escaped out to allow display -->
    So, when the data is sent to the server, the variable name is the name of the input field: <input type="text" name="favColor" /><br/>
    The variable name will be 'favColor' and the value will be whatever the user typed in.<br/>
    In php that looks like $_GET['favColor'] = 'green'; or $_POST['favColor'] = 'green';<br/>
    (or $_REQUEST['favColor'] = 'green'; - which includes both POST and GET vars).</p>
    <a href="#Top">Top of Page</a>
    </div>

    <div>
    <aside>
    <p>SUPERGLOBAL VARIABLES</p>
    <a id="Superglobalvariables"></a>
    <p>Those are 'superglobal variables' that are available to your php script when a form is submitted or whatever.<br/>
    If you go to a url that has the variables listed behind it, it is the same as submitting a form to that page.</p>
    <a href="#Top">Top of Page</a>
    </aside>
    </div>

    <div>
    <p>TEXT AREAS</p>
    <a id="Textarea"></a>
    <p>other input types are also textarea, for big blocks of text, that looks like...<br/>
    <textarea name="myText">Here is the default that will show inside the text box</textarea></p>
    <a href="#Top">Top of Page</a>
    <br/>

    <p>DROP DOWNS</p>
    <a id="Dropdowns"></a>
    <p>And drop downs are done with select tags...<br/>
    <select name="fruit"><option value="apple">Apple</option>
    <option value="orange">Orange</option></select></p>
    <a href="#Top">Top of Page</a>
    </div>

    <div>
    <p>BUTTONS</p>
    <a id="Buttons"></a>
    <p>And buttons, which are generally used in conjunction with javascript to process input before submitting it to the server:<br/>
    <input type="button" name="myButton" value="Click to do something" onClick="javascript:doSomething();" /></p>
    <p>You can also pass default values into the controls <input type=text name=myName value="Suzy" /> The box will show with 'Suzy' filled in already</p>
    <p>With checkboxes, the user can click any number of them to select them</p>
    <p>With radio buttons, the user can only select one of the group at a time. Controls can be styled with css like any other html tag</p>
    <p>On checkboxes and radio buttons to set a default you have to use the keyword 'selected'... it is different for both of them.</p>
    <p>For radio button, it is 'checked'... <input type="radio" name="numbers" value="1" checked /> One <input type="radio" name="numbers"
    value="2" />Two And can only check one in a set of radio buttons</p>
    <p>Checkboxes same thing but you can check as many as you want</p>
    <p>Selected denotes the default option in a drop down <select name=blah><option value="a" selected>A</option> <option value="b">B</option></select> </p>
    <a href="#Top">Top of Page</a>
    </div>

    <div>
    <p>PASSWORD FIELDS</p>
    <a id="Password"></a>
    <p>There is also a password field that replaces whatever you type with ***** (but still sends to the server in plaintext).</p>
    <a href="#Top">Top of Page</a> <br/>
    </div>
    <hr/>
    <footer><p>&copy; 2014 ME!</p></footer>

    </body>


    ***********************************************************************************

    THEN I tried adding <h1><h2>< h3> tags and everything went to heck in a handbasket.

    Now I have 46 errors!

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    With the code you pasted above, minus the "added heading tags", You really only have a few simple errors. You dont close your html tag, which should be the last closing tag on your page. You also have body elements inside the <head> section. The <hr/> and the img tag should be inside the opening body tag. Also move the <title> tag inside the head tag section. That should clear most of your issues up. Granted I only glanced at this. Let us know if this doesn't resolve all your markup validation issues.
    Last edited by teedoff; 02-28-2014 at 04:04 PM.
    Teed

  • #3
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,297
    Thanks
    10
    Thanked 282 Times in 281 Posts
    Here's another tweak, since I'm seeing it throughout your code:
    Code:
    <a id="Typesofdata"></a>
    <p>SUBMISSION OF DATA FROM WEB TO SERVER</p>
    <p>One way to transmit data from the web to the server is through an html form <br/>
    You 'submit' the data that is entered through a number of means, the most common is via 'submit button'</p>
    <a href="#Top">Top of Page</a>
    "SUBMISSION OF DATA FROM WEB TO SERVER" looks like a heading to me. It should be surrounded by something like <h2> ..... </h2> rather than <p> paragraph tags. And then the <a> anchor before that, since it has no content for someone to click on, I'm guessing you're going to use these to provide links (like your <a href="#Top">Top of Page</a>) so folks can jump to these sections? If not, I'm not sure what it would be for. The correct way to do that is not via <a id="Typesofdata"></a>, but to put the ID on some relevant tag. In this case that tag would be the <h2> heading tag for this section. So the net of all this is to change that code (and all similar sections) to
    Code:
    <h2 id="Typesofdata">SUBMISSION OF DATA FROM WEB TO SERVER</h2>
    <p>One way to transmit data from the web to the server is through an html form <br/>
    You 'submit' the data that is entered through a number of means, the most common is via 'submit button'</p>
    <a href="#Top">Top of Page</a>

  • #4
    New Coder
    Join Date
    Feb 2014
    Posts
    14
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thank you teedoff, I'll be working with this today. Will

  • #5
    New Coder
    Join Date
    Feb 2014
    Posts
    14
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thank you tracknut, this will be my second thing to work on today. Will


  •  

    Posting Permissions

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