AmyR2 Posted August 23, 2009 Share Posted August 23, 2009 Hi Everyone,How is everyone doing? I am very confused on what if anything I am doing wrong here. Last year around this time is when I found out possibly something about there is CSS now? I have been making websites since I began my very 1st one back in 1995. Due to my health, it is very hard for me to get out of the house much. So, I've been doing sites for hobby and I enjoy creating things too and helping others out. On each of my sites, one of the pages I always make for my sites is a links page which will of course have links to other people sites about the same topic I'm doing my sites on. So, then that helps others out by giving them free advertising. Anyways, about a year or so ago before my health got worse and some other problems too which caused me to have to stop doing the site, I was helping out my sister and her husband with their site for his new job he had just got since they don't know anything on making websites. But then I ran into a few problems and when I went to a help forum someone tells me stuff that starts getting me confused and stuff. They say something about not using tables anymore. I'm not sure if I understand what this means. Then I tried asking a friend of mine who is a computer programmer and also he has a website of his own too. He said nothing is wrong with my codes.My sister and her husband are having this lady work on the site now for them, and I went to the site and I'm looking at the codes and it has <table> on it. Since this is a profressional website designer, shouldn't she know if this is true about the tables? Thanks,Amy Link to comment Share on other sites More sharing options...
nworst Posted August 23, 2009 Share Posted August 23, 2009 It's just a matter of choice, if you prefer tables, just use tables I prefer using <div>. Link to comment Share on other sites More sharing options...
Ingolme Posted August 23, 2009 Share Posted August 23, 2009 Technically, tables are less efficient and convenient.Tables once were the only way to position content in the page, but then CSS arrived around 10 years ago. CSS allows you to create boxes and locate them in a page.The reason tables are not as good as CSS is because the browser takes longer to render then, making tables requires more mark-up, and table layouts are not very flexible.The last reason not to use tables, though more difficult to understand, is semantics. In HTML each element has a specific use: <p> elements describe paragraphs, <ul> and <ol> elements define lists, <em> and <strong> define emphasis and strong emphasis in text, and <table> defines a table. A table is a two-dimensional collection of information. If you use a table to lay out your site, your are giving the message that the content of your site is tabular information.This is the proper way to use tables: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <title>Simple CSS layout</title> <style type="text/css"> #left { width: 120px; background-color: #CCF; } #main { background-color: #FCC; margin-left: 120px; } #menu { list-style-type: none; padding: 0; margin: 0; } #menu li a { display: block; padding: 5px; background-color: blue; color: white; } #menu li a:hover { background-color: red; } </style> </head> <body> <div id="left"> <ul id="menu"> <li><a href="">Menu item 1</a></li> <li><a href="">Menu item 2</a></li> </ul> </div> <div id="main"> <h1>Main content</h1> <p>This is a paragraph</p> </div> </body></html> One important thing to know is that you can put your CSS into separate files which are loaded into the HTML file. This means that they only need to be loaded once and then they are taken from the user's cache, which saves a lot of bandwidth. Link to comment Share on other sites More sharing options...
Synook Posted August 23, 2009 Share Posted August 23, 2009 http://www.hotdesign.com/seybold/ Link to comment Share on other sites More sharing options...
bigsilk Posted August 23, 2009 Share Posted August 23, 2009 You can also reuse CSS' (or, Cascading Style Sheets) over and over by changing just a few lines of code, even a single number. So, if you find a neat trick, you can save it separately (often called a 'code snippet') then copy and paste it to just about any CSS. Then, customize for the project. Right now I'm learning to create boxes with rounded corners without using a single image. All done in CSS. And whenever a project calls for it, I just open the file, copy it, paste it and change it to suit my purposes.Say you design a site with ten pages using tables. To change the font color of the site, you'd have to go though the whole thing and change each page. In CSS, you go to the CSS page, which is often stored in a separate directory (usually one folder up from the index.html, or, main page). Because each HTML page has one line of code telling the page to look for the CSS in this folder, it will update the entire site by changing one bit of code in it, such as changing a color or font or font size or background color.I hope you're feeling well enough soon to start coding again. Link to comment Share on other sites More sharing options...
AmyR2 Posted August 23, 2009 Author Share Posted August 23, 2009 Thank you so much everyone for writing back. The other things too is see I don't type out codes. I use editors like Microsoft Word, Powerpoint, Excel, I also have one in my Netscape browser it gives me, and any site I've got my sites on have an editors there too. I think I mostly understand the codes though because of when I hit view source, it shows the codes.One of the other things is due to my handicaps/disabilities, it's hard for me to type for long, so having to type all those codes out is very difficult for me to do because of like brackets that are typed around things. You have to press more than one button at a time to do that and something I can't really do much and causes me more pain too.I've taken so many computer classes over the years too and we used all those programs I mentioned above. I don't even know if I understand what you are talking about Bandwidth? Sorry, but I have a terrible time with vocabulary. It makes life harder for me. I also don't ever plan on having a job of any sort, and so far I don't understand why, but my sites are all showing up just fine and everyone who signs my guestbooks too seem to really enjoy my sites and mention stuff too like I have good structure. So, that makes it even more confusing about the table thing. Plus like I said, the lady who is now doing the site for my sister and her husband tables on the site. One other question I sort of have about the codes you typed out, is there anything to remove or even add to it do you just copy and paste the whole thing? Like do I keep the quotes the way you have them with nothing in between them? and those # things? Also, I don't know if I understand what people are talking about when they say to put the html in a separate file than the css stuff. It looks like the codes are all on the same page when you hit view source. So, I don't know if I understand what this means. Also, what part is exactly the css and what part is considered the html? Is it the words like body, font, p, etc... that are the html, and the symbols and brackets that is the css? or is it the things you have typed between the words style? That's what is confusing since you have html typed on the top of the codes and in between the brackets. So, this is what is very confusing. Seems like it's all on one file or one page. Thought of something else I'd ask too:I'm reading on this part of the site W3schoolscss, and see the only thing I don't understand see it says the syntax is this selector {property:value}But, then it shows this farther down on the page <p class="right">This paragraph will be right-aligned.</p><p class="center">This paragraph will be center-aligned.</p>So, this is what is confusing, is the brackets thing. They say it's suppose to be one way, but then they switch it around and use the greater than less than brackets. Does it matter what brackets you use for things? Thanks,Amy Link to comment Share on other sites More sharing options...
AmyR2 Posted August 23, 2009 Author Share Posted August 23, 2009 Sorry for posting again so fast, but I just thought of another question to ask.You are talking about the folders the files are in. They are all in the same folder. For example when I look in the folder for this page I created using Powerpoint, all the files, the .css file, htm files, and all the other files are all in the same folder. The only other thing I don't know if I understand, yes I understand what fonts are and I know how to change them from the classes I've taken. We had to do all that stuff, Arial, etc.. Which I thought you have to change them anyways no matter what kind of a document you are creating. For a website, or a letter you are writing to a friend or any other documents. Even in our emails it seems we have to specify all those things. Seems the list goes on and on as to what we need to know how to do these type of things for. Link to comment Share on other sites More sharing options...
Synook Posted August 24, 2009 Share Posted August 24, 2009 The other things too is see I don't type out codes. I use editors like Microsoft Word, Powerpoint, Excel, I also have one in my Netscape browser it gives me, and any site I've got my sites on have an editors there too.All the programs you mention are WYSIWYG (what you see is what you get editors), and they provide a rudimentary way to create web pages. However, even though they do generate HTML code as you see in "view source", that code that is generated is neither optimal or very good.I think I mostly understand the codes though because of when I hit view source, it shows the codes.That's just viewing the source...One of the other things is due to my handicaps/disabilities, it's hard for me to type for long, so having to type all those codes out is very difficult for me to do because of like brackets that are typed around things. You have to press more than one button at a time to do that and something I can't really do much and causes me more pain too.Have you tried using sticky keys?I also don't ever plan on having a job of any sort, and so far I don't understand why, but my sites are all showing up just fine and everyone who signs my guestbooks too seem to really enjoy my sites and mention stuff too like I have good structure. So, that makes it even more confusing about the table thing.When the people mention "structure", I suppose they mean visual structure, which is different from the structure of your code. People can be good designers without knowing how to code a single line of HTML!Plus like I said, the lady who is now doing the site for my sister and her husband tables on the site.Well, if she is using tables for layout, she is unfortunately doing it in an old-fashioned and non-best-practice fashion. Show her the site in my previous post, see what she says. Nevertheless, it is correct to use tables for their intended purpose - displaying tabular data.Also, I don't know if I understand what people are talking about when they say to put the html in a separate file than the css stuff. It looks like the codes are all on the same page when you hit view source. So, I don't know if I understand what this means. Also, what part is exactly the css and what part is considered the html? Is it the words like body, font, p, etc... that are the html, and the symbols and brackets that is the css? or is it the things you have typed between the words style?The CSS is the code that goes between the <style> tags - that can all be moved to a separate file and linked using the <link> tag.I'm reading on this part of the site W3schoolscss, and see the only thing I don't understand see it says the syntax is thisselector {property:value}But, then it shows this farther down on the page<p class="right">This paragraph will be right-aligned.</p><p class="center">This paragraph will be center-aligned.</p>So, this is what is confusing, is the brackets thing. They say it's suppose to be one way, but then they switch it around and use the greater than less than brackets. Does it matter what brackets you use for things?CSS:selector {property:value}HTML:<p class="right">This paragraph will be right-aligned.</p><p class="center">This paragraph will be center-aligned.</p>You are talking about the folders the files are in. They are all in the same folder. For example when I look in the folder for this page I created using Powerpoint, all the files, the .css file, htm files, and all the other files are all in the same folder.That's because PowerPoint is stupid (for want of a better word), and doesn't care about folder structure. However, to make it easier for you, when coding, it is better to have a logical and easy-to-understand folder structure.The only other thing I don't know if I understand, yes I understand what fonts are and I know how to change them from the classes I've taken. We had to do all that stuff, Arial, etc..Which I thought you have to change them anyways no matter what kind of a document you are creating. For a website, or a letter you are writing to a friend or any other documents. Even in our emails it seems we have to specify all those things. Seems the list goes on and on as to what we need to know how to do these type of things for.That's right - there are a lot of settable parameters. That's what references are for! Link to comment Share on other sites More sharing options...
AmyR2 Posted August 24, 2009 Author Share Posted August 24, 2009 All the programs you mention are WYSIWYG (what you see is what you get editors), and they provide a rudimentary way to create web pages. However, even though they do generate HTML code as you see in "view source", that code that is generated is neither optimal or very good.I don't know if I understand what that means about it not being very optimal. That's just viewing the source...This makes me even more confused now. Back before I started creating websites, I read things about saying to hit view source is what they said to do. It seems to be showing the same codes that are typed out on the sites. Here is what I see when I hit view page source: <!doctype html><html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>Google</title><script>window.google={kEI:"QgCSSvD4BpK7twePjLyCDg",kEXPI:"21355,21458,21540,21605",kCSIE:"21355,21458,21540,21605",kCSI:{e:"21355,21458,21540,21605",ei:"QgCSSvD4BpK7twePjLyCDg"},pageState:"#",kHL:"en",j:{en:1,l:function(){},e:function(){},b:location.hash&&location.hash!="#",pl:[]}};(function(){for(var d=0,c;c=["ad","bc","p","pa","zd","ac","pc","pah","ph","zc","zz"][d++](function({google.j=function(){google.j.pl.push([b,arguments])}})©})();window.google.sn="webhp";window.google.timers={load:{t:{start:(new Date).getTime()}}};try{window.google.pt=window.gtbExternal&&window.gtbExternal.pageT()||window.external&&window.external.pageT}catch({}window.google.jsrt_kill=1;</script><style>td{line-height:.8em;}.gac_m td{line-height:17px;}form{margin-bottom:20px;}body,td,a,p,.h{font-family:arial,sans-serif}.h{color:#36c;font-size:20px}.q{color:#00c}.ts td{padding:0}.ts{border-collapse:collapse}#gbar{height:22px}.gbh,.gbd{border-top:1px solid #c9d7f1;font-size:1px}.gbh{height:0;position:absolute;top:24px;width:100%}#gbi,#gbg,#gbs{background:#fff;left:0;position:absolute;text-align:left;visibility:hidden;z-index:1000}#gbi,#gbg{border:1px solid;border-color:#c9d7f1 #36c #36c #a2bae7;z-index:1001}#guser{padding-bottom:7px !important;text-align:right}#gbar,#guser{font-size:13px;padding-top:1px !important}@media all{.gb1,.gb3{height:22px;margin-right:.5em;vertical-align:top}#gbar{float:left}}.gb2{display:block;padding:.2em .5em}a.gb1,a.gb2,a.gb3{color:#00c !important}.gb2,.gb3{text-decoration:none}a.gb2:hover{background:#36c;color:#fff !important}</style><script>var _gjwl=location;function _gjuc(){var b=_gjwl.href.indexOf("#");if(b>=0){var a=_gjwl.href.substring(b+1);if(/(^|&)q=/.test(a)&&a.indexOf("#")==-1&&!/(^|&)cad=h($|&)/.test(a)){_gjwl.replace("/search?"+a.replace(/(^|&)fp=[^&]*/g,"")+"&cad=h");return 1}}return 0}function _gjp(){!(window._gjwl.hash&&window._gjuc())&&setTimeout(_gjp,500)};google.y={};google.x=function(e,g){google.y[e.id]=[e,g];return false};window.clk=function(b,c,d,e,f,g,h){if(document.images){var a=encodeURIComponent||escape;(new Image).src=["/url?sa=T","",c?"&oi="+a©:"",d?"&cad="+a(d):"","&ct=",a(e||"res"),"&cd=",a(f),b?"&url="+a(b.replace(/#.*/,"")).replace(/\+/g,"%2B"):"","&ei=","QgCSSvD4BpK7twePjLyCDg",g].join("")}return true};window.gbar={qs:function(){},tg:function(e){var o={id:'gbar'};for(i in e)o=e;google.x(o,function(){gbar.tg(o)})}};</script></head><body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#551a8b alink=#ff0000 onload="try{!google.j.b&&document.f.q.focus()}catch(e){};if(document.images)new Image().src='/images/nav_logo6.png'" topmargin=3 marginheight=3><textarea id=csi style=display:none></textarea><script>if(google.j.b)document.body.style.visibility='hidden';</script><iframe name=wgjf style=display:none src="" onload="google.j.l()" onerror="google.j.e()"></iframe><textarea id=wgjc style=display:none></textarea><textarea id=csi style=display:none></textarea><textarea id=hcache style=display:none></textarea><span id=main><span id=ghead><div id=gbar><nobr><b class=gb1>Web</b> <a href="http://images.google.com/imghp?hl=en&tab=wi" onclick=gbar.qs(this) class=gb1>Images</a> <a href="http://video.google.com/?hl=en&tab=wv" onclick=gbar.qs(this) class=gb1>Videos</a> <a href="http://maps.google.com/maps?hl=en&tab=wl" onclick=gbar.qs(this) class=gb1>Maps</a> <a href="http://news.google.com/nwshp?hl=en&tab=wn" onclick=gbar.qs(this) class=gb1>News</a> <a href="http://www.google.com/prdhp?hl=en&tab=wf" onclick=gbar.qs(this) class=gb1>Shopping</a> <a href="http://mail.google.com/mail/?hl=en&tab=wm" class=gb1>Gmail</a> <a href="http://www.google.com/intl/en/options/" onclick="this.blur();gbar.tg(event);return !1" aria-haspopup=true class=gb3><u>more</u> <small>▼</small></a><div id=gbi><a href="http://groups.google.com/grphp?hl=en&tab=wg" onclick=gbar.qs(this) class=gb2>Groups</a> <a href="http://books.google.com/bkshp?hl=en&tab=wp" onclick=gbar.qs(this) class=gb2>Books</a> <a href="http://scholar.google.com/schhp?hl=en&tab=ws" onclick=gbar.qs(this) class=gb2>Scholar</a> <a href="http://www.google.com/finance?hl=en&tab=we" onclick=gbar.qs(this) class=gb2>Finance</a> <a href="http://blogsearch.google.com/?hl=en&tab=wb" onclick=gbar.qs(this) class=gb2>Blogs</a> <div class=gb2><div class=gbd></div></div><a href="http://www.youtube.com/?hl=en&tab=w1" onclick=gbar.qs(this) class=gb2>YouTube</a> <a href="http://www.google.com/calendar/render?hl=en&tab=wc" class=gb2>Calendar</a> <a href="http://picasaweb.google.com/home?hl=en&tab=wq" onclick=gbar.qs(this) class=gb2>Photos</a> <a href="http://docs.google.com/?hl=en&tab=wo" class=gb2>Documents</a> <a href="http://www.google.com/reader/view/?hl=en&tab=wy" class=gb2>Reader</a> <a href="http://sites.google.com/?hl=en&tab=w3" class=gb2>Sites</a> <div class=gb2><div class=gbd></div></div><a href="http://www.google.com/intl/en/options/" class=gb2>even more »</a> </div></nobr></div><div id=guser width=100%><nobr><a href="/url?sa=p&pref=ig&pval=3&q=http://www.google.com/ig%3Fhl%3Den%26source%3Diglk&usg=AFQjCNFA18XPfgb7dKnXfKz7x7g1GDH1tg">iGoogle</a> | <a href="https://www.google.com/accounts/Login?hl=en&continue=http://www.google.com/">Sign in</a></nobr></div><div class=gbh style=left:0></div><div class=gbh style=right:0></div></span> <center><span id=body><center><br clear=all id=lgpd><img alt="Google" height=110 src="/intl/en_ALL/images/logo.gif" width=276 id=logo onload="window.lol&&lol()"><br><br><form action="/search" name=f><table cellpadding=0 cellspacing=0><tr valign=top><td width=25%> </td><td align=center nowrap><input name=hl type=hidden value=en><input name=source type=hidden value=hp><input autocomplete="off" maxlength=2048 name=q size=55 class=lst title="Google Search" value=""><br><input name=btnG type=submit value="Google Search" class=lsb onclick="this.checked=1"><input name=btnI type=submit value="I'm Feeling Lucky" class=lsb onclick="this.checked=1"></td><td nowrap width=25% align=left><font size=-2>  <a href=/advanced_search?hl=en>Advanced Search</a><br>  <a href=/preferences?hl=en>Preferences</a><br>  <a href=/language_tools?hl=en>Language Tools</a></font></td></tr></table></form><br></center></span> <span id=footer><center><br><font size=-1><a href="/intl/en/ads/">Advertising Programs</a> - <a href="/services/">Business Solutions</a> - <a href="/intl/en/about.html">About Google</a></font><p><font size=-2>©2009 - <a href="/intl/en/privacy.html">Privacy</a></font></p></center></span> </span> <script>function _gjp() {!(location.hash && _gjuc()) && setTimeout(_gjp, 500);}google.j[1]={cc:[],co:['ghead','body','footer','xjsi'],pc:[],nb:0,css:document.getElementsByTagName('style')[0].innerHTML,main:'<span id=ghead></span><span id=body></span><span id=footer></span><span id=xjsi></span>'};</script><script>function wgjp(){var xjs=document.createElement('script');xjs.src='/extern_chrome/c9fe100d9e542c1e.js';(document.getElementById('xjsd') || document.body).appendChild(xjs)};</script><div id=xjsd></div><div id=xjsi><script>if(google.y)google.y.first=[];if(google.y)google.y.first=[];if(!google.xjs){google.dstr=[];google.rein=[];window.setTimeout(function(){var a=document.createElement("script");a.src="/extern_js/f/CgJlbhICdXMrMAo4LkAILCswDjgFLCswFjgOLCswFzgDLCswGDgELCswGTgGLCswHTgWLCswJTjJiAEsKzAmOAUsKzAnOAIsKzAqOAEsKzArOAQs/6-srbP3V5BY.js";(document.getElementById("xjsd")||document.body).appendChild(a)},0);google.xjs=1};google.y.first.push(function(){google.ac.m=1;google.ac.i(document.f,document.f.q,'','')});google.xjs&&google.j&&google.j.xi&&google.j.xi()</script></div><script>(function(){function a(){google.timers.load.t.ol=(new Date).getTime();google.report&&google.report(google.timers.load,google.kCSI)}if(window.addEventListener)window.addEventListener("load",a,false);else if(window.attachEvent)window.attachEvent("onload",a);google.timers.load.t.prt=(new Date).getTime();})();</script>Have you tried using sticky keys? Sorry, not sure if I know even how to do that. Well, if he is using tables for layout, he is unfortunately doing it in an old-fashioned and non-best-practice fashion. Show him the site in my previous post, see what he says. Nevertheless, it is correct to use tables for their intended purpose - displaying tabular data. I don't know what you mean. Show the site to who? Here is the url to their site if you want to see what I'm talking about tables on the site. So, that is what makes things really confusing to me is when I see tables on sites. Ast ResurfacingOne other thing I was thinking too. Can I just make sure I'm not misunderstanding what some of these things are intended for? See, I read things that say CSS for mobile devices. I hope these are not codes that are for mobile devices because I don't even have one. Just one thing, in order to bold a word something you type the opening tag <b> and then this is the closing tag </b>?I thought that was how to do the things? Can I also ask just one more question about the link tag. I thought the way to put a link on a site is to do <a href="">Name of the page</a>So, like <a href="http://www.w3schools.com">W3schools</a>Don't we need to know how to do the codes though? I mean in order to put pictures on the pages, and I change the colors of the background, the text, all that stuff I understand how to do and selecting the font styles. Maybe I've been doing something all along and didn't even realize that was what it's called CSS. CSS:selector {property:value}HTML:<p class="right">This paragraph will be right-aligned.</p><p class="center">This paragraph will be center-aligned.</p> Yes, but it seems to be typed out on the same page. That's what I don't understand. Why do they have it typed on the same page. It makes it confusing because they say to separate it, but then when you click on the try me thing, the codes are all on the same page there. so, why is it typed out on the same page?It also seems in the codes given above for the 2 page layout, seems to all be in the same page there. So, then do I need to take out the part that is in the <style></style>?If I understand what is meant to remove all that coding, this whole part, I don't put it anywhere: <style type="text/css">#left { width: 120px; background-color: #CCF; }#main { background-color: #FCC; margin-left: 120px; }#menu { list-style-type: none; padding: 0; margin: 0; }#menu li a { display: block; padding: 5px; background-color: blue; color: white; }#menu li a:hover { background-color: red; }</style>Thanks,Amy Link to comment Share on other sites More sharing options...
Ingolme Posted August 24, 2009 Share Posted August 24, 2009 CSS can be put in the same page as the HTML, but it is more efficient to put it elsewhere.The W3schools examples have it on the same page because you need to be able to edit both the HTML and CSS at the same time.About all the sites that use tables: The reason that people still use tables is because bad habits are difficult to get rid of, and the amateur web developers continue learning web development from the wrong sources. Link to comment Share on other sites More sharing options...
Synook Posted August 24, 2009 Share Posted August 24, 2009 I don't know if I understand what that means about it not being very optimal.Not "the best way".This makes me even more confused now. Back before I started creating websites, I read things about saying to hit view source is what they said to do. It seems to be showing the same codes that are typed out on the sites. Here is what I see when I hit view page source:Yes, but do you understand that?Sorry, not sure if I know even how to do that.Sticky keys allows you to press a combination of keys (e.g. Shift + [) one by one, instead of at the same time. You can enable it (on Windows) by pressing Shift five times quickly.I don't know what you mean. Show the site to who? Here is the url to their site if you want to see what I'm talking about tables on the site. So, that is what makes things really confusing to me is when I see tables on sites.Show http://www.hotdesign.com/seybold/ to the person building your friend's site.The website you mentioned does use tables, which is not good.One other thing I was thinking too. Can I just make sure I'm not misunderstanding what some of these things are intended for? See, I read things that say CSS for mobile devices. I hope these are not codes that are for mobile devices because I don't even have one.No, CSS is for web pages in general, not just for mobile devices.Just one thing, in order to bold a word something you type the opening tag <b> and then this is the closing tag </b>?I thought that was how to do the things?Using the <b> tag is non-semantic, as in, it does not properly convey the meaning of the code. CSS allows you to separate content and presentation, so that your text can be set out by itself, then styled. Using CSS, you would apply font-weight:bold; to the element you wanted bolded.Can I also ask just one more question about the link tag. I thought the way to put a link on a site is to do <a href="">Name of the page</a>So, like <a href="http://www.w3schools.com">W3schools</a> I was talking about header links, to other resources. To link to a CSS stylesheet, for example, you would write:<link rel="stylesheet" type="text/css" href="stylesheet.css"> Don't we need to know how to do the codes though? I mean in order to put pictures on the pages, and I change the colors of the background, the text, all that stuff I understand how to do and selecting the font styles. Maybe I've been doing something all along and didn't even realize that was what it's called CSS.It is possible to design web pages without coding them, using WYSIWYG editors; however, is it better to code websites as they will then be smaller, easier to maintain, and cleaner.Yes, but it seems to be typed out on the same page. That's what I don't understand. Why do they have it typed on the same page. It makes it confusing because they say to separate it, but then when you click on the try me thing, the codes are all on the same page there. so, why is it typed out on the same page?It also seems in the codes given above for the 2 page layout, seems to all be in the same page there. So, then do I need to take out the part that is in the <style></style>?If I understand what is meant to remove all that coding, this whole part, I don't put it anywhere:<style type="text/css">#left { width: 120px; background-color: #CCF; }#main { background-color: #FCC; margin-left: 120px; }#menu { list-style-type: none; padding: 0; margin: 0; }#menu li a { display: block; padding: 5px; background-color: blue; color: white; }#menu li a:hover { background-color: red; }</style>The <style></style> tags delimit an area of CSS[/]i, which means that inside that area things are written differently (in CSS, as opposed to HTML). To separate it, you take everything between the <style> tags, put it in a separate file, name it with the .css extension, and link it, as explained above. Link to comment Share on other sites More sharing options...
AmyR2 Posted August 24, 2009 Author Share Posted August 24, 2009 Yes, but do you understand that?Yes, I thought I understood what the codes mean. In all the classes I've taken over the years, I've learned so much computer stuff. The reason I got interested in using computers is actually from my Dad(before he passed away) because he was a computer programmer. The main reason alot of this stuff is fun for me is all the coding looks like a bunch of math and I love math. All my life I've done great in math, science, business classes, but since I don't do to well with vocabulary mostly, makes English and reading classes harder for me. Like on the college entrance test I scored high enough in the math sections to take classes like Calculus, Trig, etc.. But anyways, I've made so many sites, over 50 I've made so far. Yes, I know alot. I enjoy creating things for others to enjoy too. So, like I make sites about celebs mostly. I put at least one page just picture gallery. News page, biography is about the pages I have for each site. The main page I'll put like 1 or 2 pictures and then the links for other pages on my site. I still don't know if I totally understand about not doing tables. So far hasn't been messing up any of my sites, plus the teacher I had taught us how to do them. So, I guess I had the wrong teacher Of course since I'm just doing it for hobby and not for a job, I guess it doesn't matter that much. But of course I like all my work to look nice, no matter what it's for. Show http://www.hotdesign.com/seybold/ to the person building your friend's site.The website you mentioned does use tables, which is not good.I don't even know the person who is doing the site. It is someone my sister and her husband is paying to do the site. Link to comment Share on other sites More sharing options...
AmyR2 Posted August 26, 2009 Author Share Posted August 26, 2009 Ok, here is a way I thought of to ask about this only thing I'm not sure that I understand is it says about External Style sheets. It says that they shouldn't contain any html tags, but then in the example they give, it does seem to have html tags: hr {color:sienna}p {margin-left:20px}body {background-image:url("images/back40.gif")}I thought that body, p, and hr were html tags? Link to comment Share on other sites More sharing options...
Ingolme Posted August 26, 2009 Share Posted August 26, 2009 Ok, here is a way I thought of to ask about this only thing I'm not sure that I understand is it says about External Style sheets. It says that they shouldn't contain any html tags, but then in the example they give, it does seem to have html tags:I thought that body, p, and hr were html tags?They aren't tags, those are references to elements.These are tags: <body>, </body>, <p>, <hr>.A tag can be an opening tag, a closing tag or an empty tag.In the following example there are four tags, but only two elements:<h2>Title</h2><p>Text</p> CSS is a set of instructions that tells the browser how to style HTML (or XML) elements. In order to do that, it has to refer to the elements somehow. It refers to them by their name ("body", "p", "hr") Link to comment Share on other sites More sharing options...
AmyR2 Posted August 26, 2009 Author Share Posted August 26, 2009 They aren't tags, those are references to elements.These are tags: <body>, </body>, <p>, <hr>.A tag can be an opening tag, a closing tag or an empty tag.In the following example there are four tags, but only two elements:<h2>Title</h2><p>Text</p> Yes, I thought I understood that they were tags. Yes, I understand that the words body, p, and hr that are between the brackets are tags. The thing that doesn't make since is they say that the external style sheet can't contain html tags. And it does have the words body, p, and hr in the example they give- hr {color:sienna}p {margin-left:20px}body {background-image:url("images/back40.gif")}Do you see what I'm talking about, they have hr, p, and body typed there in front of the curly brackets? I thought the words body, p, and hr were considered the html tags. So, that is what I am confused about. Why in all the examples does it say the opening tag or start tag and they show the tags typed with brackets around them they show like the words <start tag> </start tag><body> </body><p> </p><title> </title>and so on.So, I always thought that they were trying to say that for the start tags we type the words between the brackets <> and then for the end tag type it again except with a / before the word and put it all in between the brackets <>And anything between the start and end tags are things that people can view. Is that not correct?<p>here is where I type the words that people will see in the paragraph</p>Isn't this the opening paragraph tag <p>? and this is the closing paragraph tag </p>? Link to comment Share on other sites More sharing options...
AmyR2 Posted August 26, 2009 Author Share Posted August 26, 2009 Sorry, I thought of something to add. Here is one of my sites I've made. The very 1st site I made. You can see what I do already know how to do, and then the thing that would help best for me is instead of telling me I'm doing everything wrong and all, maybe tell me how to correct things? Like tell me not to include certain symbols or if it's something I need to add, like say what to add? My Jonathan Taylor Thomas Site Thanks. Link to comment Share on other sites More sharing options...
Ingolme Posted August 26, 2009 Share Posted August 26, 2009 Yes, I thought I understood that they were tags. Yes, I understand that the words body, p, and hr that are between the brackets are tags. The thing that doesn't make since is they say that the external style sheet can't contain html tags. And it does have the words body, p, and hr in the example they give- Do you see what I'm talking about, they have hr, p, and body typed there in front of the curly brackets? I thought the words body, p, and hr were considered the html tags. So, that is what I am confused about. Why in all the examples does it say the opening tag or start tag and they show the tags typed with brackets around them they show like the words <start tag> </start tag><body> </body><p> </p><title> </title>and so on.So, I always thought that they were trying to say that for the start tags we type the words between the brackets <> and then for the end tag type it again except with a / before the word and put it all in between the brackets <>And anything between the start and end tags are things that people can view. Is that not correct?<p>here is where I type the words that people will see in the paragraph</p>Isn't this the opening paragraph tag <p>? and this is the closing paragraph tag </p>?I just told you that those are not tags in my previous post.A tag has angle brackets: < >What is in the CSS stylesheet is the name of the element. An element is a type of node in the Document Object Model.A tag and an element are not the same thing. An element is the data itself, a set of tags makes up the textual representation of an element.This does not have any tags in it:p { margin: 10px; } This does: <p> { margin: 10px; } </p> Link to comment Share on other sites More sharing options...
AmyR2 Posted August 26, 2009 Author Share Posted August 26, 2009 I just told you that those are not tags in my previous post.A tag has angle brackets: < >What is in the CSS stylesheet is the name of the element. An element is a type of node in the Document Object Model.A tag and an element are not the same thing. An element is the data itself, a set of tags makes up the textual representation of an element.This does not have any tags in it:p { margin: 10px; } This does: <p> { margin: 10px; } </p> Yes, I understand what a paragraph is, I understand what text is. Text is the stuff we are typing out into the document.So, then are the angle brackets < > the tag and the p is the element that is inside the html tag in between the angle brackets which is the tag? Am I understanding that correct?Also, then if I understand it correct, the 1st example that doesn't have the tags the angle brackets < > is the CSS? is that correct? Link to comment Share on other sites More sharing options...
Ingolme Posted August 27, 2009 Share Posted August 27, 2009 The tag is everything inside the angle brackets, including the angle brackets themselves. It's a textual representation of an element.An element is an abstract concept. One who wants to get into computer science needs to learn about abstraction.Maybe an attempt to represent an element could be something like this: { tagName:'p', nodeName:'p', nodeValue:null, nodeType:1, attributes:[object NodeList], ownerDocument:[object HTMLDocument], parentNode:[object HTMLElement], childNodes:[object NodeList], nextSibling:[object HTMLElement], previousSibling:null, style:[object Object]} The element is the actual data, while a "tag" is simply how it is written in the HTML document.The CSS stylesheet gives instructions on how to style an element. There are no tags in the stylesheet, but there may be references to an element. Link to comment Share on other sites More sharing options...
AmyR2 Posted August 27, 2009 Author Share Posted August 27, 2009 Yes, I already understand what all that is. I've taken so many classes over the years on all that stuff. I had to create databases in the classes I took and so many other things I had to create and got A's in it.I'm really good in Science, Math, Computer classes. Terrible in Reading and Vocabulary. That is the only reason that makes things difficult for me is due to not understanding the Vocabulary that well but getting better with it over the years. Yes, I understand what all you said above. That is the only reason I'm not understanding what is wrong with my websites. I have pictures, text, everything on my sites is showing up in the colors I specified for the text and everything else I have on my pages are showing up just fine. Here is what I'm talking about, here is a link to one of my over 50 sites I've created over the years.This is my very first site I created- My JTT Site I know what a computer scientist is. I hope people don't think I'm trying to be a computer scientist. I don't know what making webpages has to do with computer scientist. I mean, I know how to type out text and everything else because of having to do it for research papers, term papers, reports, etc.. in school and we add pictures to the documents too. Now the only other thing I can think of is if someone was trying to build a house, a structure then yes, you need to understand like building codes. But I'm not trying to do that either. Link to comment Share on other sites More sharing options...
Ingolme Posted August 27, 2009 Share Posted August 27, 2009 What does all this have to do with computer science? Building a website in the most efficient way requires understanding how a browser parses HTML and other resources. Understanding how a browser renders an HTML page requires knowing data structures, which in itself is a branch of computer science.When building sites for a company that is planning to get a lot of traffic, you need to worry about bandwidth. Company sites have many sections, and for consistency they want all the sections to look the same. The optimal way is to have one stylesheet that all the different pages can use. The other way is to add a whole lot of styling elements and attributes on each an every page.I won't judge your skills by your first ever website, but I'll point out some of the mistakes in it.The following is compilation of all the code you could have removed from your page to save bandwidth (bandwidth is the measurement of how much data is transferred within a specified amount of time; the more bandwidth that's used, the higher the cost for web servers) bgcolor="#87cefa"background="/fl/JTT99/images/stars.gif"text="#000000"link="#0000ff"alink="#006400"vlink="#ff0000"<basefont size="3"><center>border=0valgin="top"align="center"border="0"border="0"border=0valign="top"valign="top"valign="top"valign="top"<b><font color="#ff0000"></font><b><b><b><font color="#cc3299"></font></b><b><font color="#871f78"></b></font><center><b></b>valign="top"<b><font color="#ff1cae"></b><center><b><b><center><center><center><center>border=0BORDER=0align="center"<center>border="0" align="absmiddle"<center><center></center> But if you were to redesign the thing from scratch, there are a whole lot more unnecessaary elements that can be removed, such as all the <br> tags, <table> tags, and misused <p> tags.The W3C (World Wide Web Consortium, creators of HTML and CSS) have a parser that checks if HTML is correct or not. You should put your sites through it before publishig them. This is the result of validating your website: http://validator.w3.org/check?uri=http%3A%...2Ffl%2FJTT99%2F Link to comment Share on other sites More sharing options...
AmyR2 Posted August 27, 2009 Author Share Posted August 27, 2009 But I'm not building websites for any company. Why do you think I am building a website for someone?I don't even work or have a job. I am on disability. I never plan on getting a job anywhere. So, this doesn't even apply to anything I'm trying to do. My friend who is a computer programmer looked at my sites and he said he found nothing wrong with my sites. So, this is what I am talking about, I don't understand what I am doing wrong. Someone else even said that alot of the errors that are happening, I can't help because of the ads that the free web hosting companies put up. So, since that is also one of the other things. There is no way for me to even correct those things.Also, if I remove the stuff you say to remove, then my background, the colors, all that stuff will not show up anymore. Those are the colors I chose for my text and everything else to show up in. I don't know if you realize that?You see where I have background="/fl/JTT99/images/stars.gif"That is the image I have for the background. If I remove that, the background for the page will not be there anymore. I don't want that to happen. I don't want to remove that image from the page. Those other things are the colors for my links and the text on that page.If I remove them, then there will be no colors anymore. Just plain black text. Nothing else.Yes, I understand what Bandwidth is. I already told you that I've taken so many computer classes over the years. I know what that is. I even had to use all the Office programs- Excel, Access, Powerpoint, so many other things I've used too. I took online computer classes, so yes, I understand what all this is. The teacher had us use tables in the class. I don't know why she had us do that if this is wrong. I guess she was a bad teacher. We had to do databases in the class, add data to the tables. Yes, I understand there are maybe a few things on that first site, but then isn't it ok to keep some things around as an example to myself in the future of things not to do? But I've got so many other sites too. Plus in my guestbook on that site, I don't know why nobody mentioned any of it. When I read what they wrote is what I don't understand why they say that it's one of the best Jtt sites out there and stuff like that. Also, due to hacking and other stuff going on, that keeps messing all my stuff up too. I've had to redo so many things due to that too, and I keep having a terrible time with spyware, viruses, etc.. all over my computer. One of the main reasons for doing my sites is gives me something to do to help get my mind off not feeling well, but since I don't have much energy and other handicaps, I can't do some of the things some may want me to do or use to make things with. As you can see on my Jtt site, I put the pictures of him, links to other sites about him(then that gives people free advertising for their sites), and then you can see how I've got things divided into different sections- news, biography, etc.. I've actually even won awards for some of my sites too. So, thats another reason that makes this really confusing as to what all I could be doing that wrong. Of course most of my sites are on Geocities which is closing soon. But I'm actually not that upset about that. I've found other ways to do what I want to do. I'm using things like Myspace and Facebook for my pages. I've got my photos in the photo album, then I have my blog and other things. Link to comment Share on other sites More sharing options...
Ingolme Posted August 27, 2009 Share Posted August 27, 2009 But I'm not building websites for any company. Why do you think I am building a website for someone?I don't even work or have a job. I am on disability. I never plan on getting a job anywhere. So, this doesn't even apply to anything I'm trying to do. My friend who is a computer programmer looked at my sites and he said he found nothing wrong with my sites. So, this is what I am talking about, I don't understand what I am doing wrong. Someone else even said that alot of the errors that are happening, I can't help because of the ads that the free web hosting companies put up. So, since that is also one of the other things. There is no way for me to even correct those things.Also, if I remove the stuff you say to remove, then my background, the colors, all that stuff will not show up anymore. Those are the colors I chose for my text and everything else to show up in. I don't know if you realize that?You see where I have background="/fl/JTT99/images/stars.gif"That is the image I have for the background. If I remove that, the background for the page will not be there anymore. I don't want that to happen. I don't want to remove that image from the page. Those other things are the colors for my links and the text on that page.If I remove them, then there will be no colors anymore. Just plain black text. Nothing else.The idea is to remove them from the HTML file and put CSS equivalents in a stylesheet instead.For example:body { background-image: url(/fl/JTT99/images/stars.gif);} }Since web development isn't a job you're making a living off, you don't need to worry about efficient websites.I was only answering your question of what's wrong in your site by telling you the things that would need to be improved if you intended on being an actual web developer for hire.A lot of the validation mistakes in your page are actually mismatched tags, for example: <center><b></center></b> Tags aren't supposed to cross eachother like that. Link to comment Share on other sites More sharing options...
AmyR2 Posted August 27, 2009 Author Share Posted August 27, 2009 The idea is to remove them from the HTML file and put CSS equivalents in a stylesheet instead.For example:body { background-image: url(/fl/JTT99/images/stars.gif);} }Since web development isn't a job you're making a living off, you don't need to worry about efficient websites.I was only answering your question of what's wrong in your site by telling you the things that would need to be improved if you intended on being an actual web developer for hire.A lot of the validation mistakes in your page are actually mismatched tags, for example: <center><b></center></b> Tags aren't supposed to cross eachother like that. Yes, that's what I thought I understood that tags aren't suppose to cross each other. I also understand that you need to close the tags properly too, and how some tags like the <br> don't have a closing one. Like here is the opening paragraph tag <p> the closing paragraph tag </p>The only thing that makes me a depressed is people thinking that I don't care about the way things look? I always try and do my best work on everything to make it look nice and neat. Everytime I go to so many other sites out there, all have so many errors. So, I don't think anyone can be expected to be 100% perfect on everything. But then again, what about the lady who is doing the site for my sister and her husband. She is using tables on the site. So, she has been hired to do the job. Here is what someone said about like Geocities "Some of those errors is because Geocities server writes code to your pages which you have no control over." Plus still don't know if I understand why this one guy I know who is a computer programmer said he found nothing wrong with my sites. Link to comment Share on other sites More sharing options...
AmyR2 Posted August 27, 2009 Author Share Posted August 27, 2009 This is sort of weird. This validator site thing. I've never even heard about it til now.But been trying to figure it out. I checked this site that is being done by a professional designer and they have way more errors than mine does 247 Errors, 4 warning(s) Here is the site http://www.astresurfacing.com/Anyways, like I said about like Angelfire, Geocities, etc.. No way to even separate the stuff- the colors for the links, and everything else. Once you login to the account the stuff is right there in the software. No way to put it in a different file. It has the stuff built in to the editor. It has like the list of things to choose for like the colors for the links, text, etc. all in a pull down/drop down menu. Built in like this forum. I've had so many other people try on the sites to put the stuff in a separate file and didn't work with the way their editors are setup. All I can say is sorry it doesn't work. I tried my best, and is all I can do.Like if I type the thing for the background out any differently it doesn't show up at all. If I add the words/letters url and other things to it like the parentheses() or the other braces{}, it wont show up at all. Others have already tried that for me. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.