Glitch City Laboratories Archives

Glitch City Laboratories closed on 1 September 2020 (announcement). This is an archived copy of a thread from Glitch City Laboratories Forums.

You can join Glitch City Research Institute to ask questions or discuss current developments.

You may also download the archive of this forum in .tar.gz, .sql.gz, or .sqlite.gz formats.

Programming/Scripting/Development/Web Design

WYSIWYG - Page 1

WYSIWYG

Posted by: Ratipharos
Date: 2009-06-30 10:21:16
Anyone know of a good Freeware WYSIWYG?

Re: WYSIWYG

Posted by: Ketsuban
Date: 2009-06-30 13:26:19
A freeware WYSIWYG what?

Re: WYSIWYG

Posted by: GARYM9
Date: 2009-06-30 13:41:45
This site has a lot of freeware editors for WYSIWYG

:P

Re: WYSIWYG

Posted by: Ratipharos
Date: 2009-06-30 13:46:48

This site has a lot of freeware editors for WYSIWYG

:P


Witty.

I was actually looking for recommendations.

Re: WYSIWYG

Posted by: GARYM9
Date: 2009-06-30 13:55:14
Nvu's a good editor.

http://net2.com/nvu/download/nvu-1.0-win32-installer-full.exe

Website:

http://net2.com/nvu/

Re: WYSIWYG

Posted by: Bent`
Date: 2009-06-30 23:58:48

Anyone know of a good Freeware WYSIWYG?

For what? HTML? WYSIWYG editors exist for more than web sites.

I don?t mean to sound elitist, but the best way to learn web design is to use a plain text editor and browser. It?s not a difficult language to learn the basics of, and you?ll wind up with much better code quality.

Re: WYSIWYG

Posted by: Ratipharos
Date: 2009-07-01 10:08:15
For HTML.

I did try to learn HTML, but no guide told me how to code what I wanted. All I learned was BR, TABLE, B, I, U and FONT commands.

EDIT: And IMG, they skimmed the MAP command, and I learned BACKGROUND commands.

Re: WYSIWYG

Posted by: Bent`
Date: 2009-07-01 14:26:32
You know the basic structure of an HTML document, right?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">http://www.w3.org/TR/html4/strict.dtd">;
<html>
  <head>
    <title>Page title here</title>
  </head>
  <body>
    <!-- Page content here -->
  </body>
</html>
From there, it?s just a matter of knowing the tags.

<p> is used for paragraphs. You can use <em> and <strong> to mark up text for emphasis and the like:
<p>This is a paragraph. I <em>really</em> like to emphasize
text. <strong>Warning:</strong> Be sure your tags are properly nested!</p>

<p><del>Currently waiting for the Prime Minister?s comments on this
situation.</del> <ins datetime="1994-11-05T13:15:30Z">A reader has informed
us that the Prime Minister canceled his speech last night.</ins></p>

<h1> through <h6> are different levels of headings, used for titles and the like.
<h1>Page Title</h1>
<h2>Name of Article</h1>
<p>Content of the article goes here. Content of the article goes here. Content of the article goes here.</p>

<ul> and <ol>, together with <li>, make up unordered or ordered lists.
<ul>
  <li>This is an unordered list.</li>
  <li>Bullets are typically used to denote unordered list items.</li>
  <li>Numerals or letters tend to show up in ordered lists.</li>
</ul>

<ol>
  <li>Wait for a solar eclipse.</li>
  <li>Go outside.</li>
  <li>Look at the sun.</li>
  <li>Congratulations! You are now blind!</li>
</ol>

<a> makes a clickable link, and <img> includes an image:

<p>I recently learned that <a href="blatant">http://mltreq.alwaysdata.net/">blatant advertisement</a> is easy on the Internet.</p>

<p>I like to emote sometimes <img src="http://forums.glitchcity.info/Smileys/default/smiley.gif"; alt=":)"></p>

<table> has a slew of elements for making, well, tables.

<table>
  <thead> <!-- This is the header information for the table -->
    <tr> <!-- tr makes a row -->
      <th scope="col">Heading 1</th>
      <th scope="col">Heading 2</th>
      <th scope="col">Heading 3</th>
    </tr>
  </thead>
  <tbody> <!-- This is the content of the table -->
    <tr>
      <td>Tabular data</td>
      <td>More tabular data</td>
      <td>Even more!</td>
    </tr>
    <tr>
      <td>Tabular data</td>
      <td>More tabular data</td>
      <td>Even more!</td>
    </tr>
    <tr>
      <td>Tabular data</td>
      <td>More tabular data</td>
      <td>Even more!</td>
    </tr>
  </tbody>
</table>

Quoting people:
<blockquote cite="">http://www.loc.gov/exhibits/gadd/images/Gettysburg-2.jpg">;
  <p>Four score and seven years ago our fathers brought forth on this continent a
new nation, conceived in Liberty, and dedicated to the proposition that all men are
created equal.</p>
  <p>Now we are engaged in a great civil war, testing whether that nation, or any
nation so conceived and so dedicated, can long endure. We are met on a great battlefield
of that war. We have come to dedicate a portion of that field, as a final resting place for
those who here gave their lives that that nation might live. It is altogether fitting and
proper that we should do this.</p>
  <p>But, in a larger sense, we can not dedicate?we can not consecrate?we can not
hallow?this ground. The brave men, living and dead, who struggled here, have
consecrated it, far above our poor power to add or detract. The world will little note,
nor long remember what we say here, but it can never forget what they did here. It
is for us the living, rather, to be dedicated here to the unfinished work which they
who fought here have thus far so nobly advanced. It is rather for us to be here
dedicated to the great task remaining before us?that from these honored dead we
take increased devotion to that cause for which they gave the last full measure of
devotion; that we here highly resolve that these dead shall not have died in vain;
that this nation, under God, shall have a new birth of freedom; and that government
of the people, by the people, for the people, shall not perish from the earth.</p>
</blockquote>

<p>Bill thinks that Sally isn?t pretty. <q>Her face looks like a horse,</q> he said.</p>
   

<br> should not be used unless you?re writing poetry or something. <font> should never be used?use CSS instead. When you write code, try to run it through the W3C validator, which shows any errors in the markup.

All tags are described in detail in the HTML Specification. Verbose, but if you have questions feel free to ask. View the source code of sites you like and see how they?re made, but beware?there?s a lot of hideously incorrect code on the Web. My site has very good code.

Re: WYSIWYG

Posted by: Zowayix
Date: 2009-07-01 21:48:47

My site has very good code.

Your Battle Tower in-jokes page is missing the <html></html> tags. :P

Re: WYSIWYG

Posted by: Bent`
Date: 2009-07-01 22:03:40


My site has very good code.

Your Battle Tower in-jokes page is missing the <html></html> tags. :P

As described in section 3.2.1 of the specification. :P You will notice that the code is valid. However, for a beginner I guess I should recommend to avoid omitting ending tags unless you know what you?re doing.

Re: WYSIWYG

Posted by: Abwayax
Date: 2009-07-02 18:04:23
As The Computer Man said, it's better to learn HTML than to rely on a WYSIWYG tool. However I started off with a WYSIWYG program and they're not too bad as long as they produce nice code, unlike Microsoft Word (ugh). Yes, MS Word can save as HTML, but… don't use it.

I don't use WYSIWYG editors but http://www.kompozer.net/ looks pretty sweet. It's more than an editor, it's a… web authoring system. Nvu also calls itself a web authoring system. In fact, Kompozer's pretty much a fork of Nvu, except the last Nvu release was in 2005, whereas Kompozer is being actively developed.

Dreamweaver, on the other hand, calls itself a web authoring tool. I used Dreamweaver when working on my site from school only because it was the closest I had to an SFTP client, but I never used any of the WYSIWYG features. Nvu/Kompozer has many of the same features Dreamweaver has, including the site manager and the built-in FTP client. I don't know if it does SFTP, though. Oh, and it's probably much less bulkier than Dreamweaver.

I love how many ways there is to say "text editor."

Re: WYSIWYG

Posted by: Ratipharos
Date: 2009-07-03 17:10:00
Okay, I've been taking your advice and building up my HTML skills, but my CSS is still lacking. I have been working with DIV tags and have found them good fun, but I don't know how to code CSS into it. At least, good CSS.

I've been using KompoZer for my CSS, but have hit a road block. Using .navbar, I have been able to code the navbar to an extent. I would like to have it so when you hover over a link, the link's background darkens. How would I code this? Would 'A : hover' work? And how do I set it for only links?

Re: WYSIWYG

Posted by: Bent`
Date: 2009-07-03 17:36:40
You can validate your CSS to make sure it?s correct with the W3C?s CSS validator.

Best practice is to keep CSS in a separate file, and to link the two together with a <link> tag in the HTML head element:
<link rel="stylesheet" type="text/css" href="path/to/style.css">

The CSS specification is the be‐all, end‐all reference for CSS, but as before it may be too verbose to use right away.

What you want can be done with a:hover, yes. a selects all <a> elements (i.e. links) and :hover selects all that are being hovered over. With that selector you can change the background color with [font=monospace]background-color[/font].

CSS can affect all elements of a specific type:
p
{
font-weight: bolder; /* Makes all links bold */
}

It can also select children of elements:
p a
{
text-decoration: overline; /* Adds an overline to all links in <p> */
}

Multiple elements:
em,strong
{
text-transform: uppercase; /* Makes all <em> and <strong> uppercase */
}

If all else fails, you can use classes and ids in your HTML as hooks for CSS:
.article
{
color: #FF0000; /* All elements with class="article" are now red */
}
#title
{
color: #0000FF; /* The element with id="title" is now blue */
}
The difference between class and id is that a particular ID value should appear only once on the page?that?s why they call it ID!

As an aside, if a link URL is followed by an ID, the page will automatically scroll down when loaded.
<a href="When">http://www.example.com/greetings.html#information">When you click this link, the page will scroll down to the element with id="information"</a>

Re: WYSIWYG

Posted by: Abwayax
Date: 2009-07-03 18:00:19
Oh, by the way, please don't use GCL as a reference when learning HTML. The code is awful and invalid (although that's probably because I use XML-style self-closing tags and have not specified the content as XHTML, but it's not valid XHTML transitional either). I also use table layouts (which is a cardinal sin among web designers nowadays, even though nearly every example I learn from used tables… see, that's what happens when you write bad code - people learn from it and also write bad code)

I don't bother to fix it up now, though, due to the wiki transition. Monobook is valid XHTML last time I checked.

This was one of the reasons I didn't want to port the old GCL theme to MediaWiki: it's bad code.

Re: WYSIWYG

Posted by: Ratipharos
Date: 2009-07-03 18:09:18
So, here is the page thus far. I am going on fine except for the hover. If it looks awful, oh well. I am still working on it. I used a random color for the hover. But the hover doesn't work.