HTML editors

[mabudon]

Any suggestions on an easy, ideally free HTML editor, something that would be able to make a decent page with enough effort? There seem to be a lot of options and I was last messing with HTML almost a decade ago and am aware that things have changed- looking it up just seems to make things more confusing.
Thanks for any suggestions you might have

[vynsane]

are you talking about a visual editor, or just a quality text editor with context coloring? if the latter, and on windows, i've always liked araneae. if the former, IDK. 'sharepoint designer' is free, now, but is primarily intended for use with sharepoint. you might be able to use it to create standard html web pages (but don't hold me to that), and it is a split screen code/design view editor.

[mabudon]

Thanks Vyn- also on the topic, would there be a good idea for a reference book that one could get for HTML?? I myself would use the interwebs, but Elf is not sso good with that kind of information intake, so she was hoping to find a book that would cover enough to make a functional page of some sort- a fairly simple one, probably not involving forms or anything too tricky. Sorry to post such boring-ass questions but I figured here I would get less clutter and better answers

[vynsane]

i don't know, i used "Sam's Teach Yourself HTML 4.01 in 24 Hours" about a decade ago, and haven't looked at anything but online resources since. it's probably best to pick something up that deals with HTML5, as that's the future of the web. aside from the new features of html5, though, if you stick to the basics, you're good:

• <p></p>
  paragraph - a 'block level' element that usually has extra padding above and below, delineating line-breaks between sections of text.
• <div></div>
  'division' - basically just a container that has no inherent styling to itself (unlike the built-in padding of the <p> tag), meaning you're free to style it however you want.
• <em></em>
  'emphasis' - took the place of <i></i> for italic text
• <strong></strong>
  'bold' - took the place of <b></b> for bold text, a more semantic tag
• <h1></h1> through <h6></h6>
  'headings' - various levels of headings throughout a document.
• <a></a>
  'anchor' - the hyperlink tag. the 'href' attribute is required in order to link to another resource (page or site) as in <a href="http://www.google.com">Google</a>

any of these items can be styled via a stylesheet by adding a 'class' attribute.

Code: Select all

<h1 class="pageTitle">This is the title of a page</h1>

in your stylesheet, you would refer to this class with a period in front of it and style it according to your desire:

Code: Select all

.pageTitle  { font-size: 2.5em; color: red; border-bottom:1px solid red; }

you can also reference this by the tag AND class, to be more specific

Code: Select all

h1.pageTitle { ... }

also, if you look at the html of any page by right-clicking and selecting 'view source' or something like that (it's different in different browsers) you can see how the page is structured. i use as minimalistic html as possible, and generally speaking a LOT of CSS for the presentation.

[anarky]

Good a place as any, but I thought we had a thread....

In CSS/HTML, is there a way to set the right margin of left-justified text? I know how to indent on the left; that's no issue. It's just that the text is running right to the edge of the screen. I'd prefer to not have to fuck with tables for something that I know must be a simple one-line command that I just can't find online for some reason.

[vynsane]

when using CSS, every tag is like a rectangle. <span>, <strong>, <em> are all "inline" elements, meaning the rectangle is like shrink-wrap, it's only as large as the content inside it. <p>, <div> and others are "block" elements, meaning they take up the full width of their container (but will only be as tall as the content inside it).

the rectangle for "block" elements will have three strata of separation around it - padding, border and margin. padding is the space between the content and the border. the border is the space between padding and margin. the margin is the space between the border and anything outside the element. inline elements have these properties, too, but the don't work the same way as block elements.

i find it better to add whitespace/padding to whatever tag is containing everything than to individual tags inside. so, say i have a bunch of paragraphs inside my "content" div:

Code: Select all

<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus ullamcorper lobortis. Cras in neque diam. Aenean at libero et enim convallis lobortis. Aliquam nec porta nisi. Vestibulum tellus lacus, ullamcorper nec eleifend ac, convallis at sem. Etiam tincidunt nisi ac leo volutpat pretium. Duis eget odio in lorem bibendum blandit id quis nunc.
</p>

<p>
Nulla ultrices odio non dui ultrices iaculis. Quisque aliquet gravida velit eu pretium. Sed ornare varius lacus ut luctus. Quisque et nibh quis nibh varius porttitor dapibus et neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Cras faucibus eros enim, sit amet ultricies risus.
</p>

<p>
Mauris sed purus odio, eget euismod odio. Duis blandit massa vitae nulla euismod facilisis. Aliquam libero metus, tincidunt sed eleifend sed, placerat quis libero. In imperdiet elit in urna posuere eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis in vehicula quam.
</p>
</div>

i could specify in my CSS rule on the <p> tag like this:

Code: Select all

div.content p  { margin-right:20px; }

but i find it more uniform to target the containing <div>:

Code: Select all

div.content  { padding-right:20px; }

[Slicker]

How I feel after reading that post...

[anarky]

I'm slowly converting to CSS. There's a learning curve, but it seems to be straightforward. Once I get one thing down, I think, "Damn, that's so much easier than in 'straight' HTML."

[vynsane]

you're kinda lucky to be getting into it this late in the game where widespread adoption of standards has finally prevailed. learning CSS during the heyday of IE6 was like minesweeping with a three-foot long stick.