ing. cleyver vazquez jijon. ¿qué es el html? (hyper text markup language) es el lenguaje con el...

Ing. Cleyver Vazquez Jijon


¿Qué es el HTML?

(Hyper Text Markup Language)

Es el lenguaje con el que se diseñan las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento. Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia.


Editores de Código HTMLUn editor es un programa que nos permiten redactar documentos. Hoy en día existen un gran número de editores que permiten crear páginas web sin la necesidad de escribir ni una sola línea de código HTML. Algunos de los editores visuales con los que podrás crear tus páginas Web son:

Macromedia Dreamweaver.Bloc de NotasMicrosoft Frontpage.Adobe Pagemill.NetObjects Fusion.

ETIQUETASLas etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento.

La etiqueta de comienzo está delimitada por los caracteres < >. Está compuesta por el identificador o nombre de la etiqueta, y puede contener una serie de atributos opcionales que permiten añadir ciertas propiedades.

La etiqueta de final está delimitada por los caracteres </ >. Está compuesta por el identificador o nombre de la etiqueta, y no contiene atributos.

EJEMPLO:

<etiqueta></etiqueta>

ETIQUETAS PRINCIPALESLas siguientes etiqueta todas la páginas web las tienen que llevar.

<HTML> Indica el inicio de una pagina web

<TITLE> Indica el titulo de la página el nombre que aparecerá en la parte superior del navegador.

<BODY> El cuerpo del documento contiene la información propia del documento, es decir lo que queremos que se visualice, el texto de la página, las imágenes, los formularios, etc

ESTRUCTURA GENERAL DE UNA PAGINA WEB

<HTML><TITLE>Mano Amiga</TITLE><BODY>Bienvenidos</BODY></HTML>


CREAR MI PRIMER PÁGINA WEB


¿Qué programa utilizaremos?

Para crear nuestra primer pagina web utilizaremos el bloc de notas esta es un aplicación que no tienes que instalar ya que viene en cualquier versión de Windows que tengas en tu computadoras (xp, vista o seven).

Para esto vayan al botón “Inicio”, luego “Accesorios” y por ultimo “Bloc de notas”.


¿Qué programa utilizaremos?

También utilizaremos un navegador es decir un programa o interfaz grafica que permite abrir las páginas de Internet para poder visualizar el resultado de codificación que estamos elaborando. Dentro de los navegadores mas comunes tenemos:

-Internet Explorer.-Mozilla Firefox-Google Chrome-Netscape


ESCRIBIENDO EL CÓDIGO

Ya que abrimos el bloc de notas escribimos el siguiente código tal y como se muestra en la siguiente ventana:

Nota: Pueden escribirlo en mayúsculas o minúsculas no hay ningún problema


¿Cómo se guarda?Una vez que terminamos de escribir el código es importante guardarlo de forma correcta para que pueda funcionar. Para ello realizaremos los siguiente pasos:

1. Seleccionamos “Archivo”.2. Seleccionamos “Guardar”.3. Seleccionamos la dirección donde se guardara.4. Colocamos el nombre del archivo incluyendo la

extensión .html.

Nota: Se recomienda crear una carpeta en el escritorio o en el disco local “C:” con el nombre de “practicas de html” con el objetivo de tener todas nuestras practicas bien organizadas en una sola carpeta.


¿Cómo verifico si se guardo correctamente?

Si el archivo se guarda de forma correcta se mostrara el siguiente icono:

Pero si el archivo no se guardo correctamente entonces se mostrara un icono de la siguiente forma:


¿Cómo ver el funcionamiento de mi página?Es muy sencillo solo le das doble clic al archivo y

en ese momento te va abrir el navegador que tengas instalado y te mostrara el resultado de la pagina:

Código y Resultado

La etiqueta <TITLE> permite colocarle el titulo a nuestra pagina Web.

Código y Resultado

La etiqueta <BODY> permite insertar texto a nuestra pagina Web.


Hacer modificaciones a mi página Web

Para realizar modificaciones a la página primeramente se debe cerrar la pagina si se esta utilizando, posteriormente haga clic derecho sobre el archivo y seleccione la opción “Abrir con..” y seleccione “Bloc de notas”:


Hacer modificaciones a mi página Web

Se realizan las modificaciones necesarias y posteriormente se guarda de forma normal (Archivo – Guardar) ya que no es necesario incluir la extensión .html esto se realiza cuando se guarda por primera vez y se cierra el bloc de notas.


Ver las modificaciones realizadas

Una vez que se realizaron modificaciones abrimos nuevamente el archivo dándole doble clic sobre el:


Preguntas

-¿Cómo le hizo para ponerle color?

-¿Cómo le hizo para hacer la letra mas grande?

-¿Cómo le hizo para poner ese tipo de letra?

Respuesta

Para poder realizar esos cambios se utilizan otras etiquetas y atributos que vamos a ir viendo poco a poco en los próximos temas.

Etiquetas y atributosAl inicio vimos que en la codificación HTML se manejan etiquetas y cada una de ellas tiene una funcionalidad dentro de una pagina, pero existen etiquetas que a su vez cuentan con algunos atributos. Los atributos son propiedades de las etiquetas. Por Ejemplo:

<BODY> Etiqueta sin atributos

<BODY bgcolor=pink> Etiqueta con atributos

Recuerda que la etiqueta <body> representa el cuerpo de la pagina es decir el contenido de la pagina web y en este ejemplo utilizamos el atributo bgcolor y le asignamos el valor pink utilizando el signo de “=“ esto permite que el fondo de la pagina sea color rosa.

Otro ejemplo de Etiquetas y atributos Etiqueta sin atributos

 Etiqueta con atributos

La etiqueta permite asignarle propiedades al texto:

Con el atributo size asignamos el tamaño de la letra que va desde 1 hasta 7.

Con el atributo color asignamos el color de la letra el cual tiene que ser escrito en ingles.

Asi como los dos ejemplos anteriores exiten muchas etiquetas y algunas de estas etiquetas cuentan con atributos, pero tambien recuerden que estas etiquetas se tienen que cerrar.

Mas Etiquetas y atributosEtique

taDescripción Atributos



Permite aplicar formato al texto de la pagina web

SIZECOLORFACE

Tamaño de la letraColor de la letraTipo de letra

 Realiza un salto de línea

 Realiza un salto de párrafo

<OL> Realiza lista ordenadas

TYPESTART

Define el tipo de listaIndica el número en que iniciara la lista

<UL> Realiza lista desordenadas

TYPE Indica el tipo de lista

<LI>Coloca cada uno de los elementos de las listas <UL> y <OL>

<IMG>Inserta una imagen en

la pagina webSRC

WIDTHHEIGHTBODER

Indica la dirección de la imagenAncho de la imagenAlto de la imagenColocar borde a la imagen con un grosor

Mas Etiquetas y atributosEtiqueta Descripción Atributos

<TABLE>Permite insertar una tabla a una página

web

BORDER<TR><TD>

Coloca un borde a la paginaPermite insertar Filas a la tablaPermite insertar Columnas a la tabla

<MARQUEE>

Aplica un efecto de movimiento a un

determinado elemento

BEHAVIOR

Indica el tipo de efecto

<A> Insertar un hipervínculo

HREF Indica la dirección a la cual se va a enlazar

<BGSOUND>

Insertar un sonido a la pagina

web

SRCLOOP

Indica la dirección de archivo de audioIndica la cantidad de veces que se repetira

<EMBED> Insertar un video SRCWIDTHHEIGHT

Indica la dirección del videoAncho del videoAlto del video

<CENTER>

Permite centrar un elemento de la

pagina web


Ejercicios-Realizar la practica 1 que ya viene en esta presentación-Realizar la practica 2.

Si gustas puedes poner otros colores y otros tipos de letras, pero para el tipo de letra se debe de poner entre comillas si el nombre lleva mas de dos palabras como se muestra en la práctica 2


Gracias

Dudas y sugerencias

[email protected]

ing. cleyver vazquez jijon. ¿qué es el html? (hyper text markup language) es el lenguaje con el...

Documents