-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
250 lines (250 loc) · 7.89 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>Help </title>
</head>
<body>
<h1>HTMCODE</h1>
<h1>Esta es una guia de uso y de opciones de funciones de HTMCODE</h1>
<p>HTMCODE es un lenguaje de programacion enfocado en la maquetacion de paginas web</p>
<p>Estando enfocado principalmente en la maquetacion de HTML y dejando todo listo para que</p>
<p>El usuario solo tenga que preocuparse de la parte de programacion y estilos de la pagina</p>
<h4>Todos los resultados se guardan en una carpeta que se crea llamada 'Website'</h4>
<h1>La funcion primoridial de este programa es newPage(nombre de la pagina) ya que esta es la que crea el directorio de la pagina y su archivo css y js.</h1>
<h2>Y es por eso que en todas las funciones es necesario poner el nombre de la pagina como primer parametro ya que es a esa pagina donde se le insertaran los cambios.</h2>
<br>
<h1>Guia de uso</h1>
<h3>Recuerda que para todas las funciones siempre se manda como primer parametro el nombre de la pagina a la que se le haran los cambios</h3>
<h2>nombre_funcion(nombre_pagina y luego los demas parametros necesarios)</h2>
<h2>Navegacion</h2>
<p>HTMCODE cuenta con el tag de navegacion que se suele usar en las barras de navegacion y es muy sencillo usarlas.</p>
<p>Solo se tiene que llamar la funcion de creacion: startNav y cuando este se vaya a cerrar se llama endNav</p>
<h2>Hyperlinks</h2>
<p>Para crear un hyperlink se usa la funcion newA y se le pasa como parametro el enlace de a donde va a mandar y el texto que mostrara el tag</p>
<p>Esta funcion detecta automaticamente si se trata de una pagina del proyecto o un enlace externo y lo muestra de la manera correcta.</p>
<p>Este tipo de enlaces muchas veces se usar en la navegacion</p>
<p>Un ejemplo de navegacion con hiperenlaces se veria asi:</p>
<nav>
<a href="../Home/index.html">Home</a>
<a href="../About/index.html">About</a>
<a href="https://www.google.com"target="_blank" >Google</a>
</nav>
<p>En este caso solo los enlaces de About y Google mandan a la direccion correcta ya que no existe un archivo de Home en el Proyecto pero si este se creara en un momento despues del proyecto entonces la direccion funcionaria</p>
<h2>Headers</h2>
<h3>Esto es un Header y con la funcion newHeader se puede crear el primer parametro es el nombre de la pagina el segundo es el nivel de header y el tercero es el texto del header puede ser desde el 1 hasta el 5</h3>
<h1>Esto es un Header 1</h1>
<h2>Esto es un Header 2</h2>
<h3>Esto es un Header 3</h3>
<h4>Esto es un Header 4</h4>
<h5>Esto es un Header 5</h5>
<br>
<h2>Parrafos</h2>
<p>HTMCODE cuenta con los tipos de parrafos mas usados y solo se necesita el nombre de la pagina el tipo de parrafo y el texto que se escribira</p>
<p>Esto es un parrafo normal y se usa con la funcion newP</p>
<b>Esto es un parrafo en negrita y se usa con la funcion newB</b>
<br>
<i>Esto es un parrafo en cursiva y se usa con la funcion newI</i>
<br>
<u>Esto es un parrafo subrayado y se usa con la funcion newU</u>
<br>
<label>Esto es un label y se usa con la funcion newLabel</label>
<br>
<h2>Imagenes</h2>
<p>Para insertar una imagen se usa la funcion llamada newImg y se le pasa como parametro el link de la imagen</p>
<p>Una foto se mostraria asi:</p>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" style="width:100px" >
<h2>Listas</h2>
<p>HTMCODE cuenta con los 2 tipos de listas usados en HTML los cuales son UL y OL con su respectivo elemento interno LI y para llamarlos se usa el mismo metodo que con los parrafos</p>
<p>Esto es una lista UL</p>
<p>Se llama con la funcion newUl</p>
<ul>
<li>
<p>Esto es un elemento LI de la lista UL</p>
</li>
<li>
<p>Esto es un elemento LI 2</p>
</li>
<li>
<p>Esto es un elemento LI 3</p>
</li>
</ul>
<p>La lista UL se cierra con endUl</p>
<br>
<p>Esto es una lista OL</p>
<p>Se llama con la funcion newOl</p>
<ol>
<li>
<p>Esto es un elemento LI de la lista OL</p>
</li>
<li>
<p>Esto es un elemento LI 2</p>
</li>
<li>
<p>Esto es un elemento LI 3</p>
</li>
</ol>
<p>La lista OL se cierra con endOl</p>
<br>
<h2>Inputs</h2>
<p>HTMCODE cuenta con todos los tipos de inputs los cuales se llaman con la funcion newInput y como parametros se ingresa el nombre de la pagina y el tipo y algun id.</p>
<p>Esto es un input de tipo text</p>
<input type="text" id="name">
<p>Esto es un input de tipo password</p>
<input type="password" id="password">
<p>Esto es un input de tipo email</p>
<input type="email" id="email">
<p>Tambien existe el tag de textarea el cual solo se llama con la funcion newTextArea</p>
<p>Este tiene los valores predeterminados de 4 filas y 50 columnas</p>
<textarea rows="4" cols="50">
</textarea>
<p>Y tambien se cuenta con los siguientes tipos de inputs</p>
<ul>
<li>
<p>button</p>
</li>
<li>
<p>checkbox</p>
</li>
<li>
<p>color</p>
</li>
<li>
<p>date</p>
</li>
<li>
<p>datetime-local</p>
</li>
<li>
<p>file</p>
</li>
<li>
<p>hidden</p>
</li>
<li>
<p>image</p>
</li>
<li>
<p>month</p>
</li>
<li>
<p>number</p>
</li>
<li>
<p>radio</p>
</li>
<li>
<p>range</p>
</li>
<li>
<p>reset</p>
</li>
<li>
<p>search</p>
</li>
<li>
<p>submit</p>
</li>
<li>
<p>tel</p>
</li>
<li>
<p>time</p>
</li>
<li>
<p>url</p>
</li>
<li>
<p>week</p>
</li>
</ul>
<br>
<h2>Boton</h2>
<p>HTMCODE cuenta con una funcion para realizar botones y se llama con la funcion newButton y se le da un parametro para el texto que mostrara.</p>
<button>Enviar</button>
<br>
<h2>Tablas</h2>
<p>HTMCODE cuenta tambien con el tag de tabla la cual se empieza con la funcion startTable y finaliza con endTable</p>
<p>La tabla tambien cuenta con las tags TR TH y TD</p>
<p>TR se inicia con startTr y finaliza con endTr</p>
<p>TH y TD se llaman con newTh y newTd respectivamente y se les añade el parametro del texto que se mostrara</p>
<p>La tabla se ve asi</p>
<table>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Edad</th>
</tr>
<tr>
<td>Juan</td>
<td>Perez</td>
<td>20</td>
</tr>
<tr>
<td>Maria</td>
<td>Gomez</td>
<td>25</td>
</tr>
</table>
<br>
<h2>BR</h2>
<p>HTMCODE cuenta con la funcion newBr para realizar un salto de linea</p>
<p>Se usa asi con la funcion newBR</p>
<br>
<p>Y se ve asi como el espacio vacio entre el parrafo y el salto de linea</p>
<br>
<h2>Divisiones</h2>
<p>HTMCODE cuenta con la funcion newDiv para realizar divisiones</p>
<p>Se usa asi con la funcion newDiv y se cierra con endDiv</p>
<br>
<h2>Funciones terminales</h2>
<p>HTMCODE cuenta con las funciones terminales de secciones que son las siguientes</p>
<ul>
<li>
<p>endBody : que cierra el tag body</p>
</li>
<li>
<p>endPage : que cierra el tag html</p>
</li>
<li>
<p>endDiv : que cierra el tag div</p>
</li>
</ul>
<br>
<h2>Formularios</h2>
<p>HTMCODE cuenta con la funcion startForm para realizar formularios y endForm</p>
<p>Y juntandose con los tags de label button e input se verian asi</p>
<p>Login Form</p>
<form>
<label>Username</label>
<input type="text" id="user">
<label>Password</label>
<input type="password" id="passwords">
<button>Login</button>
</form>
<p>Login Form usando divs en cada input</p>
<form>
<div>
<label>Username</label>
<input type="text" id="usr">
</div>
<div>
<label>Password</label>
<input type="password" id="pass">
</div>
<button>Login</button>
</form>
<br>
<h3>Y listo ya solo falta que añadas algunos diseños y programacion y queda lista tu nueva pagina!!</h3>
<br>
<label>Creado por: </label>
<b>Javier Adrian Villa Leon</b>
<p></p>
<label>Matricula: </label>
<b>A01242469</b>
<br>
<br>
<p></p>
<script src="index.js"></script>
</body>
</html>