Tambien Puedes Ver:
Bueno, son las que voy hasta ahora xD, Tambien queria decirles que me Perdonen por el atraso de este Post, esque estaba de vago xD, Bueno Empezemos con la Parte 2 de este Tutoringa!
Lista Ordenada
Las Listas Ordenadas se crean con los comandos <ol> y <il>, Esto lo que hace, es con <ol> Crea La Lista, y lo que haiga Adentro ya queda Ordenada Automaticamente, ya que si ol Proviene de Ordened List (Lista Ordenada), Seria Algo Ovio que la Lista deberia Ser Ordenada. Con <li> (Obigatoriamente debe estar adentro de la lista), Creamos Los "Items" De La Lista, y los Enumera Automaticamente, por lo cual, no debemos pasar a la otra linea, ni enumerar manualmente ni nada de esto. Aca Les Dejo un Ejemplo.
[color=#000000]
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
[/color]
Y... En el Caso de que lo Pusieramos en 1 Sola Linea es Decir Asi:
[color=#000000]
<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol>
[/color]
Se Veria Exactamente Igual, pero al Momento de Editarlo seria Mas Dificild de Leer.
Lista Desordenada
Una Lista "Desordenada" en HTML no segnifica que este todo en un completo desorden, sino que en las listas desordenadas no llevan Enumeracion Los "Item List" (<li> ) de la lista como en la Ordenada, solo llevan un pequeño Punto, que no me Acuerdo Exactamente como se llama, pero Se Los Dejo, es este: •
Funciona de La Misma Manera Asique No Les Voy a Explicar y paso Directamente al Codigo y la Vista Previa.
[color=#000000]
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
[/color]
Lista de Definiciones
Una Lista de Definiciones es algo Parecido a una Lista Desordenada, solo que no Trae ese pqueño punto Adelante, esta lista se hace con 3 comandos...
<dl> - Para Crear la Lista.
<dt> - Título / Nombre de Lo que se va a Definir.
<dd> - Texto, Descripcion o Definicion.
¿Porque estas Letras sin Segnificado?
//R De Hecho Todas tienen un Verdadero Significado, DL viene de Definition List (Lista de Definiciones), DT Viene de Definition Term (Termino a Definir [Creo]) y DD Viene de Definition Description (Descripcion de la Definicion).
[color=#000000]
<dl>
<dt>Definicion 1</dt>
<dd>La Definicion 1 es blablablablalb porque si blablablabla pasa blablablablablabla.</dd>
<dt>Definicion 2</dt>
<dd>La Definicion 2 es un prosceso blablabla que suscede cuando blablabla en determinada blablabla</dd>
</dl>
[/color]
Tablas
Las Tablas Son Cuadros Donde Se Pueden Exponer Datos En columnas y Filas, Es Probable que Las hayas Usado Bastante a lo largo de Tus Estudios, por Ejemplo Cuando Ibas a la Secundaria y Tenias que Anotar Los Horarios.
En Este Caso Vamos a Usar 3 Comandos, <table>, <td> y <tr>.
<table> - Crea La Tabla
<tr> - Crea una Fila [HORIZONTAL] - ¡Importante Saberlo!
<td> - Crea Espacios en Esa Fila Horizontal.
Esto de Las Tablas es un Poco Complicado de Explicar, Pero No segnifica que sea Dificil, Cuando Creamos la Fila Horizontal, y Vamos Poniendo Espacios en la Tabla, Hay que ser Organizado, por Ejemplo, Ponemos Esto:
[color=#000000]
<table>
<tr>
<td>Nombre</td>
<td>Apellido</td>
</tr>
<tr>
<td> ACA EL NOMBRE </td>
<td> ACA EL APELLIDO </td>
</tr>
</table>
[/color]
No se Si Notaron que, Si en la Primera Fila, ponemos Primero el Nombre y Despues el Apellido, en la Segunda Se debe Poner EXACTAMENTE en el Mismo Orden, Porque Esto No se Arregla ni Ordena Automaticamente, Les Recomiendo que Lo Vayan Experimentando, para que no les queden Dudas, yo aprendi a usarlas asi, estube media hora, pero me saque todas mis dudas.
Ahora Les Dejo un Ejemplo un Poco Mas Conocido:
[color=#000000]
<table border="1">
<tr>
<td>Horarios del Fin De Semana:</td>
<td>De</td>
<td>Hasta</td>
</tr>
<tr>
<td>Sábados</td>
<td>13:00</td>
<td>15:00</td>
</tr>
<tr>
<td>Domingos</td>
<td> -------</td>
<td> --------</td>
</tr>
</table>
[/color]
Nota: Yo Lo Vengo Haciendo Bastante Ordenado para que les sea Mas Facil de Leer, pero se puede hacer todo en una sola linea, pero es Epicamente Complicado Trabajar asi >_>
Bueno, Una Cosita Mas Sobre Las Tablas, Para Resaltar una, como Yo No lo hice en el ejemplo de Arriba, por ejemplo, en la Linea 3, "Horarios de Fin de Semana:" Podria Haber Puesto en Vez e <td>, hubiera Puesto <th>, lo que hace es resaltar el texto de ese cuadro, como si fuera mas importante. Tambien Se Puede Usar el Comando <caption> el Cual Lo que Hace es Darle un Título a la Tabla, El Cual Aparece Arriba de ella y Centrado, Este Comando Debe Ir Si o Si Antes Del <tr>, de Otro Modo Dudo que Funcione.
Les Prepare Otro Ejemplo para que Puedan Ver como Se Escribiria y Como se Veria:
[color=#000000]
<table border="1">
<caption>Horarios</caption>
<tr>
<th>Días</th>
<th>De</th>
<th>Hasta</th>
</tr>
<tr>
<td>Sábados</td>
<td>13:00</td>
<td>15:00</td>
</tr>
<tr>
<td>Domingos</td>
<td> -------</td>
<td> --------</td>
</tr>
</table>
[/color]
Comentarios
Un Comentario en HTML es una especie de comando, que No es Visible en la Pagina, pero si Ven el Codigo Fuente de la Pagina Si Aparece, Esto No Cumple Ninguna Funcion Especifica, Es Utilizado por Lo General Para Marcar Secciones en Documentos Grandes o para Cuando Alguien Tiene una Pagina con bastantes cosas un poco complejas, puede marcar con comentarios, Esto es para que pase Esto, y esto es para que muestre aquello, aca va el logo, y aca el texto entre otros. Para Hacer un Comentario Debemos Usar Esto, que no se si se le deberia llamar un Comando: <!-- y --> con el Comentario entre medio de ellos.
[color=#000000]
Contenido del Header de la Pagina
<!-- Fin del Header -->
Contenido de la Pagina
<!-- Aca Empieza el Pie de Pagina -->
aca el pie de pagina
[/color]
o También, si tenemos demasiadas cosas para poner en un comentario, para que desaparezcan, podemos hacer esto:
[color=#000000]
<html>
<head>
<title>elnicaso Webpage's</title>
</head>
<body>
<link rel="stylesheet" href="http://www.elnicaso.pusku.com/css/styles.css" type="text/css">
<div id="wrapper">
<div id="header">
<img src="http://www.elnicaso.pusku.com/images/logo.png" style=width:270px; />
</div>
<div class="left">
<div id="leftmenu" align="left">
<br>
<div style=position:absolute;left:10%; title="Ir a la Pagina de Inicio"><a href="#" class="lmlink">Pagina de Inicio</a></div>
<br>
<div style=position:absolute;left:10%; title="Iniciar Sesion"><a href="#"class="lmlink">Iniciar Sesion</a></div>
<br>
<div style=position:absolute;left:10%; title="Registrate"><a href="registrar.php"class="lmlink">Registarme</a></div>
<br>
<br>
</div>
</div>
<div id="content">
Mucho Texto de Mi Pagina como Para Andar Poniendo Muchos Comentarios
<div class="hovergallery">
<img src="http://www.elnicaso.pusku.com/images/elnicaso.png" width="400" />
<img src="http://3.bp.blogspot.com/-ncq-1wneUpY/UB6vQDX2ZgI/AAAAAAAAADc/G5rSwZCF180/s220/cara%2Bde%2BSteve.png" width="400" />
<img src="http://vj.sortes.com/img/avatares/Jero%20DS/EndermanFace.png" width="400" />
<img src="http://images.wikia.com/zombiejombie/images/8/8e/Minecraft-Creeper.jpg" width="400" />
<img src="http://cdn2.planetminecraft.com/files/resource_media/screenshot/1244/Zombie-Face_2159383_3988094_lrg.jpg" width="400" />
<img src="http://images3.wikia.nocookie.net/__cb20111017205540/fantendo/images/7/70/GhastFace.png" width="400" />
<img src="https://twimg0-a.akamaihd.net/profile_images/1431127648/PigFace.png" width="400" />
<img src="http://images.wikia.com/scottlandminecraft/images/e/e3/BlazeFace.png" width="400" />
</div>
</div>
<!-- Footer Pendiente
<div id="pie">
<a herf="#" class="a">Designed by elnicaso</a>
</div> --!>
</div>
</body>
</html>
[/color]
Probablemente Ninguno Leyo Todo, y no queria eso, solo quiero que pongan Atención a las ultimas Lineas, se los dejo un poco resumido aca:
[color=#000000]
<!-- Footer Pendiente
<div id="pie">
<a herf="#" class="a">Designed by elnicaso</a>
</div> --!>
[/color]
Lo que quiero que entiendan es que el comentario puede empezar en la linea, 7 y terminar el na 31 por ejemplo, no hay que ir poniendo linea por linea, para tapar una parte de la pagina. En Caso de Duda Pregunten... Para eso Estoy.
Botones y Textareas
Los Botones ya todos saben que son, y las Text Areas, son un Area, que se usa para escribir, al igual que lo es, el Area donde escriben el #Shout que Van a Publicar, por ejemplo, cuando crean un Post, donde Escriben el Titulo, eso es una Textarea, y donde va el Contenido del Post También es una Textarea.
Para Crear Botones Podemos Usar <button> y Para Crear Textareas <textarea>. Esto No Les Va a Servir de mucho, almenos eso pienso yo, porque una vez que empiecen a avanzar, cuando lleguen a el CSS (Hojas de Estilo), ya no lo van a Nesesitar.
Pero para los que recien empiezan, Pueden Hacer Botones para que los lleve a otra parte de su pagina por ejemplo, y las Textarea, al principio las Pueden Usar para Escribir ahi en el Momento, (No se Guarda) y Para Poner un Texto, y se Veria asi como cuando Encierran Algo entre [*code] y [*/code], que es como yo les Pongo Los Ejemplos. Asi como Este de aca abajo:
[color=#000000]
<a href="www.taringa.net"><button>Ir a Taringa!</button></a><br>
<br>
<textarea>Aca Podes Poner un Texto, que todos pueden Editar</textarea>
<br>
<br>
<textarea readonly>Aca Hay un Texto que NO se puede Editar</textarea>
[/color]
readonly - Sirve como ven para que solo se pueda leer esa text area y se aplica como ven ahi arriba.
rows - Sirve para Elejir de Cuantas Lineas de Largo (Para Abajo) Se Debe Ver la textarea, de todos modos si el texto excede esa cantidad de lineas apareceran barras de Desplazamiento.
cols - Sirve para elejir el Ancho, en Caracteres, es decir, si ponemos 23, por ejemplo, y en una linea del texto tiene 23 caracteres (letras) ocupara todo el ancho, en caso de sobrepasar el numero de caracteres, apareceran barras de desplazamiento.
De Todos Modos esto de Las Textareas Les Va a Servir cuando Vayan a Empezar con PHP, para el Envio de Formulario, y Sistemas de Registros, comentarios, y esas cosas. Y Otra Cosa que Les Recomiendo es que Vayan Probando estas Cosas, para Sacarse Las Dudas.
CheckBoxes
Una CheckBox es un Cuadradito que aparece junto a un texto siempre, que al darle click, aparece un Tic () Como Cuando Instalamos un Programa y Nos Pregunta Si Leímos y/o Estamos deacuerdo con los términos, o Cuando te Registras en una Pagina tambien te lo Pregunta.
Otro Tipo, es el que te deja seleccionar solo uno, y no es cuadrado, sino es con circulos, el cual no Tengo Ejemplos pero Ya Veran Como Hacerlos y Como se Veran, cuando Los Vean en Las Vistas Previas Seguramente Se Dan Cuenta.
Hay 2 Formas para Hacerlos Pero hoy Aprenderan solo 1, y es con <input>, y Algunos de Sus Argumentos.
type - Define el Tipo de Input, ya sea, Text, submit, checkbox, radio, etc.
name - Le Asigna un Nombre al Elemento [No Nesesario]
Para Elejir el type de un input se escribe así:
[color=#000000]
<input type="aca el tipo de input">
[/color]
Ahora Les Dejo un Ejemplo con Varios Checkboxes.
[color=#000000]
<input type="checkbox">
Tengo Perro (?)
<br>
<input type="checkbox">
Tengo Gato (?)
<br>
<input type="checkbox">
Soy Forever Alone (?)
<br>
<input type="radio">
Soy Espantoso
<br>
<input type="radio">
Soy Feo
<br>
<input type="radio">
Soy Normal
<br>
<input type="radio">
Soy Lindo
<br>
<input type="radio">
Soy Hermoso
<br>
<input type="radio">
Soy Sexy
<br>
<input type="radio">
Soy Super Mega Hermoso y Ultra Sexy :D
<br>
[/color]
Select
Una Select es un Recuadro que al hacerle click, se Despliega un menu Con Varias Opciones a Elejir, y solo podes elejir una, al seleccionlarla, queda puesta en el recuadro para que puedas ver cual elejistes.
Esto Tambien se hace con <select> y las opciones las vamos a agregar con <option>
Primero Creamos el Select, despues Agregamos Las Opciones con <option> y despues cerramos el Select, Ejemplo:
[color=#000000]
¿Cual es tu Usuario Favorito de Taringa?
<br>
<select>
<option>Seleccione un Usuario</option>
<option>elnicaso</option>
</select>
<select>
<option>Seleccione un Usuario</option>
<option>elnicaso</option>
</select>
[/color]
Bueno Creo que Hasta aca llega la Parte de Hoy, espero que les haya gustado, y hayan aprendido a usar alguna de las cosas que explique, se que es poco, pero prefiero ir de a poco y que entiendan a ponerles los codigos que no entiendan nada ni como se usan ni nada, y les cueste aprender a usarlos, me hace sentir mala persona, :c Bueno era eso nomas, Asique Nos vemos.. Hasta Luegooooooooo!!