|
On February 19 2011 16:21 RedLuck wrote:
ok so im in the process of learning html and css and so far it hasn't been too bad but theres one thing that really bugging meeee.... (very tired btw, prob why i cant figure this out)
can i apply a border to a table via an external CSS sheet?
table {
border-width: 1px;
}
is yielding no results, even tried to Id the table + may other variants. whats going on? :S
try
table { border-width: 1px solid red;}
and to border the rows and cells:
table tr { border-width: 1px solid blue;}
table tr td { border-width: 1px solid green;}
|
On February 19 2011 14:10 luxx wrote:Show nested quote +On February 18 2011 18:30 Sad[Panda] wrote:On February 18 2011 17:29 luxx wrote:On February 16 2011 23:23 telfire wrote:
HTML/CSS has nothing to do with functionality. If you want to make an automated tournament site with self-updating brackets and all that jazz, there's going to be a lot more to it. You'll want to do some research into web application frameworks. Ruby on Rails is currently the best framework for rapid prototyping (and what we built z33k.com). I did php development work for more than a year, but I would argue rails is far better for learning, since it gets many of the conventions right (REST, database migrations, ORM, and many others that amount to very high developer productivity). Unless you want to actually do design, do not start with learning html/css, go right to the functionality, you can easily learn the styling later. There are lots of tutorials out there, but the main thing is to have a project to work on that you can get something out and keep releasing updates, even if it is simple at first. It is easy to get started: http://guides.rubyonrails.org/ and when you're done send me a PM and I can give you something to work on  Did you read the OP at all... your replying to someone who gave a reply and yours is completely irrelevant and offtopic. its like all you did was look at the words "web design" in the topic and looked for a way to plug your website. Not to mention you say "Unless you want to actually do design" which was the whole premise of this fucking thread. Sorry if that sounded off-topic, but the OP does say: "I want to learn how to create a website, more specifically I want to learn how to create a team/tournament website" - to which I will again speak to the important point that modern websites are not made of pure html and css. Regarding z33k.com, which I helped build, it is a team and tournament website for starcraft 2, and sounds quite similar to what your proposing for League of Legends. If you are more comfortable talking about teamliquid, or some other site, that is fine with me but in most cases you are dealing with dynamic content. I am not saying that starting with html and css is a bad idea, but rather that if you go one level of abstraction higher, and choose to start with an application framework, you'll be guided by many of the best practices that are inherent to the framework. Focusing learning pure html/css without a dynamic frameworok is like learning to type without a computer. I have been through it, and you'll be able to learn html/css on the way. Tools that I would recommend to developers firefox addons: firebug, yslow, colorzilla, web developer toolbar, page speed sites: colourlovers.com, stackoverflow.com and not being defensive when asking for help 
after re-reading what you wrote (and after a actual night of sleep) I realized i miss comprehended what you said and I apologize you were just using the quote to clarify your point, I wasn't trying to be defensive it was just a huge misunderstanding.
and I want to learn web-design as a whole the tournament/team site is just the project I want to start with, and I understand that html/css won't create a fully functional website with those two things only. Its kind of the reason I thought a team/tournament site would be a great way to start because it would force me to learn javascript/php/mysql all at once also, I am just focusing on CSS and HTML right now to get the basic layout of the website and a basic understanding of how it works. ill move on to the other things after I create a basic home page layout, and its not like im going for final draft mode now so I am more than willing to scrap huge parts of what im doing just to optimize it and do it more professionally. I guess you could say im approaching this like I did starcraft, work on the basic mechanics first fine tune later.
thank you for the list of addons and external resources, Im using firebug already as a recommendation from someone earlier ill look into the others and I bookmarked the sites.
and again I am sorry for my earlier reaction, ive had about 6 hours of sleep in the last 30 something hours.
|
np, game sites gotta stick together anyway let me know how it comes out
|
So I'm struggling at getting my banner to stay in one specific spot, as it is it moves as i resize my browser and its getting annoying, no other image does it on my page and the only other alternative I've found to work is putting it in a table :/ any suggestions?
|
On February 22 2011 11:11 Sad[Panda] wrote:
So I'm struggling at getting my banner to stay in one specific spot, as it is it moves as i resize my browser and its getting annoying, no other image does it on my page and the only other alternative I've found to work is putting it in a table :/ any suggestions?
Can you put it in a <div> with absolute?
Otherwise, if you just set dimensions like height, width, left,top it'll stay exactly where u put it.
another mistake is maybe you're outside <div> container is always changing, try to see exactly what is moving and change it.
BUT, although absolute solves moving problems, using relative is better and setting width, and height tags is more compatible across browsers
EDIT:: i'm sorry if you're using tables, i dont' use them and i have no idea why some people do, i believe they went out of style a long time ago. also, is your website online? maybe i could look at it for you.
|
For anyone teaching themselves how to build a site, pick a programming language (either Ruby on Rails or PHP) and dive right in. Google for "rails (or php) beginner tutorials" and start installing the software.
Once u install the software, explore the files and start editing them. Then google for something like "How to create a database record in rails/php". Then you are on your way to dynamic content.
That way when you get stuck, like a program doesn't install or there is an error, u know exactly what the problem is and you can google for it, fix it, and move on to the next error.
The last thing u want to spend your time on is the alignment of your divs, because what's more important, a page that looks good, or a functional website? The answer is very clearly, a functional website.
The polish will come as you grow into a mature web developer and increase your skills (in all areas). At the start though, it's more cost-effective to build functionality, because anyone can build a polished page. As the site gets better, it will naturally cost more and more to have a plain looking site, and when it becomes too expensive, you just invest time into polish.
As the engineers of the world say -> Form Follows Function
|
On February 22 2011 11:15 D4L[invd] wrote:Show nested quote +On February 22 2011 11:11 Sad[Panda] wrote:
So I'm struggling at getting my banner to stay in one specific spot, as it is it moves as i resize my browser and its getting annoying, no other image does it on my page and the only other alternative I've found to work is putting it in a table :/ any suggestions? Can you put it in a <div> with absolute? Otherwise, if you just set dimensions like height, width, left,top it'll stay exactly where u put it. another mistake is maybe you're outside <div> container is always changing, try to see exactly what is moving and change it. BUT, although absolute solves moving problems, using relative is better and setting width, and height tags is more compatible across browsers EDIT:: i'm sorry if you're using tables, i dont' use them and i have no idea why some people do, i believe they went out of style a long time ago. also, is your website online? maybe i could look at it for you.
No its not online, and I would prefer to not use tables since that seems to be the general consensus (although ironically this beloved website apparently uses tables like a boss Lol). Ill try that and see if its my container then (Most likely is) and ill edit a response after I sober up a bit (21st birthday), thanks for the help.
|
I know this is a double post and a bump but I had a question and I am hoping someone can provide me an answer!
I am now trying to move onto learning PHP (next javascript) so I installed xampp as a recommendation to a friend. So after having that installed and all Im wondering how exactly I view my website in an offline setting. Where do I put the files to get them to output into my browser when I do localhost. I tried putting them into the htdocs like my friend reccommended me but when I type http://localhost or 127.0.0.1 into my browser I only come up with the welcome to xampp for windows screen :/.
also this is probably a stupid question but when you do things in PHP does it pretty much throw out the whole .html format for files? im a little confused tbh about the whole uses of PHP altogether and its role so to speak :[
|
PHP is a web programming language, whereas HTML is simply markup. Think of it like a house: you can put up walls, support beams, a floor, and a ceiling, and other structural necessities. That's HTML. Is the house done? No. You want some electricity and plumbing. That's where the PHP comes in. So, if you only need a storage space for stuff and don't need anything functional, .html files alone are good enough. Otherwise, you'll have to use .php.
*Loads up XAMPP*
Assuming you installed it into the default directory, put your html and php files into C:\XAMPP\xampp\htdocs. To access them on the browser, type in http://localhost/filename.php.
GLHF.
|
On March 31 2011 12:59 Sad[Panda] wrote:I know this is a double post and a bump but I had a question and I am hoping someone can provide me an answer! I am now trying to move onto learning PHP (next javascript) so I installed xampp as a recommendation to a friend. So after having that installed and all Im wondering how exactly I view my website in an offline setting. Where do I put the files to get them to output into my browser when I do localhost. I tried putting them into the htdocs like my friend reccommended me but when I type http://localhost or 127.0.0.1 into my browser I only come up with the welcome to xampp for windows screen :/. also this is probably a stupid question but when you do things in PHP does it pretty much throw out the whole .html format for files? im a little confused tbh about the whole uses of PHP altogether and its role so to speak :[
When you type http://localhost or 127.0.0.1 by default apache will have been configured to look for index.php (if php is installed, which it should be) or index.html because you are not specifying any particular page. This is pretty normal behaviour for any web server.
What you should probably do is just delete all the example/control panel stuff in the htdocs folder because you don't need it - keep it simple.
From there create a new text file in htdocs called index.php and edit it with notepad, type out the following:
<?php phpinfo(); ?>
Save it and now visit localhost in your browser again. What should be displayed is a big info dump of php versions and which modules are loaded. If not then either xampp is not running or there is an issue with it.
If you want to access other pages (for example if you had a page called test.php in your htdocs folder) you would type http://localhost/test.php into your browser.
PHP is a scripting language. A very basic explanation of how it works is that when a client (web browser) makes a request for a page (index.php) the php engine executes any php scripts in the index.php file and passes on the "result" of the php script.
A simple example that should run if you copy paste it...
<?php //anything inside these php tags will be treated as php code echo 'hello world'; //this will print out hello world to the browser echo '<h1>test</h1>'; //this will print out 'test' in a h1 element (not recommended) $testVariable = 'I will appear in a list item element'; ?> <!-- anything not in php tags will be treated as plain html would (note that this is a html comment) --> <ul> <li><?php echo $testVariable; ?></li> </ul>
I can give more examples if it's still unclear how php works... Hopefully this is enough to at least get an idea though.
Edit: grrr TL ruined all my nice indents - oh well
|
alright, thank you both for the swift responses, my only real question now is if I am going to be using PHP am I going to be doing all the HTML elements in that .php file and forgoing the .html format alltogether, or am I going to be using 2 seperate types of files the PHP for the server side scripting and the .html as the page element itself. If this is confusing Ill try to clarify a bit better.
|
You will get a different answer depending on who you ask. Every developer has their own PHP technique and there is no technical right or wrong way to do it - there is no standard. Some people will suggest using frameworks or templates of some kind and others refuse to use either (like me hoho).
Of course there are a lot of best practices you can follow (if you google search) but honestly... while you are learning just keep it as simple as possible.
Now that is out of the way I'll try to explain further.
HTML files are static. You can configure apache/php to look for php scripts in HTML files too but I don't recommend it. Most people will assume that a HTML file is just a static file when they see it. If you need to design a page that will not have dynamic content then I don't see any reason why it can't be a flat HTML file.
On the other hand, PHP files are designed for dynamic content - like a forum (teamliquid uses PHP).
Now here comes my opinion. When I write php I tend to seperate functionality into very simple layers so the code is as simple as possible to understand.
For example, if I was to write a page that listed all the books I owned based on data that was stored in a database I would make 4 PHP files.
1. database-utility.php - This file holds the code responsible for connecting to the database and executing queries.
2. book-retriever.php - This file holds the code responsible for sending queries to the database utility as well as turning the result set into an array of objects.
3. book-class.php - This file is a class that will be used to construct "plain old php objects" (POPO). If you don't know much about object oriented programming I can explain more.
4. list-books.php - This file 'talks' to the book-retriever.php and asks for a list of books which it would then iterate through and display. This is where I would put my HTML.
The code for list-books.php would look something like this:
<?php include('book-retriever.php'); $books = BookRetriever::getListOfBooks(); ?> <html> <head> </head> <body> <ul> <?php foreach($books as $book) { ?> <li><span class="bookTitle"><?php echo $book->getTitle(); ?></span><span class="bookAuthor"><?php echo $book->getAuthor(); ?></span></li> <?php } ?> </ul> </body> </html>
This is the only place I would write any HTML. I would also never write any heavy logic or any database code in a "view" page. It makes sure that your "presentation" layer is separate from your "data access". This means your code will be easier to understand and debug as well as keeping it all flexible.
A lot of people (especially when starting) write everything in the one file which just turns into a mess before long. It also means if you change your mind about which method of data access you are using (if you wanted your data as JSON from a REST interface instead of a database) your whole page would need to be rewritten. If you keep things separate the only page that would need rewriting is book-retriever.php - your presentation layer doesn't change at all.
It's annoying that my indenting wont work but there's not much I can do about that...
Also this code won't run because the other components would have to be written. I just wanted to give a simple idea of how I personally separate HTML from php code. I'm sure others would take a different approach.
|
Man, this is all so confusing <.> but I need to learn it because I want to have the website have a forum at the least and maybe somewhere down the line a tourney bracket creator but thats not essential. I just feel like I don't know where to really start :<
thank you for all of the info and help though
|
Why does everyone want to become a Web Designer without any prior knowledge these days... everytime i read that i just want to hit my head on the table -.- Learning Web Design takes about 2-3 years of time until you have all the neccessary knowledge for UI stuff. Add another 2-3 years for the programming/backend stuff. After that you will have to compete with all the other million Web Designers for every job available... but maybe i'm just disillusioned too much.
Anyways, you could take a look at http://www.csszengarden.com, download the HTML and CSS and try to change the CSS to mimic another design someone else made and/or just play around with the CSS.
PS: Don't ever use Dreamweaver. Never. Under no circumstances. It's the most horrible programm ever written for web development.
PPS: Learn to use a linux text editor like vim/gvim or *shudder* emacs. When you get into serious development you will do most of your development on a remote server via an SSH connection instead of the tedious "edit file, transfer to server, test if it still works".
EDIT:
For PHP, the suggestion of vek is very recommended, though i strongly suggest you read into templating systems like Smarty (Yes, they cost performance, but unless the page gets a million hits a day it doesn't matter).
Don't ever mix logic, data and presentation (usually you use MVC(Model-View-Controller) or similar patterns).
Also, use a single php file as entry point to your application, don't make one PHP file per page, it's a hell to maintain later on.
I suggest you first get comfortable with the frontend desgin and use PHP just to do some basic logic, like changing a title, including sub-templates (for example the page header and footer common to all pages) or showing a different page when the user clicks a link. Start slowly, programming is the hardest part of Web Development and if you didn't start learning programming before your 12th birthday you will have an extremely hard time learning it as it requires a very specific mindset.
I learned programming when i was 8 - 21 years ago - and i'm still a novice, eventhough i never stopped learning more about it.
|
On March 31 2011 15:00 Sad[Panda] wrote:
Man, this is all so confusing <.> but I need to learn it because I want to have the website have a forum at the least and maybe somewhere down the line a tourney bracket creator but thats not essential. I just feel like I don't know where to really start :<
thank you for all of the info and help though
You're trying to do too much at once then. Designing a forum requires a decent grasp of php and a strong grip on database design. A bracket program needs some solid logical problem solving skills and serious PHP programming knowledge. I suggest using existing free open source forum engines, such as SMF or phpbb, to add toyour site, and you can check out their code to see how they implement it. As for the bracket program, that'll take you awhile. I'd stick to manually uploading bracket images from existing software, such as tio, for now.
|
On March 31 2011 16:04 ThatGuy wrote:Show nested quote +On March 31 2011 15:00 Sad[Panda] wrote:
Man, this is all so confusing <.> but I need to learn it because I want to have the website have a forum at the least and maybe somewhere down the line a tourney bracket creator but thats not essential. I just feel like I don't know where to really start :<
thank you for all of the info and help though You're trying to do too much at once then. Designing a forum requires a decent grasp of php and a strong grip on database design. A bracket program needs some solid logical problem solving skills and serious PHP programming knowledge. I suggest using existing free open source forum engines, such as SMF or phpbb, to add toyour site, and you can check out their code to see how they implement it. As for the bracket program, that'll take you awhile. I'd stick to manually uploading bracket images from existing software, such as tio, for now.
I wouldn't actually recommend looking at the code of SMF or PHPBB. The code of both is a horrible hell and the only thing it could teach you is how to _not_ do it.
If you want to look at any PHP application to learn from the source, only take the ones that are fully unit tested (requires a proper code design so it's probably a good example then) and for PHP 5.3 (many good features were only added in that version and while you sometimes have to stick to old versions - we at work have to use PHP 5.1.6 - it is always a good idea to learn how to do a task with modern tools). It's a known fact that 90% of the PHP open source projects are horribly written as they often have grown very far beyond their intended use.
|
On March 31 2011 15:39 Morfildur wrote:
PS: Don't ever use Dreamweaver. Never. Under no circumstances. It's the most horrible programm ever written for web development.
PPS: Learn to use a linux text editor like vim/gvim or *shudder* emacs. When you get into serious development you will do most of your development on a remote server via an SSH connection instead of the tedious "edit file, transfer to server, test if it still works".
EDIT:
For PHP, the suggestion of vek is very recommended, though i strongly suggest you read into templating systems like Smarty (Yes, they cost performance, but unless the page gets a million hits a day it doesn't matter).
Don't ever mix logic, data and presentation (usually you use MVC(Model-View-Controller) or similar patterns).
Also, use a single php file as entry point to your application, don't make one PHP file per page, it's a hell to maintain later on.
I can pretty much second all of this... Dreamweaver is the absolute devil. Any WYSIWYG editor is. I've had to clean up so much auto generated crappy broken HTML for customers it's just not funny. Some of the html and css that I've seen come out of Dreamweaver is so cryptic it's a wonder it ever works. The worst is getting rid of nested tables used for (really simple) layouts.
Still, it's a good feeling when you can report back to the someone that you just shaved off 700kB per page load of useless markup. If a page is getting even 1000 hits per day (not that much) thats 700MB of bandwidth saved each day. That's ~20GB per month. It all adds up.
My development enviroment for php/html/css is based on xampp. I just use Textpad to edit the files right in the htdocs folder. I have different folders inside htdocs for different projects (all under source control using TortoiseSVN).
This lets me edit the files and just hit F5 in my browser to see the changes instantly.
I have my screen set up like this:
http://i.imgur.com/etcUO.png
Also... This is like my HTML5 experiments page - I'd never have the javascript inside my html files like that on anything serious if anyone was wondering.
I'm also comfortable using nano if needed but prefer having textpad with Firefox side by side. It's so much easier for doing CSS work.
|
On March 31 2011 16:31 vek wrote:
The screen layout reminds me of the productivity booster number 1:
Use 2 monitors, if possible even 3. It's a thousand times more comfortable to have one screen with code, one with the browser and if you use it, the third with the ticket/task/requirement/image-of-how-it-should-be
|
On March 31 2011 15:39 Morfildur wrote:Why does everyone want to become a Web Designer without any prior knowledge these days... everytime i read that i just want to hit my head on the table -.- Learning Web Design takes about 2-3 years of time until you have all the neccessary knowledge for UI stuff. Add another 2-3 years for the programming/backend stuff. After that you will have to compete with all the other million Web Designers for every job available... but maybe i'm just disillusioned too much. Anyways, you could take a look at http://www.csszengarden.com, download the HTML and CSS and try to change the CSS to mimic another design someone else made and/or just play around with the CSS. PS: Don't ever use Dreamweaver. Never. Under no circumstances. It's the most horrible programm ever written for web development. PPS: Learn to use a linux text editor like vim/gvim or *shudder* emacs. When you get into serious development you will do most of your development on a remote server via an SSH connection instead of the tedious "edit file, transfer to server, test if it still works". EDIT: For PHP, the suggestion of vek is very recommended, though i strongly suggest you read into templating systems like Smarty (Yes, they cost performance, but unless the page gets a million hits a day it doesn't matter). Don't ever mix logic, data and presentation (usually you use MVC(Model-View-Controller) or similar patterns). Also, use a single php file as entry point to your application, don't make one PHP file per page, it's a hell to maintain later on. I suggest you first get comfortable with the frontend desgin and use PHP just to do some basic logic, like changing a title, including sub-templates (for example the page header and footer common to all pages) or showing a different page when the user clicks a link. Start slowly, programming is the hardest part of Web Development and if you didn't start learning programming before your 12th birthday you will have an extremely hard time learning it as it requires a very specific mindset. I learned programming when i was 8 - 21 years ago - and i'm still a novice, eventhough i never stopped learning more about it.
I understand it takes along time to learn all of this but hopefully I still have a lot of that but you misled yourself a bit, I want to learn webdesign, I don't want to be a web designer by occupation only by hobby, Im actually going to school to be an Audio Engineer at the moment. I still really appreciate all the information you given its very helpful and helped me as a guideline in where I can start. Im also using Notepad++ right now because everyone said dreamweaver wasn't very good to learn on because you could end up autopiloting code also lol.
Ill try just uploading a premade forum like PHPBB when the time comes for that since its 1.) easier and actually coding a forum is out of my league. As for the brackets like I said its not really necessary, I can just make a Graphic of a bracket myself for tournies the bracket creator would have been more like a community tool but yeah.
again thanks for all the information ill probably post back if I have anymore problems or Questions xDDDD
|
|
|
|
|
|
|
|
EPT
