martes, 18 de noviembre de 2014

HTML Basico

Etiquetas básicas html


La primera etiqueta del archivo es <html>. Esto le indica al navegador que se trata de un archivo HTML. Para cerrar el archivo usamos </html>. Todo lo que se encuentra entre las dos etiquetas es el código HTML de la página.

Luego vemos la etiqueta <head>. Lo que sigue a continuación hasta su cierre </head>, es la cabecera del documento y no se muestra en la pantalla. Aquí colocamos información tal como el título de la página(<title>titulo de la pestaña</title>)

Entre las etiquetas <body> y </body> se encuentra el cuerpo del documento y el contenido que se coloque en esta sección es el que veremos en pantalla, como por ejemplo, "Hola Mundo".

Reglas básicas

  • Las etiquetas están encerradas entre los signos "<" y ">".
  • Generalmente vienen en pares <p> y <⁄p>.
  • La primera es de apertura y la segunda de cierre.
  • El texto que se encuentra entre dos etiquetas es el contenido del elemento.
  • Las etiquetas no son sensibles a las mayúsculas y minúsculas, o sea <b> es lo mismo que<B>.

 Ejemplo.
<html>
   <head>
          <title>Una página Web</title>
   </head>
   <body>
            Hola a todos. <b>Este texto es en negrita</b>
   </body>
</html>





Qué son los atributos de las etiquetas?

Muchas etiquetas llevan atributos. Los mismos proveen de mayor información a los elementos HTML.
  • Los atributos siempre van con la estructura: nombre="valor".
  • Los atributos siempre van en la etiqueta de apertura.
  • Los valores siempre hay que ponerlos entre comillas.
Un ejemplo de los atributos sería:



Ejemplo

Código
<body bgcolor="#FFFF00">
Hola a todos. <b>Este texto es en negrita</b>
</body>
Resultado
Hola a todos. Este texto es en negrita
En la etiqueta <body> podemos observar el atributo bgcolor=(color de fondo) y el valor
"#FFFF00"(representa el color amarillo en hexadecimal).





Encabezados

Nos definen el tamaño de un título o cabecera.

<h1> nos dá el tipo de letra más grande.
<h6> nos dá el tipo de letra más pequeño.
HTML agrega automaticamente un espacio antes y después de cada título



Ejemplo

Código
<html>
<head>
<title>Headings</title>
</head>

<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Resultado

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6






Párrafos

Los párrafos se definen con la etiqueta <p>.

Ejemplo

Código
<html>
<head>
<title>Párrafos</title>
</head>

<body>
<p>Este es el primer párrafo.</p>
<p>Y este es el segundo párrafo.</p>
</body>
</html>
Resultado
Este es el primer párrafo.
Y este es el segundo párrafo.



Trazar una línea

La etiqueta <hr> nos permite trazar una línea horizontal como las que separan las distintas secciones de este tutorial.
La etiqueta <hr> no tiene cierre.

Ejemplo

Código
<hr>
Resultado




Etiquetas para dar forma al texto

EtiquetasDescripción
<b>Define un texto en negrita
<i>Define un texto en cursiva 
<u>Define un texto subrayado
<sub>Define un texto subíndice
<sup>Define un texto superíndice
<del>Define un texto tachado








Los Enlaces o Links

Los enlaces o links(en Inglés) nos permiten conectarnos con otros documentos.
Para ello debemos usar la etiqueta <a> que proviene de la primera letra de la palabra anchor(ancla).

La etiqueta <a> tiene como cierre </a>.

Sintaxis

<a atributo="valor">Texto del enlace</a>

Ejemplo

Vamos a crear un enlace hacia google
Código
<body>
<a href="/http://www.google.com/">ir a google</a>
</body>
Resultado
ir a google




Un enlace a partir de una imagen

Muchas veces queremos usar una imagen como enlace a otro documento. Para ello debemos colocar la etiqueta <img> entre las etiquetas <a> y </a> en lugar del texto.

Ejemplo

Código
<body>
<a href="http://www.google.com/"><img src="/../graficos/google.gif"></a>
</body>
Resultado
Logo de Google





La etiqueta frame

La etiqueta <frame> asigna que documento colocaremos en cada marco.

Sintaxis

<frameset cols="25%,75%"> <!-- Dividimos la pantalla en una columna de 25% y otra de 75%-->
<frame src="/URL_1">
<frame src="/URL_2">
</frameset>
Nota: La etiqueta <frame>
no debe llevar etiqueta de cierre




Características de las tablas

Definimos las tablas con la etiqueta <table>.
La tabla está dividida en filas definidas con la etiqueta <tr>.
Y a su vez cada fila dividida en celdas definidas con la etiqueta <td>.
Las celdas pueden contener texto, imágenes, formularios, listas, otras tablas, etc.

Sintaxis

<table>
<tr>
<td>contenido celda 1</td>
<td>contenido celda 2</td>
</tr>
</table>


Ejemplo

Vamos a crear una pequeña tabla para ver como quedaria
Código
<table border="1px">
<tr>
<td>Nombre</td>
<td>Apellido</td>
</tr>
<tr>
<td>Edad</td>
<td>Telefono</td>
</tr>
</table>
Resultado
NombreApellido
EdadTelefono








Bordes de las tablas

Para que se visualicen los bordes de una tabla, debemos agregar el atributo border junto con el valor expresado en pixels, de lo contrario no se verán los bordes que dividen las celdas de la tabla.

Ejemplo

Código
<table border="3px">
<tr>
<td>Borde</td>
<td>3 pixels</td>
</tr>
</table>
Resultado
Borde3 pixels
Veamos un ejemplo sin bordes

Ejemplo

Código
<table>
<tr>
<td>Esta tabla es</td>
<td>Sin bordes</td>
</tr>
</table>
Resultado
Esta tabla esSin bordes
Nota: al no colocar el atributo border, los bordes no se visualizan pero la tabla existe.





Atributos


EtiquetasAtributosValorDescripción
<table>

alignleftAlínea las tablas.
center
right
bgcolorrgb(x,x,x)Color de fondo de las tablas. 
#xxxxxx
nombre_color
borderpixelsEspesor del borde de la tabla.











Las listas

Las listas nos permiten ordenar o enumerar datos o elementos para facilitar su lectura.
Tenemos tres tipos de listas:

  • Ordenadas.
  • Desordenadas.
  • De definición.

Listas Ordenadas

Son aquellas que ordenan la lista anteponiendo números ,letras o signos.
Las listas ordenadas comienzan con la etiqueta <ol> y para cada uno de los items de la misma, utilizamos la etiqueta <li>.

Ejemplo

Vamos a crear una lista ordenada
Código
<ol>
<li>Naranjas</li>
<li>Manzanas</li>
<li>Bananas</li>
</ol>
Resultado
  1. Naranjas
  2. Manzanas
  3. Bananas
Dentro de cada Item se pueden agregar imágenes, párrafos, otras listas, etc.

Listas Desordenadas

Exponen la lista anteponiendo un punto, cuadrado o triángulo negro.
Las listas desordenadas comienzan con la etiqueta <ul> y para cada uno de los Items de la misma utilizamos la etiqueta <li>.

Ejemplo

Código
<ul>
<li>Tomates</li>
<li>Pepinos</li>
<li>Cebollas</li>
</ul>
Resultado
  • Tomates
  • Pepinos
  • Cebollas


Listas de definición

Se utilizan para definir términos.

Las listas de definición se representan con la etiqueta <dl>.
Los términos de las mismas con <dt>.
La definición de esos términos comienza con <dd>.

Ejemplo

Código
<dl>
<dt>Chocolate</dt>
<dd>Elaborado a base de cacao</dd>
<dt>Caramelo</dt>
<dd>Elaborado a base de azúcar</dd>
</dl>
Resultado
Chocolate
Elaborado a base de cacao
Caramelo
Elaborado a base de azucar




<li>Define el comienzo del Item.
typediscEspecifica el estilo de un objeto de lista. 
square
circle
A
a
I
i
1
valuenúmero del objetoEstablece el número del objeto de lista actual.







Las imágenes

Para insertar imágenes en un sitio usaremos la etiqueta <img>.

Esta etiqueta debe ir acompañada del atributo src que es el que contiene el URL de la ubicación del archivo de la imagen.



La etiqueta <img> no tiene cierre.

Sintaxis

<img src="/URL">



Fin... creo
en No hay comentarios:
Etiquetas: , , ,

lunes, 10 de noviembre de 2014

Ejercicio 7 de html, (Rellena tu CV)

Ejercicio 7 de html:

Lo primero es la etiqueta "form":
La etiqueta "<form>" encierra todos los contenidos del formulario (botones, cuadros de texto, listas desplegables) y la etiqueta "<input>" permite definir varios tipos diferentes de elementos (botones y cuadros de texto).

 En este caso seria asi :
"<form action="insertar_cv.php" method="post">
<form>"



En "action"  diremos la url o ruta que se encarga de procesar los datos, en este caso "insertar_cv.php" 
y el method  "post" nos indica que el método de envío sera formando parte del cuerpo de la petición. 

 Como la mayoría de etiquetas hay que cerrarla.
Una vez tengamos el form toca los recuadros de nombre etc.. 

Para ello utilizaremos:
Nombre <br/>
 <input type="text" name="nombre" value="" />



Lo primero sera el nombre del recuadro, en este caso el primero es Nombre y el segundo seria Apellido, con un <br/> para hacer el salto de linea y que quede como en la imagen.

 en "imput type" va el tipo de recuadro que sera, en este caso queremos que sea texto asi que ponemos "text".  Con "name" definiremos el nombre de la variable para que luego se pueda reconocer en el php por ejemplo:
un script simple php:
Hola <?php echo htmlspecialchars($_POST['nombre']); ?>.
Usted tiene <?php echo (int)$_POST['edad']; ?> años.
un ejemplo de el resultado de este script podria ser:

Hola José. Usted tiene 22 años.  

 Pero eso seria ya php y en este ejercicio solo pide html.

 En "value" lo dejamos con las comillas ya que hay es donde escribiremos en el recuadro.

 Para la contraseña solo deberíamos cambiar el "input type" en vez de "text" por "password" ya que no es texto.

Contraseña <br/><input type="password" name="contrasena"  />
  

 Para el sexo el "type" es radio. Y para que aparezca como predeterminado uno de ellos, usaremos  "checked" en la opción que queremos que aparezca por defecto.


Sexo <br/><input type="radio" name="sexo" value="hombre" checked="checked" /> Hombre <br/><input type="radio" name="sexo" value="mujer" /> Mujer 
En la parte de subir una foto  el "type" sera "file" ya que es un archivo y como hasta ahora siempre dándole un "name" a todas

Incluir mi foto <input type="file" name="foto" />

Para la suscripcion  usaremos "checkbox" de "type" y lo seleccionaremos por defecto con "checked"


<input name="suscribir" type="checkbox" value="suscribir" checked="checked"/> Suscribirme al boletín de novedades


 y por ultimo 
<input type="submit" name="enviar" value="Guardar cambios" /><input type="reset" name="limpiar" value="Borrar los datos introducidos" />
  

 Con "submit" nos enviara el formulario al pulsar el botón y con "reset" nos lo dejara en blanco.
en No hay comentarios:
Etiquetas: , , , , , , ,
Suscribirse a: Entradas (Atom)