HTML - Beginner Seeking Guidance

Hello everyone,

I'm a Computer Science student mainly trained in mathematics and programming languages like C/C++ and Java; I wanted to branch out more into web design and decided to start with learning HTML.

So far, I've signed up for free hosting with Xtreemhost to give myself a sandbox to play with and familiarized myself with Classic FTP. I'm teaching myself using Sam's Teach Yourself HTML and CSS Eighth Edition.

My main frustration comes from my understanding that HTML 5 is the newest standard, but the book I use is using XHTML 1.1 as the standard for teaching. Will this really make much of a difference? Is there anywhere/anything I'm better off learning HTML from if I'm just going to be learning a bunch of deprecated stuff from XHTML 1.1?

It is also my understanding (correct me if I'm wrong) that even though the standard has been issued for HTML 5, browsers are generally slow to add in support for it. So does it really matter at this point in time what standard I am using (HTML 4, XHTML 1.1, HTML 5, whatever) to learn? Would it be correct to say that I can use XHTML 1.1 if I really want to, but if I want to take advantage of all the pretty features of HTML 5, I need to abandon some of my apparently deprecated XHTML 1.1 ways first? On the other hand, if not all browsers are at this point in time supporting the HTML 5 features, why create a website that uses it if it's not going to work consistently across all browsers? As you can see, I'm a little confused =/

I'd appreciate if someone could shed some light on this for me and give me some guidance on... well... where to start learning, really; my Googling gives me conflicting information. My plan was to learn HTML, CSS, and Javascript, then learn how TCP/IP works, pick up some proficiency in Photoshop and Dreamweaver/Frontpage, then branch out into server-side technologies like PHP, ASP, etc... I already have some knowledge of SQL from my database design and programming class.

I did try learning from w3schools.com, but I have a sneaking suspicion that the material isn't quite comprehensive, which bugs me.

EDIT: Resaved the code via Notepad as .html and that worked. A simple misstep.

However a whole new slew of problems have come into play, such as incompatibility with different email programs on varying browsers. Here are the "highlights" I would like to address.


Gmail:
- Background color on gmail is removed.
- Most CSS is selectively modified in gmail, such as h1-h4's size and colors and link colors.

Windows Live Mail:
- Just a blank email, no text, no nada.

Windows Live Outlook:
- Another blank email.

Yahoo Mail, AOL, Thunderbird, any other email provider:
- Need to test


The goal is to get it looking like this: http://www.delta-visions.net/dvshare...letterdv1.html

I've tried resolving the no background in gmail, but the tutorials on how to do so are just above my head and seem to have no effect when I attempt them. Here's a .txt file of the code: http://www.delta-visions.net/dvshare...sletterdv1.txt

I'm not looking for someone to do the work for me, just some guidance and some breaking down of the technical terms and methods for creating a functioning email newsletter, in that all the links work correctly, the actions performs concisely, and the graphical aspect of it stays intact. Helpful tips are welcomed and pointing out my mistakes is encouraged.

Any and all help would be appreciated. Thanks in advance.

Hello I am working on a contact form an email one and it doesnt seem to be working can someone please take alook at it and let me know what i am doing wrong. Thank you.

<td><form method="post" action="/frms/contactmail.pl">
<input type="hidden" name="SoupermailConf" value="/frms/contact.con">
<table width="100%" border="0" cellpadding="0" align="center" cellspacing="0">
<tr>
<td><table width="100%" border="0" cellpadding="4" cellspacing="1">
<tr>
<td align="Right"><b>Your
Name: <span class="style1">*</span></b></td>
<td width="70%"><input type="TEXT" name="Name" style="width: 90%;">
</td>
</tr>
<tr>
<td align="Right"><b>E-mail
Address: <span class="style1">*</span></b></td>
<td><input type="TEXT" name="Name2" style="width: 90%;"></td>
</tr>
<tr>
<td align="Right"><b>Company:</b></td>
<td><input type="TEXT" name="Name3" style="width: 90%;"></td>
</tr>
<tr>
<td align="Right"><b>How
did you
find us?</b></td>
<td><input type="TEXT" name="Name4" style="width: 90%;"></td>
</tr>
<tr>
<td align="right"><b> Questions: <span class="style1">* </span></b></td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="2" align="center"><textarea name="Question" rows="8" style="width: 90%;" wrap="VIRTUAL"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="Submit" value="Submit Form">
<br>
</td>
</tr>
</table></td>
</tr>
</table>
</form>
<font face="Verdana, Arial" size="1" color="#000000"><b><font color="#FF0000">*
Required</font></b></font></td>

This page is HTLM written by myself.

Please help me to see this page and what to change?

- link removed -

I apologize in advance if I am putting this in the wrong place. I have a website for my webcomic. The site was constructed from a template provided by the host site. Ive messed with it and tried to organize it how I want it but I have pretty much reached the end of my beginner capabilities.

My main concern right now is that under the comic page I want two have two spaces, on on the left for comments on the posted page, and another to the right that is overall news, that will show the same for each page. I have the comments section aligned to the left, but I am at a total lose for where to begin as far as the news/blog section. Could anyone please point me in the right direction?

Also if anyone has any other suggestions concerning the site I would love to hear them.
- suspicious link removed -

Thank you.

Hi all. I am new to the forums and to HTML/XHTML coding. I am looking for some help with an assignment for a class I am taking. The problem I am running into is that I have the website looking like it is supposed to but it will not pass the W3C validator. Here is the 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Make it Right</title>
</head>

<body>

<h1>
<center>Healthy Living Plan</center></h1>


<p>Many people today are trying to stay healthy. What sorts of things do you need to do in order to maintain a healty body? Here are some ideas for you. Of course, you should always consult with your doctor before undertaking any new diet or exercise plan.</p>
<hr />
<h2>
<center>Eat right</center></h2>


<p>Refer to the United States Department of Agriculture food pyramid to find out how many grains, vegetables, fruits, meats, dairy, and oils that you should eat daily. Also consult the other resources available on the Internet to determine a plan that will work for you.</p>

<h2>
<center>Keep a food, mood, and exercise journal</center></h2>
<ul>
<li>Track what you eat each day</li>
<li>Track your mood throughout the day</li>
<li>Track the exercise that you do each day</li>
</ul>
<hr />
</body>
</html>

And here is the error I get: Error Line 14, Column 8: document type does not allow element "center" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

<center>Healthy Living Plan</center></h1>

✉

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
Error Line 20, Column 8: document type does not allow element "center" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

<center>Eat right</center></h2>

✉

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
Error Line 26, Column 8: document type does not allow element "center" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

<center>Keep a food, mood, and exercise journal</center></h2>

✉

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Any help or explanation to why this is occurring will be greatly appreciated. Thank you.

Yello, new here on the forum hope i have come to the right place.


I am making this website with a fixed header with buttons, using ajQery script to get a nice fade effekt on the buttons on mouseover. Looks great in firefox but in ie i get this bugs where a the picture is missplaced. Cant realy get it to work (havnt done html very long)


Would anyone care to take a look and help me out a bit? if so i can upload the page as a .rar

/plomp

I am new to HTML and I am getting an error and do not know why. Please be simple in your solution as I do not have much HTML knowledge.

Here is the Error:

1. Error Line 50, Column 111: document type does not allow element "img" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "address", "fieldset", "ins", "del" start-tag.

…57" height="70" alt="HTML Dog logo" />

✉

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Here is the code:
HTML Code:

<!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" lang="en" xml:lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
      <title>Brendan Madigan's Official Webpage</title>	
	</head>

	<body>
		<h1>Brendan Madigan is the coolest person in the world</h1>
                <hr />
		<p>If anyone thinks that Brendan Madigan is not cool...</p>
                <p>They should be examined by a doctor immediatly.</p>
                <p>Why is Brendan Madigan so cool???</p>
                <p>Here's why:</p>
                <ul>
                        <li>Brendan is awesome</li>
                        <li>Brendan is really smart</li>
                </ul>
                <hr />
                <p>You might be wondering if Brendan is cool enough to do a definition list...<br /><br />He is!<br /><br /></p>
                <p>Here is a<sup>definition</sup>list made <sub>by</sub> Brendan, himself (you can say the list is holy if you want)<br /></p>
                <dl>
                        <dt><strong>Brendan</strong>(noun)</dt>
                        <dd><br />A cool person</dd>
                </dl>
                <h2>Brendan does nested lists too!<br /></h2>
                <h4>Brendan's <em>Nested List</em><br /></h4>
                <ol>
                        <li>
                                <dl>
                                        <dt>Brendan(Verb)</dt>
                                        <dd><br />To make something cool</dd>
                                </dl>
                        </li>
                        <li><br />
                                <ul>
                                        <li>He Brendaned the movie</li>
                                </ul>
                        </li>
                </ol>
                <p>How did Brendan become so good at HTML?</p>
                <ol>
                        <li>He is really smart</li>
                        <li>He took a class on HTML</li>
                </ol>
                <h3>If you want info on Brendan go to this website</h3>
                <p><a href= "http://www.madigangames.com">Brendan's Company</a></p>
                <p>Brendan looks like this</p>
                [b]<img src="testudo.jpg" width="30" height="40" alt="Testudos' image'" />[/b]
	</body>
</html>

Thanks for your help!

Hey im a beginner at all of this... But i am trying to add a simple image to my web.. here is my code...


<html>
<head>
<title>Pillz Webby</title>
</head>

<body>
Socom Confrontation <img src="sig.jpg" width="400" height="300"/>
</body>
</html>

i have no idea what i am doing wrong...
and when i view my properties for my .html file it says it is
TYPE OF FILE: FIREFOX DOCUMENT..... shouldnt it say .html??? cuz i saved it as html..

http://www.freewebs.com/ovatime/favlinkz.htm
there is a link of a screenshot, this is what comes up whenever i load this code to my browser...

any help is appreciated

Hello, I am only new to html and as practice i was told to create the table as shown using the code and have failed on multible occasions. I feel now the best help I can receive is to see where I am going wrong through comparison.

Please have a look at the attached image and help if you can, thanks. (It is fairly simple).

Fist off I am somewhat new to HTML (mainly have used programs like Dreamweaver and such to create web pages). I am wanting to try and advance my skills a bit and create a HTML with some PHP code in it. My question that I have is about webpage formating.
I am wanting to have a header, footer, left column and right column that has the same data in it all the time. The main body of the page however will display whatever information I search for from the mysql database but the rest of the site (footer, header, etc..) I want to display the same each time.

What is the best way of going about this? I am not sure once I click the submit button to load the certain data from the database if I have to create a whole new page or if there is a way to just update the main body of the webpage with the results.

Sorry if this is in the wrong forum but wasn't sure if it belonged here in HTML or in PHP, I thought here was good.

Any help will be very helpful,

Thanks,

Scott

Hello, I am a newbie to html and am struggling to change a colour of font - I am looking to be able to change the colour of the word 'CONTINUE' and 'terms of use' but cannot figure out how. If someone could help I would be so grateful!

<!-- This is the javascript to hide and display the elements of the form -->
<script src="2step.js"></script>

<style type="text/css">
/* This CSS is used to format the page. */
#lbform {height: auto;margin: 0px auto;padding: 0;position: relative;width: 350px;}
#lbform label {color: #000000;display: inline;float: left;font-family: Arial,Helvetica,sans-serif;font-size: 14px;font-weight: bold;margin: 5px 10px 5px 0;width: 90px;}
#lbform .row {display: block;margin-bottom: 7px;padding-top: 7px;width: 325px;}
#lbform input {border: 1px solid #9C8A7B;font-size: 14px;padding: 5px;width: 208px;}
#lbform select {border: 1px solid #9C8A7B;font-size: 14px;height: 25px;}
#lbform input.blur {color: #999999;font-style: italic;}
#lbform input.focus, #lbform input.complete {color: #000000;font-style: normal;font-weight: bold;}
.gender {width: 220px;}
.day {width: 63px;}
.month {width: 80px;}
.year {width: 70px;}
.note {color: #666666;font-family: Arial,Helvetica,sans-serif;font-size: 11px;position: relative;right: 0;top: -10px;width: 300px;}
</style>

<style type="text/css">
/* This CSS is used for the Show/Hide functionality. */
.more {display: none;}
a.showLink, a.hideLink {cursor: pointer; display: block; height: 45px; margin: 5px 0 0 104px; width: 214px;}
a.hideLink {}
a.showLink:hover, a.hideLink:hover {}
</style>
<div style="margin:0px auto;">
<!-- Make sure you update the URL -->
<form id="lbform" class="formlayout" action="$$_ADD APP URL_$$" method="post">
<fieldset>
<div class="magic">
<input type="hidden" value="1" name="sexuality">
</div>

<div class="row cf">
<label>I'm a:</label>
<select class="gender" name="gender">
<option>Please select</option>
<option value="1">man looking for a woman</option>
<option value="2">woman looking for a man</option>
</select>
</div>

<div class="row cf">
<label>First name:</label>
<input type="text" class="text blur" name="firstname">
</div>

<div class="row cf">
<label>D.O.B.:</label>
<select class="day" name="dobday">
<option value="">Day</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>

<select class="month" name="dobmonth">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>

<select class="year" name="dobyear">
<option value="">Year</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
</select>
</div>

<div class="continue-btn">
<a onclick="showHide('example');return false;" class="showLink" id="example-show" href="#">
<!-- The <p> tags below can be swapped from an image. -->
<p>CONTINUE</p>
</a>
</div>

<!-- Anything that sits in the div class=more will be hidden until the Continue link is clicked -->
<div class="more" id="example">
<div class="row cf">
<label for="email">Email:</label>
<input type="text" class="text blur" name="email" id="email">
</div>

<div class="row cf">
<label for="password">Password:</label>
<input type="password" value="" name="password" id="password">
</div>
<div class="row cf">
<button class="header" type="submit">JOIN FREE</button>
</div>
<div class="row cf">
<p class="note">By clicking 'Join Free' you are agreeing to our <a title="Terms of use" href="/help/terms.cfm">Terms of Use</a>.</p>
</div>
</div>
</fieldset>
</form>
</div>

Hi I am a complete novice and know nothing about HTML.
I have created a webpage on Web Page Maker which contains a form so people can contact me.
When this button is pressed I want it to navigate the user to a confirmation page and send the contents in the form to me as an email.

I have used a program to generate the code for this but I have no idea where to put this in the HTML I have at the moment.

Is there someone I can send the webpage HTML to and the coded HTML for the form and they can help me out.

Not sure this is the right place to ask

Thanks
Kris

I went to HTML dog and I'm trying to learn through their tutorial. So they gave me this code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>My first web page</title>
</head>

<body>
This is my first web page
</body>

</html>

I typed it into Text edit on my mac and when I open it in safari nothing changes it looks exactly the way I typed it above. I thought it was supposed to just show the "My first web page" and "This is my first web page" This is extremely frustrating. I've checked the code about 30 times and it is the same thing that HTML dog is telling me to write.


Mr. R

Hey guys, i'm new to these forums, and new to html. I do alot of animation and art stuff and wanted to create a website and eventually a community type deal for it. I'm decent with graphics so I managed to create a basic design.

Just a few questions really:
1. What are some good tutorials to help me get started, i have very very basic knowledge in html, just about basic tags and linking.

2. Maybe direction towards a decent host and ftp program? I get really confused about what a good host offers and how to upload stuff.

3. How hard would it be for a beginner to create a site like this?
http://img80.imageshack.us/img80/682...emocopylr2.jpg
I don't want this to sound like a stupid question, but just an estimate of difficulty or time to create. I know it's just a solid image, it's just a example I created.

Thanks and I hope someone can help.