Making an HTML site
Design
First things first, you need to know who’s going to visit the site, aka your target audience. Don’t take the clients word for this, unless they know what they’re talking about.
for individuals, you can ask things like:
- What’s the average age?
- Is the site for both genders? or just one?
- Which countries will this site mostly work in?
For Companies, you can ask things like:
- How big is the company?
- What is the visitors position in the company’s hierarchy
- What is the company’s budget?
All in All, it’s about getting why people visit this site, why do the users who keep revisitng keep revisiting? what’s their motivation? what’s their goal? and it’s about how to get more people to visit, and keep visiting.
You need to know things like what’s their goal?, what should the site show?, what should be the site’s hierarchy?, do they revisit?.
Afterwards, you can create the site map >
and then the wireframe (i.e. the sketches). >
Structure
Sites front-end are usally made from three components:
- HTML
- CSS
- Javascript
All websites use HTML and CSS, But more complex sites add more technologies to use. HTML tells the browser how to read the text, which text should be big and which should be small. HTML uses tags or elements, some of them are:
| element | deception |
|---|---|
<html> |
tells the browser that what’s in it is HTML code. |
<body> |
tells the browser that what’s in it is what should be shown to the user. |
<h1> |
tells the browser that this is the main (and the biggest) heading. |
<p> |
tells the browser that this is a paragraph (so, normal size text). |
A great way to learn, is by checking the source code of sites you often visit, you’ll be able to see how things work, to an extent.
HTML5 Layout
HTML5 introduced new elements that allow coders to cut up their code in a more understandable way, and as such the code will be easier to read. If the browser trying to visit the page is old enough, it may not be able to read the page, you could fix it using older HTML techniques, or by using Javascript, but that may be a bit more trouble than it’s worth.
Extra makrup
For the browser to know which HTML version you are using, you’ll have to use <!DOCTYPE html>.
Adding comments (so you or others can understand your code later on) is pretty easy, just type <!-- your comment --> whenever you need to comment.
There is also the <meta> tag, which you can use to put any information you want to tell the browsers about the page.
Also, some characters that are used by HTML (e.g. < and >) can’t be used normally in text, to use them you’ll have to learn what’s called “escape characters”, for example, to write a < you’ll have to write < or <.
| 102 | |||||||
|---|---|---|---|---|---|---|---|
| Home | read01 | read02 | read03 | read04 | read05 | read06 | read07 |