Saint Michael Xhtml Tips And Tricks #1

Saint_Michael

May 3 2005, 04:38 AM

Well by the many views i have seen on my web design issues i should go into new territory, so im going start with some useful xhtml info for you web design fenatics, the info i present to you is from other websites so be warned it might or might not work all depends but lets start off with the basic info for using xhtml. Also this tutorial is for beginners so i won't be doing any xml info due to it being a more server side then actually webdesign

1. DOCTYPE this is used to tell the browser what kind of infomation it will be displaying. nothing as really changed from html 4.01. so here is the low down on the doc types

QUOTE

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

XHTML Transitional DTD
Use this DTD when you need to use XHTML's presentational features because your readers don't have browsers that support Cascading Style Sheets (CSS):

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

XHTML Frameset DTD
Use this DTD when you want to use frames! (like anyone uses frames anymore

)

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

2.XHTML elements must be properly nested- which means that where the tag starts it should end the same way. look at the example and you know where im getting at

QUOTE

<b><i>This text is bold and italic</i></b>

3.XHTML documents must be well-formed- this is simply saying that it begins with <html> and ends in </html> example

QUOTE

4.Tag names must be in lowercase-THIS IS SIMPLE DO NOT CAP YOUR TAGS LIKE THIS

5.All XHTML elements must be closed- if you start a tag you must also close even if it the worlds most complex design, so pay attention where your start tag begins or if you like me and want to validate your website it will come out as an error and then you have to figure out why or why is it not validated.

6. Empty Elements Must Also Be Closed- well to many of your disappointment the following tags must be closed as well

QUOTE

<br><br />
<hr><hr />
and for those who use images some changes have been made to how it is set up so take a look at the update img tag format

<img src="happy.gif" alt="Happy face" />

as you can see it is now required to have alt tag in your image and need to be quoted which brings us to NUmber 7.

IMPORTANT Compatibility Note:
To make your XHTML compatible with today's browsers, you should add an extra space before the "/" symbol like this: <br />, and this: <hr />.

7.All vaules in your tags must be quoted or it will show up as an error on validation

8.Javascripting in xhtml for those who use javascripts in their website except those who are in the corprate world (php, asp, perl) javascripting change a little bit but not much, if you use css scripts or you actually used js files then you know what im talking about but if it something simple say for an example a clock, then you have to little cut and paste. The Problem with javascripting in xhtml from my understanding is that the programming is going to pop up errors no matter how hard you try to hack and slash to make sure nothing goes wrong its going to come out an error unless your a programming genius but anyways here are the steps for you novices out their i tried a few out i got it to work some didn't but it depends of on what your using for a javascript

STEP #1
cut out the following tags in your javascript
<script LANGUAGE="JavaScript">
and
</SCRIPT>

STEP #2
open a text file This is where the problem will start if your using javascripts that have 2 parts first part in the header and the second part in the body then about 90% of the time the javascript won't work so pick your scripts wisely

STEP #3
copy and paste and save as date.js thats the easy part thier now just like css somewhat you have to comment the javascript as you can see here or it won't start. and the next easy part saving the txt file. for those who use editors it should show up as a js file but if your hardcore and use note pad make sure you save it using the .js or its not going to kick in.

QUOTE

STEP #4
put the following tag on your website now to finish off this process its as easy as 1234 steps

. now you put this tag anywhere on your website and it should not conflict with your xhtmlm validation mind you it might not work if the script is 10mb long.

QUOTE

their you have it you just made a js file for using xhtml formant and now to finish issue #1 the comment tag, we all now what it is but for those who just lost their mind here you go

QUOTE

using that format is now invalid if your xhtmling they changed it quite a bit, don't see why but hey its programmin so here is what the new comment tag looks like

QUOTE

<[CDATA[comment goes in here]]>

spacemonkey

May 4 2005, 02:28 AM

I'm glad someone posted this. XHTML has strict, but acceptable guidelines for markup. Everyone needs to be doing the same thing, so as to easily consult others when troubleshooting or presenting information.

Also, I should point out your explanation of Javascript in XHTML. Javascript definitely works correctly in XHTML Strict, Trnasitional, etc. When you have a Javascript that you want in your page, and you link to it externally, you need to make sure you put the "header" part of your script in a seperate file and link to it in the header like so:

CODE

And if your javascript has a body part as well, you would call the other file with just the body part in it in the <body> tag of your document in the same fashion.

Also you should point out that tag values must be in quotes and must be lowercase. So the following would be incorrect in a number of places (not a single value or attribute is correct):

CODE

The correct way would be:

CODE

Tyssen

May 10 2005, 12:23 PM

QUOTE(spacemonkey @ May 4 2005, 12:28 PM)

CODE

The more correct way of doing this would to take align="center" out of your image tag and apply it to your CSS instead:

CODE

img { text-align: center; }

SoulFlower

May 11 2005, 07:10 AM

Txh Michael, your tutorials really r0x

Similar Topics

Keywords : saint michael xhtml tips tricks xhtml html

Add Flashing Inbox To Invisionfree Forum - Html code for invsiionfree!! (0)
How To Make A Decent Forum - Some great tips on how to make and maintain a good forum (8)
-Firstly, come on, use a decent forum system. Visitors to forums hate advertisements. The best way
to guarantee no ads is to host it yourself. There’s loads of free web hosts out there- there’s loads
of free forum software, too. So, come on! It doesn’t take much energy to find a good host and
upload some files. I think the two best forum softwares to use are SMF(www.simplemachines.org) and
phpBB(www.phpbb.com). -Secondly, if anybody is actually reading the topic with the link to your
forum in, they must be dedicated to this one, and not many people are dedicated to ...

How To: Html Tables. - I find these really useful. (8)

If you are a novice web designer, but want your site to look advanced and proffessional, then what
better way to do so than to use HTML tables? HTML tables are a really easy way of formatting your
text, to make your ste look proffesional. It looks good, and its easy, what more can you ask for?
You have to use the tag, so first lets start off with: HTML Table > /table > In
between theese two tags, we will add the data for the table, using the tags and . =Table
Heading (Title) =Table Data (what you want in the table) =table row (new row) So, lets ...

Creating Navigation For Html Websites - Have a common navigation menu for the whole website! (12)

Pre-requisite: HTML, inline frame tags 1 Attachment(.zip) included. Updates : 29-12-07: Doctype
added in example files (Advised by jlhaslip) Designing a whole website takes a lot of planning
and organization. Designing a proper navigation system is a basic step in building your website. If
you are developing webpages in html you would have observed that as you go on creating pages it
becomes difficult to maintain the links to the pages. This article will guide you in developing a
common navigation menu for your website. It describes three ways, so if you don'...

Simple Scripts In Html And Javascript - Things like BackgroundColorChanger and so (7)

like in the topic, here is a description how to change the Backgroundcolor "On The Fly", by klicking
on a button or radio-box first, we ned the html-and body-tags, create a new html-file on your
desktop and write the following: QUOTE <script language = "JAVASCRIPT">
browser interpretation: html - tag means "hey, browser, here comes HTML" in the body-tag you define
the looking of your site. you can add things like "bgcolor" for the background, "text" for the
textcolor and link / alink / hlink / vlink to define the linkcolor ( ) the scripttag i...

[php] Clean Code Functions - Clean up your html output from php scripts (5)

There is another Topic about writing 'clean' HTML code posted elsewhere on the Forum.
I'll edit this Topic and add the link so you can review it on your own, and there is no need for
me to comment on it in this thread, but the purpose of this Topic is to introduce a pair of
functions which can be used for making sure that the HTML output from my scripts is readable when a
view-source is reviewed. Two handy functions are included here. They work together quite nicely,
and I will start this Tutorial with a short summary of the reasons for their 'being...

Html Legend - Learn how to create a handy legend with HTML! (9)

I think this is pretty neat... good for those people who maybe aren't that great at designing
things but still want something to look nice.. CODE <fieldset> <legend>Legend
title</legend> Content </fieldset> try it in note pad.. it looks nice...good for
forums, sign up forms......

Cakephp On Ubuntu - using your own public_html folder (0)

Hi, there are many tutorials about this, but i would like to type the steps i followed in order to
get cakephp working on my user public_html folder. as many of you probably know, if you have
apache's userdir module loaded, you can put your web pages on /home/user/public_html , and
access them with the url: http://localhost/~user/ . I really prefer this, so all my web pages are
on my personal home, but how to configure cakephp to work with these paths, i got a hard time with
this, but finally got it!. here's how: in case you don't have apache2's u...

Html Span - (7)

HTML Span Description The span tag is quite the handy tag to have at your disposal. You can use
it for everything from Text Formating, to creating a scrollable text area. When combined with CSS it
becomes an easy-to-use tool for making your website as uniform as possible, as your not bogged down
with tags for every heading and title on your website. Try It Out CODE <html>
<body> <div class="content"> <span class="heading1"> Heading
or title goes here. </span><br><br> All the content insi...

Html Bdo... - (13)

Description I find that it is often difficult to write a sentence backwards, but thanks to HTML, I
can now complete this task in only a few seconds. Now the only problem is it is very difficult to
read... Try It Out Welcome to one of the most useless functions of HTML. The tags enable you to
write a sentence backwards. The code is quite simple. CODE <bdo dir="rtl">I
find that it is often difficult to write a sentence backwards, but thanks to HTML, I can now
complete this task in only a few seconds. Now the only problem is it is very difficult to r...

Tricks With Php Variables - (10)

You probably are thinking at this moment why I am posting some tricks with variables. Well, there
are many useful things a variable can do for us. For one they can actually be used to create simple
games. They also can be used to produce a random result in a page. Another great use is shoutboxes.
Well here are some cool variable effects. Adding Multiple Strings We can use strings to create
great effects. Example: CODE <?php $var1="Hello person.";
$var2=str_replace("person","world",$var1); echo $var1."
&...

Want-to-start Html Tutorials - An HTML tutorial that covers the basics (2)

NOTE: Don't use a rich text editor* for writing HTML code! Use Notepad in Windows,
SimpleText in Mac or TextEdit in OSX, but you must set the following preferences for the HTML code
to work! In the Format menu, select Plain Text. Open the preferences window from the Text
Edit menu, then select "Ignore rich text commands in HTML files." Start Creating Your Own HTML
File You can either use HTM or HTML file extensions. For more information, visit:
http://filext.com/file-extension/htm for HTM or http://filext.com/file-extension/html for HT...

Create A Simple Html Editor With Php And Javascript - (3)

Ok, I will teach you how to create a simple HTML editor that runs online with buttons that add HTML
tags. Before we start: You should have basic knowledge of these languages. HTML/XHTML
Javascript PHP You will need Ability to use filesystem functions. Chmodding abilities
Features of Editor Online PHP safe Full HTML support A Few Bad Features Can only create new
documents or overwrite Fairly unsafe Now we are ready to begin. The PHP Script This will be
our PHP script that we will use to make the file. Make a file called save.php Here is the...

Spice Up Your Forms - With a bit of CSS and HTML alignment (11)

Ever wonder how to make those stylish forms you see everywhere? Well now it's your change to
learn. This short tutorial will show you how to do exactly that. Here is a bit of css to spice
up the form. I have included comments to explain what classes will change what in the forms.
CODE <style type='text/css'> .form table { background-color: #187cae; }
/*The following css class will change the table cells within the .form div */ .form td {
background-color: #bbe0f4; padding: 3px; border: 0px; ...

Creating A Resume - 10 Tips For Making A Resume (1)

I've been working on my Resume for months now. Here is a summary of what I've learned: 1.
Avoid referring to yourself via 1st person or 3rd person terms. Rather than saying "I started this
job in" just say "Began job in"... Employers expect Resumes to be professional and avoid reference
to oneself; and instead speaking in an impersonal tone that presents
achievements/skills/experience/education without personalization. Avoid words like "I", "my", "he",
"she", etc. Leave out personal pronouns and only use the action words/verbs. This also includes
your Ob...

HTML tags and examples - Condensed form of course from my site... (37)

Well, I decided to try and help out some of the users here who might be unexperienced in HTML, so I
condensed the begginer's HTML course at my website. Here it is... Lesson 1 HTML means Hyper
Text Markup Language. HTML is a very common language used for many websites, is the base for more
complicated and powerful langauges like php, HTML can seem hard, but you will find it is one of the
easiest langauges one can learn. The core of HTML is the tag, a tage is just a set of two
arrows-like brackets created by hitting Shift and the comma key, or Shift and the period...

Do You Want To Use Php Code In Your Html Pages? - Within two minutes you will! (9)

Whilst searching around for help to setup cutenews blog I came across a way to use php in html pages
- lo and behold it works! so I thought I'd share it with you all (Unfortunately I can't
remember the site so I wrote this up a couple of minutes after I did it:) ). This method requires a
web server with apache installed. So, luckily for us all this covers the whole of Trap17... even
Qupis /tongue.gif" style="vertical-align:middle" emoid=":P" border="0" alt="tongue.gif" /> Just
to make the point, this is in no way a difficult task and it doesn't requir...

How To Make A Simple File Based Shoutbox Using Php And Html - (8)

A simple tut to make a simple shoutbox. Let me jump right in. First of all you need the standard
equipment for PHP, an IDE like XAMPP and an editor like PHP EDITOR 2OO7. Were going to make a
simple guestbook using three files, webpage.php, shout.php and shout.txt. Webpage.php can be
changed to whatver you want, it will be the page on which the guestbok is shown, you could even use
this code and add it to another php page n your site. Shout.php is the proccessing page and
shout.txt is where the shouts are stored. Firstly we need to make the visual design of the box....

Document Type Declarations - And why we use them in html pages (0)

This code: CODE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
  <title>HTML 4.0 Strict document</title>     <meta
http-equiv="content-type"  content="text/html;charset=utf-8" >     <meta
http-equiv="Content-Style-Type"  content="text/css" > </head>
<body>      <p>... Your HTML content here ...</p>      <p>... More
HTML content here ...</p>   </b...

Fast Template Design In Joomla Cms - Basic knowlege of Html needed (2)

Joomla is one of the most powerfull CMS sistems around. It is free under GNU/GPL license and
everyone with simple knowlege of webdesign (and even without it) can use it for it's website.
For now the only way i know on how to design a template in joomla is by using Dreamweaver and Joomla
(joomlasolutions1.0.mxp-dreamweaver.mxp) extension for dreamweaver! Template design in joomla
is quite simple really. This template that i'll show you is the most simplest of them all, but
it's enough for one to learn Basics of template design. Further notice is that this...

Integrating Html And Css Part 1 - (5)

Ok. Well i am writing this as a series of tutorials i will be doing on this subject, so enjoy. I
hope this helps. Introduction to HTML and CSS
HTML and CSS are to work together. HTML is what puts the characters on the page, while CSS is what
makes everything look outreageous! For instance, I would use HTML if i wanted to put "Trap17 is
the poop!" onto my page, although if i wanted to make it look nice like this by adding a font,
and maybe some color, then I would use CSS. Learn the HTML. Ok this is my lit...

Basic Html (for Us Kids) - (23)

What is HTML? HTML (hypertext markup language) is computer language that is used to webpages. It
can be confusing to understand for some of us kids. HTML pages are text files that has of HTML tags
(they can place the text or images whereever you want to place it), and text you can place between
the tags so the text willshow up on your page when you put it on the WWW. Tags are instructions that
tell your browser what to show on ya website. They break up your webpage into basic sections. All
tags start with a (right bracket). If you are a starter you need 4 tools A...

Simple Xhtml Tutorial - Simple tutorial I wrote (17)

Updated Version made on 3/5/06 Updates: 1.Made it for JUST XHTML 2.Differences from HTML section
3.XHTML1.1 and 1.0 Welcome to my basic XHTML tutorial. ---DIFFERENCES FROM HTML--- The document must
be well formed: -You can't have overlapping tags, for example: HTML em > p >hello /em > /p
> -That is incorrect HTML em > p >hello /p > /em > -That is correct Tags must be all
lower-case: -Tags are now case-sensitive HTML LI >List Item /LI > -Incorrect HTML li
>List Item /li > -Correct Tags must be closed: -You must close all your tags HTML ...

How To Create Html Page Anchors - Click A Link And Take You To A Certin Place On The Same Page (5)

Have you ever wondered how people have a normal link but all it does it take you to the middle of a
long page? well here is a solution DEMO: Here Ok well first off for the link it will be just
like a normal link code except you wont put a http://URL.com/file.php it will look somthing like
this QUOTE name ">Click This Link! there must be a # sign in front of this to work..
now, for the content that the person will be re-directed to after clicking the link QUOTE name
"> the items in bold is what you need to change QUOTE name "> i...

Tool Tips Using Only Css To Pop Up The Tool Tip - No javascript involved! (8)

Tool Tip Tutorial Example Found Here . Please review before continuing. Nice. And no
javascript at all to be found. The colours I have used are for demonstration purposes only to show
you that they are adjustable to suit the background or to contrast against them. Your choice. That
is a styling issue. It is your site, you decide. The original author's idea was to add
position:relative to the link, in order to allow the span element inside to position absolutely
in respect to the parent link. This code has been tested in Ie5.5, IE6, Opera7.11 and M...

Multiple Classes In Html - you can use more than one at a time (8)

Multiple Classes in Css Styles Classes are used in html pages to give certain defined
attributes to elements. They are useful when the attributes are to be used in more than one place on
a page. (Named Id's are only allowed once per page, but I digress... might have a tutorial on
that some day.) Sometimes you want Red text and sometimes you want Bold text. Easy enough to do,
simply define a class and apply it to the element you want red or bold. Use this class where you
want on the page, since classes are enabled to be used in several spots, for different u...

Firefox Tricks - (32)

Here are some tricks you can do to your firefox browser. Remove bold formatting on the active tab.
Get rid of the close button the tab bar. Add the code to the userchrome.css CODE
.tabs-closebutton-box { display: none !important; } Force firefox to load links ina
new tab. Add the code to your user.js CODE user_pref
("browser.tabs.showSingleWindowModePrefs",true); Then restart firefox, you will
see an option to open windows in a new tab instead under tabbed browsing in Tools|Options|Advanced
Added code tags round cod...

Saint-michaels Html Tips And Tricks Issue # 2 - some more tricks of the trade and some wierd stuff to (2)

Well i thought it was time to bring in issue 2 of html tips and tricks and i found a very
interesting html coding which i thought was funny as hell its called Preventing Search Engine
Indexing this coding is used to keep your website from being index why i don't know why you
don't want you website listed unless it someone stupid as in telletubbies.com but heres the code
This tag tells the robots not to index this page and not to follow any links within the
page. QUOTE This tag tells the robots not to index this page, but follow any links wit...

Saint-michaels Html Tips And Tricks #4 - been awhile so here somewhat new stuff (12)

WEll its been awhile since i did so i will put up some more useful html tips and tricks here on
trap17.com Ok for trick actually, want to know how some websites got those ool icons put on their
website link in the favorites folder well here you go in 3 quick steps. 1. create an image then
shrink it down to 16x16 and save it as avicon .bmp. 2. then change it to .ico, when is the file
reconizing it as a icon., if you are having problems saving it, there are some resources out there
that can change it for you. 3. load the image to your website and add this tag in betwee...

The Art Of Xhtml, Css And Web Standards - Part 1 - The Markup and Style Guidebook (19)

Being the XHTML and CSS freak that I am, I have decided to create a guidebook on developing
websites using XHTML, CSS and implementing Web STandards. While this is not a step by step tutorial
on making websites, and nor is it a beginners guide to CSS and XHTML, this is a handbook where you
can learn from other website examples, and grab insight from my own opinions, and then implement it
onto your own website. This guidebook is divided into three chapters, each covering a different
aspect of XHTML, CSS, and Web Standards. With out further ado, here starts Chapte...

Looking for saint, michael, xhtml, tips, tricks, 1, xhtml, html, 5, 0, p

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE

Saint Michael Xhtml Tips And Tricks #1 - xhtml= html 5.0 :P

Saint Michael Xhtml Tips And Tricks #1 - xhtml= html 5.0 :P