PDA

View Full Version : Best way to learn html?


tony09uk
02-03-2011, 09:25 PM
Whats the best way to learn HTML? I have been on w3 schools and read through the pages from start to end. I have been on a few video's in youtube and I have tried to complete a couple of simple sites using HTML and some basic CSS. But I am now coming across the problem that the stuff I am doing is using the same common tags. I just started to in put each tag individually into dreamweaver to see what effect it would have on the text but many seemed to do nothing (im assuming this is because those ones need to be inputted as attributes). So where do I go from here? I have looked at doing more advanced sites but then I seem to just confuse myself by taking on something to complex.....even though it seemed fairly simple to being with. Any ideas will be greatly appreciated.

Many thanks.

Another question:

What command is there in CSS so I can center links only...I can't remember what I used now, but it centered all text. I did use <centre> but was advised against using that tag....don't remember getting a reason though.

jmichae3
02-04-2011, 02:15 AM
that is a British spelling. HTML is a USA English spelling. <center>
the css you want is style="text-align:center;"

edbr
02-04-2011, 02:28 AM
its not How To Meet Ladies either :(

jmichae3
02-04-2011, 03:22 AM
also, you might want to get O'Reilly Press' "CSS Cookbook". It's very informative. Also, you should have a simple CSS book that tells you what things mean and how to use them and what they do.
read carefully, there are a lot of fluff-filled books out there.
O'Reilly makes good books - I don't know if they have a css book.

one of the tricks to properly coding HTML is the fact that elements must be nested.
<p><br><strong><em>good</em> stuff</strong> maynard!</p>

<p><strong><em>bad</strong> idea</em> joe! tag soup.</p><br>

<center> is deprecated, along with <font>, <i> and <b> and some other elements. my books are packd, so I can't give you a comprehensive list for HTML 4.0. The reason for the USA English spelling is that the internet originated in the USA as a sort of military/research project if I am not mistaken. my best understanding is that the SGML and HTML document standards also originated in the USA as a sort of research paper document format that you could send over that network. I remember using the NCSA Mosaic browser at work (my first browser), which was much later.

there is SOME formatting associated with some of the elements. like the
- p element takes up a whole line and has top and bottom padding,
- div takes up a whole line and has no top or bottom padding (also doesn't show well in google),
- strong is bolded
- em is italicized
- s is strikethrough
- blockquote is indented
- li takes on a number of forms: bullets if used in ul, or numbers or alpha characters or outline style if used in ol, ol and ul can be nested within an li element, and people often use this concept for DHTML menus, because you can disable the bullets. you can also use an image in place of the bullets.

if it's not too overwhelming, you are welcome to have a look at my site's HTML and CSS. the HTML is simple. the CSS is the complex part.

you can assign a CSS class to an element like so:
<p class="fooz">my text here<span style="background-color:#fc9;color:red;">red text</span></p>
<p class="fooz">more of my text here</p>

everything within the p tag, elements, text, etc, unless an element within has its own class or style, will take on the formatting of the class fooz.
up in the top section of the document, you would put this:

<html>
<head>
<style type="text/css">
.fooz {
font-weight: bold;
font-size:x-large;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#080;
text-align:center;
}
</style>
<title></title>
</head>
<body>
<p class="fooz">my text here<span style="background-color:#fc9;color:red;">red text</span></p>
<p class="fooz">more of my text here</p>
</body>
</html>


they will do nothing if you don't have them nested right. some elements you will use more than others. the form elements I use a lot with javascript and maybe a little DHTML to write an application to solve a problem.

I looked at the most recent version of the Javascript Bible by Danny Goodman (6th edition), and it's nothing like the useful 2nd edition. now it's just a long list of functions, but it doesn't tell you how to use them. 2nd ed. is much more useful.

I think you should start putting HTML and CSS together in interesting ways. If you have dreamweaver, start playing with the templates and dig into them and see how they are built.

there are some tricks to css sometimes, because some things only work on certain browsers.
for instance,

div.rounded {
-moz-border-radius:8px;
-webkit-border-radius:8px;
-o-border-radius:8px;
border-radius:8px;
padding:24px;
}
...
<div class="rounded">this thing will be rounded. enjoy.
well, all except for ie! (ie needs a good swift boot)</div>

will give you rounded corners.
note that I had to do some tweaking because of the as-yet-unsolidified-spec for CSS3 on border-radius.

I really wish browser vendors wouldn't do that -moz -o -webkit thing and just stick to what's in the spec!

Corrosive
02-04-2011, 07:28 AM
that is a British spelling. HTML is a USA English spelling. <center>
the css you want is style="text-align:center;"

Brits Ruuuuuule!!!

tony09uk
02-04-2011, 09:43 PM
right, I have been to this site:

http://blixt.org/articles/tabbed-navigation-using-css#section=introduction

and followed the tutorial to create the tabbed menu. The only problem is my tabs are square, not round edges, like those in the tutorial. Is that because he has used an image to create rounded edges? If so what's can I achieve the same result using code only?

tony09uk
02-04-2011, 09:44 PM
I will have a play with that now, thanks dude.