-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
126 lines (108 loc) · 7.62 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
<!DOCTYPE html> <!-- Apertura del codigo HTML -->
<html lang="en"> <!-- Lenguaje que va tener el Sitio Web -->
<!-- Cabecera del Sitio Web - Esto no se ve en el sitio -->
<head>
<meta charset="UTF-8"> <!-- Codificacion de caracteres -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Reconocimiento de Responsive mediante Viewport -->
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- Compatible con Internet Explorer -->
<title>Modelo HTML</title> <!-- Titulo del Sitio -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <!-- Favicon del Sitio Web -->
<link rel="stylesheet" href="style.css"> <!-- Enlace con la Hoja de Estilos CSS -->
</head>
<!-- Inicio del Cuerpo del Sitio Web -->
<body> <!-- Apertura del cuerpo del sitio web -->
<!-- Titulos -->
<h1> Titulo Principal del Sitio Web </h1> <!-- Usar siempre el H1 para el titulo principal del sitio -->
<h2>Bienvenidos a mi Web</h2> <!-- Puede haber varios -->
<h3>Hola</h3> <!-- Estas etiquetas pueden representar titulos en secciones -->
<h4>Hola</h4>
<h5>Hola</h5>
<h6>Hola</h6>
<hr> <!-- Salto de Linea Pintando una Linea-->
<!-- Parrafos y Texto -->
<p>Parrafo</p> <!-- Etiqueta para agregar un parrafo -->
<strong>Parrafo</strong> <!-- Etiqueta para Negritas-->
<em>Parrafo</em> <!-- Etiqueta para Cursivas-->
<span>Parrafo</span> <!-- Etiqueta plana para colocarle estilos -->
<blockquote>Parrafo</blockquote> <!-- Etiqueta para cita -->
<a href="#" target="_blank">Parrafo</a> <!-- Etiqueta para enlaces, atributo para abrir en nueva pestaña -->
<hr> <!-- Salto de Linea Pintando una Linea-->
<!-- Etiquetas para Listas -->
<ol> <!-- Etiqueta para lista ordenada números -->
<li>Elemento de lista</li> <!-- Etiqueta de elemento de lista -->
</ol>
<ul> <!-- Etiqueta para lista Desordenada puntos -->
<li>Elemento de lista <!-- Etiqueta de elemento de lista -->
<ul> <!-- Lista interna -->
<li>Elemento de lista</li> <!-- Etiqueta de elemento de lista interna -->
</ul>
</li>
</ul>
<hr> <!-- Salto de Linea Pintando una Linea-->
<!-- Etiquetas para imagen -->
<img src="img/pic3.JPG" alt="Toy Storie" title="Toy Storie" width="400px" height="200px"> <!-- Etiqueta de Imagen -->
<!-- all: Texto de imagen-->
<!-- title: pop up de nombre imagen-->
<!-- src: enlace desde donde va a cargar la imagen-->
<!-- width: ancho de la imagen -->
<!-- height: alto de la imagen -->
<hr> <!-- Salto de Linea Pintando una Linea-->
<!-- Etiquetas para tablas -->
<table border="1"> <!-- Etiqueta para generar tabla, Atributo para generar el borde en la tabla -->
<tr> <!-- etiqueta para generar Fila-->
<th>Nombre</th> <!-- etiqueta para generar Encabezado-->
<th>Apellidos</th>
<th>Pais</th>
</tr>
<tr>
<td>Victor</td> <!-- etiqueta para generar Columna-->
<td colspan="2">Robles</td> <!-- atributo para expandir varias fila esa casilla-->
</tr>
<tr>
<td>José</td>
<td>Romero </td>
<td>Venezuela</td>
</tr>
</table>
<hr> <!-- Salto de Linea Pintando una Linea-->
<!-- Etiquetas para Formularios -->
<form action=""> <!-- Etiqueta para formulario -->
<p>
<label for="nombre">Nombre</label> <!-- Etiqueta para nombre del campo-->
<input type="text" name="nombre" placeholder="escribe tu nombre"> <!-- Casilla de Texto -->
</p>
<p>
<label for="descripcion">Descripcion </label>
<textarea name="descripcion" id=""></textarea> <!-- Etiqueta para area de texto-->
</p>
<p>
<label for="genero">Selecciona genero</label> <br>
<input type="radio" name="genero" value="hombre">Hombre <br> <!-- Etiqueta para radios buttom-->
<input type="radio" name="genero" value="mujer">Mujer <br>
<input type="radio" name="genero" value="nada">Nada <br>
</p>
<p>
<label for="seleccion">Selecciona</label> <br> <!-- etiqueta seleccion multiple-->
<select name="seleccion" id="">
<option value="hombre">Hombre</option>
<option value="mujer">Mujer</option>
<option value="nada">Nada</option>
</select>
</p>
<p>
<input type="submit" value="Enviar"> <!-- Etiqueta enviar mensaje-->
</p>
</form>
<hr> <!-- Salto de Linea Pintando una Linea-->
<!-- Etiquetas para Estructuras -->
<header id="" class=""> </header> <!-- Etiqueta para la cabecera del sitio -->
<nav id="" class=""> </nav> <!-- Etiqueta para navegacion y menus del sitio-->
<div id="" class=""> </div> <!-- Etiqueta de Estructura o Cajon para dividir elementos -->
<section id="" class=""> </section> <!-- Etiqueta de Seccion para estructurar el sitio web -->
<article id="" class=""> </article> <!-- Etiqueta para mini secciones dentro de las div y section-->
<aside id="" class=""> </aside> <!-- Etiqueta para utilizar barras laterales -->
<footer id="" class=""> </footer> <!-- Etiqueta para modificar el pie de pagina-->
<div class="clearfix"></div> <!-- Limpiar los Flotados -->
</body> <!-- Cierre del cuerpo del sitio web -->
<!-- Fin del Cuerpo del Sitio Web -->
</html> <!-- Cierre del Codigo HTML -->