My first html

Dev Zone Code
1

Basicly, i was bored one day and learned the basic html. It took me about 45min. To an hour so...

here it is 

<html>

 <head>

  <title> 

  my first html

  </title>

   <body>

    <p style="color:brown">

   my first html is by benjmain diaz

    </p>

   </body> 

 </head>

</html>


2

Gotta start somewhere. Learning HTML and CSS is really easy after learning the basics. Some tools that makes learning it easier for some people is Xampp, Aptana ,and the Emmet plugin for Aptana. 

Xampp: https://www.apachefriends.org/download.html

Aptana: http://www.aptana.com/

Emmet: http://emmet.io/

And here are some videos that helped me get started with both of them: 

Installing Xampp and Aptana: https://www.youtube.com/watch?v=BXzGC2aDgcw

Installing and using Emmet: https://www.youtube.com/watch?v=wWgY9eiO4ns

That first video is actually in a series that can help you get started using PHP and some amazing plugins, while the second video is a channel that is mainly dedicated to using PHP (hence the name).

3

Also remember to close you <head></head> tags before starting the body.

<html>

<head><title>Title</title></head>

<body>

<p style="color: #FFCC00;">Paragraph</p>

</body>

</html>

4

If you haven't already come across it, the w3 Schools have great little tutorials for HTML and CSS that you can piece together. Later on if you really become interested, look at using PHP as well

5

http://www.codecademy.com/en/tracks/web

Has nice interactive tutorials for HTML and CSS.  I've been brushing up on my HTML and CSS using this site.

6

Once you know your way around, I suggest taking a look at sass or less (I prefer sass, personal preference). It'll make your life a whole lot easier when stylizing your pages.

http://sass-lang.com/install

To get started with sass, you're going to have to install ruby on your machine if you don't already have it, and install the gem.

After you've installed it, I would go through the documentation on the site.

http://thesassway.com/

That's also quite a neat little site to help out with learning sass.

7

Also, try not to stylize html tags directly, and use inline css instead.

Let's say this is our html document:

  1. <html>
  2.     <head>
  3.        <title></title>
  4.     </head>
  5.     <body>
  6.          <p>Hey I'm a line in a paragraph!</p>
  7.     </body>
  8. </html>

And let's say we want to make the text brown. Typically, you would do this:

  1. ..
  2. <p style="color:brown;">Hey I'm a line in a paragraph!</p>
  3. ..

However this is considered bad practice, and is also insecure according to the Content Security Policy of W3.

So instead you would inline your css between the head tags with style tags.

  1. ..
  2. <head>
  3. ..
  4.   <style>
  5.     p {color:brown;}
  6.   </style>
  7. </head>
  8. ..

Or if you have multiple colors you'll be using on different paragraphs, add a class to the paragraph and refer to it in your style tags.

  1. ..
  2. <head>
  3. ..
  4.   <style>
  5.      .brown {color:brown;}
  6.      .green {color:green;}
  7.   </style>
  8. </head>
  9. <body>
  10.    <p class="brown">Hey I'm a line in a paragraph!</p>
  11.    <p class="green">Hey I'm a green line!</p>
  12. </body>
  13. ..