[metaphysics]

Free HTML & CSS Help

How does it work? If you have ever wanted to know how to do something that you saw on the web, just post you question here, and I'll write you up a quick tutorial on how to do it. I'm not planning on making this topic a Web School by teaching EVERYTHING about HTML and CSS, but I'd be happy to answer any questions.

ALSO! Feel free to post in this topic if you are coding something and you get stuck. I'd be happy to help you if you can't figure out how to do something and it's holding you up in coding a site.

Note: I don't know any Javascript, so don't go posting any questions about those in this topic

What is HTML?
HTML stands for HyperText Markup Language. It is the primary markup language on the web. Essentially, HTML allows a user to create the structure of a page, using text-based information. This is done by denoting certain text as lines, headings, paragraphs, lists, etc. HTML also has certain things that allow it to interact dynamically, like forms, embedded images, and other objects. By itself, HTML is not dynamic (its content is static), you can enhance HTML by using thing such as PHP, JSP, ASP, Javascript, Ajax - all which can help enhance a webpage and give it more dynamic abilities, such as drawing data from a database, or loading content fro others sites. HTML is written in the form of tags, surrounded by angle brackets.

A good example of basic HTML, taken from Wikipedia, is of the generic span tag:

HTML

<span id="anId" class="aClass" style="color:blue;" title="Hypertext Markup Language">HTML</span>

HTML, though, is just text. It requires CSS for colors, fonts, layout, and other aspects of document presentation.

What is CSS?
CSS stands for Cascading Style Sheet. It doesn't do anything by itself, but it works with HTML to render pages with colors, fonts, and other layout attributes for better presentation. It's primary function is to help separate document content (written in HTML or a similar markup language) from document presentation (written in CSS). By doing this, it improves content accessibility, provides more flexibility and control in the specification of presentation characteristics, and reduces complexity and repetition in the structural content. Using CSS can also allow the same markup page (HTML) to be presented in different styles for different rendering methods. Examples of these rendering methods are on-screen (what you see when you are on the computer) and in print (what you see when you print).

CSS is essentially embedded in HTML in two ways.

The first way is by having it directly on the page the user is viewing. This method looks like the code shown below:

HTML

<style type="text/css">
table { width: 100%; background: #000; color: #fff; }
</style>

The other way is to import the stylesheet. This is done using two methods.

HTML

<style type="text/css">
@import url("stylesheet.css");
</style>

OR

HTML

<link rel="stylesheet" href="stylesheet.css" type="text/css">

So what should I take out of that?
Basically, the only thing that's really important out of those two points is that you know that HTML is for the content, and CSS is for the style. It becomes important, when programming, to be able to separate the two, because "cleaner code" is a lot easier to manage and edit. If you decide to give it a shot, you'll soon realize that it's a lot easier to make less errors if your code is neater.

Hopefully that helps tell you a little bit about HTML & CSS. If you have questions, feel free to ask them. I'll try to update this topic when I can.

[metaphysics]

Alright I added some basic facts about HTML and CSS. I'm happy to answer any questions now.

[~:MusicMaster:~]

Nice additions. But I still stand by what I said: Add some cool looking examples of what you can do

[metaphysics]

The best examples of website coding can be found here at the CSS Zen Garden. That's basically where a bunch of top notch designers create designs for an amazing coder to flawlessly code them. I can probably code similar to how he codes, but the work found there is quite impressive. You can see the plain HTML file here. That is the file that is used for every design on the site. It's really interesting in that way - the CSS is the only thing that changes.

[.Visage]

I NEED HELP

Ok so i thought would make my own website and stuff and i managed to code it using photoshop..yeah u read that right photoshop coded for me and i managed to get it done till here:

www.visagearts.co.cc

I was wondering how to make the images in the navigation bar change when i hover my mouse over it(like make it glow or smt) so can ya help me out? I think the coding for the page is wrong since everything in the page is an image..so can you help me out in coding the site ? I am nub at html.

Edit: forgot to mention that all the links in the navigation lead to the wrong page and i havent made any of the other pages either since i dont know how to make them

[.Visage]

teach me to code it plox (without photoshop).

I am gonna make another template pretty soon..so maybe after i post that one we can start our lessons?