Scribd
Cargar
8 vistas

HTML Introduccion Prog3 1

HTML, o Lenguaje de Marcas de Hipertexto, es el lenguaje de marcado utilizado para crear páginas web, utilizando etiquetas para definir la estructura y presentación del contenido. Las páginas web se componen de elementos como el HEAD y el BODY, donde se incluyen etiquetas, atributos y valores para formatear texto y organizar contenido en tablas. El documento también detalla cómo se estructuran las tablas en HTML y proporciona un ejemplo de código para ilustrar la creación de una página web básica.

Cargado por

ruscittomic95
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
8 vistas

HTML Introduccion Prog3 1

HTML, o Lenguaje de Marcas de Hipertexto, es el lenguaje de marcado utilizado para crear páginas web, utilizando etiquetas para definir la estructura y presentación del contenido. Las páginas web se componen de elementos como el HEAD y el BODY, donde se incluyen etiquetas, atributos y valores para formatear texto y organizar contenido en tablas. El documento también detalla cómo se estructuran las tablas en HTML y proporciona un ejemplo de código para ilustrar la creación de una página web básica.

Cargado por

ruscittomic95
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/ 27

CODIGO HTML

CODIGO HTML

HTML, siglas de
HyperText Markup Language
(Lenguaje de Marcas de Hipertexto),
es el lenguaje de marcado predominante para
la construcción de páginas Web
LENGUAJE DE MARCADO
 Un lenguaje de marcado o lenguaje de
marcas es una forma de codificar un
documento que, junto con el texto, incorpora
etiquetas o marcas que contienen información
adicional acerca de la estructura del texto o
su presentación. El lenguaje de marcas más
extendido es el Código de HTML
¿Qué es el HTML?
Es un lenguaje de scripting para crear páginas web.

Es interpretado del lado del cliente (usuario final)

Utiliza etiquetas pareadas: <etiqueta> Texto </etiqueta>

La World Wide Web Consortium (W3C) es la organización encargada de


administrar los estandares
Los componentes del HTML
apertura <xxx> cierre </xxx>
Etiquetas (tags)
<P> ……. </P>

Modifican la funcionalidad de las tags


Atributos
<body BGCOLOR...>

Definen el valor del atributo


Valores
<P ALIGN="center">...</P>
Elementos de una pagina web
Contiene las etiquetas TITLE, META;
HEAD
los scripts y las hojas de estilo (CSS)

Contiene el contenido que ve el


BODY usuario en una pagina web: textos,
imágenes, tablas, enlaces, formularios.

<HTML>
<HEAD>
<TITLE>Título de la página</TITLE>
Aquí van otras etiquetas como las META, scripts y estilos
</HEAD>
<body>
Aquí va lo que se mostrará en pantalla del documento HTML
</body>
</HTML>
PAGINA Web
 Una página Web, también conocida como página de
Internet, es un documento: Un documento es el
testimonio material de un hecho o acto realizado en el
ejercicio de sus funciones por instituciones o personas
físicas, adaptado para una pagina Web: Una página Web
es un documento típicamente común a Internet una
página Web es realizado en el código HTML.
EL LENGUAJE DE MARCADO
HTML
 Es usado para describir la estructura y el
contenido en forma de texto, así como para
complementar el texto con objetos tales como
imágenes.
 El código HTML se escribe en forma de
"etiquetas”, rodeadas por corchetes angulares
(<,>)
ETIQUETAS
 Las etiquetas es en qué juego de caracteres está
la página, de qué tipo es cada uno de los
fragmentos de texto que contiene (por ejemplo,
encabezamiento, texto normal, etc.), si están
alineados a un lado o centrados, en qué tipo de
letra está el texto (cursiva, negrita, etc.), si hay
tablas, de qué anchura son etc.
CORCHETES ANGULARES
(<,>)
 Los corchetes angulares o las balizas dan al
navegador las instrucciones necesarias para
que presente la página en pantalla.
ELEMENTOS DEL HTML
 Los elementos son la estructura básica de
HTML.
 Los elementos tienen dos propiedades
básicas: Atributos y contenido.
 Cada atributo y contenido tiene ciertas
restricciones para que se considere válido al
documento HTML.
ATRIBUTOS
 Unatributo es un apéndice de un rótulo
HTML que extiende o califica su significado.
Los mas importantes son:
Align: Alinea horizontalmente la tabla con
respecto a su entorno.
Background: Nos permite colocar un fondo
para la tabla a partir de un enlace a una
imagen.
Bgcolor: Da color de fondo a la tabla.
Border: Define el número de pixels: Puntos.
Unidad de medida que expresa la capacidad
de la pantalla de un monitor. El número de
pixels o puntos de una pantalla informa sobre
su resolución.
Bordercolor: Define el color del borde.
Cellpadding: Define, en pixels, el espacio entre los
bordes de la celda y el contenido de la misma.
Cellspacing: Define el espacio entre los bordes (en
pixels).
Height: Define la altura de la tabla en pixels o
porcentaje.
Width: Define la anchura de la tabla en pixels o
porcentaje.
Formateando el texto
Párrafos
 <P ALIGN="LEFT"> ….. Alineado a la izquierda
 <P ALIGN="CENTER"> ….. Alineado al centro
 <P ALIGN="RIGHT"> ….. Alineado a la derecha
 <P ALIGN="JUSTIFY"> ….. Alineado en forma justificada

Salto de línea o retorno de carro: <BR>

Cabeceras
<H1> mayor tamaño
<H2>
<H3>
<H4>
<H5>
<H6> menor tamaño
Formateando el texto

Estilo del texto

 <B> ... </B> Pone el texto en negrita.


 <I> ... </I> Representa el texto en cursiva.
 <U> ... </U> Para subrayar algo.
Formateando el texto
Líneas horizontales
 <HR>
 Atributos: WIDTH=x% (Anchura), ALIGN=x, x es LEFT o RIGHT.

Etiqueta FONT : permite modificar el tamaño, color, y tipo de


letra

<FONT SIZE=4 COLOR="AA0000" FACE="Arial, Verdana"> ..


</FONT>
TABLAS EN HTML

 Las tablas son la manera más sencilla de organizar


el contenido en una página Web.
 Nos permiten delimitar de qué lugar a qué lugar
deseamos que se muestre el contenido.
QUE NOS PERMITE UNA
TABLA EN HTML
 Una tabla nos permite organizar y distribuir
los espacios de la manera más optima. Nos
puede ayudar a generar texto en columnas
como los periódicos, prefijar los tamaños
ocupados por distintas secciones de la página
o poner de una manera sencilla un pie de foto
a una imagen.
ESTRUCTURA DE UNA TABLA

 Las tablas están formadas por filas,


columnas y celdas.
 Cada espacio horizontal continuado es una
fila y cada espacio vertical continuado es una
columna, definiéndose una celda como el
espacio formado por la intersección de una
fila y una columna.
Columna 1 Columna 2 Columna 3

Fila 1 CELDA CELDA CELDA


(1,1) (1,2) (1,3)

Fila 2 CELDA CELDA CELDA


(2,1) (2,2) (2,3)

Fila 3 CELDA CELDA CELDA


(3,1) (3,2) (3,3)
Lo primero que tenemos que hacer
cuando queremos realizar una tabla es
decirle al navegador dónde empieza y
dónde acaba esta; esto se consigue
mediante la etiqueta de inicio <TABLE>
y su correspondiente etiqueta de cierre
</TABLE>.
TABLE: Es la marca de comienzo y final
de la tabla.
 Seguidamente debemos decirle cuantas filas vamos
a tener en nuestra tabla, cosa que hacemos con las
etiqueta de inicio de fila <TR> y su correspondiente
etiqueta de cierre de fila</TR>, por lo que deberemos
insertar una pareja de etiquetas por cada fila que
queramos que tenga la tabla.
 TR: Viene de table row que significa fila de la tabla.
Por último, dentro de cada fila
deberemos indicar cuantas celdas va a
haber, que inicialmente deben
corresponderse con el número de
columnas que deseemos tenga la tabla.
Esto se consigue mediante las parejas
de etiquetas <TD> y </TD>.
TD: Viene de table data que significa
dato de la tabla.
<TABLE>

<TD>.</TD> <TD>.</TD> <TD>.</TD>


<TR> </TR>
<TD>.</TD> <TD>.</TD> <TD>.</TD>
<TR> </TR>
<TD>.</TD> <TD>.</TD> <TD>.</TD>
<TR> </TR>
</TABLE>
Este es el esquema general de toda tabla simple, que
traducido a código HTML quedaría de la forma:
<TABLE>
<TR>
<TD> celda(1,1) </TD>
<TD> celda(1,2) </TD>
<TD> celda(1,3) </TD>
</TR>
<TR>
<TD> celda(2,1) </TD>
<TD> celda(2,2) </TD>
<TD> celda(2,3) </TD>
</TR>
<TR>
<TD> celda(3,1) </TD>
<TD> celda(3,2) </TD>
<TD> celda(3,3) </TD>
</TR>
</TABLE>
Ejercitación
Para el ejercicio, necesitaremos:

Un editor de texto.
No importa cual, basta con que grabe los
archivos como texto puro o ASCII. Los
usuarios de Windows pueden usar el
Notepad incluido en el sistema operativo. Si
lo desea, puede usar también en su
procesador de palabras favorito, pero tendría
que asegurarse de grabar los archivos
como "archivos de texto" o "archivos
ASCII"("text files" o "ASCII files" en inglés).

Un programa navegador
Para poder ver las páginas creadas. Basta con
el mismo programa que usamos para navegar
por Internet, ya sea Netscape, Internet Explorer
o cualquier otro.
Veamos entonces un ejemplo simple del texto que conforma una página
web típica:
Código HTML
<html>
<head>
<title>
Mi Página de prueba
</title>
</head>
<body>
<p>
Bienvenido a mi primera <i>página web</i>.
<p>
Espero se sientan a gusto y disfruten su visita.
</body>
</html>

También podría gustarte