Learning HTML&CSS

Learning HTML and CSS
Hello guys, so i wanted to post you something about HTML and CSS coding, and i show you few example websites. In this post im teaching you personal things about HTML coding and using CSS code to HTML. I will tell all things what you need to know when you're starting to make your own websites. This post is long, but include important things about HTML coding.

What is HTML?
HTML is markup language and without it is not possible to view this page, facebook or any socialmedia services.
HTML means "Hypertext Markup Language".

HTML versions timeline

HTML 2.0 released November 24, 1995
HTML 3.2 released January 1997
HTML 4.0 released December 1997
HTML 4.01 released December 1999
HTML5 released January 2008

So lets begin
So im starting with simple document, and im explaining everything what it includes. (check picture from Attached Thumbnails)

HTML Code:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

So what does all that code mean then? Lets check it out.

<!DOCTYPE html> means that document is using HTML5.

<html> Starting HTML document.

<body> Includes the content of the document.

<h1> means "header". There is 6 different headers h1-h6, smallest header is h6.

<p>means "paragraph" and used to type normal text to document.

And as you can see, there is closing tags. With closing tags, code is ordering browser to close
content there where is closing tags, simple as fuck :D

What is CSS code?
So now we know basically something about HTML, but it is time to use some CSS power to HTML.
With CSS we can style HTML code as we want. CSS code can move HTML objects and make them colorful, so website doesn't look boring.

3 ways to include CSS to code
So there is three different types how to set CSS code

External style sheet
Internal style sheet
Inline style

External style sheet works with linking, we link CSS file to document, it has to be linked to head section like this

HTML Code:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Internal style sheet works between "<style>CSSCODEHERE</style>". Those tags are included between "<head> </head>" tags.

HTML Code:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/background.gif");}
</style>
</head>

Inline style works in the tag, if we want to edit some tags with CSS code, we use it like this

HTML Code:

<h1 style="color:red;">This text is red</h1>

Learning HTML&CSS

lauantai 3. toukokuuta 2014

Basics about HTML and CSS