So i'm taking a web design class next year and I was wondering what i can do to prep myself for it, and where to start with basic web design, I've been wanting to learn for awhile now, but just now did i have room for it, and I was wondering if there are any books or guides or starting points anyone would recommend.
The class will start like this.
Day 1: What does WWW, HTTP, and URL stand for?
Day 2: What is the internet?
Day 3: How does the internet work?
Day 4: What is the internet used for?
Day 5: We'll make our first website. Copy paste this *code here* and try it.
Those first year classes are always so worthless -_-". Its like if my grandma was trying to take the course.
Scotty should be posting in 3..2..1..
Just start from the beginning at http://www.w3schools.com (http://www.w3schools.com). Click 'Learn HTML' on the left and go from there. Pretty easy to follow.
After you go through HTML, read through and try the CSS section. Those are the two important things you need to know first.
Quote from: igufed on June 07, 2011, 02:59:38 PM
Just start from the beginning at http://www.w3schools.com (http://www.w3schools.com). Click 'Learn HTML' on the left and go from there. Pretty easy to follow.
After you go through HTML, read through and try the CSS section. Those are the two important things you need to know first.
Igu hit the nail on the head. There's WAY too much to decide on when it comes to design, but the w3schools' site is a phenomenal resource for everything world wide web. If you want my personal opinion, learn the following in this order:
HTML
HTML5
CSS2
CSS3
Javascript (Extremely marketable with good knowledge of Javascript, it's one of, if not Google's most heavily relied upon, blessed technologies they use).
If you want to get out of design and into development with full blow applications, continue on with...
Either PHP/Python/Java, take your pick, I would recommend Python.
SQL would help as well. Probably easiest to get started with MySQL, but eventually Oracle is what's going to make you marketable.
Quote from: Scotty on June 07, 2011, 04:48:53 PM
Quote from: igufed on June 07, 2011, 02:59:38 PM
Just start from the beginning at http://www.w3schools.com (http://www.w3schools.com). Click 'Learn HTML' on the left and go from there. Pretty easy to follow.
After you go through HTML, read through and try the CSS section. Those are the two important things you need to know first.
Igu hit the nail on the head. There's WAY too much to decide on when it comes to design, but the w3schools' site is a phenomenal resource for everything world wide web. If you want my personal opinion, learn the following in this order:
HTML
HTML5
CSS2
CSS3
Javascript (Extremely marketable with good knowledge of Javascript, it's one of, if not Google's most heavily relied upon, blessed technologies they use).
If you want to get out of design and into development with full blow applications, continue on with...
Either PHP/Python/Java, take your pick, I would recommend Python.
SQL would help as well. Probably easiest to get started with MySQL, but eventually Oracle is what's going to make you marketable.
Ah the two main people I wanted to hear from ;D I figured the class would be like what t-rok said :/ oh well, but this is what i was looking for :D I was originally going to take computer science, seeing that I know the teacher and he actually teaches good programming, but my school canceled it claiming "too few of people signed up". Which is complete bull shit, they said last year that too few of people signed up for jazz band. There were 15 people signed up. thats 5 more than the ten requirement >.> Anyways enough of me ranting on my school x) thanks for the info.
Quote from: sayers6 on June 08, 2011, 11:31:37 AM
Quote from: Scotty on June 07, 2011, 04:48:53 PM
Quote from: igufed on June 07, 2011, 02:59:38 PM
Just start from the beginning at http://www.w3schools.com (http://www.w3schools.com). Click 'Learn HTML' on the left and go from there. Pretty easy to follow.
After you go through HTML, read through and try the CSS section. Those are the two important things you need to know first.
Igu hit the nail on the head. There's WAY too much to decide on when it comes to design, but the w3schools' site is a phenomenal resource for everything world wide web. If you want my personal opinion, learn the following in this order:
HTML
HTML5
CSS2
CSS3
Javascript (Extremely marketable with good knowledge of Javascript, it's one of, if not Google's most heavily relied upon, blessed technologies they use).
If you want to get out of design and into development with full blow applications, continue on with...
Either PHP/Python/Java, take your pick, I would recommend Python.
SQL would help as well. Probably easiest to get started with MySQL, but eventually Oracle is what's going to make you marketable.
Ah the two main people I wanted to hear from ;D I figured the class would be like what t-rok said :/ oh well, but this is what i was looking for :D I was originally going to take computer science, seeing that I know the teacher and he actually teaches good programming, but my school canceled it claiming "too few of people signed up". Which is complete bull shit, they said last year that too few of people signed up for jazz band. There were 15 people signed up. thats 5 more than the ten requirement >.> Anyways enough of me ranting on my school x) thanks for the info.
Generally speaking, a lot of the high school classes related to scripting/programming/etc... are taught at a very low and rudimentary level assuming that the general audience has absolutely no understanding of how web sites work. I would actually go as far as to guess, depending on how many semesters the class runs for, you'll only learn everything that is in the HTML and
maybe CSS section. Both of those sections can easily be covered in a weekend, if not a single day depending on how quickly you pick up on it. I'd say sit down one evening or over the weekend and knock some of the tutorials out. If you have any questions, post them up and we'll take a look at them.
EDIT: That goes for anyone that's interested. I'm more than happy to help out anyone that wants to get into web development. You can post up any questions you got, or you can PM me, windows live me (if you have me), anything. I think I get just as much satisfaction out of helping teach people web development as I do actually doing it.
Quote from: Scotty on June 08, 2011, 12:23:24 PM
Quote from: sayers6 on June 08, 2011, 11:31:37 AM
Quote from: Scotty on June 07, 2011, 04:48:53 PM
Quote from: igufed on June 07, 2011, 02:59:38 PM
Just start from the beginning at http://www.w3schools.com (http://www.w3schools.com). Click 'Learn HTML' on the left and go from there. Pretty easy to follow.
After you go through HTML, read through and try the CSS section. Those are the two important things you need to know first.
Igu hit the nail on the head. There's WAY too much to decide on when it comes to design, but the w3schools' site is a phenomenal resource for everything world wide web. If you want my personal opinion, learn the following in this order:
HTML
HTML5
CSS2
CSS3
Javascript (Extremely marketable with good knowledge of Javascript, it's one of, if not Google's most heavily relied upon, blessed technologies they use).
If you want to get out of design and into development with full blow applications, continue on with...
Either PHP/Python/Java, take your pick, I would recommend Python.
SQL would help as well. Probably easiest to get started with MySQL, but eventually Oracle is what's going to make you marketable.
Ah the two main people I wanted to hear from ;D I figured the class would be like what t-rok said :/ oh well, but this is what i was looking for :D I was originally going to take computer science, seeing that I know the teacher and he actually teaches good programming, but my school canceled it claiming "too few of people signed up". Which is complete bull shit, they said last year that too few of people signed up for jazz band. There were 15 people signed up. thats 5 more than the ten requirement >.> Anyways enough of me ranting on my school x) thanks for the info.
Generally speaking, a lot of the high school classes related to scripting/programming/etc... are taught at a very low and rudimentary level assuming that the general audience has absolutely no understanding of how web sites work. I would actually go as far as to guess, depending on how many semesters the class runs for, you'll only learn everything that is in the HTML and maybe CSS section. Both of those sections can easily be covered in a weekend, if not a single day depending on how quickly you pick up on it. I'd say sit down one evening or over the weekend and knock some of the tutorials out. If you have any questions, post them up and I'll take a look at them.
Its true. My school was really awesome when it came to how slow you got taught though. I put in a request for a special advanced course for me and a select few students and we ended up re-writing the entire course so that anyone could take it and enjoy it. Haha :P
I took web design at my college, and everything T-rok said is basically what we learn the first day. Granted, they required a certain typing speed and general knowledge of a computer before you signed up. But basically we spent the entire semester learning HTML and then creating our own website with it.
If you want to aim to impress the teacher and the other classmates, go do the HTML tutorial on the w3schools website, and then also go into HTML5 and study that. You don't have to get too intensive with the Javascript for things like canvas, but just an understanding of the new tags, what's being deprecated, etc...
A good example would be if they discussed things like frames and the valign property for td's, just bring up how they're being deprecated in HTML5 and how that's an indication not to use them.
Alright, so I know I'm kind of late on this, but I just wanted to say, if you're looking for a good written resource for learning anything web design, and you're new to HTML, CSS, Javascript etc., then I reccommend the Headfirst series. They provide a good way to learn things and provide a humorous and better way of learning (imo). They have many helpful books covering HTML, CSS, Javascript, Python, SQL, and several others. The link to the website is here:http://headfirstlabs.com/ (http://headfirstlabs.com/) The only book they're missing is a good C++ guide >_<. So there's my input on the topic.
Alright, does anyone have a good video page for learning html? I've tried the written resources, and didn't work the best, a video at educator.com helped alot....but it costs $35/month for more videos >:( So any free sites?
Try this:
http://www.youtube.com/watch?v=GwQMnpUsj8I
After this, you should be good to go over to w3schools and use their tutorials. You aren't going to find many free/good tutorials that go far in depth.
Thanks Scotty, you're always a great help :)
Saw this on lifehacker today, thought it was relevant and potentially useful for you:
http://www.dontfeartheinternet.com/the-basics/dont-fear-the-browser
Quote from: Scotty on July 22, 2011, 04:23:11 PM
Saw this on lifehacker today, thought it was relevant and potentially useful for you:
http://www.dontfeartheinternet.com/the-basics/dont-fear-the-browser
I'm not interested in web design in the least, but that was pretty damn funny.
How do I center an image with CSS? My teacher won't tell me, cause I'm 10 steps ahead of everyone else.
Quote from: sayers6 on August 24, 2011, 11:12:55 AM
How do I center an image with CSS? My teacher won't tell me, cause I'm 10 steps ahead of everyone else.
Is the image in anything? Table or a div? Not sure how far along your class is or how your site layout is, but, you could put 'text-align:center;' in your css for the parent object that the image is in.
My simple example below is one way. Your site may differ depending on the layout and width of things..
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<div style="width:100%;text-align:center;">
<img src="m1.png">
</div>
</BODY>
</HTML>
See it live here: http://igufed.com/test/
Edit:
Not sure if you wanted an image centered vertically and horizontally..
But, this example works with fixed width/height:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<div style="background:rgb(200,200,200);width:500px;height:400px;display:table-cell;vertical-align:middle;text-align:center;">
<img src="m1.png">
</div>
</BODY>
</HTML>
Live: http://igufed.com/test2/
text-align is great for centering the contents of a container. In igu's examples, he's centering the contents of everything within the div container. You may have other objects within that container that you don't want centered, in which case you want to only center JUST the <img> tag. If you just want to center the <img> tag alone, you'll need to specify the margin properties in the CSS.
<html>
<head>
<!-- Header stuff like title and links go here -->
</head>
<body>
<div>
<img style="display:block; margin-left:auto; margin-right:auto;" src="image.png" alt="centered-image" />
<img style="display:block; margin-left:0; margin-right:0;" src="image.png" alt="non-centered-image" />
</div>
</body>
</html>
By not specifying text-align in the div container and setting the margin to auto for individual objects, the contents of the <div> container will not collectively get centered. That way, if you have more than just an image in a container, or have nested containers, you won't have all contents of the container centered or have to go through multiple contained objects and reset the text-align property if you don't want them all centered. Just another approach is all depending on your requirements.
Not sure if I made that clear, so to summarize, simply put:
If you want everything between <div> and </div> centered, use the text-align: center method that Igu posted, if you want individual objects like just the <img> tag centered, do what I did with setting it to its own block, and equalizing the margins with margin: auto.
!!!WARNING!!!: using the above code that I provided by itself will not work in IE6 (not speaking with regards to the src of the image). IE6 doesn't recognize the margin:auto method for centering UNLESS if you specify a DOCTYPE. If you aren't sure what they are, read here: http://www.w3.org/QA/2002/04/valid-dtd-list.html
Don't sweat it if you don't understand it, they're uselessly overly-verbose, which is why HTML5 is simply going to the doctype of <!DOCTYPE html>. Give one of the doctypes provided in that link to the VERY TOP of the HTML file, directly above the line that reads <html> and you're good.
EDIT: Also, good to hear you're so ambitious about the class! If you have any coding questions, I've found http://stackoverflow.com/ invaluable. Make sure you search for your answer first before submitting a question.
Thanks guys, alot of the stuff on w3schools is so useful, but every now and then there is something I can't quite find on there. And I wanted to start using the CSS because she was having us use all the depreciated stuff like <center> and <font> and so on, and it bugged me. I can't stand stuff being incorrect xD
EDIT:@igufed, I wanted the img centered horizontally, vertically I can somewhat figure out, and I don't care about it yet. The only thing I could find on how to center it was <center>
Quote from: sayers6 on August 25, 2011, 08:08:37 AM
Thanks guys, alot of the stuff on w3schools is so useful, but every now and then there is something I can't quite find on there. And I wanted to start using the CSS because she was having us use all the depreciated stuff like <center> and <font> and so on, and it bugged me. I can't stand stuff being incorrect xD
EDIT:@igufed, I wanted the img centered horizontally, vertically I can somewhat figure out, and I don't care about it yet. The only thing I could find on how to center it was <center>
Glad to see you're catching on with it! By having knowledge of <center> and <font> going away in HTML5, you're already ahead of the game from many web developers.
Next question, how do I color the text in table, with CSS?
If you want all of the table's text to be a certain color, you can just do:
<table style="color: #whatever you want here">
<!-- Table stuff -->
</table>
If you just want a certain row or cell's text colored, you can do:
<table>
<tr style="color: #for the row">
<td style="color: #for the cell"><!-- Table stuff --></td>
</tr>
</table>
Quote from: Tuffi on August 25, 2011, 11:57:26 AM
<table>
<tr style="color: #for the row">
<td style="color: #for the cell"><!-- Table stuff --></td>
</tr>
</table>
Also, if you aren't quite certain on what the different Hexadecimal color codes mean, or need a decent set of examples, Wikipedia has an excellent article on them:
http://en.wikipedia.org/wiki/Web_colors
For some reason, I've always used rgb(X,X,X) with integers.. Easier for me to understand/use.
It's nothing more than preference. If I had to speculate, I'd guess hex color codes are still around from the "pre-css" era, and when the rgb() method was put into the spec, there was many gripes over the thought of deprecating hex color codes that they left them in. From what I understand, a majority of users still use hex color codes. I've been doing this for several years and never once used the rgb() feature, if only because I am comfortable with the hex color code format.
To much work into web design. But when i was interested i made one in 6th grade and was pretty popular because websites were the hip thing. Now its dead so i stopped :(
Not updated but if you want to see - http://videogate.webs.com/
From the second I learned it I've loved hexadecimal colors. I don't wanna switch to rgb. :p Not yet anyways :) and thanks Tuffi.
Question on buttons, is there an easy way to set them up, because my way of making an image and anchoring a link to it is a bit time-consuming, but with with i saw on w3schools about buttons didn't give the best explanation on how to use them. But so far my web page looks fairly nice I think, I even decided to make it a website :) just so I could get extra credit. The teachers being mean though, she knows I'm nice and like to help people, and I'm so far ahead, that she now sends the students to me for the second half of class, to slow me down.
Quote from: sayers6 on August 26, 2011, 12:07:51 AM
From the second I learned it I've loved hexadecimal colors. I don't wanna switch to rgb. :p Not yet anyways :) and thanks Tuffi.
Question on buttons, is there an easy way to set them up, because my way of making an image and anchoring a link to it is a bit time-consuming, but with with i saw on w3schools about buttons didn't give the best explanation on how to use them. But so far my web page looks fairly nice I think, I even decided to make it a website :) just so I could get extra credit. The teachers being mean though, she knows I'm nice and like to help people, and I'm so far ahead, that she now sends the students to me for the second half of class, to slow me down.
What exactly are you attempting to do with the button? Can you put it into context? I'm not entirely sure why you need a button to encase an <img> objection in an <a> object. Can you post up a code sample for what you currently have and a bit more of an explanation for what you are trying to accomplish?
Currently I'm using a small image, which looks like a button, to link to another webpage, I would like to figure out how to use the button element(or whatever it's called) in html, rather than having to make an image to use for the link. Also I'd like to hide the table I'm using unless a button has been pressed.
EDIT:
<a href="http://rockislandschools.org/risd/"><img src="Schoollink.gif" border="0"></a>
Is what I'm currently doing.
Alrighty! Now we're getting froggy. I'll tackle the hide/show table part first, as this one's gonna probably be a bit of a doozy. I'll put the code up first:
http://jicamadickables.dyndns.org/table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>trigger display</title>
<style>
#table {
display: none;
border 1px solid gray;
border-collapse: collapse;
}
th {
border: 1px solid gray;
}
td {
border: 1px solid gray;
}
</style>
</head>
<body>
<button onClick="triggerTable()" >Click me to display/hide the table</button>
<table id="table">
<tr>
<th>Title</th>
<th>Another Column</th>
<th>Yet another column</th>
<th>Another for giggles</th>
</tr>
<tr>
<td>value</td>
<td>value</td>
<td>value</td>
<td>value</td>
</tr>
<tr>
<td>value</td>
<td>value</td>
<td>value</td>
<td>value</td>
</tr>
</table>
</body>
<script type="text/javascript">
var myTable = document.getElementById("table");
function triggerTable() {
var myTableDisplay = myTable.style.display;
if (myTableDisplay == 'block') {
myTable.style.display = 'none';
} else {
myTable.style.display = 'block';
}
}
</script>
</html>
notice the <style> ... </style> at the top. I put all the css at the top using an id for the table (kinda like classes, but id's are supposed to be unique to just ONE object, not a bunch) for the table.
I put the Javascript at the bottom using the <script type="text/javascript"></script> at the bottom. I can get into it later as to why I put it at the bottom, that's a different subject all together. Quick and easy to say, the page will load faster.
Without getting too into the code (that's what w3schools is for), the CSS is telling the page NOT to display the table when the html file is loaded in your browser. by saying display:none for the table, the table will not show up on the page. Now the trick is to get the <button> to show the table when clicked. In order to do that, we need to use javascript. Towards the bottom, with the <script> object, I tell it to scan the page for the object that has id="myTable", once it finds it, it will be the table. when the button is clicked, if the table is hidden, it will display it, if it is displayed, clicking the button will hide it.
Something like this is probably won't help you much at this stage. Going through the javascript classes at w3schools will definitely help speed you along. You have my messenger info, so hit me up and I can try and walk you through it a bit more tomorrow.
Thanks again Scotty :)
If you want to use <button> to make an image link (there's several different ways to link images, this is only one, and not the best), you could try either of the following two examples:
http://jicamadickables.dyndns.org/buttonlarge.html
http://jicamadickables.dyndns.org/buttonsmall.html
buttonlarge.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>button styling</title>
<style>
#styled {
width: 76px;
height: 77px;
background: #D8D8D8 url("Sword.png") center center no-repeat;
border: 5px solid gray;
cursor: pointer;
}
#notStyled {
width: 76px;
height: 77px;
background: transparent url("Sword.png") center center no-repeat;
border: 0;
margin-top: 25px;
}
</style>
</head>
<body>
<button id="styled"></button>
<br>
<button id="notStyled"></button>
</body>
<script type="text/javascript">
button = document.getElementById('styled');
image = document.getElementById('notStyled');
button.addEventListener("click", link, false);
image.addEventListener("click", link, false);
function link() {
window.location='http://www.stick-online.com';
}
</script>
</html> buttonsmall.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>button styling</title>
<style>
#styled {
width: 76px;
height: 77px;
background: #D8D8D8 url("Sword.png") center center no-repeat;
border: 5px solid gray;
cursor: pointer;
}
#notStyled {
width: 76px;
height: 77px;
background: transparent url("Sword.png") center center no-repeat;
border: 0;
margin-top: 25px;
}
</style>
</head>
<body>
<button id="styled" onClick="window.location='table.html'"></button>
<br>
<button id="notStyled" onClick="window.location='table.html'"></button>
</body>
</html> So what's the difference between the two? buttonlarge.html is an ideal construct for larger projects. It doesn't use inline javascript so the page loads better, is easier to read, maintain, debug, and if pushed out to an external file, under different circumstances could be cached while the dynamically rendered HTML document couldn't. In this small case example, it's overkill, but it shows you how little HTML you really need, and how a lot of it is CSS and javascript.
buttonsmall.html is more fitting for this small example. The javascript is minimized down to inline javascript, embedded on each button. Something this small doesn't require much maintenance or ease of reading, so we're fine using this in such a scenario.
Javascript and which is better aside, the way it works is you stylize the button to use a background-image. You could theoretically put text between
<button ...></button> and it will overlay the picture, but I didn't want to get overly complicated. If you load the examples, the top one looks more like a button, with an exaggerated border thickness and background color of "gray" and even a cursor image similar to what you would see if you hovered your mouse over an <a> link. The bottom looks nothing at all like a button, vice a plain image. No cursor, background color, nothing. If you click both, they take you back here to stick-online.com. The way you'd link them is by using javascript, but you're using the onClick event listener inline with the button object. Without getting overly complicated, all you'd need to do is change the URL. If you want me to get into what window.location does, I'd be happy to, but unless you're familiar with Javascript and the DOM, it'll likely just confuse you.
I still plan to explain my previous hide/show example, I just have to take the time to break it out a bit more. You can likely expect something later this evening on that.
Why does buttonsmall open up a table? I see it in the html I mean, but I thought you were making them all link back to stick-online.com *confusion* Other than that, I'm finding it amazing how I can pick out what things are doing in the code, while before I was beyond clueless...It's a hell of alot easier than I thought.
EDIT: My only confusion is this <meta charset="utf-8" />
EDIT: EDIT:Also is there a way to host a web page cheaply, I would just like to see how the whole process works and be able to test it remotely.
Quote from: sayers6 on August 26, 2011, 11:13:41 PM
EDIT: EDIT:Also is there a way to host a web page cheaply, I would just like to see how the whole process works and be able to test it remotely.
My current web host has a 2 week free trial going on. Other than that, it is 8.95/mo. for virtually unlimited everything. Email addresses, domains (you still have to purchase the domain name, but, I'm pretty sure you get one free one included in your hosting plan), subdomains, mysql databases..
http://dreamhost.com
There are many web hosts out there, try a google search to find a good one that suits you. But, if you do sign up for Dreamhost, PM me for my info to say who referred you so we both benefit. ;)
Quote from: igufed on August 27, 2011, 12:45:47 PM
Quote from: sayers6 on August 26, 2011, 11:13:41 PM
EDIT: EDIT:Also is there a way to host a web page cheaply, I would just like to see how the whole process works and be able to test it remotely.
My current web host has a 2 week free trial going on. Other than that, it is 8.95/mo. for virtually unlimited everything. Email addresses, domains (you still have to purchase the domain name, but, I'm pretty sure you get one free one included in your hosting plan), subdomains, mysql databases..
http://dreamhost.com
There are many web hosts out there, try a google search to find a good one that suits you. But, if you do sign up for Dreamhost, PM me for my info to say who referred you so we both benefit. ;)
I've been looking at dreamhost for a while now but never pulled the plug with them. They have a LOT to offer, with subversion, jabber services, python, and a LAMP stack, how satisfied have you been with them? How you had much in the way of outages or bad support?
Quote from: Scotty on August 27, 2011, 01:05:10 PM
I've been looking at dreamhost for a while now but never pulled the plug with them. They have a LOT to offer, with subversion, jabber services, python, and a LAMP stack, how satisfied have you been with them? How you had much in the way of outages or bad support?
I started with them in 2006 and have noticed zero unplanned outages (can can really only think of 1, maybe 2 planned ones that lasted a couple minutes over the years). I've never had to contact support for anything. Everything has worked pretty damn flawlessly for me.
So, if you're wanting to switch to them from another hosting company or it is your first, I 100% recommend them.
Quote from: sayers6 on August 26, 2011, 11:13:41 PM
EDIT: My only confusion is this <meta charset="utf-8" />
That is a required <meta> tag for HTML(5). According to the W3C:
QuoteIt is very important that the character encoding of any XML or (X)HTML document is clearly labeled, so that clients can easily map these encodings to Unicode.
Read that as:
QuoteJust remember to paste this into your code, so that Chrome/Firefox/Internet Explorer/Safari/etc... can understand how to display it.
If you want to get down into the weeds on it, read more here:
http://www.w3.org/International/O-charset
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>trigger display</title>
<style>
#table {
display: none;
border 1px solid gray;
border-collapse: collapse;
}
th {
border: 1px solid gray;
}
td {
border: 1px solid gray;
}
</style>
</head>
<body>
<button onClick="triggerTable()" >Click me to display/hide the table</button>
<table id="table">
<tr>
<th>Title</th>
<th>Another Column</th>
<th>Yet another column</th>
<th>Another for giggles</th>
</tr>
<tr>
<td>value</td>
<td>value</td>
<td>value</td>
<td>value</td>
</tr>
<tr>
<td>value</td>
<td>value</td>
<td>value</td>
<td>value</td>
</tr>
</table>
</body>
<script type="text/javascript">
var myTable = document.getElementById("table");
function triggerTable() {
var myTableDisplay = myTable.style.display;
if (myTableDisplay == 'block') {
myTable.style.display = 'none';
} else {
myTable.style.display = 'block';
}
}
</script>
</html>
Alright, sorry for the double post, but I'm going to explain how to take this example of showing and hiding the table and plug it in elsewhere. To summarize into different groups so that you can understand it a bit better, imagine a dumbed down generic view of the syntax:
<html>
<head>
<!-- all your header info, title, meta, links, etc.. -->
<style>
<!-- CSS goes here -->
</style>
</head>
<body>
<!-- Your table and other stuff to display as usual -->
</body>
<script type="text/javascript">
<!-- All your javascript -->
</script>
</html>
So I've essentially summarized the first code block with the second one. With that understanding, there's a few lines in the first code block I want to elaborate on. The first is <button onClick="triggerTable()" >Click me to display/hide the table</button> . What you see next to button, the onClick="..." is an "Event Trigger". Essentially, an event occurs (i.e. user clicking the mouse on it), trigger an action. The action that is taken is defined in the onClick="action". the value read is a custom name I've called it, triggerTable. triggerTable is a javascript function that is seen down below between the <script ...></script> tags. I'm not going to get into the javascript, as to jump straight into trying to explain the javascript is going to confuse you, especially since we are skipping straight to the DOM portion. Another key part is the line directly beneath that reads: <table id="table"> . You may have seen some CSS stuff done with object ID's, where you can style them in CSS (as I have also done in this example), Javascript also works with ID's as well, and the specific function I've created relies on finding a table that has id="table" set so that it knows what table to hide or show. Those are the two key things to remember.
So say you want to plug this in elsewhere... How do you do it? It isn't as hard as it may seem. Create any standard table, however you want it. Style it, give it as much values as you want, just remember to give it an id of table using id="table". The hiding and showing of the table relies on it having an id of "table". DO NOT use id="table" more than once in your file. If you have a need to do more than one hiding/showing, let me know and I'll see you through that. Also, whatever it is you want to have trigger the hiding and showing of the table, it can be a button, it could be an anchor, hell, it could be a paragraph, or <p> if you want. You just need to make sure that in the tag, like I did with button, that you use the onClick="triggerTable()" event trigger. Heck, you could theoretically have 30 different things on your page that could trigger hiding or showing the table, as you can move the onClick around as you see fit.
So to summarize, to get this to work elsewhere, paste everything (including the script tags) between <script type="text/javascript"> and </script> between </body> and </html> in your next html file. Then make sure the table that you want to have hide or disappear has an id of "table", with id="table". Also, make sure your button has onClick="triggerTable()" in it, and boom. Your all set.
Also, if you want to have the table not appear when the page loads, you want to make sure you set the CSS to not display it by setting display: none;. You can do this at the top in the <style> tags as I have, or you can put it right after the onClick in the table. So it would read <table id="table" style="display: none;">... </table>
Quote from: Scotty on August 28, 2011, 10:42:37 PM
So say you want to plug this in elsewhere... How do you do it? It isn't as hard as it may seem. Create any standard table, however you want it. Style it, give it as much values as you want, just remember to give it an id of table using id="table". The hiding and showing of the table relies on it having an id of "table".[/font]
I think I understand most of it, and also, by "Isn't as hard as it may seem", it literally took me less than a minute to implement it, I'm loving web design, I think I could actually do something with this. I have a very good memory, and that's what a lot of this needs. I never was really interested in web design, but some of the simple stuff I've seen done on here, like the PVP league, and my web class, has really got me liking this stuff. At first I tried to jump in with books, that just confused me, the single example at a time and asking questions with people works a hell of a lot better, my other question is, what do I need to do first? Learn just HTML, or HTML and CSS, or JS too? I'm afraid of trying to tackle so many things at once, and not learning the good coding habits from the start, and making it harder to fix pages in the future. Thanks everyone for the help. :)
Quote from: sayers6 on August 28, 2011, 11:38:42 PM
Quote from: Scotty on August 28, 2011, 10:42:37 PM
So say you want to plug this in elsewhere... How do you do it? It isn't as hard as it may seem. Create any standard table, however you want it. Style it, give it as much values as you want, just remember to give it an id of table using id="table". The hiding and showing of the table relies on it having an id of "table".[/font]
I think I understand most of it, and also, by "Isn't as hard as it may seem", it literally took me less than a minute to implement it, I'm loving web design, I think I could actually do something with this. I have a very good memory, and that's what a lot of this needs. I never was really interested in web design, but some of the simple stuff I've seen done on here, like the PVP league, and my web class, has really got me liking this stuff. At first I tried to jump in with books, that just confused me, the single example at a time and asking questions with people works a hell of a lot better, my other question is, what do I need to do first? Learn just HTML, or HTML and CSS, or JS too? I'm afraid of trying to tackle so many things at once, and not learning the good coding habits from the start, and making it harder to fix pages in the future. Thanks everyone for the help. :)
Learning isn't nearly as strenuous as you may think. To learn Javascript, there's less than a week's worth of books and tutorials to learn the basic constructs, past that, learning best occurs case-by-case with a couple of reminders of best practice in-between. CSS is even easier as it is often instant as to whether or not it works. You want to accomplish x, do y. Later on, you'll learn through other cases that y should be done like z.
The biggest headache you're going to run into is reading a lot of "Firefox/Chrome/Safari do this. Internet Explorer 6 do this. Internet Explorer 7 & 8 do this. 9 do this." The cross-browser compatibility is definitely going to induce headaches, and my best advice is to write everything down for reference somewhere. If you encounter something in javascript or CSS that only works on certain browsers, instead of having to re-investigate how to do it every time, if you have a running list of things you've done to overcome certain scenarios, it'll easily cut off hours off development. That and stackoverflow.com is a God-send for developers.
Also, before you make the mistake, make sure you at least have a fundamental understanding of javascript before jumping into using libraries like JQuery or Prototype. Although it may seem nice and easy to implement by the naive, if you don't have a basic understanding of how to do things in Javascript, and go straight to using a shortcut like JQuery, there
will come a time when you find yourself in a rut because you don't know how the basics work. I say this because I am a victim of my own warnings. Don't read this as "don't use JQuery", as that would be blasphemous. Google uses it, Facebook (I think) uses it, it's definitely worthy of your attention, just not your immediate attention.
Any book you would recommend? I don't have a mobile internet device yet, so I can't have w3schools with me wherever I go. :/ But I would be interested in a JS book, I love learning If-Then and things :)
Quote from: sayers6 on August 29, 2011, 10:57:44 PM
Any book you would recommend? I don't have a mobile internet device yet, so I can't have w3schools with me wherever I go. :/ But I would be interested in a JS book, I love learning If-Then and things :)
For CSS2 (pretty much the universal version): http://www.amazon.com/CSS-Mastery-Advanced-Standards-Solutions/dp/1430223979/ref=sr_1_1? (I've recommended this to others, have yet to hear from one person it wasn't the best CSS book they've bought).
CSS3 (only modern browsers support it... sorta): http://www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863/ref=sr_1_1?s=books&ie=UTF8&qid=1314676876&sr=1-1 (Co-worker was contacted by the publisher to read it and review it for them, he loves it)
Javascript - there's a couple. For the exhaustive all-encompassing version: http://www.amazon.com/JavaScript-Definitive-Guide-Activate-Guides/dp/0596805527/ref=sr_1_1?s=books&ie=UTF8&qid=1314676950&sr=1-1
For a few more advanced Javascript books, try: http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742/ref=sr_1_2?s=books&ie=UTF8&qid=1314676950&sr=1-2 and http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752/ref=sr_1_4?s=books&ie=UTF8&qid=1314676950&sr=1-4
Once you get a good understanding of javascript, if you want to get into more server side scripting like Active Server Pages, .NET, Java or PHP, they will definitely come easier to you.
I plan on buying that JavaScript one, but Borders was going out of business so I bought A CSS3 book that also covered CSS2. And I love how you said "a week's work of books", then linked to a 1098 page book. I'd hate to see your heavy reading. Anyways, I know there is a way to do some of this, and I'm nowhere near it, but how exact could you be about what a computer sees when one has Firefox 6.0, and a different one with IE6, and yet another with 7? Could you completely change what the webpage shows just off of a minor browser difference? I've seen huge differences with Firefox/IE/Chrome, but I just wonder if you could change it to where there is a difference between someone viewing with Firefox 6.0.1.01 and 6.0.1.02? Just wondering. And it is possible to have several versions of each browser without a lot of work? I'd like to see the subtle differences of each one. Also, is it a good idea to have code "layered" (I think that's what it's called anyways) or does it really not matter? Where the code is moved to the right the more tags it has around it? My teacher never seems to do it, but videos I've seen always show it, so I try to do it. Also for a beginner would you recommend using The comment lines a lot to mark what things are all the time, or just learn how to pull out what is what by looking at it? And how are the various labels done on the forums, like in the left corner where it says "Stick Online Forums" over to the right and down where it is shaded differently than the rest of the page? and so on and so forth, like how the area around the text box I'm typing into is bubbled out from the white page and stuff like that...I hope you understand this, or I may take a screen shot and highlight what I'm meaning...Cause its hard to explain...In fact I will do that. I'll post it in a bit lol.
(http://img835.imageshack.us/img835/8253/highlightedpage.png) (http://imageshack.us/photo/my-images/835/highlightedpage.png/)
Uploaded with ImageShack.us (http://imageshack.us)
I THINK what you're asking is how does it format/style certain areas different than the others? If that is correct, it's how you position your divs and giving each one different styling for how you want it to look.
This is my example of how I interpreted what you're asking: http://igufed.com/this
I took it as how do you style this text different than that text. Along with how does this area look different/stand out from that area.
Have you done anything with the <div> tag, yet? Either way, take a look at the source and see if you understand or need more info.
If I'm completely wrong on what you're asking, I'm sure Scotty will come in and answer it properly. ;)
What you did I understand how to do, But I'm only talking about the various shades and box's, not the text. Like hoe they aren't the same exact color on all of them, but they get darker on some points, is that all done with regular CSS, or are img's involved?
EDIT: Let me change that to "I know how to get very similar results to what you did using my basic knowledge of CSS" XD
A lot of the various things like <span>, margin-left/right, and id's, I'm still trying to wrap my head around...but thanks to Scotty, I'm getting it a hell of a lot quicker than I would've. As always, thanks you guys :D
Quote from: sayers6 on August 31, 2011, 12:11:30 AM
But I'm only talking about the various shades and box's, not the text. Like hoe they aren't the same exact color on all of them, but they get darker on some points, is that all done with regular CSS, or are img's involved?
Gradients are possible with only CSS, but, I find them to be a pain to accomplish how I want them exactly in all major browsers. I just find it easier to make an image and use it as the background of the div or cell I want them in.
Alright, so I'll just continue using a image made in paint for the background until Scotty comes in and tells me a different better way. Which he seems to do a lot, But I have found images so much easier so far.
QuoteAnd I love how you said "a week's work of books", then linked to a 1098 page book. I'd hate to see your heavy reading.
It is rather intimidating, but once you get past the basics, you'll find that almost any of what I like to call "reference-type books" will go mostly unread until you need to know something. This book is exhaustive in that regard, as it goes through a lot of content. Don't read it just for the sake of reading it. Go through the first couple of chapters to get the basics, then use the rest as it applies to whatever you need to do.
QuoteAnyways, I know there is a way to do some of this, and I'm nowhere near it, but how exact could you be about what a computer sees when one has Firefox 6.0, and a different one with IE6, and yet another with 7? Could you completely change what the webpage shows just off of a minor browser difference? I've seen huge differences with Firefox/IE/Chrome, but I just wonder if you could change it to where there is a difference between someone viewing with Firefox 6.0.1.01 and 6.0.1.02? Just wondering. And it is possible to have several versions of each browser without a lot of work? I'd like to see the subtle differences of each one.
This is by far going to be your biggest headache inducer of web development. You won't notice a lot of differences between the minor releases, but the major releases will definitely show the differences you are looking for. Although, that is not necessarily going to be the case with the last two Firefox releases as they are kinda getting ridiculous with their definition of "major" release. To install multiple browsers, you can definitely do it with Firefox, I haven't tried Chrome, and Internet Explorer has a compatibility mode in their newer browsers that allow you to emulate an older version. You can't install more than one version of Internet Explorer, which I think is good and bad. Good for the end-user, bad for the developer. It sort of deters the end user from going back to a browser that is a royal pain for developers to work with.
As far as how to code for different browsers, well that's part of the education. There is no good cut and dry conditional coding for browser versions that is considered "best practice". The best practice is to understand how the different browsers adapt to CSS and Javascript, and do what's necessary to accommodate as many as you can. This is where stackoverflow.com is a Godsend, as you'll get an answer to whatever question about this kind of stuff in minutes, if the question hasn't already been asked. A basic example of how some things just don't adapt across all browsers is the HTML5 <canvas> tag. Internet Explorer 9 supports it, where previous versions didn't, and without doing third party add-ons, there's no way a developer can intervene to emulate one on older browsers. In that case, they make it stupid simple to warn the user that they can't see the canvas, while still giving the developer enough control over how to present the fact that they are outdated so that it isn't too high-level or "generic".
QuoteAlso, is it a good idea to have code "layered" (I think that's what it's called anyways) or does it really not matter? Where the code is moved to the right the more tags it has around it? My teacher never seems to do it, but videos I've seen always show it, so I try to do it.
If I understand that correctly, you're speaking of indentation. Absolutely use indentation. It isn't required in HTML, CSS, Javascript, or pretty much any other popular programming/scripting language that I'm aware of (with the exception of Python), but if you don't do it, navigating through divs is going to be a pain. A simple example is to take Igu's code example, which looks like:
<BODY>
<div id="topdiv">
<p class="toptext">Just text at the top...</p>
</div>
<div id="undertop">
<p class="undertoptext">Different text.</p>
<p class="undertop-but-different">Something other than the text above.</p>
<div id="inside-undertop">
<p class="morestyles">This div should be inside the above div.</p>
<span class="forfun">FUN!</span>
<span class="span-to-the-right">Yea, <span class="omgfun">FUN!</span> no line breaks.</span>
</div>
<p class="undertoptext">This should use the same style as 'Different text.' above.</p>
</div>
</BODY> and remove all the indentation:
<BODY>
<div id="topdiv">
<p class="toptext">Just text at the top...</p>
</div>
<div id="undertop">
<p class="undertoptext">Different text.</p>
<p class="undertop-but-different">Something other than the text above.</p>
<div id="inside-undertop">
<p class="morestyles">This div should be inside the above div.</p>
<span class="forfun">FUN!</span>
<span class="span-to-the-right">Yea, <span class="omgfun">FUN!</span> no line breaks.</span>
</div>
<p class="undertoptext">This should use the same style as 'Different text.' above.</p>
</div>
</BODY> What's easier to read for you? Simple answer right? The fact that your teacher isn't doing it is dumbfounding. She's complicating things by not showing it, and it shouldn't come as a surprise when the students are able to learn off of it. Consistent (as in, always follow a pattern, whatever pattern you choose doesn't matter, as long as you follow a pattern and not switch it up half way through) indentation and syntax structure will save you DAYS worth of time trying to debug and maintain in the overall scheme of development. HTML, CSS, and (mostly) Javascript don't rely on whitespace to parse out the code. I won't get into why I said mostly javascript, as you'll know what I mean when you go through the book. Because they don't rely on whitespace, you can indent as much as you want, or as little as you want. My personal preference is two spaces for tabs. That way I don't have ridiculous indentations that make it near unreadable when there's a lot of child objects in the DOM, but it is still visible. You can choose your own, whatever works best for you.
QuoteAlso for a beginner would you recommend using The comment lines a lot to mark what things are all the time, or just learn how to pull out what is what by looking at it?
Comment away. People always say "don't over-comment", but that is a subjective definition they always throw out. Comment as much as you need to, or as little as you need to. Your definition of over-commenting is different than somebody else's. The only catch is that when you deploy your code, and you finish the "development" stage, you will want to remove your comments. You don't have to do this by hand, as there are parsers out there that can do it for you. I don't have one off the top of my head, but they do exist. Try googling "HTML minifier", and I'm sure you'll come up with something. The reason I say this is that when it loads in the browser, if you comment a lot, it could slow down the page render, also, depending on the content, you may not want to have some comments exposed to the browser where the user can view them.
Also worth noting, I love to over comment when I pick up an existing project. Often times comments are meant for THE developer who wrote the code, and not so well for other developers who are not familiar with it. If I pick up a project, the first thing I do to help understand it is to go through and comment everything. Where is this function getting called, this object is called in this order, etc... I find that as I comment, I begin to better understand how existing code works, because it slows me down, has me running back and forth to make sure my comments are accurate, and gets me to actually read the code and understand the order of different parts. Your experiences may vary.
QuoteAnd how are the various labels done on the forums, like in the left corner where it says "Stick Online Forums" over to the right and down where it is shaded differently than the rest of the page? and so on and so forth, like how the area around the text box I'm typing into is bubbled out from the white page and stuff like that
Igu did an excellent job of showing what happens when you use divs to break out the content. The way he's doing a majority of the placement of divs is through CSS "margin" and "padding". Using these, you can do just what the names imply. Set a margin around an object (doesn't have to be a div as his example shows) so that it isn't nudged right up against another, or you can pad the contents inside of an object so they don't nudge right up against the sides of it's containing object. As far as how to get things like gradients and such, I won't rehash what Igu said, but there are multiple ways to do it. Using CSS2 (the accepted universal version of CSS currently), the only way to get gradients is to use images. with CSS3, just like how you can set margins and padding, you can also create gradients. The problem is, since CSS3 is so new and ever evolving, every browser does them differently, so you'll essentially have to double if not triple your CSS to accommodate all the different (modern) browsers. Not the easiest solution, but I prefer it as I'm all about performance. Did I scare you away from using CSS for gradients? Well here, I'll reel ya back in:
http://www.colorzilla.com/gradient-editor/
There ya go. generate your gradients, let it generate the CSS for you, copy and paste it into your HTML file (or a separate CSS file if you've gotten to that point yet), and assign your object's classes and id's appropriately. Mission accomplished, and at that point, with the exception of making your page cross browser compliant for the outdated browsers that don't support that sort of CSS, it's actually easier to use than images.
If you do go with image gradients, just remember to make the image as small as possible. If the SO forums background (the very dark blue to very light blue visible to the far far left and far far right were an image, it would only be one pixel in width, pretty much invisible to the user unless they zoom in on the image. Smaller image = quicker load.
Well seeing that I'm still just starting I'll be staying away from gradients for awhile. Our class is on our 3rd "web page". Really rather boring. Anyways, is it better to use an external CSS sheet, or just keep it in the head? I like having standalone CSS to where it's easy to edit some of it, but what about load speeds? May edit for future questions depending on how long a reply takes.
Quote from: sayers6 on August 31, 2011, 09:11:37 PM
Well seeing that I'm still just starting I'll be staying away from gradients for awhile. Our class is on our 3rd "web page". Really rather boring. Anyways, is it better to use an external CSS sheet, or just keep it in the head? I like having standalone CSS to where it's easy to edit some of it, but what about load speeds? May edit for future questions depending on how long a reply takes.
Absolutely go with external. The reasons are plentiful. 1) It's easier to work with, without cluttering up your HTML document. 2) You can cache external CSS whereas when you start to get into server side scripting, your HTML files become templates or files that are otherwise generated dynamically and can't be cached, which essentially means pages load faster. 3) For the love of all that's holy, reduce down inline CSS to as little as possible. It increases the HTML documents file size and becomes un-readable very quickly, which equates to slower loading and longer time spent debugging.
We've been using in-line (although I'm not entirely sure why) and putting it in the <head> object so that it is convenient and easy to show examples, but that doesn't mean that should be how it's done for large files.
I've just been doing it in-line so he has only 1 file/source to look at. I definitely prefer css in its own file.
Quote from: igufed on August 31, 2011, 10:24:44 PM
I've just been doing it in-line so he has only 1 file/source to look at. I definitely prefer css in its own file.
I should clarify. By inline I mean
<p style="...">...</p>, not put into <style> tags in the <head> object. Still not ideal with the latter, but much better.
Quote from: Scotty on August 31, 2011, 10:30:22 PM
I should clarify. By inline I mean <p style="...">...</p>, not put into <style> tags in the <head> object. Still not ideal with the latter, but much better.
Ha, duh. I've gotta not respond to things on here while working on other things. Latest project is taking up my entire brain capacity.
I wouldn't dare use that method for an entire site. Definitely give you a headache.
You know it's a topic about web design when you can spot the word headache at least twice on the same page.
Lmao, anyways, are there other in-browser validators besides w3c? The site is blocked at school, but w3schools is allowed....
Scotty, in an example you put "border 1px solid gray;" instead of "border:1 px solid gray;". That just cost me an hour trying to figure out why my border wasn't working. I was using your example so I thought it was right. But, I learned something, when you think a ":" belongs somewhere in CSS, you should atleast try it. It can be undone.
Sorry for double post.
My apologies. You'll soon learn that simple typos are the root of all evil when it comes to web design. There's a couple of ways to make sure you don't make the same mistakes as I've made.
1) What IDE are you using? In case this is jibberish, IDE means Integrated Development Environment, or editor. Some people swear by notepad on windows, which I am highly against, others use Notepad++ (http://notepad-plus-plus.org/) for windows, which is excellent, I use vim on Linux, also great. The main reason I bring this up is that IDE's often color code stuff for you, and based off color coding alone, you may be able to detect some mis-colored syntax, which would point to an issue a lot easier. Some also even have an interactive syntax checker that will scan your syntax for errors and point them out to you while you're editing. If you ever get serious with large scale projects, you may want to check out Netbeans (http://netbeans.org/) or Eclipse (http://www.eclipse.org/). Notepad++ is excellent because it's great for quick edits, and they also bundle a no-installer version so you don't need admin privileges to install it at school. Eclipse also is the same, but requires java (which is hopefully installed). I don't think netbeans has a no-installer version, at least not the last time I used it, which was years ago. If you're looking to only edit a few files here and there, stick with notepad++, it's great for quick edits, and the latter two are likely a little overkill for what you're doing.
2) To answer your question about validators, try http://html5.validator.nu/. Don't get too wound up on validating your code, as with HTML5, the general realization is that XML is not the future of syntax (Amen). You can cheat a lot of tags and get away with it in HTML5, such as how you could theoretically leave out the <head> or <html> tags. I wouldn't recommend doing that though as it takes out some of the organization, and others may wish harm upon you if they have to reference your source code for whatever reason. Use a validator as a tool, a means to an end, not a goal. It will pick up on CSS errors like the one you encountered with my code though, so its definitely worth a try. That is my opinion, others may have their own.
3) Get Firebug, it's an excellent debugging tool: http://getfirebug.com/ It will scour your syntax and look for all sorts of stuff. You can do on the fly style edits, has an excellent debugger, and a javascript console that will help point out errors made in javascript. It's a simple browser extension for modern browsers, and I don't know what I'd do without it.
Psht, don't knock on notepad. :O To me for some reason, most of the features in every other editor clutter my view, even color-coding distracts me. I just want to see my code in there and that is all. I'm sure you can customize the view and remove things, but, I just haven't tried.
Definitely get Firebug. Just 10 minutes ago it helped me fix my javascript for my current project.
Not really looking for an IDE war, I'm just saying that with notepad, such basics like inline numbering (I'm aware that the status bar will work as well), consistent auto-indentation, color coding for those who like it, and a few other features, it doesn't really have it. Works for some, not for others. My biggest complaint is how notepad will throw in carriage returns which can often times cause problems when it's sent over to a linux server.
Besides, IDE wars are up there on the list of stupidest arguments ever to behold. Everyone has their own opinions and preferences. Kinda like how everyone has their own asshole, and we all love the smell of our own farts but hate other's.
My intention wasn't to start one. Just saying the reasons why I steer away from feature-rich text editors.
Quote from: igufed on September 06, 2011, 03:53:54 PM
My intention wasn't to start one. Just saying the reasons why I steer away from feature-rich text editors.
You should atleast upgrade to using Notepad++, yeesh. http://notepad-plus-plus.org/download/v5.9.3.html (http://notepad-plus-plus.org/download/v5.9.3.html)
I so far swear by notepad++. Only problem is, that we can't install them on the computers at school. So I run notepad++ from a flash drive when the teacher isn't walking around. But she was all over today, so I couldn't use it. Otherwise I have to use notepad. It's rather annoying. Does firebug work only with Firefox? Or does it do chrome? Thanks guys.
@meiun LMAO
Quote from: sayers6 on September 06, 2011, 06:04:01 PM
I so far swear by notepad++. Only problem is, that we can't install them on the computers at school. So I run notepad++ from a flash drive when the teacher isn't walking around. But she was all over today, so I couldn't use it. Otherwise I have to use notepad. It's rather annoying. Does firebug work only with Firefox? Or does it do chrome? Thanks guys.
@meiun LMAO
Firebug works on Chrome and Firefox, not certain about IE.
Is it possible to use "random" images with something easier than PHP like what you do in your signature with Calvin and Hobbes? Wanting to rotate through some images for a websit we have to do.
Quote from: sayers6 on November 09, 2011, 11:03:59 AM
Is it possible to use "random" images with something easier than PHP like what you do in your signature with Calvin and Hobbes? Wanting to rotate through some images for a websit we have to do.
It all depends. It isn't really that hard on the PHP end to do it. I have mine randomized on every refresh, and have also included some db queries to limit it to a specific day of any year as to not throw random comics and enable seasonal comics (e.g. winter comics will only appear in the winter).
Also, code like this is easily discovered on the internet if you just want to plug it in to the site. See:
http://www.alistapart.com/articles/randomizer/
The Reason I say no PHP is that I haven't worked on it at all, and we just open the file, it isn't hosted. I really do need to get cracking on working with some of it soon though. Thanks for the quick reply.
You can do what you want fairly easily with javascript as well, which will work locally.
Quote from: igufed on November 09, 2011, 11:21:59 AM
You can do what you want fairly easily with javascript as well, which will work locally.
Long live jQuery: http://www.robwalshonline.com/posts/jquery-plugin-random-image-on-page-load/
How exactly do you get an html file onto a web server, I'm planning on going to dreamhost to setup a web site, I just don't know how putting files up and configuring a hosted website goes.
Quote from: sayers6 on December 13, 2011, 02:38:58 PM
How exactly do you get an html file onto a web server, I'm planning on going to dreamhost to setup a web site, I just don't know how putting files up and configuring a hosted website goes.
You'll need to use an FTP client or SSH (or even better, both: SFTP). Assuming you are on Windows, your best bet is probably the Filezilla application. Dreamhost has some good documentation on getting this done: http://wiki.dreamhost.com/FTP or http://wiki.dreamhost.com/SFTP for SFTP.
Is it a easy process or does it require learning even more?
Quote from: sayers6 on December 13, 2011, 03:00:56 PM
Is it a easy process or does it require learning even more?
It's not that bad, but this is coming from someone who understands it very well, so take it with a grain of salt. It isn't like learning a whole new language or anything, just a tool and a protocol. Sure, you'll have to learn how to establish a connection and understand where the document root is and where to dump your files, but it's easy to pick up on.
Uploading to your web server is pretty easy. Dreamhost also has a web ftp application if you didn't want to use a different program like Filezilla.
Filezilla is great, though. It's what I use and from what Scotty said, he does as well.
Alright problems I'm having with CSS, I'm trying to align an image on the right side of the screen, and not have text go underneath it. I used the absolute positioning for the image (I think this may have been a big mistake) and used a margin right for the paragraphs of text. Everything worked perfectly at my school, didn't think anything of it, assumed I did a good job. Then I get behind in class, so I put the file on a flash drive and take it home. Then, I pull it up on my laptop, which instead of an almost square screen, is wide screen. The text kept it's margin, and the image kept it's absolute positioning, except since there were way more pixels, the image was in the center of the screen and, the text goes underneath it. I know the problem, I just have no idea on the solution. Any help?
This is what I got from what I read.
http://igufed.com/test1
Basic concept here is having the image and text in a div that spans a certain area (in this case, 100% of the screen). Then, float the image to the right using 'float:right;' for the id of the image.
The container div is set as 'width:100%;' and the image id (arch) is set as 'float:right;'.
I am actually taking it right now. I'm doing my semester final where you make a website with a partner. If it's anything like my class you should just be familiar with photoshop and dreamweaver.
Thank you very much, Igu. That is exactly what i needed.
@Darkflash we don't touch Dreamweaver until next semester, seeing that it is rather important to know how to code by hand. We have to make our own HTML and CSS files. I refuse to touch Photoshop, because I can't use it worth a damn. We've already made 3 websites by ourselves, and several web pages.
@Scotty and Igu, You're supposed to use CSS ONLY in a .CSS correct? My teacher had us put HTML at the top of it. Bugged me like hell because I had heard that you weren't supposed to.
My thought/experience is that you keep CSS in the style sheet (.css file), HTML in the .html, javascript in your .js file. This rule doesn't apply to php/asp.. you can (and most likely will) definitely have php/asp + html in your .php or .asp files, just as an fyi for later if you learn those.
I don't know the harm (if any) if you have html in your css file, as I've never met anyone who does that..
As for Dreamweaver or any other WYSIWYG applications out there, I think you need to have a very good foundation in html/css before you start even thinking about trying out those.
This is just personal preference here, but I like to have complete control over what I'm making. I feel Dreamweaver and the like take most of the control out of my hands.
Quote from: sayers6 on December 14, 2011, 10:24:39 PM
@Scotty and Igu, You're supposed to use CSS ONLY in a .CSS correct? My teacher had us put HTML at the top of it. Bugged me like hell because I had heard that you weren't supposed to.
That's correct, when you use
<link> you have to specify
rel="stylesheet" in it, so the browser interprets it as valid CSS, since javascript is entirely different, it'll bork the CSS. Same goes for using the
<script> tag, it'll bork your javascript. What HTML did she have you put in it? Did it bork the page?
When I first started screwing around with web design, I used Dreamweaver, but quickly grew frustrated with it, as I'd often go in and start doing what I could do with a plain text editor, and it liked to add in a lot of bulk comments, inline CSS/Javascript, and if I tried to embed PHP in the files, it would entirely screw up the design. Got to be a bit too frustrating for me. Now I just use vim for all of my work, and have 4-5 different browsers open and a finger ready to hit Ctrl-R.
So is Dreamweaver CS5.5 worth the $140? Or should I just stay away from WYSIWYG programs? Or are there any good ones?
Quote from: sayers6 on January 12, 2012, 11:42:30 AM
So is Dreamweaver CS5.5 worth the $140? Or should I just stay away from WYSIWYG programs? Or are there any good ones?
I can see WYSIWYG editors as being a valuable training tool for designers who aren't too solid on CSS and would do better if they saw the code dynamically update as they manipulate the design through mouse clicks, but I've never made heavy use of them. I guess I'm old school where I'll supplement heavy usage of the vi/gvim editors with an extra-large side order of Alt-Tab and F5 mashing, but that's my preference.
I would say though, at least from my financial position that $140 isn't a whole lot when considering Adobe's other prices, as well as the application's potential. If you had to pick a WYSIWYG editor, Adobe Dreamweaver would probably be the best. I don't know of any open source editors that compare in capabilities to Dreamweaver, but then again, I haven't bothered to look either, so I may be wrong.
Don't recall if I've mentioned this before, but if you aren't too spun up on CSS and need some good literature, I'd recommend the following two books:
http://www.amazon.com/CSS-Mastery-Advanced-Standards-Solutions/dp/1430223979/ref=sr_1_1?ie=UTF8&qid=1326387910&sr=8-1
http://www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863/ref=sr_1_2?s=books&ie=UTF8&qid=1326387933&sr=1-2
The first will get you introduced and well versed in common (and not so common) usage of CSS, the latter will show you were CSS is going in its next version, and do a spectacular job of accommodating all the browsers capable, as well as explaining all the compatibility issues with each. Both are excellent reads that aren't overwhelming in size, and great for reference as well as educating.
My coworker did a good write up of the latter book referenced above:
http://patorjk.com/blog/2011/06/27/the-book-of-css3-book-review/
I might actually get it in the near future, seeing that i can get the student addition rather cheap. Does it generate a lot of the useless crap code like Microsoft Word does when you use it? Where in hidden code, it lists all sorts of different things about Word, and the person who registered Word? We used that crap today in class and the code got in the way so much I couldn't hardly edit anything manually without screwing something else up it seemed. Then again it created a XML file, and a bunch of different non-CSS pages I've never seen or used before. I'm just wondering if it's nice and clean like normal CSS, JS, XML, and HTML files, or messy.
Also: Dreamhost vs Hostmonster? Which is better and why? I need cheap but reliable.
Quote from: sayers6 on January 12, 2012, 08:10:36 PM
I might actually get it in the near future, seeing that i can get the student addition rather cheap. Does it generate a lot of the useless crap code like Microsoft Word does when you use it? Where in hidden code, it lists all sorts of different things about Word, and the person who registered Word? We used that crap today in class and the code got in the way so much I couldn't hardly edit anything manually without screwing something else up it seemed. Then again it created a XML file, and a bunch of different non-CSS pages I've never seen or used before. I'm just wondering if it's nice and clean like normal CSS, JS, XML, and HTML files, or messy.
Also: Dreamhost vs Hostmonster? Which is better and why? I need cheap but reliable.
From what I recall with using it back half a decade ago (I think that was CS2 or 3?) was that it was good about keeping things clean. I can imagine that if it was good about it back then, it's good, if not even better about it now. I do recall it adding a lot of comments in the CSS and a few in the HTML. I don't know about Javascript since I wasn't designing that much with Dreamweaver, but I do recall how you would have two pains to work in, one for straight code, another for your WYSIWYG editor. Update one, and the other dynamically updates. What I would like to see of it, is some sort of compressor for Javascript, CSS, and HTML. Design it as you please, however you please, but as soon as you go to deploy to production, have it compress the code down to one line, and output it. That alone cuts down on your page weight so freakin' much. Add on some server side gzip compression and your page weight could very well be under 100k. That and good mobile development capabilities.
My main concern, and maybe this is a non-issue with their newer versions, is browser compatibility. There is no way their one WYSIWYG editor is going to act like all the different browsers all at once. Maybe you can toggle between browser modes, but I doubt it's going to have that support for IE, since it's proprietary. I recall still having to jump out to Firefox, IE, Opera, etc... to see how the CSS would cooperate with all the browsers. I'd suggest doing some research before purchasing it, see if it fits your needs, or if it's just a convenience that you can save yourself the money on.
Also, Dreamhost. Hostmonster seems to have intermittent hiccups (this site being a good example since it's hosted with Hostmonster) as of late. Dreamhost offers so much more and I haven't had any issues with connectivity like I've had in the past with Dreamhost/Bluehost.
Quote from: Scotty on January 12, 2012, 09:05:10 PM
Also, Dreamhost. Hostmonster seems to have intermittent hiccups (this site being a good example since it's hosted with Hostmonster) as of late. Dreamhost offers so much more and I haven't had any issues with connectivity like I've had in the past with Dreamhost/Bluehost.
I'm going to assume you mean Hostmonster there, but anyways good. Cause I was planning on using Dreamhost and helping out igu by using his referral thing. I'll do some more research on Dreamweaver, seeing that we're about to use CS3 in class. I finally get to get my feet wet with JavaScript which I've been waiting for. :D
Quote from: sayers6 on January 12, 2012, 09:18:19 PM
Quote from: Scotty on January 12, 2012, 09:05:10 PM
Also, Dreamhost. Hostmonster seems to have intermittent hiccups (this site being a good example since it's hosted with Hostmonster) as of late. Dreamhost offers so much more and I haven't had any issues with connectivity like I've had in the past with Dreamhost/Bluehost.
I'm going to assume you mean Hostmonster there, but anyways good. Cause I was planning on using Dreamhost and helping out igu by using his referral thing. I'll do some more research on Dreamweaver, seeing that we're about to use CS3 in class. I finally get to get my feet wet with JavaScript which I've been waiting for. :D
You are correct in your assumption.
Honestly, Javascript is going to frighten you at first. It's unlike many (if not all) "common" programming/scripting languages out there. It uses prototypal inheritance, doesn't support traditional object oriented programming like Java, yet allows for classes and many constructs of OO programming, it can be perceived as a mess at first. Once you get your feet wet though, and you do some heavy research on how to use it, it is really, and I do mean REALLY powerful.
I don't often say this about libraries/frameworks, but get into jQuery as soon as possible. I often tell folks to at least have a decent understanding of the language before they start using shortcuts through libraries and frameworks, but jQuery is the one exception. The problem you're going to encounter without it is that every browser has its own way of incorporating many different javascript methods. Instead of trying to do all of them by hand, screw it, and just use jQuery which will handle a lot of the low level compatibility issues for you. Don't fight it, you won't win. Even if you do "win" though, you'll have wasted so much time that you could have spent elsewhere.
If you want good literature. O'Reilly provides a lot of great books on things like Javascript, CSS, HTML, everything. If you want the frightening large, yet all inclusive Javascript bible, try:
http://www.amazon.com/JavaScript-Definitive-Guide-Activate-Guides/dp/0596805527/ref=sr_1_1?ie=UTF8&qid=1326434902&sr=8-1
It'll likely work out better for you as a reference book, more than a book to read from cover to cover, but it has everything, and is widely regarded in the web development community as the standard to which all other Javascript books are compared to.
EDIT: Also, if you buy Javascript literature, search Amazon for highly rated and new books. Javascript is one of the most quickly evolving languages out there. New stuff is getting added monthly, and honestly, something from 2009-2010 is considered old for Javascript. It's one of those intimidating factors. Try to go as recent as possible.
Ughhhh ran into a speed bump, is there no way of doing dreamhost by just monthly, rather than a year of pre-pay?
Quote from: sayers6 on January 16, 2012, 10:20:27 PM
Ughhhh ran into a speed bump, is there no way of doing dreamhost by just monthly, rather than a year of pre-pay?
Not that I've seen. I should have mentioned that before, as it did cross my mind when comparing the two. Dreamhost requires payment up front for one year, while Hostmonster will accept monthly payments at a higher cost than buying one year up front.
For the designers that would love to see what what WebGL can do, and actually have it help out with design, check out:
http://hacks.mozilla.org/2011/07/tilt-visualize-your-web-page-in-3d/
Anybody know anything about Microsoft expression? I have to use it for a contest, and can't supplement it with anything else :/
First heard for me. Fact alone that it costs an arm and a leg, is made by Microsoft, promotes usage of Silverlight (which as far as I know, which is just hearsay, is more crap that requires additional browser plugins), I have no interest.
Ah I see, but as part of the contest, I get the professional version completely free. Might as well try it out.
If you can score a $500 piece of software for free, I say go for it! I didn't look at anything past their main page, but it boasts a lot of cool stuff with regards to HTML5 and presumably all the rest of the kit and kaboodle, so let me know how it works out when you win!
Any easy way of reading a ISO file? The program was downloaded as one, and have no idea of how to open it unless i go buy a cd to burn the iso onto.
I use Virtual Clone Drive from SlySoft. http://www.slysoft.com/en/download.html
Can mount ISO files instead of burning them to a CD to read.
After installing, it should put an icon for it in your taskbar (next to your clock at the bottom). Right click on that and scroll to an available drive in that list and select Mount. Browse for the .iso file and it should run the setup automatically.
If not, go to My Computer and you should see a new drive in there that is the ISO you just mounted.
Quote from: sayers6 on February 02, 2012, 05:56:31 PM
Any easy way of reading a ISO file? The program was downloaded as one, and have no idea of how to open it unless i go buy a cd to burn the iso onto.
magicdisc (http://www.magiciso.com/tutorials/miso-magicdisc-overview.htm)
It'll emulate another disc drive that you can mount the iso to and run.
Thanks igu, it's working like a charm :)