Scribd
Cargar
2 vistas6 páginas

HTML Basico

Cargado por

santiagobedoyaarias41
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
2 vistas6 páginas

HTML Basico

Cargado por

santiagobedoyaarias41
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 6

Básico de HTML, SENA Regional Antioquia

HTML: "Lenguaje para marcado de hipertexto".

lenguaje para estructurar documentos a partir de texto en World Wide Web. Este lenguaje se basa en tags
(instrucciones que le dicen al texto como deben mostrarse) y atributos (parámetros que dan valor al tag).

<tag> texto afectado </tag>


activa el tag desactiva el tag

Esctuctura básica

<html> limitan el documento


<head><title> cabecera
<body> contenido del documento

Ejemplo 1:

<HTML>
<HEAD>
<TITLE>Ejemplo 1</TITLE>
</HEAD>
<BODY>
Hola
</BODY>
</HTML>

<H1> Titulares, dividen el texto en secciones, tiene hasta 6 niveles


<P> Saltar parrafos
<BR> Saltar Lineas

<!-- comentarios -->

enlaces <A>, Vinculos o hipertextos

Contiene el nombre de un archivo (o su dirección url) y el texto que se muestra en la pantalla y lleva un
atributo <a ref.=” ”> ó <a name=” “>

<A HREF="URL">.....</A>: Es el más habitual de los atributos y sirve para saltar entre diferentes URLs.

<A HREF="ejemplo1.htm">ir a la página ejemplo No. 1 </a>


permite saltar a otra pagina.

<A HREF="http://www.senamed.edu.co">Visita la página del Sena Medellín</A>


permite saltar a otra pagina externa.

<A NAME="parte1">Primera parte</A>: Utilizamos el atributo name para dar nombre a una sección o ancla
de la pagina. Posteriormente, cuando en el documento se incluye un vínculo a la ancla:
<A HREF="#parte1">Ir a la primera parte</A>

Ejemplo2

<HTML>
<HEAD>
<TITLE>Ejemplo 2</TITLE>
</HEAD>
<BODY>
<A NAME="arriba"><H1>Página de enlaces</H1></A>
<A HREF="#abajo">Ir abajo</A><br>

1
Básico de HTML, SENA Regional Antioquia

<A HREF="ejemplo1.html"> ir a la página ejemplo No. 1 </A><br><br>


<A HREF="http://www.senamed.edu.co/">Ir a la página Sena Medellín</A><br>

<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br>.<br>.<br>.<br>.<br>.<br>
Página de enlaces
<A NAME="abajo"><br></A>
<A HREF="#arriba">Ir arriba</A>
Ir abajo
</BODY> ir a la página ejemplo No. 1
</HTML>

Ir a la página Sena Medellín


resultado:

Listas .
<ol> ordenada .
<ul> sin ordenar .
<li> .
..
Una lista ordenada
<ol>
<li>Uno</li> Ir arriba
<li>Dos</li>
<li>Tres</li>
</ol>
Listas
<br><br>
ordenada
Una lista sin ordenar sin ordenar
<ul>
<li>Uno</li> o Una lista ordenada
<li>Dos</li>
1. Uno
<li>Tres</li>
</ul> 2. Dos
<br><br> 3. Tres

Estilos físicos: Modifican la presentación real del texto.


Una lista sin ordenar
<b>.....</b>: Pone el texto en negrita.
<i>.....</i>: Pone el texto en cursiva.  Uno
<tt>.....</tt>: Pone el texto en fuente monoespaciada.  Dos
<u>.....</u>: Subraya el texto afectado.  Tres
Un ejemplo de texto de <B>en negrita</B>.<br>
Un ejemplo de texto de <I>en cursiva</I>.<br> Un ejemplo de texto de en negrita.
Un ejemplo de texto de <U>subrayado</U>.<br> Un ejemplo de texto de en cursiva.
Un ejemplo de texto de <TT>monoespaciado</TT>.<br> Un ejemplo de texto de subrayado.
Un ejemplo de texto de monoespaciado.
Saltos de linea

<HR> linea divisoria ej, <hr width="80" size="10">


<BR> salto de linea
.
<HTML> .
<HEAD> .
<TITLE>Ejemplo 9</TITLE> .
</HEAD>
.
2
Ir arriba
Básico de HTML, SENA Regional Antioquia

<BODY>
<H1 align="center">Saltos y lineas</H1> Resultado:
<HR>
<HR width="80%">
Saltos y lineas
<HR width="60%">
<HR width="40%">
<HR width="20%">

</BODY>
</HTML>

Tablas

El contenido de una tabla lo debemos desarrollar


entre las tags <table>.....</table>.

<tr> fila
<th> celda tipo encabezado
<td> celda tipo común

Las tablas se definen fila a fila, celda a celda, comenzando desde la celda superior izquierda. Las
columnas se calcularán automáticamente según las celdas que hay en cada fila.

Cada fila de la tabla se indica mediante las tags <tr>.....</tr>. Las tags <th> y <td> con sus
correspondientes tags de cierre, indican para indicar las filas individuales dentro de cada fila. Las tags
<th>.....</th> indican que se trata de celdas que sirven como encabezado de tabla y suelen
visualizarse en negrita. Las tags <td>.....</td> indican que se trata de celdas comunes.

<HTML>
<HEAD>
<TITLE>Ejemplo 10</TITLE>
</HEAD> Tabla
<BODY>
<H1>Tabla</H1>
<TABLE BORDER="1"> Nombre Codigo Salario
<TR>
Juan 1020 $600.000
<TH>Nombre</TH>
<TH>Codigo</TH> Pedro 1524 $950.000
<TH>Salario</TH>
</TR>
<TR>
<TD>Juan </TD>
<TD>1020</TD>
<TD>$600.000</TD>
</TR>
<TR>
<TD>Pedro</TD>
<TD>1524</TD>
<TD>$950.000</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Accesorios de tables

<caption>.....</caption>.

3
Básico de HTML, SENA Regional Antioquia

<caption align="right">este es el subtitulo</caption>

atributos a celdas: <TH bgcolor="#FF0000" align="center">Nombre</TH>

combinar celdas: Para crear una celda que abarque varias filas o columnas, debemos colocar en las tags
<th> o <td> los atributos:

rowspan= más un valor para indicar el número de filas que se quiere abarcar.
colspan= más un valor para indicar el número de columnas que se quiere abarcar.

<HTML>
<HEAD>
<TITLE>Ejemplo tabla</TITLE>
</HEAD>
<BODY>
<TITLE></TITLE>
<H1>Celdas combinadas</H1>
<TABLE WIDTH="50%" BORDER="1" CELLSPACING="3" CELLPADDING="2">
<TR>
<TD COLSPAN="2" ALIGN="right">combina 2 columnas </TD>
<TD>sin combinar</TD>
<TD ROWSPAN="2">combina 2 filas </TD>
</TR>
<TR>
<TD>sin combinar</TD>
Celdas combinadas
<TD>sin combinar</TD>
<TD ALIGN="center">sin combinar</TD>
</TR>
sin
</TABLE> combina 2 columnas
</BODY> combinar combina 2
</HTML> filas
Espaciado
sin sin
sin combinar
width=ancho de la tabla combinar combinar
Border= borde
Cellspacing= número de pixeles que separan cada celda. El valor predeterminado suele ser 2.
Cellpadding= número de pixeles entre bordes, predeterminado 1
Imagen <IMG>
atributos:
src= indica el nombre del archivo de imagen (entre comillas) o la URL que se va a representar.
Align= Permite controlar la alineación left, right, top..
Alt= texto cuando pasamos el ratón por encima.
WIDTH= ancho de la imagen.
HEIGHT= alto de la imagen.
BORDER= ancho de un borde que rodea la imagen.
Ej. <IMG SRC="/graficos/imagen.jpg" WIDTH=100 HEIGHT=250 BORDER=0 ALT="Imagen de medellín">

Formularios <FORM>
atributos:
action="" Entre comillas nombre del programa que va a tratar las variables enviadas con el formulario o la
URL mailto.
Method="" Indica el método de transferencia de las variables.
Post, si se envía a través de paquetes. Formulario
Get, si se envía a través de la URL.
<HTML>
<HEAD>
<TITLE>Ejemplo formulario</TITLE>
</HEAD> Enviar consulta Restablecer
<BODY>

<H1>Formulario</H1>
4
Básico de HTML, SENA Regional Antioquia

<FORM ACTION="mailto:[email protected]" METHOD="POST">


<INPUT TYPE="text" NAME="nombre"><BR>
<INPUT TYPE="submit"><INPUT TYPE="Reset">
</FORM>

</BODY>
</HTML>

Campos de entrada
<INPUT>
La tag <input> define la introducción de variables. Junto a esta tag encontraremos los siguientes atributos:
1. type="" Indicará el tipo de variable a introducir.
o text Indica que el campo a introducir será un texto. Sus atributos:
 maxlenght="" Seguido de un valor que limitará el número máximo de carácteres a
introducir en ese campo.
 size="" Seguido de un valor que limitará el numero de carácteres a mostrar en pantalla.
 value="" Indica que no hay valor inicial del campo.
o Password Indica que el campo a introducir será una palabra de paso. Mostrará asteriscos en lugar
de letras escritas. Sus atributos serán los mismos que para text.
o Checkbox El campo se elegirá marcando de entre varias opciones una casilla cuadrada.
 value="" Entre comillas se indicará el valor de la casilla.
 checked La casilla aparecerá marcada por defecto.
o Radio El campo se elegirá marcando de entre varias opciones una casilla circular.
 value="" Entre comillas se indicará el valor de la casilla.
o Image El campo contendrá el valor en coordenadas del punto de la imagen que haya pinchado.
Atributo obligatorio:
 src="" Entre comillas escribiremos el nombre del archivo de imagen.
o hidden El visitante no puede modificar su valor ya que no está visible. Se manda siempre junto al
atributo value= seguido de su valor entre comillas.
2. Name="" Indicará el nombre que se asigna a un determinado campo.

<HTML>
<HEAD>
<TITLE>Ejemplo 15</TITLE>
</HEAD>
<BODY>

<H1>Formularios</H1> Formularios

<FORM ACTION="mailto:unaprueba" METHOD="POST">


Texto: <INPUT TYPE="text" NAME="nombre"><BR> Texto:
Password: <INPUT TYPE="password" NAME="contra"><BR>
Sexo:<INPUT TYPE="radio" NAME="boton1" VALUE="1"> Hombre Password:
<INPUT TYPE="radio" NAME="boton1" VALUE="2">Mujer<BR>
Vehiculo:<INPUT TYPE="checkbox" NAME="Moto" VALUE="Si">Moto Sexo: Hombre Mujer
<INPUT TYPE="checkbox" NAME="Coche" VALUE="" CHECKED>Coche
Vehiculo: Moto Coche
<BR><BR>
<INPUT TYPE="submit"><INPUT TYPE="Reset">
</FORM> Enviar consulta Restablecer

</BODY>
</HTML>

Campos de selección
<SELECT>
Las tags <select>.....</select> encierran los valores que podremos elegir a partir de una lista.
atributos:
name="" nombre del campo de selección.

5
Básico de HTML, SENA Regional Antioquia

Size="" número de opciones visibles. Si le asignamos 1, la selección se presentará como un menú


desplegable. Si le asignamos un valor mayor se presentará como una lista con barra de desplazamiento.
multiple Indica si se pueden realizar multiples selecciones.
Las diferentes opciones de la lista se indicarán mediante la tag <option> que puede acompañarse del
atributo selected para indicar cual es la opción que aparecerá por defecto. Si no lo especificamos, siempre
será la primera de la lista.

<HTML>
<HEAD>
<TITLE>Ejemplo 16</TITLE> Formularios
</HEAD>
<BODY>
Rojo
<H1>Formularios</H1>
<FORM ACTION="mailto:unaprueba" METHOD="POST"> Rojo
<SELECT NAME="Colores" MULTIPLE>
<OPTION VALUE="r">Rojo</OPTION>
<OPTION VALUE="g">Verde</OPTION>
Enviar consulta Restablecer
<OPTION VALUE="b">Azul</OPTION>
</SELECT>
<BR><BR>
<SELECT NAME="Colores" SIZE="1">
<OPTION VALUE="r">Rojo</OPTION>
<OPTION VALUE="g">Verde</OPTION>
<OPTION VALUE="b">Azul</OPTION>
</SELECT>
<BR><BR>
<INPUT TYPE="submit"><INPUT TYPE="Reset">
</FORM>

</BODY>
</HTML>

Areas de texto

<TEXTAREA>

Con las tags <textarea>;.....</textarea> definimos un texto de múltiples líneas comentarios.


atributos:

name="" Nombre del campo.


Cols="" Numero de columnas de texto visible.
Rows="" Numero de filas de texto visible

Botones
Se definen mediante la tag <input> a la que le acompañan los atributos:
type="" Seguido de submit para enviar los datos del formulario y seguido de reset para borrar los datos que
se han introducido.
Value="" Indica el texto que incorporaran los botones. Normalmente, enviar y borrar

También podría gustarte