~The Coder~ Posted October 19, 2011 Share Posted October 19, 2011 I know the basics of HTML, and CSS. I am currently in the process of trying to learn JavaScript as well. What I want to know is how to take what I know and turn it into a site. Here is just a basic example of what I know: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><style type="text/css">body{background-color:#149FAC}li{ display:inline;}table,td,th{ border:10px solid black;}table{ width:450;}th{ height:50px;}ul.a{ list-style-type:square; text-align: left;}ul.b{ list-style-type:circle; text-align:left;}ol.a{ list-style-type:upper-roman; text-align:left;}ol.b{ list-style-type:lower-roman; text-align:left;}ol.c{ list-style-type:upper-alpha; text-align:left;}ol.d{ list-style-type:lower-alpha; text-align:left;}h1{color: red;text-align: center;}h2,h3{ color:purple;}p{color: blue;text-align= left;}p.center{text-align:center;}#para1{color:green;text-align: right;}#para2{color:black;text-align: center;}#para3{color:blue;text-align: left;}</style></head><body><h1>Made with CSS</h1><p class="center">Also made with CSS</p><p id="para1">Using ID here!!!</p><p id="para2">This is another ID!!!</p><p id="para3"><This is anotherXD!!!</p><hr /><br /><b><em><i><font size="10" color="black"><div style="text-align: center">HTML/CSSFTW></font></i></em></b><hr /><br /><ul class="a"><li>hey</li></ul><ul class="b"><li>Class b</li></ul><ol class="a"><li>ol class a</li><li></li></ol><ol class="b"><li>ol class b</li></ol><ol class="c"><li>Class c</li></ol><ol class="d"><li>Class d</li></ol><hr /><br /><table><tr><th>First Name</th><th>Last Name</th><th>Contact Number</th></tr><tr><td>user</td><td>1</td><td>111-111-1111</td></tr><tr><td>user</td><td>2</td><td>111-222-2222</td></tr><tr><td>user</td><td>3</td><td>111-222-3333</td></tr><tr><td>user</td><td>4</td><td>111-222-4444</td></tr><tr><td>User</td><td>5</td><td>111-222-5555</td></tr></table><hr /><br /><font size="10" color="green"><div style="text-align: left">Hey</font><hr /><br /><h2>Example</h><h3>Example 2 as top</h><hr /><br /><ul><li><a href="/html/default.asp" target="_blank">Html</a></li><li><a href="/css/default.asp" target=_blank">CSS</a></li></ul></body></html> So yea any ideas how I could start? Also does anyone know how to make a layout, I know you can use a layout with tables, but that was not what they were meant for. Link to comment Share on other sites More sharing options...
eTianbun Posted October 19, 2011 Share Posted October 19, 2011 You use html <div> tag, for layout, while you use <table> , for tabular data. Read on <div> tag and avoid using deprecated element like: <font> and others. Link to comment Share on other sites More sharing options...
~The Coder~ Posted October 19, 2011 Author Share Posted October 19, 2011 You use html<div> tag, for layout, while you use <table> , for tabular data. Read on div tag and avoid using deprecated[/code] element like: <font> and others. I understand you use html, but to actually try to put it into a site is a little overwhelming. I attempt to create a site, and know the basics like I said, but when I am trying to come up with how to make it, well I just kinda sit their. Why would I want to avoid the <font> tags? I mean I could use CSS in it's place I guess, but why avoid it? Also how would one go about creating a layout, would I need photoshop, gimp, etc... Link to comment Share on other sites More sharing options...
eTianbun Posted October 19, 2011 Share Posted October 19, 2011 There 're tags, called deprecated tags and those tags will not be supported by future browsers. E.g: <s>,<font>,<strike>,<u>, <center> etc. EDIT: Maybe the reason you find it hard to start creating a website, is because you where not praticing what you where studing. When you visit w3schools.com, there are lots of examples, and you can even use the 'try it yourself' editor to test what each tag does. Link to comment Share on other sites More sharing options...
~The Coder~ Posted October 19, 2011 Author Share Posted October 19, 2011 Their are tags, called deprecated tags and those tags will not be supported by future browsers. E.g:<s>,<font>,<strike>,<u>, etc. ahh ok, where can I find all the tags that are deprecated? Also should I begin with HTML5? It's not fully supported by all browsers is the reason why I am asking. Maybe the reason you find it hard to start creating a website, is because you where not praticing what you where studing. When you visit w3schools.com, there are lots of examples, and you can even use the 'try it yourself' editor to test what each tag does. EDIT: I have been practicing with the editor as well as notepadd, and notepad++. Look at my first post and that's examples of what I have learned from W3schools.com. I assume that the reason why I find it hard is because I really have no set goal. I could probably ask someone what they would like their site to be like, and maybe them start with that. Though like I said I have practiced and have accomplished what w3schools set out to teach me. Link to comment Share on other sites More sharing options...
eTianbun Posted October 19, 2011 Share Posted October 19, 2011 Take a look at this page! Link to comment Share on other sites More sharing options...
~The Coder~ Posted October 19, 2011 Author Share Posted October 19, 2011 Take a look at this page!Thanks, I will:) Link to comment Share on other sites More sharing options...
ShadowMage Posted October 19, 2011 Share Posted October 19, 2011 Are you having trouble with ideas? Or with implementing an idea? Link to comment Share on other sites More sharing options...
birbal Posted October 19, 2011 Share Posted October 19, 2011 . Link to comment Share on other sites More sharing options...
~The Coder~ Posted October 19, 2011 Author Share Posted October 19, 2011 Are you having trouble with ideas? Or with implementing an idea? A little of both, when I actually think of something I want I don't know the right way to implement it, and when I know how to implement it I don't know what I want to do with it. I guess I just need some ideas if you have any:) Link to comment Share on other sites More sharing options...
ShadowMage Posted October 19, 2011 Share Posted October 19, 2011 What sort of ideas do you have? IMO, the best way to start designing the layout of a site, is to actually draw it out (on paper or with something like photoshop) and break that drawing down into the various elements you'll need to use. Then start coding the layout from the "outside in". Start with the outermost wrapper, be that the body or a div, and drill down through one specific section at a time (for example, a navigation menu). Link to comment Share on other sites More sharing options...
~The Coder~ Posted October 19, 2011 Author Share Posted October 19, 2011 What sort of ideas do you have? IMO, the best way to start designing the layout of a site, is to actually draw it out (on paper or with something like photoshop) and break that drawing down into the various elements you'll need to use. Then start coding the layout from the "outside in". Start with the outermost wrapper, be that the body or a div, and drill down through one specific section at a time (for example, a navigation menu). Well whatever I decide to do it will end up being my first site, I have had some ideas in the area of maybe a game blog involving the XBOX 360 or something in that area. Also if I decided to do it via photoshop, how would I be able to implement the different sections on the site? How would I be able to make the layout fit the screen? Link to comment Share on other sites More sharing options...
thescientist Posted October 19, 2011 Share Posted October 19, 2011 the point of using photoshop is to just be able to create a mock up of what you want it to look like. It will act as a visual, and nearly to scale representation of what you end up wanting the actual site, designed in HTML/CSS, to look like. Link to comment Share on other sites More sharing options...
ShadowMage Posted October 19, 2011 Share Posted October 19, 2011 You don't have to go into great detail with the drawing. Think of it as more of a sketch of the general layout of the page, so you can get a visual feel of how your various sections will flow and fit together. Link to comment Share on other sites More sharing options...
~The Coder~ Posted October 19, 2011 Author Share Posted October 19, 2011 the point of using photoshop is to just be able to create a mock up of what you want it to look like. It will act as a visual, and nearly to scale representation of what you end up wanting the actual site, designed in HTML/CSS, to look like. Oh ok I see, that makes sense:P Ok I seen where you can use "tables" to make your layout with, but like I said, it said not to do this because it wasn't designed for that purpose. So would I need to use the <div> tags to make my layout properly? Link to comment Share on other sites More sharing options...
ShadowMage Posted October 19, 2011 Share Posted October 19, 2011 Yes, divs are the correct tags (among others like spans and lists) to layout your page. EDIT: Oh, and avoid using absolute and relative positioning when possible. It's better to use things like margin, padding, float and display. Link to comment Share on other sites More sharing options...
~The Coder~ Posted October 19, 2011 Author Share Posted October 19, 2011 Yes, divs are the correct tags (among others like spans and lists) to layout your page. EDIT: Oh, and avoid using absolute and relative positioning when possible. It's better to use things like margin, padding, float and display. Ok, thank you both for your help, also I apologize if I took up to much of your time, this is what I plan on majoring in when I get to college, I'm a senior so this is my last year before I head out and I wanted to get a head start on things:) Link to comment Share on other sites More sharing options...
ShadowMage Posted October 19, 2011 Share Posted October 19, 2011 Ok, thank you both for your help, also I apologize if I took up to much of your time, this is what I plan on majoring in when I get to college, I'm a senior so this is my last year before I head out and I wanted to get a head start on things:)No need to apologize. We're here to help in whatever way we can. Good luck with your studies! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.