Upload
ernesta-candela
View
239
Download
3
Embed Size (px)
Citation preview
Ing. Cleyver Vazquez Jijon
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.
Ing. Cleyver Vazquez Jijon
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.
Ing. Cleyver Vazquez Jijon
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>
Ing. Cleyver Vazquez Jijon
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
Ing. Cleyver Vazquez Jijon
ESTRUCTURA GENERAL DE UNA PAGINA WEB
<HTML><TITLE>Mano Amiga</TITLE><BODY>Bienvenidos</BODY></HTML>
Ing. Cleyver Vazquez Jijon
CREAR MI PRIMER PÁGINA WEB
Ing. Cleyver Vazquez Jijon
¿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”.
Ing. Cleyver Vazquez Jijon
¿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
Ing. Cleyver Vazquez Jijon
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
Ing. Cleyver Vazquez Jijon
¿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.
Ing. Cleyver Vazquez Jijon
¿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:
Ing. Cleyver Vazquez Jijon
¿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:
Ing. Cleyver Vazquez Jijon
Código y Resultado
La etiqueta <TITLE> permite colocarle el titulo a nuestra pagina Web.
Ing. Cleyver Vazquez Jijon
Código y Resultado
La etiqueta <BODY> permite insertar texto a nuestra pagina Web.
Ing. Cleyver Vazquez Jijon
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”:
Ing. Cleyver Vazquez Jijon
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.
Ing. Cleyver Vazquez Jijon
Ver las modificaciones realizadas
Una vez que se realizaron modificaciones abrimos nuevamente el archivo dándole doble clic sobre el:
Ing. Cleyver Vazquez Jijon
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.
Ing. Cleyver Vazquez Jijon
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.
Ing. Cleyver Vazquez Jijon
Otro ejemplo de Etiquetas y atributos<FONT> Etiqueta sin atributos
<FONT size=6 color=blue> Etiqueta con atributos
La etiqueta <FONT> 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. </FONT>
Ing. Cleyver Vazquez Jijon
Mas Etiquetas y atributosEtique
taDescripción Atributos
<FONT>
Permite aplicar formato al texto de la pagina web
SIZECOLORFACE
Tamaño de la letraColor de la letraTipo de letra
<BR> Realiza un salto de línea
<P> 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
Ing. Cleyver Vazquez Jijon
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
Ing. Cleyver Vazquez Jijon
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