Copyrights © 2018 - 2019 www.allianceoftheearth.info
Institute EAAlliance Of The Earth
43 Street Washington
Katina 30007 VA,DCInstitute / Outside Institute / QuartersInstitute / NavigatorsInstitute / Q.R

HTML CODE EA

TUTORIAL BY CODE

SOURCE OF THE PAGE

Logo Coffee HTML EA
WWW.ALLIANCEOFTHEEARTH.INFO

TUTORIAL BY CODE

SOURCE OF THE PAGE

ABOUT

Logo Ea

Page Page Page Page

PAGE 1 ITEMS TUTORIAL

FOR OPEN CODE SOURCE EA TUTORIAL

Tutorial by code source of the page html

Click Right Menu Contextual

-> Select view Code Source Of The Page

1. FULL PAGE WITH WINDOW.INNERHEIGHT
2. BACKGROUND PICTURE WITH OPACITY
(Update Tutorial HTMLPage1 28/01/2019)

PAGE 2 ITEMS TUTORIAL

1. CONTENT ITEM AS ARTICLE DATABASE WITH COPY PASTE BLOC ITEM

PAGE 3 ITEMS TUTORIAL

1. PAGE2 + USING IFRAME + IMAGES CENTERED

PAGE 4 ITEMS TUTORIAL

1. PAGE 3 +
2. ONMOUSEOVER ONMOUSEOUT
3. CLICK ON SQUARE 1 = NEW WINDOW
NAVIGATOR WITH WINDOW.OPEN
1 2 3 4
Page Page Page Page

PAGE 5 ITEMS TUTORIAL

FOR OPEN CODE SOURCE EA TUTORIAL

Tutorial by code source of the page html

Click Right Menu Contextual

-> Select view Code Source Of The Page

1. PAGE 4 +

2. Container with various dimensions ClassName for various containers,

Example :
<div class="panelLeft  panelLeftHeight400px">

3. Width Maximum TABLE Fixed by attribute max-width

4. Table Centered width:1024px in High Resolution screen 1280 * 1024 , 1600 * 900 ...

PAGE 6 ITEMS TUTORIAL

FOR OPEN CODE SOURCE EA TUTORIAL

Tutorial by code source of the page html

Click Right Menu Contextual

-> Select view Code Source Of The Page

1. PAGE 5 +

2. Container with various dimensions ClassName for various containers,

Example :
<div class="panelLeft  panelLeftHeight400px">

3. Width Maximum TABLE Fixed by attribute max-width

4. Table Centered width:1024px in High Resolution screen 1280 * 1024 , 1600 * 900 ...

5. Zoom + / - on the width tag Table 100% to width initial CSS User. Double click on the bar vertical about it

6. Using Protocol url mailto for send a email example: mailto:webmaster@allianceoftheearth.info

PAGE 7 ITEMS TUTORIAL

FOR OPEN CODE SOURCE EA TUTORIAL

Tutorial by code source of the page html

Click Right Menu Contextual

-> Select view Code Source Of The Page

1. PAGE 6 +

2. Container with various dimensions ClassName for various containers,

Example :
<div class="panelRight panelRightWidth100px panelRightHeight100px">

3. Width Maximum TABLE Fixed by attribute max-width

4. Table Centered width:1024px in High Resolution screen 1280 * 1024 , 1600 * 900 ...

5. Zoom + / - on the width tag Table 100% to width initial CSS User. Double click on the bar vertical about it

6. Creation multiple tag table in using window.innerHeight

7. See Modification appel function in the tag body and HTMLPage7.js

<body onload="HTMLPageTabInnerHeight(02);">

PAGE 8 ITEMS TUTORIAL

FOR OPEN CODE SOURCE EA TUTORIAL

Tutorial by code source of the page html

Click Right Menu Contextual

-> Select view Code Source Of The Page

1. Drag & Drop

Each Panels, Panel Left and Panel Right have a Drag & Drop. No interference with the other panel. See details in function drop(event,this)

Events

draggable
ondragstart
ondragover
ondrop
ondropend

2. Container with various dimensions ClassName for various containers,

Example :
<div class="panelRight panelRightHeight400px">

3. Width Maximum TABLE Fixed by attribute max-width

4. Table Centered width:1024px in High Resolution screen 1280 * 1024 , 1600 * 900 ...

5. Zoom + / - on the width tag Table 100% to width initial CSS User. Double click on the bar vertical about it

6. See Modification appel function in the tag body and HTMLPage8.js

<body onload="HTMLPageTabInnerHeight(01);">

7. ToDo : Modified the last cell Span of the Right Panel in HTMLPage8.js for a drag and drop. Download HTMLPage8

<span id="dragdrop-ea-psi-13">
5 6 7 8
Page Page Page Page

PAGE 9 ITEMS TUTORIAL

FOR OPEN CODE SOURCE EA TUTORIAL

Tutorial by code source of the page html

Click Right Menu Contextual

-> Select view Code Source Of The Page

1. PAGE 3 +

2. Left Panel and Right Panel cached when the Table is reduced. Operation without remove the cells in the panels

3. Change Image displayed by a picture of your Computer. Using FileReader() Object for search a file image on Hard Disk.

4. Width Maximum TABLE Fixed by attribute max-width

5. Table Centered width:1024px in High Resolution screen 1280 * 1024 , 1600 * 900 ...

PAGE 10 ITEMS TUTORIAL

FOR OPEN CODE SOURCE EA TUTORIAL

Tutorial by code source of the page html

Click Right Menu Contextual

-> Select view Code Source Of The Page

1. PAGE 7 +

2. Using Rules for Tag Table : rows and cols

From Documentation Microsoft Office Help

3. Choice effect if Rules using with attributes tables, example with attributes:

<table border="15" cellspacing="15" cellpadding="0">

4. Panel Pages for access direct to Page Up and Page Down. Using function scrollIntoView()

5. Change effect visual transparent by Property OPACITY.

6. Width Maximum TABLE Fixed by attribute max-width

7. Table Centered width:1024px in High Resolution screen 1280 * 1024 , 1600 * 900 ...

PAGE 11 ITEMS TUTORIAL

FOR OPEN CODE SOURCE EA TUTORIAL

Tutorial by code source of the page html

Click Right Menu Contextual

-> Select view Code Source Of The Page

1. PAGE 5 +

2. Create a simple Form using GET as method for transmit control name and values. Below Url parameters transmit by the Form

HTMLPage11.html?Form01UserLogin=john+water&Form01ChoiceTextColor=midnightblue

Tutorial Ea Form 01 Property | value

3. Modification body Color Text Page HTML via the Form as Tutorial

4. Using a Function named $_GET as code snippets by the webmaster. This is a function which retrieve url parameters transmit by the Form. Example : var strUserLogin = $_GET("Form01UserLogin")

5. Display Data pair Control Name | Value in a same html file as example in this tutorial : <form action="">

6. Display Data with accentued characters. Using function decodeURIComponent()

7. Using DOM for access at the class tag body

8. Width Maximum TABLE Fixed by attribute max-width

9. Table Centered width:1152px in High Resolution screen 1280 * 1024 , 1600 * 900 ...

10. ToDO : replace the + by the character space of the variable strUserLogin

Simulation as input data :

STEP A. input : User Login by the form => John Water

STEP B. Send the Form

STEP C. output as result: john+water => See the pictures above

Exercice to do at the start Line =>

var strUserLogin = $_GET("Form01UserLogin");

PAGE 12 ITEMS TUTORIAL

FOR OPEN CODE SOURCE EA TUTORIAL

Tutorial by code source of the page html

Click Right Menu Contextual

-> Select view Code Source Of The Page

1. PAGE 9 +

2. Date and time

3. Comments to write in Textarea for each picture

4. Backup data without database : Option Save HTML which save the Page HTML - Option outside tutorial

With this Option Save HTML, you can to stop the tutorial individually

5. Detection navigators with code snippets outside tutorial: getnav()
9 10 11 12

EXPLANATION FOR THE CHOICE TAG <TABLE>
TUTORIAL EA HTML

Why Tag table has taken as example of Page HTML ?

Using sometimes option pourcent which easier to manipulate automaticaly width and cells, inherit of HTML4 in experiences. Appropriate for Beginner, See other Website Tutorial Advanced for Web Page with container <div> , Web Page Design and HTML5. So, the end of this tutorial stop until website individual. Maximum of pages for this Tutorial will be 100 Pages. 

No Code Complex Algorithmic

No complex Calcul for positioning

Using tag table for all pages

Objective : 

Learn how to create a Page html by pratical
code in the contraintes of positioning and
operation calcul in basic algorithmic. 
This the purpose main and not the design.

Presentation textual. 

CONTENT :

1. Initiation HTML and manipulation DOM by 
   approach intuitive visual 
   
   SEE A VISUAL PAGE HTML TUTORIAL THEN 
   NEXT SEE CODE SOURCE OF THE PAGE
   
   Buy book HTML or documentation website
   tutorial for exact definition
   
   https://www.w3.org/
   https://stackoverflow.com/      // .us
   https://www.developpez.com/     // .fr  
   
2. First Pages for initiation basic events on
   tags onmouseover onclick onfocus ...
3. Access database by PHP MYSQL Or File XML
4. Display data by XMLHttpRequest
5. Finish one Page Code HTML TUTORIAL with 
   external file for .js .css
STRUCTURE TABLE 

<table> 
	<thead>
		<tr>
		<th></th>
		</tr>
	</thead>
	<tfoot>
		<tr>
		<th></th>
		</tr>
	</tfoot>	
	<tbody>
		<tr>
		<td></td>
		</tr>
	</tbody>
</table>
EXAMPLE TABLE
Tag <Table>
heading
footer
row1 col1 col 2
row2 col1
Copy code example in a file_test.html 
 
<table width="50%" border="1" align="center">
<caption>Tag Table</caption>
 <thead>
  <tr>
  <th colspan="3">heading</th>
  </tr>
 </thead>
 <tfoot>
  <tr>
  <th colspan="2">footer</th>
  </tr>
 </tfoot> 
 <tbody>
  <tr align="center">
	<td width="70%">row1 col1</td>  
	<td rowspan="2">col 2</td>      
  </tr>
  <tr>
	 <td width="70%">row2 col1</td>
  </tr>
 </tbody>
 <tbody>
</table>
COMMENTS EXAMPLE TABLE
<table align="center">
Table centered at screen center for 50%
in width screen 

resolution screen : 1024 x 768 

50% width table = (1024 / 2) - scroll bar 
= about 504px = 50%
<td width="70%">row1 col1</td>
70% has reference the width of the tag table 
which is 50%  , 70 % = 347px
<td rowspan="2">col 2</td>
col 2 take 2 rows width td = 30% => 149px
High Sea
2Click On Page 2
4Click On Page 4
6Click On Page 6
8Click On Page 8
10Click On Page 10
12Click On Page 12