Those of you who’re developing with symfony under windows will have noticed that, when running tasks in the command prompt, no colors are used. This is because the windows command prompt isn’t compatible with the color notation.
Most of you also have cygwin installed (shame on you if you didn’t :p). But even if you run the tasks through “PuttyCyg”, which is fully compatible with the color notation, you will not benefit from the colors.
Why?
Hello everybody, I’m back with another version of basic tips and tricks.
After having a talk with a client, about the basic on css, I thought it might be good to have an easy introduction.
So let’s give it a try. We’ll talk about:
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation (that is, the look and formatting) of a document written in a markup language.
CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the colors, fonts, and layout.
There seems to be a big lack of knowledge in the field of basic web design, therefore I decided to write a step-by-step web design tutorial. Every post will be a new chapter in development; I will try to give you a fresh view on what really matters and is interesting for starting users. We’ll start with the basics like tags in html and go on with CSS; the future will tell us how far we get. The point is to share my experience with you guys, not to teach you every detail, if you are completely fresh to HTML and CSS; you better take a look at w3schools first. (http://www.w3schools.com)
So let’s start off with our first post: BASIC HTML
First off all, if you want to learn HTML and CSS, try not to use the design view of programs to often. It’s very easy to create simple pages with those design views, but you won’t learn the code, and that’s the important stuff you need to know. So let’s take a look at basic fresh html code generated by Dreamweaver:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> </body> </html>
So what is really important in this example?
As you can see, html is completely built up with tags and every tag is written inside the tag it is containing to. You can see that the head and body tag are within the html tag, because the html tag is the whole page and the header and body are in it.
The head tags are simply to give information like the name of the page (now ‘Untitled Document’) and include the necessary files (that’s for later). The real important one is the body tag because that is what the user will see. Whatever you will write within these tags, will be displayed on the screen of the person that visits your website.
So if we write <body>test</body> the user will get an empty, blank screen with test written on it. Easy, isn’t it? So now you can write whatever you want in the page. The tricky part is the layout of the text.
Layout of a text is also done with the tags as they are written in the first example. So when you want to write for example this is bold this is italic and this is underlined, you will have to write this:
This is <b>bold</b> this is <i>italic</i> and this is <u>underlined</u>
As you can see every type of layout has its own specific layout tags b for bold, I for italic and u for underline. When using tags, be sure that you always close the tags just as in the example.
Like there are tags for text layout, there are also tags for line breaks and paragraphs. When you are writing long texts with paragraphs in it, always try to write your text within the <p></p> tags. Don’t use 2 <br /> tags instead; this is a very often made mistake. This is for the simple reason that <br /> isn’t the same as a paragraph, it doesn’t react the same way for every user, a paragraph tag does. So use your <br /> tags wisely within the <p> tags like so:
This is a long text and when we go to a new line within the paragraph we use a line break So this will be displayed on a new line within the same paragraph This is a second paragraph that will be displayed
This will result in:
This is a long text and when we go to a new line within the paragraph we use a line break
So this will be displayed on a new line within the same paragraph
This is a second paragraph that will be displayed
The last thing for today is the headings which are used to display titles. Just like the paragraph tag you can use the heading tag: <h1></h1><h2></h2>. H stands for heading and the numbers are the scale that the heading is displayed in, 1 being the biggest and 6 being the smallest.
That was it for today my friends, this was the easiest part, in next lessons we will talk about topics like:
DIV vs. Tables
CSS and how to use it properly
debugging and testing
and much more
Sep 29
AjaxForm or ajaxSubmit
This plug-in provides numerous options you can call to manage your form before and after submission and all this in AJAX. More info on http://malsup.com/jquery/form/
Live Query
When an element is loaded into a page, you will not be able to use the events on this element. But when the Live Query is used, this magically appears to work… This is because the Live Query binds events of elements together every few milliseconds and does a DOM (Document Object Model) update. A really cool plug-in that creates the possibility for web developers to execute events without reloading the page every time an element is clicked. The only disadvantage of live query is the fact that it appears to slow down the execution time a bit, but when you don’t have to reload your page each time, I guess it’s worth the usage. More info on http://brandonaaron.net/docs/livequery/
JSON (JavaScript Object Notation)
In our case we are using JSON as response-type from an AJAX request. This is a sort of XML but a lot easier to read, especially when you work with a lot of data. For more information on JSON visit http://json.org/ or http://borkweb.com/story/the-case-for-json-what-is-it-and-why-use-it
Get all our updates directly: subscribe now