The Glade 4.0

"Turn the lights down, the party just got wilder."
It is currently Sun Nov 24, 2024 11:47 am

All times are UTC - 6 hours [ DST ]




Post new topic Reply to topic  [ 18 posts ] 
Author Message
 Post subject: HTML Coding
PostPosted: Fri Oct 21, 2011 5:29 pm 
Offline

Joined: Wed Sep 02, 2009 9:12 pm
Posts: 2366
Location: Mook's Pimp Skittle Stable
So somehow, I'm the most apt person in my organization to re-work our website/keep it managed.

Currently, I'm coding in notepad. While workable, this is a little bit painful. Most of the coding I'm doing is fairly simple additions to the existing CSS code, and adding/modifying content. Once I've modified the code, I upload using WinSCP to our universities server.

What do you use to write HTML code? Notepad? Some other program? I'm interested to know.

_________________
Darksiege: You are not a god damned vulcan homie.


Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: Fri Oct 21, 2011 5:30 pm 
Offline
Web Ninja
User avatar

Joined: Wed Sep 02, 2009 8:32 pm
Posts: 8248
Location: The Tunt Mansion
I'm a fan of Sublime Text 2 in Windows (download link above the comments). For FTP, Filezilla is one of the better (and free!) clients.

Sublime Text 2 is free but it'll pop up a little window asking you to purchase it every 30 saves or so. You can decline and keep working as usual.

Feel free to ask any questions you might have while you're in the process of rebuilding!


Top
 Profile  
Reply with quote  
 Post subject: HTML Coding
PostPosted: Fri Oct 21, 2011 5:44 pm 
Offline
pbp Hack
User avatar

Joined: Wed Sep 02, 2009 8:45 pm
Posts: 7585
Notepad works fine for the basic stuff. I use dreamweaver since I have it.

_________________
I prefer to think of them as "Fighting evil in another dimension"


Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: Fri Oct 21, 2011 5:44 pm 
Offline

Joined: Wed Sep 02, 2009 9:12 pm
Posts: 2366
Location: Mook's Pimp Skittle Stable
Hmm, I'll check Sublime Text out. WinSCP is keeping me set for uploads atm- I'll keep Filezilla in mind if I need to switch at some point in the future.

I will ask here though about indents and break tags. From what I understand, I should be able to use a style="text-indent:5%" attribute with the <br /> tag, just like I can with the <p> tag.

While the latter works, however, the former does not. Am I missing something easy?

What I'm trying to do is a two-tiered indent system with a main heading, then a list of dates indented from that, with talk titles/speakers indented again under each date.

I'm currently just using a two-indent system set up as:

<p style="margin-left:5%;text-indent:-5%"> which leaves the header at one level and all following text on another.

I did figure out how to use hidden/unhidden portions of a page today to expand/contract subsections, and that was quite helpful in organizing some stuff.

_________________
Darksiege: You are not a god damned vulcan homie.


Top
 Profile  
Reply with quote  
 Post subject: Re:
PostPosted: Fri Oct 21, 2011 6:01 pm 
Offline
Web Ninja
User avatar

Joined: Wed Sep 02, 2009 8:32 pm
Posts: 8248
Location: The Tunt Mansion
NephyrS wrote:
I will ask here though about indents and break tags. From what I understand, I should be able to use a style="text-indent:5%" attribute with the <br /> tag, just like I can with the <p> tag.


Applying styles to the <p> tags works because they wrap around content <p>Like this</p>. Styles will apply to anything contained inside of them. The <br /> tag however is standalone and doesn't have anything inside of it (nay, can't have anything inside of it), so applying styles to the tag itself is useless.

The best markup I can think of for what I'm seeing in my head based off of your description:

Code:
<style type="text/css">
h2 { margin:0; }
h3.date { margin-left:5%; }
p.event-desc { margin-left:10%; }
</style>

<h2>This is a Header</h2>
<h3 class="date">This would be a date</h3>
<p class="event-desc">This paragraph is describing the particular event</p>


Note that embedded (above) or, preferably, external stylesheets are always a better idea than inline styles (applying directly to the tag itself). I used margin above because it will move the entire element away from the left side, whereas text-indent only applies to the first line of a paragraph.


Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: Fri Oct 21, 2011 6:04 pm 
Offline

Joined: Wed Sep 02, 2009 9:12 pm
Posts: 2366
Location: Mook's Pimp Skittle Stable
Hmm, cool.

I'll see about editing the style sheets to include that- I need to make sure it doesn't mess with the existing headers, but that should make it a lot easier to code in the future.

I'm slowly moving from lengthy and painful workarounds to more refined methods of coding that will make it easier in the future.

_________________
Darksiege: You are not a god damned vulcan homie.


Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: Fri Oct 21, 2011 6:05 pm 
Offline
Web Ninja
User avatar

Joined: Wed Sep 02, 2009 8:32 pm
Posts: 8248
Location: The Tunt Mansion
If you don't want to modify existing content, just make sure to use class selectors (like h3.date {}) instead of tag selectors (just h3 {}) which would only apply to the newer <h3 class="date">...</h3> code.


Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: Fri Oct 21, 2011 7:02 pm 
Offline

Joined: Thu Sep 03, 2009 10:03 am
Posts: 4922
The last time I edited HTML it was in PSPad, but that was a while ago. :)


Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: Fri Oct 21, 2011 7:16 pm 
Offline
User avatar

Joined: Thu Sep 03, 2009 3:08 am
Posts: 6465
Location: The Lab
I havn't done any programming to speak of, but I know that UltraEdit has a lot of programming features for specific languages.

I use Notepad++ as a major upgrade over standard Notepad for editing config files, etc.. which I spend a fair amount of time doing...


Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: Fri Oct 21, 2011 10:43 pm 
Offline

Joined: Wed Sep 02, 2009 10:49 pm
Posts: 3455
Location: St. Louis, MO
vi

Well, vim

_________________
Image


Top
 Profile  
Reply with quote  
 Post subject: Re:
PostPosted: Sat Oct 22, 2011 12:09 am 
Offline
User avatar

Joined: Wed Sep 02, 2009 10:48 pm
Posts: 753
Location: In some distant part of the Universe
I use notepad for quick edits, and MS Web Expressions for other stuff. We used Expressions in a couple of my classes, and even got a free student version, and I really, really liked it. Moreso than Dreamweaver, which I had been using prior to Expressions.

NephyrS wrote:
I will ask here though about indents and break tags. From what I understand, I should be able to use a style="text-indent:5%" attribute with the <br /> tag, just like I can with the <p> tag.

While the latter works, however, the former does not. Am I missing something easy?

What I'm trying to do is a two-tiered indent system with a main heading, then a list of dates indented from that, with talk titles/speakers indented again under each date.

I'm currently just using a two-indent system set up as:

<p style="margin-left:5%;text-indent:-5%"> which leaves the header at one level and all following text on another.

I did figure out how to use hidden/unhidden portions of a page today to expand/contract subsections, and that was quite helpful in organizing some stuff.


As far as this goes, I really think you can do this with an unordered list. Maybe I'm just misunderstanding what you are saying, but it sounds like you are trying to do exactly what unordered lists are designed for. And you can even set your own styles for the list and for different layers of the list, as Lenas described, including custom (or even no) bullets.

Then, you just add the content, and let the tags and your stylesheet handle the indents and margins.

_________________
"I Live, I Love, I Slay, and I Am Content."
- Conan the Barbarian


Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: Sat Oct 22, 2011 12:44 am 
Offline

Joined: Wed Sep 02, 2009 9:12 pm
Posts: 2366
Location: Mook's Pimp Skittle Stable
I had tried doing it with a basic unordered list, and it wasn't coming out like I wanted it to- but I might need to go back and set some different styles and see how that works out. It was the bullets of the <ul> tag that I didn't like- but maybe there's a way to make it non-bulleted.

Basically, it's a calendar type-schedule.

First heading is the semester/year
Second heading is the date/time/location
Third heading is the speakers names/titles of the talk.

From playing around with formatting, there needs to be at least a blank line between the semester/year and the date/time/location as well as between the date/time/location and the names/talk titles, or it starts to look overly crowded.

The way I have it now, I have the first headings as links to a javascript:unhide command I coded in that opens a list of all of the dates/times/locations and speakers. Within each, I'm using a structure that looks like this:

Code:
<p style="margin-left:5%;text-indent:-5%><strong>Date/TimeLocation</strong>
<br />
<br />Speaker, title
<br />Speaker, title
<br />Speaker, title


So that it breaks out looking like this:

Date/Time/Location

Speaker, Title
Speaker, Title
Speaker, Title

It's working OK for now, especially with the javascript:unhide command to cut down from several dozen listings to a few visible at a time. For future ease of updating, I can code in Lenas's suggestion of adding style categories for each of the categories to clean up the code a bit.

My next item is to tackle getting a well-organized photo gallery... And it would be nice to do some-sort of a filmstrip-style banner of randomly selected pictures if I can figure out how.

_________________
Darksiege: You are not a god damned vulcan homie.


Top
 Profile  
Reply with quote  
 Post subject: Re:
PostPosted: Sat Oct 22, 2011 3:16 am 
Offline
User avatar

Joined: Wed Sep 02, 2009 10:48 pm
Posts: 753
Location: In some distant part of the Universe
NephyrS wrote:
I had tried doing it with a basic unordered list, and it wasn't coming out like I wanted it to- but I might need to go back and set some different styles and see how that works out. It was the bullets of the <ul> tag that I didn't like- but maybe there's a way to make it non-bulleted.


Code:
ul { list-style-type: none; }


That's the style tag you're looking for to remove the bullets.

Although, you may want to give it a class selector, like Lenas said, so that it doesn't remove the bullets from any other ul tags.

Like:
Code:
ul.speaker { list-style-type: none; }


Then, when you want to use a non-bulleted list, just use the <ul class="speaker">Speaker, Title</ul>

_________________
"I Live, I Love, I Slay, and I Am Content."
- Conan the Barbarian


Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: Sat Oct 22, 2011 2:41 pm 
Offline
Web Ninja
User avatar

Joined: Wed Sep 02, 2009 8:32 pm
Posts: 8248
Location: The Tunt Mansion
This is how to do it with a definition list (better than UL in this case since it provides two levels of nesting) and without the need for break tags:

Code:
<style type="text/css">
dl { font-size:14px; list-style-type:none; }

dt { font-size:16px; font-weight:bold; margin-bottom:5px; border-bottom:1px solid #ccc; }

dd.last { margin-bottom:15px; }
</style>

<dl>
   <dt>10-20-11, 12:00pm, San Diego, CA</dt>
   <dd>Speaker One, MD</dd>
   <dd class="last">Speaker Two</dd>
   
   <dt>11-15-11, 01:00pm, Nashville, TN</dt>
   <dd>Speaker Three</dd>
   <dd>Speaker Four</dd>
   <dd class="last">Speaker Five</dd>
</dl>


Nice clean markup with no extra tags, and you still get good formatting :D Note the class of "last" which is taking the place of break tags and pushing proceeding content down with a margin-bottom:15px;


Top
 Profile  
Reply with quote  
 Post subject: Re: HTML Coding
PostPosted: Mon Oct 24, 2011 8:46 am 
Offline
The Dancing Cat
User avatar

Joined: Wed Nov 04, 2009 2:21 pm
Posts: 9354
Location: Ohio
Rorinthas wrote:
Notepad works fine for the basic stuff. I use dreamweaver since I have it.

This. I enjoy Dreamweaver.

_________________
Quote:
In comic strips the person on the left always speaks first. - George Carlin


Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: Mon Oct 31, 2011 11:02 am 
Offline

Joined: Wed Sep 02, 2009 9:12 pm
Posts: 2366
Location: Mook's Pimp Skittle Stable
Ok, so thanks to your wonderful suggestions, I've gotten a lot of the formatting cleaned up and nailed down. I went with editing the external style sheet, and everything looks much cleaner.

But, I've got a new question:

How would I go about coding a vote/poll via the website?

_________________
Darksiege: You are not a god damned vulcan homie.


Top
 Profile  
Reply with quote  
 Post subject: Re: HTML Coding
PostPosted: Mon Oct 31, 2011 11:15 am 
Offline
God of the IRC
User avatar

Joined: Wed Sep 02, 2009 7:35 pm
Posts: 3041
Location: The United States of DESU
Code:
<form method="post" action="countvote.html">
  Is Hinagiku awesome?<br>
  <input type="radio" name="answer_hinagiku" value="yes">Yes<br>
  <input type="radio" name="answer_hinagiku" value="no">No<br>
  <input type="submit" name="submit_hinagiku" value="Vote">
</form>


You generally need some sort of server side scripting (php, cgi, asp, whatever) to process the vote in countvote.html.

_________________
Image


Top
 Profile  
Reply with quote  
 Post subject:
PostPosted: Mon Oct 31, 2011 11:46 am 
Offline

Joined: Wed Sep 02, 2009 9:12 pm
Posts: 2366
Location: Mook's Pimp Skittle Stable
Hmm, ok- thanks. I'll see what I can do about the other end of things.

_________________
Darksiege: You are not a god damned vulcan homie.


Top
 Profile  
Reply with quote  
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 18 posts ] 

All times are UTC - 6 hours [ DST ]


Who is online

Users browsing this forum: No registered users and 184 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB® Forum Software © phpBB Group