Sesion 02 - Ucv-limanorte_b
FACULTAD DE INGENIERÍA ESCUELA ACADEMICA PROFESIONAL DE INGENIERÍA DE SISTEMAS CLASE N° 2 INTRODUCCIÓN A HTML Mg. Orle
Views 196 Downloads 59 File size 1MB
Recommend stories
- Author / Uploaded
- CR MN SN
- Categories
- Hipervínculo
- HTML
- Comillas
- Red mundial
- Tecnología
Citation preview
FACULTAD DE INGENIERÍA ESCUELA ACADEMICA PROFESIONAL DE INGENIERÍA DE SISTEMAS CLASE N° 2
INTRODUCCIÓN A HTML
Mg. Orleans Moisés Gálvez Tapia
HTML
El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento.
ESQUEMA DE UN DOCUMENTO HTML Una página HTML tiene dos secciones muy bien definidas que son la cabecera:
Y el cuerpo de la página:
Cuerpo de la página.
Todo el texto que dispongamos dentro del aparece dentro del navegador tal cual lo hayamos escrito.
EAP de INGENIERÍA de SISTEMAS
…ESQUEMA DE UN DOCUMENTO HTML
¿QUÉ SON LOS ATRIBUTOS DE LAS ETIQUETAS? Muchas etiquetas llevan atributos. Los mismos proveen de mayor información a los elementos HTML. Los atributos siempre van con la estructura: nombre="valor". Los atributos siempre van en la etiqueta de apertura. Los valores siempre hay que ponerlos entre comillas. Un ejemplo de los atributos sería:
PARTES DE UN ELEMENTO HTML
Aunque en ocasiones se habla de forma indistinta de "elementos" y "etiquetas", en realidad un elemento HTML es mucho más que una etiqueta, ya que está formado por:
■Una etiqueta de apertura. ■Cero o más atributos. ■Texto encerrado por la etiqueta. ■Una etiqueta de cierre.
PRIMER DOCUMENTO HTML EJEMPLO: A continuación se muestra el código HTML de una página web muy sencilla:
El primer documento HTML
El lenguaje HTML es tan sencillo que prácticamente se entiende sin estudiar el significado de sus etiquetas principales.
… PRIMER DOCUMENTO HTML
LISTAS
Una lista es un párrafo estructurado que contiene una serie de elementos. HTML define tres tipos de listas: Listas ordenadas Listas no ordenadas Listas de definiciones
LISTA ORDENADA
Contenedor
Tipo de lista
Efecto visual
1. ítem 1
Lista ordenada
2. ítem 2
3. ítem 3
Las listas ordenadas comienzan con la etiqueta y para cada uno de los items de la misma, utilizamos la etiqueta
LISTA ORDENADA EJEMPLO: El siguiente código HTML muestra un ejemplo sencillo de lista ordenada:
Ejemplo de etiqueta OL
Instrucciones
Dentro de cada Item se pueden agregar imágenes, párrafos, otras listas, etc.
LISTA ORDENADA
LISTA DESORDENADA Exponen la lista anteponiendo un punto, cuadrado o triángulo negro.
Contenedor
Tipo de lista
Efecto visual
- ítem 1
- ítem 1
- ítem 2
No ordenada
ítem 2
ítem 3
- y para cada uno de los Items de la misma utilizamos la etiqueta
- .
LISTA NO ORDENADA EJEMPLO: El siguiente código HTML muestra un ejemplo sencillo de lista no ordenada:
Ejemplo de etiqueta UL
Menú- Inicio
- Noticias
- Artículos
- Contacto
Dentro de cada Item se pueden agregar imágenes, párrafos, otras listas, etc.
LISTA NO ORDENADA
LISTA DE DEFINICIONES Se utilizan para definir términos.
Contenedor
Tipo de lista
Efecto visual ítem 1
definición 1
Término Definición Definición
ítem 2
definición 2
Las listas de definición se representan con la etiqueta . Los términos de las mismas con . La definición de esos términos comienza con .
…LISTA DE DEFINICIONES Se utilizan para definir términos.
Las listas de definición se representan con la etiqueta . Los términos de las mismas con . La definición de esos términos comienza con .
LISTA DE DEFINICIONES EJEMPLO: El siguiente código HTML muestra un ejemplo sencillo de lista de definición:
Ejemplo de etiqueta DL
Metalenguajes
SGML Metalenguaje para la definición de otros lenguajes de marcado XML Lenguaje basado en SGML y que se emplea para describir datos RSS GML XHTML SVG XUL Lenguajes derivados de XML para determinadas aplicaciones
LISTA DE DEFINICIONES
TABLAS o Definimos las tablas con la etiqueta. o La tabla está dividida en filas definidas con la etiqueta
. o Y a su vez cada fila dividida en celdas definidas con la etiqueta . o Las celdas pueden contener texto, imágenes, formularios, listas, otras tablas, etc.
…TABLAS
…TABLAS
MÁRGENES DE LA CELDA
HIPERVÍNCULOS
Un hipervínculo es un enlace, normalmente entre dos páginas web de un mismo sitio.
El elemento más importante que tiene una página de internet es el hipervínculo, estos nos permiten cargar otra página en el navegador.
HIPERVÍNCULOS La marca de hipervínculo a otra página del mismo sitio tiene la siguiente sintaxis:
Noticias
Lo que se encuentra entre el comienzo de marca y el fin de la marca es el texto que aparece en la página (normalmente subrayado).
HIPERVÍNCULOS Una propiedad se incorpora en el comienzo de una marca y tiene un nombre y un valor. El valor de la propiedad debe ir entre comillas dobles.
Noticias
La propiedad href del elemento "a" hace referencia a la página que debe mostrar el navegador si el visitante hace clic sobre el hipervínculo.
HIPERVÍNCULOS
HIPERVÍNCULOS
EJEMPLO La sintaxis para disponer un hipervínculo a otro sitio de internet es: Buscador Google
Buscador Google
EJEMPLO El elemento "a" tiene una propiedad target que nos permite indicar que la referencia del recurso sea abierto en otra página. Esta propiedad se llama target y debemos asignarle el valor "_blank" para indicar que el recurso sea abierto en otra ventana.
Apertura de enlaces en el mismo navegador y en otra instancia del navegadorUniversidad Cesar Vallejo
Radio Programas
HEADINGS nos dá el tipo de letra más grande.
nos dá el tipo de letra más pequeño.
al ser usado como título de una página Web, es de suma importancia ya que es uno de los parámetros que Google tiene en cuenta, a la hora de indexar su sitio.
Nos definen el tamaño de un título o cabecera.
Ejemplo de headings
PÁRRAFOS
Los párrafos se definen con la etiqueta.
COMENTARIOS
La etiqueta
Es ignorado por el navegador al momento de leerlo. Los comentarios nos sirven para explicar mejor el código y son de gran ayuda en el momento que necesitemos editarlo.
SALTO DE LÍNEA El salto de línea está definido con la etiqueta
. Es utilizado cuando queremos terminar una línea sin necesidad de terminar con el párrafo.
La etiqueta
obliga a saltar de línea dondequiera que la ubiquemos
ETIQUETAS BÁSICAS
¿CÓMO INSERTAMOS IMÁGENES EN UN ARCHIVO HTML? Para insertar imágenes en un sitio usaremos la etiqueta . Esta etiqueta es vacía, es decir que debemos utilizarla con el atributo src para que muestre la imagen. La etiqueta no tiene cierre.
¿CÓMO INSERTAMOS IMÁGENES EN UN ARCHIVO HTML? WWW La siguiente página muestra una imagen llamada foto1.jpg (La imagen se encuentra almacenada en el servidor en la misma carpeta donde se localiza esta página)
¿CÓMO INSERTAMOS IMÁGENES EN UN ARCHIVO HTML? Si la imagen se encuentra en una subcarpeta llamada imagenes, luego la sintaxis para recuperarla será:
Es decir, antecedemos al nombre de la imagen el nombre de la carpeta y la barra /
WWW
¿CÓMO INSERTAMOS IMÁGENES EN UN ARCHIVO HTML? WWW
Si la imagen se encuentra en una carpeta padre de donde se encuentra la página HTML luego la sintaxis será:
Es decir, le antecedemos .. y la barra / al nombre de la imagen
Si queremos subir dos carpetas luego escribimos:
¿CÓMO INSERTAMOS IMÁGENES EN UN ARCHIVO HTML?
si queremos acceder a una imagen que se encuentra en una carpeta llamada imagenes pero que está al mismo nivel:
Primero le indicamos que subimos al directorio padre mediante los dos puntos .. y seguidamente indicamos el nombre de la carpeta y la imagen a mostrar.
WWW
WWW
EJERCICIO A
Pagina01.html
Crear la estructura de directorios (de la figura), páginas html e imágenes.
Imagen01.jpg Imagen02.jpg
Se pide: B
Imagen03.jpg
B1
C
Pagina03.html Imagen04.jpg
C1
D
Pagina02.html
Imagen05.jpg
Pagina04.html
D1
Imagen06.jpg
Implementar el código html de la página1.html añadiendo referencias (HIPERVÍNCULOS) a las imágenes y páginas de tal manera que se observe en el navegador web un listado de todas las imágenes: Imagen01.jpg Imagen02.jpg Imagen03.jpg Imagen04.jpg Imagen05.jpg Imagen06.jpg; Y debajo un enlace a cada una de las páginas html.