6 Replies - 1241 Views - Last Post: 17 March 2014 - 01:27 PM

#1 Dayve   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 13-March 14

Getting to really learn html and css

Posted 17 March 2014 - 03:24 AM

I am learning html and css by myself I do find a few things confusing. I have included a document(with internal css code) and would really appreciate some help and even constructive criticism. Please bear with me, as I am learning through errors and not by ignorance. Here I have a simple html document and I would like to know what I am doing wrong and any help in correcting any errors, or the correct way to code. Many thanks.
<!DOCTYPE Html>
<html>
<head>
<style type="text/css">
body {background-color:blue;}
 #header { font: italic bold 20pt calibri;color: yellow;position:fixed; top:10px; right: 50px; bottom:400px;left:150px;}
a {font: italic bold 20pt calibri; color:yellow; position:fixed; top: 180px; right: 40px; bottom: 200px; left: 500px;}
#notice {font: italic bold 20pt calibri;color: white; position:fixed; top:320px;right:20px;bottom:100px;left:20px;} 
#follow{font: italic bold 20pt calibri;color: yellow;position:fixed;top:480px; right:20px;bottom:50px;left:20px;padding-

left:280px;padding-bottom:60px; border-style:groove}

<title>Discuss</title>
</style>
</head>
<body>
<div id="header">
<p>This page is just a testing page to see whether I am getting to know how html and css works.</p>
</div>
<p>
<a href="http://www.google.com" target="_blank" alt="google"><img src="C:\Users\Linu(X)\Desktop\LearnCSS\google.png" 

alt="Google"></a>

<div id="notice">
<p> The most important source that I have found is the search engine <Strong>'Google'</Strong>. It is a very powerful tool, 

where anything 
can be answered. However make sure that you are reading your stuff from a respected source.</p>
</div>
<br>
<div id="follow">
<p> Please follow us on Facebook for more information. <img src="C:\Users\Linu(X)\Desktop\LearnCSS\Facebook_Icon.png" 

width="50px height="50px"></p>
</div>


</body>
</html>

This post has been edited by modi123_1: 17 March 2014 - 08:28 AM
Reason for edit:: please use the code tags


Is This A Good Question/Topic? 0
  • +

Replies To: Getting to really learn html and css

#2 astonecipher   User is offline

  • Senior Systems Engineer
  • member icon

Reputation: 2555
  • View blog
  • Posts: 10,249
  • Joined: 03-December 12

Re: Getting to really learn html and css

Posted 17 March 2014 - 08:06 AM

Your title element is in between your style tags.
Line breaks, <br>, are unnecessary between divs, css is where you can move them and they will separate sections on their own.
Absolute paths are great, but will be different on the production server.
There is not a language / local or text default meta tag in your head.

Html5 has header elements added in place of using a div with a. Id of header.

Keep your css together, don't mix inline and and the stylesheets or you may have unintended results.
Keep everything in divs, sections, articles... Meaning don't have a p tag out on its own.

And I am not positive, but I don't believe you need to specify text/css in the style element.
Was This Post Helpful? 0
  • +
  • -

#3 Dayve   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 13-March 14

Re: Getting to really learn html and css

Posted 17 March 2014 - 12:41 PM

astonecipher
Thank you very much for having taken time to read my topic and correct my mistakes. I really appreciate your professional help.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is online

  • RequestedRangeNotSatisfiable
  • member icon

Reputation: 6560
  • View blog
  • Posts: 26,597
  • Joined: 12-December 12

Re: Getting to really learn html and css

Posted 17 March 2014 - 12:57 PM

I encourage you to spread-out your css, it is so much easier to read. For example:
body {
    background-color: blue;
}
#header {
    font: italic bold 20pt calibri;
    color: yellow;
    position: fixed;
    top: 10px;
    right: 50px;
    bottom: 400px;
    left: 150px;
}

Your closing style-tag is also in the wrong position and the title-tag should preferably occur before the style tag. (This is preferable but, I believe, not necessarily a requirement.)
Was This Post Helpful? 0
  • +
  • -

#5 Dayve   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 13-March 14

Re: Getting to really learn html and css

Posted 17 March 2014 - 01:14 PM

andrewsw,

Thanks for that tip, much appreciated. Also may I ask, what does astonecipher mean by
'don't mix inline and the stylesheets'? I thought that I was using internal CSS and not internal and inline mixed together.
Thanks
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw   User is online

  • RequestedRangeNotSatisfiable
  • member icon

Reputation: 6560
  • View blog
  • Posts: 26,597
  • Joined: 12-December 12

Re: Getting to really learn html and css

Posted 17 March 2014 - 01:18 PM

Perhaps he was referring to this:

<img src="C:\Users\Linu(X)\Desktop\LearnCSS\Facebook_Icon.png" width="50px height="50px">

but this isn't correct. width and height are attributes of the img-tag and should be specified without units:
<img src="C:\Users\Linu(X)\Desktop\LearnCSS\Facebook_Icon.png" width="50" height="50">

and, as mentioned by astonecipher, it should not be an absolute path to the image.
Was This Post Helpful? 0
  • +
  • -

#7 Dayve   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 13-March 14

Re: Getting to really learn html and css

Posted 17 March 2014 - 01:27 PM

Once again, thanks andrewsw.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1