The Glade 4.0
https://gladerebooted.net/

HTML Coding
https://gladerebooted.net/viewtopic.php?f=5&t=7440		 Page 1 of 1
Author:  NephyrS [ Fri Oct 21, 2011 5:29 pm ]
Post subject:  HTML Coding
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.
Author:  Lenas [ Fri Oct 21, 2011 5:30 pm ]
Post subject: 
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!
Author:  Rorinthas [ Fri Oct 21, 2011 5:44 pm ]
Post subject:  HTML Coding
Notepad works fine for the basic stuff. I use dreamweaver since I have it.
Author:  NephyrS [ Fri Oct 21, 2011 5:44 pm ]
Post subject: 
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.
Author:  Lenas [ Fri Oct 21, 2011 6:01 pm ]
Post subject:  Re:
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.
Author:  NephyrS [ Fri Oct 21, 2011 6:04 pm ]
Post subject: 
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.
Author:  Lenas [ Fri Oct 21, 2011 6:05 pm ]
Post subject: 
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.
Author:  Lex Luthor [ Fri Oct 21, 2011 7:02 pm ]
Post subject: 
The last time I edited HTML it was in PSPad, but that was a while ago. :)
Author:  Midgen [ Fri Oct 21, 2011 7:16 pm ]
Post subject: 
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...
Author:  shuyung [ Fri Oct 21, 2011 10:43 pm ]
Post subject: 
vi

Well, vim
Author:  Caleria [ Sat Oct 22, 2011 12:09 am ]
Post subject:  Re:
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.
Author:  NephyrS [ Sat Oct 22, 2011 12:44 am ]
Post subject: 
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.
Author:  Caleria [ Sat Oct 22, 2011 3:16 am ]
Post subject:  Re:
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>
Author:  Lenas [ Sat Oct 22, 2011 2:41 pm ]
Post subject: 
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;
Author:  Hopwin [ Mon Oct 24, 2011 8:46 am ]
Post subject:  Re: HTML Coding
Rorinthas wrote:
Notepad works fine for the basic stuff. I use dreamweaver since I have it.

This. I enjoy Dreamweaver.
Author:  NephyrS [ Mon Oct 31, 2011 11:02 am ]
Post subject: 
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?
Author:  Mookhow [ Mon Oct 31, 2011 11:15 am ]
Post subject:  Re: HTML Coding
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.
Author:  NephyrS [ Mon Oct 31, 2011 11:46 am ]
Post subject: 
Hmm, ok- thanks. I'll see what I can do about the other end of things.
Page 1 of 1 All times are UTC - 6 hours [ DST ]
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/