Well,
this is the first tutorial that I have posted on this blog so far!
Essentially in this tutorial, I will explain how to make a
simple one page website with HTML5 and CSS3. Before we begin, we need to know some things. If you have no bloody idea what HTML is, here is an explanation:
HTML or, hyper text markup-language, is the backbone for all websites. HTML is what creates websites, HTML isn't that hard to grasp, but can be fun at times, or just plain annoying. Now time to start picking our software.
There are many HTML5 and CSS3 editors out there. Such as:
Adobe Dreamweaver CS6 -- $400
TopStyle 4 -- $79.95
BlueGriffon -- Free
Apanta Studio -- Free
Just to name a few :)
Even with these professional software, there are free software, and yes I said free. If you are on a windows computer, you already have notepad, or you can download NotePad++. What is the difference you may ask?
Notepad was not designed for coding at all, so when you type a code, it is just text. If you mess up a syntax, it won't tell you! Notepad++ on the other hand highlights correct syntax. Over all of the programs out there, I reccomend that starters use Notepad++.
Now for this series of lessons, it doesn't matter what program you use, but I will be using Notepad++.
Ready to begin programming in HTML5 and CSS3? Go grab something to drink, dim the lights, crack your knuckles, its on!
Go ahead and open up your text editing program, and type this following code:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<head>
<title>My First Webpage</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>This is my first paragraph</p>
</body>
</html>
I gurantee you are looking at the and thinking "What is this?" I will give you a simple explanation.
<!DOCTYPE html> -- There really is no explanation, just add this to every HTML5 document you do.
<html lang="en"> -- The first part of this code is "html" this is what tells your browser to display the text under it as. The second part is lang="en" this defines that the document is in English.
<meta charset="utf-8"> -- Like I said with <!DOCTYPE html>, just add it.
<head> -- Anything within the head tags is what needs to be loaded first.
<title> -- Self explanatory really, anything in the title tag is what will be displayed in the tab on your browser.
<link rel="stylesheet" href="style.css" /> -- Alright, link rel="Stylesheet" defines what this part of code is. href="style.css" this is very important "style.css" will be our "formal wear" for our website, we will go into more into detail later.
<body> -- Anything in THIS section will be shown as text
<p> -- This defines a paragraph.
Now let us save the file as a HTML document. Go to File>Save as,
In the drop down menu select "All files" and save the file as index.html. Open that file in your browser. As you can see, it is not much. But in the next lesson we will cover how to give that website some clothing :D
-Nick
There are many HTML5 and CSS3 editors out there. Such as:
Adobe Dreamweaver CS6 -- $400
TopStyle 4 -- $79.95
BlueGriffon -- Free
Apanta Studio -- Free
Just to name a few :)
Even with these professional software, there are free software, and yes I said free. If you are on a windows computer, you already have notepad, or you can download NotePad++. What is the difference you may ask?
Notepad was not designed for coding at all, so when you type a code, it is just text. If you mess up a syntax, it won't tell you! Notepad++ on the other hand highlights correct syntax. Over all of the programs out there, I reccomend that starters use Notepad++.
Now for this series of lessons, it doesn't matter what program you use, but I will be using Notepad++.
Ready to begin programming in HTML5 and CSS3? Go grab something to drink, dim the lights, crack your knuckles, its on!
Go ahead and open up your text editing program, and type this following code:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<head>
<title>My First Webpage</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>This is my first paragraph</p>
</body>
</html>
I gurantee you are looking at the and thinking "What is this?" I will give you a simple explanation.
<!DOCTYPE html> -- There really is no explanation, just add this to every HTML5 document you do.
<html lang="en"> -- The first part of this code is "html" this is what tells your browser to display the text under it as. The second part is lang="en" this defines that the document is in English.
<meta charset="utf-8"> -- Like I said with <!DOCTYPE html>, just add it.
<head> -- Anything within the head tags is what needs to be loaded first.
<title> -- Self explanatory really, anything in the title tag is what will be displayed in the tab on your browser.
<link rel="stylesheet" href="style.css" /> -- Alright, link rel="Stylesheet" defines what this part of code is. href="style.css" this is very important "style.css" will be our "formal wear" for our website, we will go into more into detail later.
<body> -- Anything in THIS section will be shown as text
<p> -- This defines a paragraph.
Now let us save the file as a HTML document. Go to File>Save as,
In the drop down menu select "All files" and save the file as index.html. Open that file in your browser. As you can see, it is not much. But in the next lesson we will cover how to give that website some clothing :D
-Nick
No comments:
Post a Comment