Scribd
Cargar
10 vistas

HTML Guia1

Este documento explica los conceptos básicos de HTML como lenguaje de marcado para crear páginas web, incluyendo elementos, estructura básica, etiquetas y atributos comunes.

Cargado por

......
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
10 vistas

HTML Guia1

Este documento explica los conceptos básicos de HTML como lenguaje de marcado para crear páginas web, incluyendo elementos, estructura básica, etiquetas y atributos comunes.

Cargado por

......
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/ 3

PROGRAMACION EN HTML

Guía No. 1

H TML es la sigla de HiperText Markup Language (Lenguaje de Marcación de


Hipertexto) es un lenguaje es se utiliza comúnmente para establecer la
estructura y contenido de un sitio web, tanto de texto, objetos e imágenes.
Los archivos desarrollados en HTML usan la extensión. htm o html.

El lenguaje de HTML fue creado por la Organización Europea de Investigación


Nuclear en el año 1945 con el fin de crear un sistema de almacenamiento que se
conectara por medio de hipervínculos. En el año, 1991 el norteamericano Tim
Berners-Lee fue el primero en proponer 22 componentes del lenguaje HTML.

El diseño en HTML debe de cumplir correctamente el lenguaje y las normas o


especificaciones de W3C (World Wide Web Consortium), aunque en algunos es
regido por otros reglamentos como es el caso de España con la Norma UNE
139803.

E
LEMENTOS EN UN DOCUMENTO HTML: A las instrucciones que forman el
lenguaje HTML les llamaremos ELEMENTOS. Otros autores también las
denominan "TAGS", o "ETIQUETAS. La notación de los elementos consiste
en los símbolos < y > que encierran dentro una instrucción. Los elementos pueden
ser llenos o vacíos.

Elementos llenos: Se forman escribiendo la instrucción correspondiente seguida


del texto al que se quiere aplicar la instrucción y se termina repitiendo la instrucción,
pero con una barra inclinada inmediatamente antes de la misma.
Por ejemplo, el elemento H1 que sirve para dar el máximo tamaño al texto, se
escribirá: <HI> Texto de prueba </HI> Si olvidas poner </H1> todo el resto de la
página tendrá el mismo tamaño grande.

Elementos vacíos: Los elementos vacíos se escriben como los llenos, pero no es
necesario poner la instrucción repetida al final con una barra. Esto se debe a que
estos elementos no producen un efecto sobre el texto. Generalmente se utilizan
para separar bloques de texto, y por tanto no es necesario indicar su fin. Empiezan
y terminan en el mismo punto. Por ejemplo, el elemento <HR> que sirve para dibujar
una línea horizontal en la pantalla, se escribirá sin cerrarse. <HR>.

Elementos con argumento: Algunos elementos se escriben con argumento. Es


como pasarle parámetros a la instrucción, y se llaman atributos del elemento. Por
ejemplo, el elemento <A> que sirve para hacer un link (enlace) con otro documento
o con otra página del actual, se escribirá:
<A HREF="http://www.miservidor.es/mifichero.htm"> Link de prueba </A>

Este es un elemento lleno donde al atributo HREF se le asigna el valor que aparece
entre comillas: "http://www.miservidor.es/mifichero htm". El texto al que afecta este
elemento es Link de prueba y realiza un link con el fichero mifichero.htm que está
en el servidor www.miservidor.es.
PROGRAMACION EN HTML
Guía No. 1

Los elementos pueden escribirse tanto en mayúsculas como en minúsculas. Puede


ser preferible la primera opción ya que aporta claridad al documento fuente, y eso
se agradece a la hora de hacer correcciones, pero CUIDADO, el valor de algunos
atributos hay que escribirlos EXACTAMENTE como deban ser. En el ejemplo
anterior no funcionaría el link si escribiéramos www.miservidor.es en mayúsculas,
eso es un nombre de máquina y sería interpretado como OTRA máquina.

Los elementos, en HTML, los puedes escribir tanto en mayúsculas como en


minúsculas. Funciona igual <P> que <p>. A la hora de revisar el código escrito,
resulta más claro si se escribieron en mayúsculas, pero si en el futuro hay que
convertir la página a otro estándar.

ESTRUCTURA DE UNA PAGINA


ESTRUCTURA SIGNIFICAD0
<HEAD> ENCABEZADO: En él se escribe el
<TITLE> TITULO <TITLE> título de la página (se muestra en la
<HEAD> barra de título)
<BODY> CUERPO: En cl se escribe todo el
<HI> TITULO EN GRANDE </HI> desarrollo de la página, enlaces, texto.
<H2> SUBTITULO </H2> Imágenes y animaciones
TEXTO <BR>
</BODY>

ACCESO: Ingrese al archivo de Internet Explorer. Aparece la ventana de no


conexión o página en blanco. Presione clic en Ver / Código fuente. Aparece una
nueva ventana con mucho texto en el Block de notas. En este momento ya puede
comenzar a programar en HTML.

DISEÑO: Dentro del Block de notas digite el encabezado de su página y el cuerpo


de acuerdo a lo que requiere. Para guardar clic en Archivo / Guardar Como, el
nombre de cada página debe ser máximo de 8 caracteres, sin espacio, ni signos,
en minúsculas y luego punto y la extensión HTML, así:

PALABRAS RESERVADAS
PALABRA FUNCION
<HEAD> </HEAD> Crear encabezados y cerrarlos
<BODY> </ BODY> Crear el cuerpo de un programa
<H1> Hay hasta H5 </H1> Título en tamaño grande
<BR> Enter para cambiar de renglón
<font face="Arial"> </fonts> Tipo de letra
<font size=5> </ font> Tamaño de letra
<font color="red"> </ font> Color de letra
PROGRAMACION EN HTML
Guía No. 1
<font face="Arial" size 5 color-Red> Coloca tipo, tamaño y color a la letra.
</font>
Dentro de cada uno de <> se escriben los textos a los cuales usted le está
cambiando el diseño.

PARA RETORNAR AL CODIGO FUENTE


En Google Chrome
Tienes dos formas de hacerlo:
 Haz clic derecho sobre la página y después selecciona Ver código fuente de
la página
 Usar esta combinación de teclas: Ctrl + U
En Firefox
 Haz clic derecho sobre la página y después selecciona Ver código fuente de
la página
En una página web en HTML
 Haz clic derecho sobre la página y después selecciona Ver origen

ACTIVIDAD:

Realice las páginas de los símbolos institucionales, escribiendo el título, y el


significado de cada uno, utilice las palabras reservadas y cada símbolo debe estar
en hoja aparte. Guárdela en la carpeta de su curso. Y al final de cada página escriba
su nombre.

También podría gustarte