Difference between revisions of "Courses/single-page-portfolio"
Arjensuijker (talk | contribs) |
Arjensuijker (talk | contribs) |
||
| Line 3: | Line 3: | ||
To get a headstart and leave everybody in the dust, follow the HTML & CSS courses on Codecademy [http://www.codecademy.com/] first. | To get a headstart and leave everybody in the dust, follow the HTML & CSS courses on Codecademy [http://www.codecademy.com/] first. | ||
== | == Preparing our folder and our files == | ||
The first thing you have to understand is that html and css are just text. This means that your entire website basically consists of text files that are written in a specific way. You could use a very basic text editor like textedit or notepad, but those don't look very nice and don't have many handy features. Therefore, it's better to use a program like sublimetext, that gives you a few handy code editing features | |||
Start | |||
First you will need to define the structure and the content of the site. This is what HTML is made for. You can create | |||
=== Doctype, html, head and body === | |||
Start by declaring the doctype on the first line. This tells the browser that the document will be written in HTML. After this, it's always smart to immediately write all the necessary tags you always need for an HTML document. This includes the html tag, but also the head and the body. In the head you will include information for the browser, like the document title and links to stylesheets and javascript files. In the body you place the html that people will really see. | |||
<source lang="html5"> | <source lang="html5"> | ||
| Line 14: | Line 18: | ||
<head> | <head> | ||
<title> | <title>My title</title> | ||
</head> | </head> | ||
<body> | <body> | ||
My content | |||
</body> | </body> | ||
| Line 24: | Line 28: | ||
</source> | </source> | ||
=== | |||
< | |||
=== The main content === | |||
Let's start adding some content. Your site will consist of several [http://www.w3schools.com/tags/tag_section.asp sections], inside every section there is an [http://www.w3schools.com/tags/tag_article.asp article] that contains an [http://www.w3schools.com/tags/tag_image.asp image] and a [http://www.w3schools.com/tags/tag_div.asp div] with some text. The section allows us to change the background color for the whole area, the article keeps everything together and allows us to place it in the center of the screen. Of course, all of this is placed in the body of your HTML file. | |||
<source lang="html5"> | |||
</source> | |||
Revision as of 09:21, 19 June 2015
Getting a headstart
To get a headstart and leave everybody in the dust, follow the HTML & CSS courses on Codecademy [1] first.
Preparing our folder and our files
The first thing you have to understand is that html and css are just text. This means that your entire website basically consists of text files that are written in a specific way. You could use a very basic text editor like textedit or notepad, but those don't look very nice and don't have many handy features. Therefore, it's better to use a program like sublimetext, that gives you a few handy code editing features
First you will need to define the structure and the content of the site. This is what HTML is made for. You can create
Doctype, html, head and body
Start by declaring the doctype on the first line. This tells the browser that the document will be written in HTML. After this, it's always smart to immediately write all the necessary tags you always need for an HTML document. This includes the html tag, but also the head and the body. In the head you will include information for the browser, like the document title and links to stylesheets and javascript files. In the body you place the html that people will really see.
<!DOCTYPE html>
<html>
<head>
<title>My title</title>
</head>
<body>
My content
</body>
</html>
The main content
Let's start adding some content. Your site will consist of several sections, inside every section there is an article that contains an image and a div with some text. The section allows us to change the background color for the whole area, the article keeps everything together and allows us to place it in the center of the screen. Of course, all of this is placed in the body of your HTML file.
