HTML code introduction - Selling Digital Products With PayPal

3.1 HTML code introduction

At this point we will take a tour of a html page. You do not have to edit anything at this point just look at the page. With this e-book you have also downloaded some Demosites.
Let's take a look the '01FirstDemo' (download demo 01). Open the index.html with notepad++. At the listing below we can see the header of the html page.

<head>
  <title>Your Page Title here</title>
  <meta name="description" 
  content="Your Description here">
  <meta name="keywords" content="Put keywords here">
  <meta http-equiv="Content-Type" 
  content="text/html; charset=iso-8859-1">
  <LINK href="css/BlueStyle.css" 
  rel="stylesheet" type="text/css">
</head>

Html header

As you can see a generic html page has :

A title
A description
A keyword list
A Charset

iana

wikipedia

Note : The unicode code is : utf-8

A style sheet (CSS)

# ISO 8859-1 
Albanian, Basque, Catalan, Danish, Dutch, English, 
Faroese, French, Finnish, German, Icelandic,Irish, 
Italian, Norwegian, Portuguese, Rhaeto-Romanic, 
Scottish, Spanish, Swedish. Other languages 
covered include Afrikaans and Swahili. Thus, this 
character encoding is used throughout The Americas, 
Western Europe, Oceania, and much of Africa.

# ISO 8859-2 
Bosnian, Croatian, Czech, Hungarian, Polish, 
Romanian, Serbian (in Latin transcription), 
Serbocroatian, Slovak, Slovenian, Upper Sorbian 
and Lower Sorbian

# ISO 8859-3 
Turkish, Maltese and Esperanto

# ISO 8859-4 
Estonian, Latvian, Lithuanian, Greenlandic, 
and Sami

# ISO 8859-5 
Russian, Ukrainian, or Belarusian

# ISO 8859-6 
Arabic alphabet, but lacks many needed glyphs and 
therefore was never too popular.

# ISO 8859-7 
Greek alphabet

# ISO 8859-8 
Hebrew letters (consonants only, 
no Hebrew vowel signs).

# ISO 8859-9 
Turkic languages

# ISO 8859-10
 Nordic languages ( Danish and Swedish 
 Finland-Swedish)

# ISO 8859-11 
Thai language

# ISO 8859-13 
Baltic languages (Lithuania,Latvia)

# ISO 8859-14 
Gaelic, Welsh and Breton.

# ISO 8859-15 
English, French, German, 
Spanish and Portuguese

# ISO 8859-16 
Albanian, Croatian, Hungarian, Italian, 
Polish, Romanian and Slovenian, but also 
Finnish, French, German and Irish Gaelic 
(new orthography). It differs from the 
other ISO 8859 standards in that it has almost 
no symbols, instead opting to include as many 
letters as possible.

#ISO-2022-JP 
Widely used encoding for Japanese

Charsets

These are the settings that you have to keep in your mind. The rest of the code just ignore it for now. Open the index.html of the '01FirstDemo' with your web browser. You will see something like the figure fig:05

fig:05 The first html demo

This page is not fancy at all but has one fundamental characteristic, has all the style attributes of a webpage enabled. As you can see we have :

A main table (gray)
A header (green)
A left column (red)
A center content page (blue)
A right column (yellow)
A footer (white)

These are the six panels of our webpage. Quite all the sites have these regions or less.

As we will see on the 'CSS code' subsection we can disable some of these panels.
What i am trying to say here is that by modifying the style of this page (CSS) you can get any page you want!
Consider that this page is the father of 95% of the pages of the web. So now someone would say : 'i will modify index.html and i will get my site'. The answer is NO because we will have data redundancy.
Seems strange but adding content to a page like this you are 'defining' the logic of your website.
Here we limit our focus on the view (style) of a website. Let's give a small example of data redundancy. Let's say that we want to have two pages index.html and index2.html with different content (blue panel). We will have to do something like this :

<!--begin center section-->
<font class= "normal">Center section 1</font>
<!--end center section-->

Data redundancy index.html

<!--begin center section-->
<font class= "normal">Center section 2</font>
<!--end center section-->

Data redundancy index2.html

This solution is great but what about the left panel for example? This must be the same on both of the pages but if we have to change this panel someday, we have to edit both of the pages. This is a big problem and can be solved only if our site has a logic inside and the logic cannot be done by html we need PHP to do this. We will solve this problem on the next chapter.

<!--begin left section-->
<font class= "normal">
Left section SAME ON BOTH PAGES</font>
<!--end left section-->

Data redundancy index.html/index2.html

So in this section we find out the important attributes of a generic web page, like title, page description etc... We also gave a look at the panels that a generic web page can have and we found that we have to put a logic part on our website in order to add content in our page.

<< Previous section

Table of contents

Next section >>