Html.pptx

HTML
QUE ES: HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText
Markup Language) es el componente más básico de la Web. Define el
significado y la estructura del contenido web. Además de HTML, generalmente
se utilizan otras tecnologías para describir la apariencia/presentación de una
página web (CSS) o la funcionalidad/comportamiento (JavaScript).
"Hipertexto" hace referencia a los enlaces que conectan páginas web entre sí,
ya sea dentro de un único sitio web o entre sitios web. Los enlaces son un
aspecto fundamental de la Web. Al subir contenido a Internet y vincularlo a las
páginas creadas por otras personas, te conviertes en un participante activo en
la «World Wide Web» (Red Informática Mundial).
HTML utiliza "marcas" para etiquetar texto, imágenes y otro contenido para
mostrarlo en un navegador Web. Las marcas HTML incluyen "elementos"
especiales como <head>, <title>, <body>, <header>, <footer>,
<article>, <div> <span>
,
<img>,
<section>, <p>, ,
<aside>,
<audio>,
<canvas>, <datalist>, <details>, <embed>, <nav>, <output>,
<progress>, <video>, <ul>, <ol>, <li> y muchos otros.
Un elemento HTML se distingue de otro texto en un documento mediante
"etiquetas", que consisten en el nombre del elemento rodeado por "<" y ">".
El nombre de un elemento dentro de una etiqueta no distingue entre
mayúsculas y minúsculas. Es decir, se puede escribir en mayúsculas,
minúsculas o una mezcla. Por ejemplo, la etiqueta <title> se puede escribir
como <Title>, <TITLE> o de cualquier otra forma.

ESTRUCTURA DE HTML
ETIQUETAS
!DOCTYPE HTML SU FUNCIÓN ES INDICAR AL
ARCHIVO QUE ES UN DOCUMENTO
EN HTML Y SU VERSIÓN MÁS
RECIENTE LA QUE SE VA A
PROGRAMAR.
HTML SIRVE PARA INDICAR QUE ES UN
FORMATO HTML: DENTRO DE ESTA
ETIQUETA VA TODA LA
ESTRUCTURA DE LA PÁGINA, OSEA
DENTRO DE ESTA ETIQUETA IRÁN
TODAS LAS
ETIQUETAS,ATRIBUTOS,VALORES
QUE EXISTAN.
HEAD ES LA PARTE SUPERIOR DEL
DOCUMENTO HTML, AQUÍ
PONDREMOS LOS METADATOS:
DENTRO DE ESTA ETIQUETA
PONDREMOS OTRAS ETIQUETAS
QUE SERÁN TODO LO QUE que no
es contenido visible por los
visitantes de la página. COMO LAS
CONFIGURACIONES, DIRECCIONES
DE LINK,TÍTULO DEL ARCHIVO,
HOJAS DE ESTILO,JAVASCRIPT,CSS
BODY ES EL CUERPO DEL DOCUMENTO:
DENTRO DE ESTA ETIQUETA
PONDREMOS OTRAS ETIQUETAS
QUE SERÁN TODO LO QUE ES
CONTENIDO VISIBLE PARA LOS
VISITANTES DE LA PÁGINA COMO
BOTONES,FIGURAS,SECCIONES,
TÍTULOS ETC.

ETIQUETAS
ESTRUCTURA DE LA ETIQUETA
LAS ETIQUETAS ESTÁN FORMADAS POR PARÉNTESIS ANGULARES:
ETIQUETAS DE APERTURA: < >
COMPUESTA POR UN PARÉNTESIS DE APERTURA Y OTRO DE CIERRE
ETIQUETAS DE CIERRE: </>
COMPUESTA POR UN PARÉNTESIS DE APERTURA MÁS UNA PLECA Y UN
PARÉNTESIS DE CIERRE
NOMBRES DE LAS ETIQUETAS
SON LAS LETRAS O NÚMEROS QUE VAN A DENTRO DE LOS PARÉNTESIS
ANGULARES
EJEMPLO:
PARA PONER TÍTULO: TITLE = ETIQUETA DE APERTURA <TITLE>
ETIQUETA DE CIERRE </TITLE>
TIPOS DE ETIQUETA
Hay dos tipos de etiquetas: las que se abren y se cierran y las que se abren pero no se
cierran
ejemplo: <b>= se abre pero no se cierra
<h1></1>= se abre y se cierra

CONTENIDO
EL CONTENIDO ES LO QUE VA EN MEDIO DE LA ETIQUETA DE APERTURA Y DE LA
ETIQUETA DE CIERRE Y SERÁ VISIBLE EN LA PÁGINA WEB
EJEMPLO:
<TITLE> HOLA MUNDO </TITLE>
ELEMENTO
EL ELEMENTO ESTÁ CONFORMADO POR TODA LA ETIQUETA MÁS EL CONTENIDO
EJEMPLO: <TITLE> HOLA MUNDO </TITLE>
ATRIBUTOS
LOS ELEMENTOS TAMBIÉN PUEDE TENER ATRIBUTOS.Los atributos contienen
información adicional acerca del elemento,
ESTRUCTURA DE UN ATRIBUTO
1 Colocar el atributo adentro y a la par del nombre de la etiqueta
2 El nombre del atributo, seguido por un signo de igual (=).
3Seguido del signo (=), colocamos dos Comillas una de apertura y otra de
cierre, para encerrar el valor del atributo.
4Los atributos siempre se incluyen en la etiqueta de apertura de un
elemento, nunca en la de cierre.

5- En una etiqueta puede haber más de un atributo
Anidar elementos
Puedes también colocar etiquetas dentro de otras etiquetas —esto se llama anidamiento—.
Si, por ejemplo, quieres resaltar una palabra del texto podemos encerrarla en un elemento
<strong>, que significa que dicha palabra se debe enfatizar:
ejemplo: <p>Mi gato es <strong>muy</strong> gruñón.</p>
Anatomía de un documento HTML
Hasta ahora has visto lo básico de elementos HTML individuales, pero estos
no son muy útiles por sí solos. Ahora verás cómo los elementos individuales
son combinados para formar una página HTML entera.
ejemplo:
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Mi pagina de prueba</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="Mi imagen de prueba">
</body>
</html>
Tienes:
● <!DOCTYPE html> — el tipo de documento. Es un preámbulo
requerido. Anteriormente, cuando HTML era joven (cerca de 1991/2), los
tipos de documento actuaban como vínculos a un conjunto de reglas
que el código HTML de la página debía seguir para ser considerado
bueno, lo que podía significar la verificación automática de errores y
algunas otras cosas de utilidad. Sin embargo, hoy día es simplemente
un artefacto antiguo que a nadie le importa, pero que debe ser incluido
para que todo funcione correctamente. Por ahora, eso es todo lo que
necesitas saber.
● <html></html> — el elemento <html>. Este elemento encierra todo el
contenido de la página entera y, a veces, se le conoce como el elemento
raíz (root element).
● <head></head> — el elemento <head>. Este elemento actúa como un
contenedor de todo aquello que quieres incluir en la página HTML que
no es contenido visible por los visitantes de la página. Incluye cosas
como palabras clave (keywords), una descripción de la página que
quieres que aparezca en resultados de búsquedas, código CSS para dar
estilo al contenido, declaraciones del juego de caracteres, etc.
● <meta charset="utf-8"> — <meta>. Este elemento establece el juego
de caracteres que tu documento usará en utf-8, que incluye casi
todos los caracteres de todos los idiomas humanos. Básicamente,
puede manejar cualquier contenido de texto que puedas incluir. No hay
razón para no establecerlo, y puede evitar problemas en el futuro.
● <title></title> — el elemento <title> establece el título de tu página, que
es el título que aparece en la pestaña o en la barra de título del
navegador cuando la página es cargada, y se usa para describir la
página cuando es añadida a los marcadores o como favorita.
● <body></body
>
— el elemento <body>. Encierra todo el contenido que
deseas mostrar a los usuarios web que visiten tu página, ya sea texto,
imágenes, videos, juegos, pistas de audio reproducibles, y demás.

TÍTULOS:
<body></body>
Para poner el título que será visto por las personas que entren a la página
se utilizará la etiqueta: <h1></h1>
ejemplo: <h1> HOLA MUNDO </h1>
también existe la etiqueta de subtítulo que sería casi igual que la etiqueta
del título: <h2></h2>
también existen las etiquetas: <h3></h3> <h4></h4> <h5> </h5> <h6></h6>
entre mayor sea el número más pequeña será la letra
PÁRRAFOS Y MÁS ETIQUETAS DE TEXTO:
<body></body>
Para colocar párrafos se utiliza la etiqueta: <p></p>
ejemplo: <p> esto es una prueba de lenguaje de programación html,estos son
conocimientos básicos de este lenguaje de programación </p>
También tenemos otras etiquetas como: <b></b> que convierte el texto en letra negrita
también tenemos otra etiqueta como: <i></i> que convierte el texto en letra itálica
también tenemos otra etiqueta como: <small></small> que convierte el texto en letra
chiquita
También tenemos otras etiquetas como: <strike></strike> que convierte el texto en letra
tachada

ETIQUETA BR:
<BR></BR>
Esta etiqueta es para separar las lineas osea para dejar espacio entre las lineas:
<BR></BR>
Entre más etiquetas pongas donde quieres separar líneas más se separaran.
ENLACES:
<body></body>
Los enlaces se crean con la etiqueta <a></a>
más el atributo: href mas signo = más direccion más contenido
ejemplo: <a href=”https//www. facebok.com”>clik aqui</a>
hay dos tipos de enlaces que son:
los externos: son fuentes ajenas a nuestra página siempre van ha llevar el https
los locales: son archivos nuestros o pagina hechas por nosotros,
enves de poner https en los enlaces locales solo pones la direccion del archivo
si quiero que el usuario al abrir mi enlace no se vaya por completo de mi página, lo
que puedo hacer es que se abra otra ventana aparte de la de mi página esto se puede
hacer con añadir otro atributo: TARGET más el valor _blank
ejemplo:: <a href=”https//www. facebok.com” Target=”_blank”>clik aqui</a>

LISTAS:
<body></body>
EXISTEN DO TIPOS DE LISTAS QUE SON:
LAS DESORDENADAS: son las que no llevan numeración y se utiliza la etiqueta
<UL></UL>
LAS ORDENADAS: son las que llevan numeración y se utiliza la etiqueta <OL></OL>
Además tanto <ul> como <ol> van a llevar adentro otra etiqueta que en este caso sería la
etiqueta <li></li> esta etiqueta sería para dar el formato de linea sobre linea
MULTIMEDIA:
<body></body>
imágenes:
para poder poner imagen en la página web tendremos que usar la etiqueta <img> mas el
atributo src mas el atributo alt que será quien describa la imagen
paso por paso:
1 colocar el atributo <img>
2 colocar dentro de la etiqueta <img> el atributo src

3 colocar el signo =
4 colocar las comillas tanto de apertura como de cierre
5 colocar dentro de las comillas la dirección de la imagen
6 colocar afuera de la dirección y de las comillas el atributo alt
7colocar el signo = más las comillas de apertura como de cierre
8- colocar dentro de las comillas un texto que describa la imagen
hay dos tipos direcciones para una imagen:
los externos: son fuentes ajenas a nuestra página que para encontrar la direccion
solo le damos en inspeccionar y buscamos la etiqueta img y copiamos la dirección de
la etiqueta
los locales: son archivos nuestros o pagina hechas por nosotros,
enves de poner https en los enlaces locales solo pones la direccion del archivo
videos:
para poner video en la página web tendremos que usar la etiqueta <video></video> mas el
atributo src mas el atributo controls
Pasa a paso:
1 colocar el atributo video
2dentro de la etiqueta de apertura colocamos el atributo src 3-
colocar signo = más las comillas de apertura como de cierre 4-
colocamos la direccion del video dentro de las comillas
5- fuera de las comillas colocamos el atributo controls

AUDIO:
para poner audio en la página web tendremos que usar la etiqueta <audio></audio> más
el atributo src mas el atributo controls
Pasa a paso:
1 colocar el atributo audio
2dentro de la etiqueta de apertura colocamos el atributo src 3-
colocar signo = más las comillas de apertura como de cierre 4-
colocamos la dirección del audio dentro de las comillas
5- Fuera de las comillas colocamos el atributo controls.
ETIQUETA DIVS
La etiqueta <div></div> define una división. Esta etiqueta permite agrupar varios elementos
de bloque (párrafos, encabezados, listas, tablas, divisiones, etc). En principio, los
navegadores no muestran nada especial cuando se crea una división, salvo que se dé
formato a la división con la hoja de estilo.
Nota: Hay gente y programas que llaman "capas" a las divisiones. No estoy seguro, pero
supongo que ese término se debe a que Netscape 4.0 introdujo una etiqueta llamada
<layer> (etiqueta que no formó parte de ninguna recomendación del W3C) que jugaba un
papel similar a la etiqueta <div>

FORMULARIOS:
<body></body>
Para crear un formulario se ocupa la etiqueta <form></form>, dentro de esta etiqueta se
coloca otra etiqueta que sería la etiqueta <input>(que es una entrada de datos) y dentro de
esta etiqueta se coloca type seguido de un valor.
type: determina el tipo de entrada que se va a utiliza
valores:
name: es el nombre simbólico al que se le va asociar el valor introducido en ese elemento
por el usuario. Debe estar presente en todos los elementos excepto en submit y reset.
text: muestra una caja donde introducir texto. Es el tipo por defecto de INPUT. también se
puede escribir el texto de la caja afuera de la página utilizando el atributo value password:
muestra una caja donde se tecleara texto cuyo texto o letra será sustituido por asteriscos.
number: muestra una caja donde se muestra un número y con una opción para poder
cambiarlo y poder colocar otro.
email: nos mostrará una caja donde solo podremos poner formato gmail como por ejemplo
un correo gmail.
color: nos mostrará una caja donde al hacer click en ella podremos cambiar su color
range: se nos mostrará una línea donde pondremos poner un rango de un número mínimo
a un número máximo que queramos poner con otros dos atributos que serán min y max
date: es una caja donde podremos poner una fecha
time: se nos mostrará una caja donde podremos poner una hora
button. es una caja con forma de botón y siempre llevara otro atributo que será value y ahí
pondremos la palabra botón
submit: es una caja donde estará la palabra ENVIAR en forma de botón pero también se le
puede cambiar el nombre utilizando el atributo value y ahí pondremos lo que queramos
escribir

ejemplo:
<form> <input type= “text”>
<input type=”password”>
<input type= “number”>
<input type= “email”>
<input type= “button”>
<input type= “ submit”> </form>
también existe el atributo required qué es para que todos los campos sean obligatorios
llenar.
también existe la etiqueta <textarea></textarea> más el atributo readonly que nos sirven
para poner escritura en una caja pero solo por la parte del contenido que será visualizado
en la página web
ejemplo:
<textarea readonly=””> Para poder hacer inicio de sesión deberás rellenar todos los
espacios </textarea>
ahora bien si quitamos el atributo readonly podremos poner escritura desde adentro de la
página web
cuando trabajemos con un lenguaje de bacle se utiliza junto a form la etiqueta método
<method> por ejemplo uno de encriptación o de post que se envía en el servidor, pero por
defecto lo que se utiliza el método get que es enviarlo por la barra de dirección de la página
ejemplo: <form method=”post”>

METADATOS:
<head></head>
En el contexto de los sitios web, los metadatos son elementos HTML que tienen
como función describir la página web que los contiene. Estos son usados por los
motores de búsqueda para hacer un análisis de dicho sitio web en cuanto a qué tipo
de contenido se ofrece y cuál es la temática que allí se maneja.
Su etiqueta es: <meta> sería la segunda etiqueta después de la etiqueta
<title></title> que se pone dentro de la etiqueta <head></head>.
seguido de la etiqueta meta vamos a poner adentro de ella el atributo charset=
seguido de el atributo pondremos el valor utf-8 que es la codificación universal
para que nos acepte acento y un montón de otros caracteres
ejemplo: <head><title></title> <meta charset= “utf-8”
también hay otros atributos como por ejemplo name, content
name: siempre va antes del valor ya que sirve para indicarle al sistema que hay un
valor
content: aquí se pone todas las palabras clave y descripciones relacionadas a la página
para que el navegador posicione la página cuando alguien busque algo relacionado a las
palabras claves
valores
Keywords: los administradores tienen la posibilidad de definir palabras clave para el buscador.
Las keywords son aquellos criterios a los que responde un buscador para ofrecerle al usuario
páginas HTML como respuesta, donde tales palabras clave son parte de los meta tags, siempre
seguido del atributo content
Description: este valor nos indica que podemos describir brevemente el contenido de la página
web con aproximadamente 70 caracteres. siempre seguido del atributo content

Author: este valor es de uso opcional desde el punto legal, permite hacer referencia al
diseñador de una página web. siempre seguido del atributo content
Copyright: este valor es de uso opcional desde el punto legal, permite hacer referencia al
propietario de los derechos del código fuente de una página HTML, siempre seguido del atributo
content
robots:
Una de las principales funciones de los meta tags es proporcionar instrucciones para la
indexación a los crawlers (robots o googlebots). Esto se logra con el valor “robots”.
seguido de robots pondremos el atributo content seguido de esto pondremos el valor :
index:
Esta directriz permite al robot de búsqueda la indexación de una página de HTML ósea
permite que la página esté disponible para los motores de búsqueda
Noindex
indica que una página no debe estar disponible para los motores de búsqueda . Este tag prohíbe
al buscador transferir contenidos de una página HTML a su base de datos.
Follow
El comportamiento estándar de los motores de búsqueda consiste en recorrer los enlaces que
encuentra en una página de HTML, a no ser que se les indique lo contrario. Esta información se
puede incluir en las metaetiquetas, aunque no es necesario
Nofollow
Si se quiere impedir que un robot de búsqueda alcance determinadas subpáginas de un sitio o
rastree los enlaces en otro dominio se añade: nofollow
El robot ignora, así, los enlaces por completo, pero no el contenido de la página, que sí será
transferido a la base de datos del buscador.

INTRODUCCIÓN AL HTML SEMÁNTICO
Es básicamente la estructura de lo que va ser visible para los que entren en nuestra página.
y tenemos la primera etiqueta es : <HEADER></HEADER>
HEADER:
Es el encabezado de la página, y dentro de esta etiqueta irá otra etiqueta que será
<nav></nav>
NAV:
el nav lo que hace es mandarnos a distintas partes de la página por ejemplo a la sección de
mi cuenta, a la sección de privacidad, osea contendrá el menú en forma de listas etc.
para poder ponerlas vamos a colocar dentro de la etiqueta nav otra etiqueta que será la
etiqueta <ul></ul> y dentro de ella colocaremos otra etiqueta que será <li></li>
de ahí adentro colocaremos la etiqueta <a></a> y dentro de la etiqueta <a> colocaremos el
atributo href= igual a un valor que colocaremos
para poder ponerlo vamos a seguir los siguientes pasos :
1- colocar dentro de <nav></nav> la etiqueta <ul></ul>
2- colocar dentro de <ul></ul> la etiqueta <il></il>
3 colocar dentro de <il></il> la etiqueta <a></a>
4dentro de la etiqueta de apertura <a> colocaremos el atributo herf mas signo =
5- seguido del signo = colocaremos comillas de apertura y cierre
6- colocaremos en las comillas un valor que será la dirección que formará parte del menú
por ejemplo: micuenta.html

7 cerramos la etiqueta y en el contenido colocamos el nombre del valor que irá en el menú
que será visible para quien entre a nuestra web y después cerramos la etiqueta <a/>
ejemplo: <li><a href=”micuenta.html”> mi cuenta</a></li>
8 cada elemento tendrá su enlace por ende en archivos se crea una carpeta por elemento
nota: la página de programación donde está la estructura de de toda la página web que
tiene la dirección de archivo index.html será siempre la dirección donde estará el elemento
inicio.
ejemplo: <li><a href=”index.html”>INICIO</a></li>
ARTICLE:
como su nombre lo dice es para crear un artículo y su etiqueta es :<article></article> dentro
de article colocamos la etiqueta <section></section> y dentro de section colocamos ya la
información que queramos poner siempre combinados con las etiquetas destinadas para las
escrituras.
ASIDE:
El elemento HTML <aside></aside>representa una sección de una página que
consiste en contenido que está indirectamente relacionado con el contenido
principal del documento.
Estas secciones son a menudo representadas como barras laterales o como
inserciones y contienen una explicación al margen como una definición de glosario,
elementos relacionados indirectamente, como publicidad, la biografía del autor, o en
aplicaciones web, la información de perfil o enlaces a blogs relacionados.

FOOTER:
El Footer o pie de página es el complemento del Header en un sitio web. O sea, es
una sección fija que se encuentra en la parte inferior y que se visualiza en cada una
de las páginas. Generalmente un Footer incluye los datos de contacto de la
empresa, la dirección y el enlace al aviso de privacidad.
su etiqueta es: <footer></footer>
Tablas:
El elemento table representa una tabla. Éstas permiten a los autores representar
información tabulada en un documento. En lo que respecta al código, una tabla
consiste básicamente en columnas y filas
su etiqueta es <table></table>
y dentro de ella colocaremos la etiqueta <tr></tr>
etiqueta : <tr></tr>
lo que hacemos con ella es definir las filas, y se definen colocando dentro de ella
la etiqueta <td></td>
esta etiqueta será para definir los campos por filas

ejemplo: <table> <tr>
<td>nombre </td>
<td>apellido</td>
</tr>
</table>
nota: la primera fila creada será el encabezado de la tabla la segunda, tercera,cuarta es
donde irán los datos que pide el encabezado de cada linea <table></table>
ejemplo: <tr>
<td>francisco<td/>
<td> Rodriguez</td>
</tr>
ID:
El atributo global id define un identificador único (ID) el cual no debe repetirse en
todo el documento. Su propósito es identificar el elemento al vincularlo (usando un
identificador de fragmento), en scripts u hojas de estilo (con CSS).
El ID es un atributo: ID=””
se usa para poder pasar a una siguiente página dentro de la misma página web
paso a paso:
1 se coloca la etiqueta <a></a>
2 dentro de la etiqueta de apertura se coloca el atributo href
3seguido de el atributo se coloca el signo = más las comillas de apertura y cierre
4- dentro de las comillas se coloca el valor #código

5 debajo del párrafo colocamos el atributo <h2></h2>
6dentro de la etiqueta de apertura colocamos el atributo id ma signo igual y entre
comillas colocamos el nombre código
7 En el contenido colocamos el titulo que queramos
8 para crear otro párrafo que sería ya en la siguiente página colocamos la etiqueta
<p></p>
ICONO:
<head></head>
es para crear un icono en la pestaña de nuestro sitio web y su etiqueta es: <link>.
pasos para poner icono:
1- colocamos la etiqueta <link> y dentro de ella colocamos el atributo rel mas el signo = más
comillas de apertura y cierre
2- dentro de las comillas colocamos el valor icon
3- después fuera de las comillas colocamos el atributo href mas signo = más comillas de
apertura y cierre

4- colocamos la dirección de nuestra imagen entre las comillas y listo.
NOTA: al seleccionar una imagen tenemos que asegurarnos que su dirección esté en .ico y
no en .png

Html.pptx

Recomendados

Recomendados

Más contenido relacionado

Similar a Html.pptx

Similar a Html.pptx (20)

Último

Último (6)

Html.pptx