|
HTML - Comments And Doctypes
I'm just going through a refresher exercise with my HTML knowledge - going through some HTML skeletons with the w3c on hand, and I just had a thought that I hadn't ever considered before...
It's taken as a given that the first line of a HTML document should be the doctype declaration, and that this must go before the <html> tag... But, are you allowed to place comments above the doctype? or will this break it? I can't find anything either way at w3c or anywhere else... Similar TutorialsHi, I am using frontpage with my website and mixing in my own html code for the shopping cart what doctype should I put in this and does it help with search engines, I am a beginner with html but learning more every day Your document should begin with a !DOCTYPE (this tells the browser what sort of HTML is in the file) followed by the <html> and <head> tags: if you do not know what doctype to use that tells me that you are not using frames or xhtml. so if you are unsure which ones to use then it is always: html transitional Pick one that best suits your needs (transitional) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> EDIT: I did not put "http://www.w3.org/TR/html4/loose.dtd" under the html 4.01 Transitional. that also causes weird things to happen in Internet Explorer 6. it will still validate without it. you can use it but make sure you coding is good and true, not sloppy. for newbies it is best to just to leave it out. if you use scrollbar colors in Internet Explorer it will stop showing colors. (strict) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> for frames (not iframes) it is <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> this doctype only goes in the index page that is making the frame, all regular pages will use whatever doctype you decide for xhtml it is (transistional) <!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" dir="ltr"> (strict) <!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" xml:lang="en" lang="en" dir="ltr"> (frameset) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> For your page to actually be valid you MUST declare the character encoding (lets the browser know whether to use A to Z letters (latin), or Chinese, Japanese, Thai, or Arabic script, or some other character set) used for the page, with something like: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> There are also other schemes such as UTF-8 and many others. It is also a good idea to declare what human language the page is in, using: <meta http-equiv="Content-Language" content="EN-GB"> The language and country codes come from ISO 4217 and ISO 3166. This is useful for online translation tools as well. Change the "en" and "gb" to whatever language and country you need. You need a <title> element for the page: <title> Your Title Here </title> This is displayed at the top of the browser window, and stored as the name of the bookmark if someone bookmarks the page URL in their browser. Most importantly, it is the <title> tag that is indexed and displayed by search engines in the search results page (SERPs). You need the meta description tag, as this is very important for search engines, and it is useful but not vital to have a meta keywords tag: <meta name="Description" content=" Your Description Here. "> <meta name="Keywords" content=" your, keyword, list, here "> The last parts of your header should have your links to external style sheets and external javascript files: Use this if the stylesheet is for all browsers: <link type="text/css" rel="stylesheet" src="/path/file.css"> Use this for style sheet that you want to hide from older browsers, as older browsers often crash on seeing CSS: <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> @import url(/path/file.css); </style> End the header with this: </head> <body> and then continue with the body page code. It is as simple as that. Code within the page: I use: <a href="somepage.html" title="some text here"></a> for links. I use <img src="somefile.png" alt="some text"> for images. Headings are done with <hx></hx> tags, properly used from <h1></h1> downwards. Links to the validators. CSS Validator HTML Validator The alternative URLs let you set options before you validate: HTML: http://validator.w3.org/detailed.html HTML: W3C multi-page validator CSS: http://jigsaw.w3.org/css-validator/validator-uri.html Useful list of META tags: http://www.geocities.com/CollegePark...all_kinds.html Don't forget to validate your HTML code or your site might not be properly indexed, or not indexed at all. See: http://www.google.com/search?num=100...=Google+Search for loads of sites that have a missing > on the </title> tag, or for some the </title> tag completely missing, etc. This has completely messed up the way that the site is indexed. remember, for xhtml doctypes you have to make ALL tags and attributes lower case, including some javascript functions, and ALL tags need to be closed that do not have a closing tag. /> <meta .... /> (all meta tags) <link type="text/css" rel="stylesheet" src="/path/file.css" /> <img src="..." alt="" width="" height="" /> <br /> <hr /> onSubmit needs to be onsubmit, onClick needs to be onclick... etc. just to name a few. Some Bugs. some people wonder why I didn't add <?xml version="1.0" encoding="UTF-8"?> to the Xhtml doctype. it actually causes Internet Explorer to go into quirks mode and it will make things happen you don't want. So please don't use it if you want your code to look/run right, it will still validate as valid xhtml without it. If you have something important to add, just tell a moderator and he/she will add it for you. I'm building my first real web site and am running into some problems getting the (simple) site to display properly across different browsers. In Firefox and Chrome everything seems to display normally, but in IE the format appears very different from what it should be: the div for the site information links is way out of place, and the left navigation menu is as well. After discovering doctypes I found that using Strict 4.01 eliminated the inconsistencies across browsers, but broke a lot of my formatting and positioning (in particular, margins). I am currently using Transitional. Any recommendations on what could be done would be appreciated. Through searching I have found numerous references to problems with IE using the box model correctly, but that isn't supposed to apply to IE8/IE9. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta name="description" content="PAGE DESCRIPTION!"> <link rel="stylesheet" type="text/css" href="mystyle.css"> <script type="text/javascript" src="myscript.js"></script> <title>Index Page!</title> </head> <body> <div id="container" style="background-color:#abc;"> <div id="header"> <h1 style="margin-bottom:0; text-align:center;">Title</h1> </div> <div id="siteinfo"> <div style="margin:10;background-color:#CCCCCC;"> <ul id="thehoriz" style="text-align:center;"> <li class="siteinfo"><a href="site.htm" class=siteinfo>Site</a></li> <li class="siteinfo"><a href="info.htm" class=siteinfo>Info</a></li> <li class="siteinfo"><a href="goes.htm" class=siteinfo>Goes</a></li> <li class="siteinfo"><a href="here.htm" class=siteinfo>Here</a></li> </ul> </div> </div> <div id="menu" style="float:left;width:200px"> <div style="margin-right:10;padding:10;margin-bottom:30;border-right:5px solid;border-bottom:5px solid;;background-color:#EFC700;"> <b>Section 1</b><br> <ul id="thevert"> <li class="tips"><a href="Page 1.htm" class=tips>Home</a></li> <li class="tips"><a href="Page 2.htm" class=tips>News</a></li> <li class="tips"><a href="Page 3.htm" class=tips>Contact</a></li> <li class="tips"><a href="Page 4.htm" class=tips>About</a></li> </ul> </div> </div> <div id="content" style="background-color:#EEEEEE;margin-right:10;padding:10;border:5px solid"> <p>Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here </p> <p>Content goes here</p> <p>Content goes here</p> <p>Content goes here</p> <p>Content goes here</p> <p>Content goes here</p> </div> <div id="footer" style="clear:both;"> <div style="margin-top:30px;background-color:#FFA500;text-align:center;"> <p>Copyright (C) 2011 nothing.com</p> <h4>Footer Sample</h4> Page loaded at Tuesday, 04-Oct-2011 15:00:03 PDT </div> </div> </div> </body> </html> How can i insert the comments in HTML Basically I have a tab on my website called future ideas and my goal is to have a small table at the bottom of the screen that simple has a "name", "comment" input box, and what I want is to when they click "submit" it will post a small little box of the person's comment on the bottom of the webpage. I have a feeling this is not easy at all and I would like some dumbed down language here when explaining to me because I am definitely not a pro at php coding yet. Or maybe if there is a package out there someone highly recommends please post it, but be sure there is a good guide to post as well for it. Thanks in advance! I'm trying to parse thru an HTML file and besides of having some problems with images, I also don't really understand how comments markup works. I was reading this, and I don't understand how <!------> hello--> is only one comment. In my parser I run to this <!--, and then what? Should I look first for -->, then again for --> and then for <!-- ? If another --> comes before <!--, then the comment includes this -->, and I should look again for a --> until the next <!-- comes before the next -->, assuming that there is one. Or how does it work? Hi I am using a conditional comment on a website to load a css sheet for IE6 and below <!--[if lte IE6]> <link href="expleonardo.css" rel="stylesheet" type="text/css"> <![endif]--> In IE6 it loads the sheet and does what I want it to do but the following: <!--[if lte IE6]> <![endif]--> shows at the top of the page on a white line. The website address is www.errolsimprov.co.uk/leonardo/index.htm Any help would be greatly appreciated. Thanks John I was wondering if anybody knew if using frontpage or had the code for something like pretty much: I want to make a comments / message board type thing where people can leave comments sorta of like on the end of the new york times articles or such where people comment, however i want to make it so i can approve the comments before they show up. I hate how MySpace comments don't fill up the entire width of the profile, so does anyone know (or help me with) a code that will stretch the comments across the entire profile? I've been considering using Powersurge.net for my web site. Any comments about them? From what I've seen their support is very fast. (I recieved replies to all my questions within minutes.) Thanks wedding veils discount wedding dress mother of the bride Hi New to the forum, but think this might be the place for questions like this.. :-) Have a problem with a facebook statement I'd like to use in my learning-project to handle comments etc. The commenting module is workin perfect, but the statement to get the number of comments have problems in IE-browsers prior to v9. Probably I'm doing something wrong in the wrapping, but I need someone to tell me what... The statement should according to FB be pronounced like: Code: <fb:comments-count href=http://example.com/></fb:comments-count> And the result should be a number (stating the number of comments) In my site I've wrapped the statement in a number of span's like this: Code: <span style="float:left">Denna post har </span>
<span style="float:left"><fb:comments-count href='www.hvid.nu/patricks_blogg/post/{url_title}'}</fb:comments-count></a></span>
<span style="float:left"><a href="patricks_blogg/post/{url_title}"> kommentarer</a></span>
Producing the line: Denna post har X kommentarer. This works for ALL browsers exept IE8 and down, where the rendering totally stops after the fb:comments-count -statement. (it works for IE9 by some peculiar reason) Anyone have a clue on how wo wrap this in order to have IE to understand? Best regards /Patrick ok first off... I looked at every site I could find to help me with this, but none of it helps out at all! Let me first also say that I have a site where I store my Fanfictions that I write myself. What I would like to do is to create something where the people that read the stories can review it on my site.( meaning to comment on it and even rate it) Here is the Site: http://annsanime.awardspace.com/YaoiFanfictions.html But here's the thing... I'm so confused about it... all the tutorials are not really clear on some things like what files to use or Exactly how to edit the forms or even how to put what file where or what to name it or to put in it.... it's all confusing to me.... I know how to make a form but that's about all.... other than that... I'm totally stumped! please someone help me! ~Ann When creating a file from a template in Dreamweaver CS3, is there anyway to remove all the comment tags around editable regions? HTML Code: <!--[if IE]> <div id="header"> <table align="center"><tr> <td align="center"><span class="chosen">< Home</span></td> <td align="center"><a class="nav" href="NewsReviews.html" title="news">< News & Reviews</a></td> <td align="center"><a class="nav" href="Gallery.html" title="Gallery">< Gallery</a></td> <td align="center"><a class="nav" href="http://musichasm.freeforums.org/" title="forums">< Forum</a></td> <td align="center"><a class="nav" href="HelpContact.html" title="contact">< Contact Us</a></td> <td align="center"><a class="nav" href="Underground.html">< Underground</a></td> </tr></table> </div> <![endif]--> <!--[if ! IE]>--> <div id="header"> <span class="chosen">< Home</span> <a class="nav" href="NewsReviews.html" title="news">< News & Reviews</a> <a class="nav" href="Gallery.html" title="Gallery">< Gallery</a> <a class="nav" href="http://musichasm.freeforums.org/" title="forums">< Forum</a> <a class="nav" href="HelpContact.html" title="contact">< Contact Us</a> <a class="nav" href="Underground.html">< Underground</a> </div> <!--<![endif]--> That is my coding for a CSS menu which fixes a 'ghost text' bug in IE 6 and lower... It produces the proper result in IE, FF, and Opera, but the only problem is that dreamweaver sees them both as comments, and does not display it in design view....I just upgraded to CS3, but MX and 8 both showed the menus....any ideas? Hi, I've recently started a website for a game i belong to and i have things like news items and feedback items, but i want my viewers to be able to post their comments on them and maybe leave a rating out of 5 stars or something like that for each item. I have only just recently started learning coding and this is my first site, so i'm not very experienced yet. But i have used a few php bits to create feedback forms, would it need that sort of thing? Or could it be done simply in html or javascript? If anyone knows of any online tutorials which cover this sort of thing i would appreciate it! Hello all, First of all, I am new to HTML stuff, so any help would be really appreciated. I use a WYSIWYG program called WYSIWYG Web Builder. While using this program (for around 10 months) I learned some stuff about HTML, PHP and CSS. And I managed to make my own website very well. In my website, there are some pages that I would like visitors to comment on the article these pages contain. That program offers a "Blog Extension", all I needed to do is to drag this extension to the page and it automatically creates the PHP code and other stuff (of course after creating the SQL database). This extension shows the comments in an inline frame, but with the help of a guy who uses the same program, we managed to remove the inline frame, so with every comment added, the page height expands. The only downside of this blog extension is that anyone can comment without approving the comment by the admin! Now, I noticed that Facebook has a comment plugin, I tried it on a "white" page and it works well. But, let's have this scenario: I have a page with blue background color, and I want the Facebook comments plugin to be inside a gray frame that expands WITHOUT showing the scrollbar (not for the page, for the comments) when more comments are posted, how can I do that? Thanks a lot How do you deleted more than one comment at a time on myspace? How do I sync my login database to a comment box and their recent activity? Example: On failblog they have a those comments after a video and they synced it to their login database. I need to know how to make a php script or something that keeps tracks of a user's recent activity, and alows them to post etc. If you don't mind posting a link to a tutorial or anything, or tell me what to look for it would be great. Thanks! I've been looking for hours if not days.... Hi all, for some reason when I delete the comments from my code, it runs differently than when the comments are in there. I want a green horizontal navigation bar to appear at the top of the page, and when the comments are in there, my ul list is in default style. Can anyone figure out why this is happening? Thanks so much in advance. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> <!-- head section contains general page attributes -->
<title> Navigation </title> <!-- Title (on tab) says "Navigation" -->
<style type="text/css"> <!-- Use css style -->
<!-- navbar is the tag of the main navigation bar, ul means it's an unordered list -->
#navbar ul { <!-- Attributes of main bar -->
height: 30px;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center; <!-- Alignment of links in horizontal bar -->
background-color: #009966; <!-- Color of main bar -->
}
#navbar ul li { <!-- Attributes of list -->
display: inline; <!-- Display list elements horizontally -->
float: left;
}
#navbar ul li a { <!-- Attributes of link boxes -->
text-decoration: none;
font: arial;
display: block; <!-- Put each link in a block -->
width: 10em; <!-- Width of each block -->
height: 30px; <!-- Height of each block -->
color: #FFFFFF; <!-- Color of link text -->
background: #009966; <!-- Color of block -->
text-align: center;
}
#navbar ul li a:hover { <!-- Attributes of block when hovered over -->
color: #FFFFFF;
background-color: #006666;
}
</style>
</head>
<body>
<div id="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Past Events</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>
</body>
</html>
I'm trying to get a image behind a contact form without using the backround image cause i want to keep the backround black! can someone help me with a code fix to get the CMID.png to run behind the contact table? heres the link youll see the problem http://www.njirishfootball.com/home/contact/ (ps I'm fairly new to coding and dont understand alot still so thats why everything is absoulte and alittle newbish heres the code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <body background ="http://www.njirishfootball.com/new/nice/bb.png"> </body> <div style="text-align:center; width:1000px; margin-left:auto; margin-right:auto;"> <img id="Image-Maps_3201007251356247" src="http://www.njirishfootball.com/new/nice/banner.png" usemap="#Image- Maps_3201007251356247" border="0" width="1000" height="395" alt="" /> <map id="_Image-Maps_3201007251356247" name="Image-Maps_3201007251356247"> <area shape="rect" coords="279,54,356,89" href="http://www.njirishfootball.com/home/roster" alt="" title="" /> <area shape="rect" coords="364,54,508,89" href="http://www.njirishfootball.com/home/coachingstaff" alt="" title="" /> <area shape="rect" coords="513,53,639,89" href="http://www.njirishfootball.com/home/frontoffice" alt="" title="" /> <area shape="rect" coords="644,54,815,88" href="http://www.njirishfootball.com/emeralds" alt="" title="" /> <area shape="rect" coords="819,54,926,88" href="http://www.njirishfootball.com/home/field" alt="" title="" /> <area shape="rect" coords="929,55,991,87" href="http://fivestarfootballleague.com/" alt="" title="" /> <area shape="rect" coords="220,244,303,278" href="http://www.njirishfootball.com/home/news" alt="" title="" /> <area shape="rect" coords="309,244,408,277" href="http://www.njirishfootball.com/home/schedule" alt="" title="" /> <area shape="rect" coords="415,244,517,277" href="http://www.njirishfootball.com/home/standings" alt="" title="" /> <area shape="rect" coords="523,244,625,277" href="http://www.njirishfootball.com/home/fanzone" alt="" title="" /> <area shape="rect" coords="631,245,758,278" href="http://www.njirishfootball.com/home/sponsorship" alt="" title="" /> <area shape="rect" coords="767,245,894,278" href="http://www.njirishfootball.com/home/applications" alt="" title="" /> <area shape="rect" coords="896,244,990,277" href="http://www.njirishfootball.com/home/contact" alt="" title="" /> <area shape="rect" coords="996,391,998,393" href="http://www.image-maps.com/index.php?aff=mapped_users_3201007251356247" alt="Image Map" title="Image Map" /> </map> <img src="http://www.njirishfootball.com/home/contact/ptitle.png" width="1000" height="44"> <img src="http://www.njirishfootball.com/new/nice/cttop.png" width="1000" height="89"> <img src="http://www.njirishfootball.com/new/nice/ctmid.png" width="1000" height="22"> <h4><div id="content"><!-- Start content --><form class="wpcf7-form" method="post" action="/irish/?page_id=42#wpcf7-f2-p42- o1"><div style="display: none;"><input type="hidden" value="2" name="_wpcf7"><input type="hidden" value="2.2" name="_wpcf7_version"><input type="hidden" value="wpcf7-f2-p42-o1" name="_wpcf7_unit_tag"></div><p>Have questions or comments? Please feel free to fill in the form below to send me an email.</p><p>Your Name (required)<br><span class="wpcf7-form-control -wrap your-name"><input type="text" size="40" class="wpcf7-validates-as-required" value="" name="your-name"></span> </p> <p>Your Email (required)<br><span class="wpcf7-form-control-wrap your-email"><input type="text" size="40" class="wpcf7- validates-as-email wpcf7-validates-as-required" value="" name="your-email"></span> </p><p>Subject<br><span class="wpcf7-form- control-wrap your-subject"><input type="text" size="40" value="" name="your-subject"></span> </p><p>Your Message<br><span class="wpcf7-form-control-wrap your message"><textarea rows="10" cols="40" name="your-message"></textarea></span> </p> <p><input type="submit" value="Send"> <img src="http://www.njirishfootball.com/irish/wp-content/plugins/contact-form- 7/images/ajax-loader.gif" alt="ajax loader" style="visibility: hidden;" class="ajax-loader"></p><div class="wpcf7-response- output wpcf7-display-none"></div></form></div></h4> <img src="http://www.njirishfootball.com/new/nice/ctbtm.png"width="1000" height="89"> <img src="http://www.njirishfootball.com/new/nice/footer.png" width="1000" height="265"></center> </html> |
|||||||