Stumped:: web HTML. Caution, may be OT.

[Frank Shute]

On Thu, May 29, 2008 at 07:39:02PM -0700, Gary Kline wrote:
>
> On Thu, May 29, 2008 at 11:05:36PM +0100, Frank Shute wrote:
> > On Thu, May 29, 2008 at 01:05:22PM -0700, Gary Kline wrote:
> > >
> 
> 	[[ ... ]]
> 
> > 
> > > /* * strange:: the way that mutt queues [ and orders ] its
> > > replies and threads is * different from kmail.  I only use a GUI
> > > when there is a URL embedded, but * it must be down-queue.
> > > ....  */ 
> > 
> > Use textproc/urlview with mutt & Firefox.
> 
> 
> 	Frank, can you do me a favor and mail your ~/.urlview, please?
> 	I installed this program a few years ago, but it only worked 
> 	with lynx. I just found the url_handler.sh script so now have a
> 	clue.... but if your ~/.urlview points to firefox you'll save me
> 	some typing.   --Also [going further OT], I like Konsole even
> 	better than xterm.--

I'll post it here for the benefit of others:

$ cat ~/.urlview

COMMAND /usr/local/bin/firefox %s

I've also got:

macro index \cb |urlview\n      # simulate the old browse-url function

in my muttrc, so ctl-b gives me the list of the urls in the email.

> 
> > 
> > > 
> > >
> > > I would *rather* use vi and HTML-by-hand.   And produce very simple,
> > > readable,  uncluttered pages.  I don't use many graphics, e.g., I
> > > use the strength of HTML, php, blah ** 3.  
> > > 
> > 
> > 
> > Since you're "a do it by hand" person, I'll give you the benefit of my
> > experiences doing my pages that way.
> > 
> > My site is on a similar scale to yours and I've just kept it simple
> > except where I've used server-side (PHP/Perl) and Javascript.
> 
> 
> 	Sounds like what I've done, more/less.  My index file in 
> 	www/data is PHP.  php keeps getting closer to C,  &c; I've
> 	written a few things in php.
> 
> 
> > 
> > 1.
> > 
> > Use Firefox to develop with and install the webdeveloper plug-in:
> > 
> > https://addons.mozilla.org/en-US/firefox/addon/60
> > 
> > Use vim not vi, since you get syntax highlighting with vim/gvim.
> 
> 
> 	Mm, I'm familiar with vim; like it all right, but lost my 
> 	~/.vimrc file (and my backup).  NP in this case.  vim does 
> 	a solid job of highlighting.  

I'll mail you mine.

> 
> > 
> > Add x11/rgb to your system and:
> > 
> > $ showrgb | less 
> > 
> > will show you the websafe colours. Plug in the numbers to your
> > stylesheet to get your preferred colours. You can view the colours
> > with e.g:
> > 
> > $ xterm -bg steelblue
> > 
> > Or:
> > 
> > http://www.w3schools.com/tags/ref_colornames.asp
> 
> 
> 	Have the rgb app; when I began building my jottings pages I knew
> 	the colors would set the philosophic/meditative mood, so in early
> 	'02 I ripped off the light blue from the philosophy pages at
> 	Lampeter.   Then used various color wheels to choose the other
> 	colors.  This is about the outer limits of my "design
> 	capabilities", :-)
> 
> 
> > 
> > I use Gimp for any graphics.
> 
> 
> 	Impressive.  Anything at the level of The GIMP is beyond me.

Hey, my knowledge of Gimp is strictly limited but they've got some
tutorials on the Gimp homesite.

> 
> > 
> > 2.
> > 
> > Choose a standard that you are going to code to and validate against.
> > I use XHTML1.0 Transitional and CSS. Things are going more XML than
> > HTML and transitional is less restrictive than strict.
> > 
> 
> 	Here is where it may be best to take this offlist.  I'm guessing
> 	that XHTML is "extended-HTML."  Yes/no?  >= 10 years ago I
> 	created some short stories andor essays using the Sytle Sheets.
> 	But as you point out, XML is prob'ly the future of markup and I
> 	know next to nothing about it.  
> 
> 	For example, given <firstName>John</firstName>, *where/what*
> 	defines the tag?  Since the WWW bunch has given XML the nod, it
> 	is both the present and future of a lot of the web.   ---So,
> 	are there any books for Beginners you recommend?  You or anyone
> 	else onlist who has waded thru this plea!

No books, I learnt all mine online.

> 
> 
> > 3.
> > 
> > Have a look at w3c schools site to learn your chosen language:
> > 
> > http://www.w3schools.com/
> > 
> > There are various tutorials and references there. Best site on the
> > 'net!
> > 
> 
> 	hMMM:-) Maybe I should've read ahead.... .
> 
> 
> > 4.
> > 
> > Steal a simple page that validates:
> > 
> > http://www.shute.org.uk/miscellany.html
> > 
> > and use it as a template to hack on. Steal the style sheet too.
> > 
> > Validate your webpage as you go along with the w3c validator.
> 
> 	Should I just google for the validator?  At any rate, thanks much
> 	for the   two URL's above.  The more I can learn on my own
> 	(without bothering anyone else), the better.

I think there's a link to it on the w3c schools site I gave you. If
not, it's in the source of the page above. If you click on the "valid
XHTML" in that page, it will validate that page.

> 
> 
> > 
> > 5.
> > 
> > A few tips:
> > 
> > Use <div>'s for layout, not tables.
> 
> 
> 	i cannot // hhaven't made sense of <DIV> since I first saw it.
> 	*This* may be where I've confused IE and Konq and it might be the
> 	easiest way to create the layout that firefox gives me.

<div> essentially gives you a box which after setting properties like
font size, background color, margins, position etc. with your
stylesheet you can place on your page and then fill with graphics,
text etc.

Have a look at the source and style sheet of my contact page (at the
bottom of this mail) to see how you can use them quite simply.

> 
> 	As I see it, ttables let you put rectangles anywhere; then you
> 	can putt other things inside; how to do this with <DIV> is one
> 	more black hole.

Tables should be used sparely and mainly for tabulated data because
they stuff up screenreaders for the blind amongst other crimes.
Semantically, they don't make any sense when used for layout purposes
and they're limited compared to <div>s.

> 
> 
> 
> > 
> > Don't use fixed text heights, use relative so it respects the users
> > preferences for text size.
> 
> 
> 	I didn't understand you could hardwire a textsize; maybe I've
> 	done it inadvertently ... 

Yeah, you can:

font-size: 16px

Use something like (in your style sheet):

font: italic 120% sans-serif;

where the 120% sets the size of the font relative to the browsers
setting.

Say me default font is set to 20px in my browser, then in the former
case the font will render at 16px and in the latter case at 22px.

I don't know if it's something you did with your pages but it's
something you should be aware of.

> 
> 
> 
> > 
> > Keep an eye out for pages that look nice and validate. View source &
> > then steal chunks of xhtml and css. 
> > 
> 
> 	I still have unread messages down-queue, but may as well ask if
> 	there are any HTML/XML checkers in ports that would help validate
> 	my mark.  David Kelly suggested www/tidy, for one.  

That's the one I use but it's a bit limited with XHTML. It will pass
stuff that's not valid.

The w3c XHTML/HTML validator is more complete and will make your
errors explicit.

There is also a CSS validator at w3c.

> 
> 	It's been partly ignorance, partly my deadlines, and partly my
> 	thinking that my pages just could never be as badly rendered 
> 	as they are that made me snap-to.  Like to prevent this... .

If you've got a couple of weeks free, you could spend it in worse ways
than to learn how to write web pages that validate and render OK on
all modern browsers.

You're not writing a page for amazon.com, so you can keep it simple
until your skills improve.

> 
> > 6.
> > 
> > Happy hacking!
> > 
> > 
> > You'll find that your validated pages will show fine in most modern
> > browsers although some have more quirks than others. But when you get
> > somebody say "Your webpage doesn't look right in Internet Exploder 5"
> > you can say to them "Get a proper browser that respects web
> > standards!
> 
> 
> 	L.O.L!.  I'm hoping that most people have something better than
> 	W95.

You wouldn't believe it but my last place of work (a shop), they ran
the (unbacked up) shop stock database on a machine running W98 and
they browsed the 'net from it with IE5. No firewall but ripping off
AVG (they also did email for the shop from that machine!).

> 
> 	thanks again, and cheers,

No worries. Contact me off-list if you get stuck with anything.

Regards,

-- 

 Frank 

 Contact info: http://www.shute.org.uk/misc/contact.html