DIAPOSITIVA.pptx

La programación web es una decisión que cada vez más personas
toman, conscientes de las oportunidades profesionales que supone
contar con este tipo de conocimientos tan valorados por las empresas
de hoy en día. Comprender el significado y la composición de
las etiquetas HTML es uno de los primeros pasos que cualquier
profesional que aspire a convertirse en desarrollador o ingeniero web
debe dar.
Con el objetivo de que entiendas qué es una etiqueta HTML,
queremos enseñarte cómo funciona la capa más básica de una web y
que puedas diseñar tus propias paginas web sin miedo.

¿Qué es una etiqueta HTML?
HTML, siglas en inglés de HyperText Markup Language, hace referencia al lenguaje de marcado para la elaboración de páginas web.
En otras palabras, el texto en una página web que está «marcado» con estos códigos para dar instrucciones al navegador web sobre cómo
mostrar el texto. Estas etiquetas de marcado son las propias etiquetas HTML.
Un elemento de HTML es un tipo de componente de documento de HTML, uno de los diversos tipos de nodos de HTML. El documento de
HTML está compuesto de un árbol de nodos HTML sencillo, como nodos de texto, y elementos de HTML, los cuales añaden semántica y
formato a partes del documento.
Cuando escribes código en HTML, estás escribiendo etiquetas HTML.
Las etiquetas HTML están hechas con un número de partes específicas, incluyendo:
•El carácter “menor que” <
•Una palabra o carácter que determina qué etiqueta se está escribiendo
•Cualquier número de atributos HTML que se quiera usar, escritos de la forma nombre =”valor”
•El carácter “mayor que” >

El hipertexto (HTML) es un lenguaje informático que forma la mayoría de las páginas web
y plataformas online. HTML no se considera un lenguaje de programación, ya que no
puede crear una funcionalidad dinámica. Sin embargo, los usuarios web pueden crear y
estructurar secciones, párrafos y enlaces usando elementos, etiquetas y atributos.
En la actualidad existen 142 etiquetas HTML disponibles que permiten la creación de
varios elementos. A pesar de que algunos ordenadores nuevos ya no admiten algunas de
estas, es importante tener constancia de la existencia de ellas.
Sin embargo, el HTML ha ido evolucionando los últimos años. Para que nos hagamos una
idea, la primera versión contaba solamente con 18 etiquetas. Desde entonces, cada nueva
versión ha traído nuevas etiquetas y atributos. La actualización más importante fue la
introducción en 2014 del HTML5. La principal diferencia entre ambas es que la nueva
admitía nuevos tipos de controles de formularios. También incluía diversas etiquetas
semánticas que describían mejor el contenido, como <article>, <headers> y <footer>.

¿Cómo funcionan las etiquetas HTML?
La mayoría de páginas web tienen varias páginas HTML diferentes. Por ejemplo, una página de inicio, otra de producto,
otra de contacto, etc. Cada una de estas tiene HTML separados. Los documentos HTML son archivos que acaban
con .html, luego un navegador lee el archivo y muestra su contenido para los internautas puedan verlo.
Como hemos comentado anteriormente, todas las páginas HTML contienen una serie de elementos HTML que a la vez
disponen de diferentes etiquetas y atributos. Es decir, los elementos HTML son los componentes básicos de una página
web. Una etiqueta contiene mucha información. Le indica al navegador dónde empieza y dónde termina cada elemento,
mientras que un atributo describe las características.
Los elementos HTML suelen dividirse en tres partes. Esta combinación de las tres crea un elemento HTML.
•Etiqueta de apertura: Se utiliza para indicar dónde empieza un elemento. Está envuelta en corchete de apertura y cierre.
Por ejemplo puedes usar la etiqueta de inicio <p> para crear un párrafo.
•Contenido: El contenido es el resultado que ve la audiencia.
•Etiqueta de cierre: Es lo mismo que la etiqueta de apertura pero con una barra inclinada delante del nombre del
elemento. Es decir, </p> para finalizar un párrafo.

< style="background: white; line-height: normal; text-align: justify;">¿Cuáles son las etiquetas HTML
básicas?
Hay una serie de etiquetas que son las más usadas para crear cualquier documento HTML, a
continuación las explicamos:
•<html> para iniciar el contenido.
•<head> es la cabecera de la pagina web que se usa para mostrar la información sobre el documento.
•<body> para el contenido del cuerpo de la pagina web.
•<div> división dentro del contenido
•<a> para enlaces
•<strong> para poner el texto en negrita
•<br> para saltos de línea
•<H1>…<H6> para títulos dentro del contenido
•<img> para añadir imágenes al documento
•<ol> para listas ordenadas, <ul> para listas desordenadas, <li> para elementos dentro de la lista
•<p> para párrafos
•<span> para estilos de una parte del texto

<head></head>
La parte superior del documento HTML, es donde podremos indicar los metadatos: título del documento, hojas de estilos, javaScript,
CSS…
<body> </body>
Indica la parte del cuerpo del contenido de un documento HTML. Es una etiqueta esencial para cualquier documento ya que indica
donde empieza el contenido visible del documento.
<div> </div>
Un elemento que es usado mayoritariamente para agrupar otros elementos y actuar como plantilla de otros controles. La etiqueta
<div> nos ayuda a estructurar el documento en secciones.
<a> </a>
Es una etiqueta que nos ayuda a poder crear un enlace a una página web. El atributo principal de la etiqueta HTML es href, donde
pondremos el enlace al que queremos conectar. Otro atributo muy usado es target, el cual nos sirve para indicar si el enlace se abrirá
en una nueva ventana o en la misma.
Ejemplo HTML:
Pulsa <a href=”https://www.nombredelaweb.com/” target=”_blank”>aquí</a> para visitar un Dominio o pagina web.

<strong> </strong>
Si tienes mucho texto, es importante poder dar énfasis a una parte en concreto, con la etiqueta strong lo podemos hacer.
Ejemplo HTML:
Quiero destacar solo <strong>esta palabra</strong>.
<br>
Con esta etiqueta HTML le podemos decir al navegador que viene un salto de línea. Nos sirve para hacer el texto más leíble.
<H1> </H1> …. <H6> </H6>
Hay diferentes niveles de títulos, del 1 al 6. Las etiquetas <H + número> nos permiten indicar la importancia del título y para
estructurar el contenido, de esta forma ayudamos a los bots a entender la importancia del contenido.
<IMG> </IMG>
Usamos la etiqueta IMG para mostrar imágenes dentro del contenido. Necesita el atributo src para funcionar, ya que será
donde indicaremos desde donde tiene que mostrar la imagen.
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

<OL> <li></li> <OL> | <UL> <li></li> <UL>
Las etiquetas OL y LI nos sirven para crear listas, OL para listas ordenadas y UL para listas sin
orden. Dentro de las listas, los elementos se identifican con la etiqueta LI.
Ejemplo HTML:
<ul>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<ul>
<P> </P>
Etiqueta que nos sirve para agrupar texto dentro de un párrafo. El propósito es poder hacer el
contenido más fácil de leer y organizado.
<SPAN> </SPAN>
Con la etiqueta podemos personalizar el estilo de solamente una parte del texto.
Ejemplo HTML:
Solo <span style=”color: red;”>esta palabra</span> en rojo.

¿Qué es input type en HTML?
El elemento HTML <input> se usa para crear controles interactivos para formularios basados en la
web con el fin de recibir datos del usuario. Hay disponible una amplia variedad de tipos de datos de
entrada y widgets de control, que dependen del dispositivo y el agente de usuario (user agent).
Los atributos de INPUT son:
•TYPE determina el tipo de entrada que se va a utilizar y sus valores pueden ser uno de los
siguientes:
•text, muestra una caja donde introducir texto. Es el tipo por defecto de INPUT.
opassword, muestra una caja donde se tecleará texto cuyo eco será sustituido por asteríscos.
ocheckbox, un botón que sólo puede tener dos estados, (on, off).
oradio, un botón que sólo puede tener dos estados, (on, off), pero que a diferencia de
los checkbox, puede agruparse con otros botones de tipo radio con el mismo nombre y obtener
así un comportamiento "uno de muchos''.

submit, un botón que produce que el formulario actual sea enviado al URL especificado en el
atributo ACTION del formulario.
oreset, un botón que produce que todos los elementos del formulario pasen a su estado por defecto.
ohidden, es una entrada que no se muestra en el browser y que sirve para pasar información desde
el formulario al servidor que no se quiere que el usuario vea.
obutton, define un botón de entrada: Ejemplo: <input type="button" onclick="alert('Hello
World!')" value="Click Me!">
ocolor, para campos de entrada que deben contener un color.
Dependiendo de la compatibilidad del navegador, puede aparecer un selector de color en el campo de
entrada. Ejemplo: <input type="color" id="favcolor" name="favcolor"><label for="favcolor">Select
your favorite color:</label>
odate, para campos de entrada que deben contener una fecha.

oDependiendo de la compatibilidad del navegador, puede aparecer un selector de fecha en el
campo de
entrada. Ejemplo> <label for="birthday">Birthday:</label><input type="date" id="birthday" nam
e="birthday">
odatetime-local, un campo de entrada de fecha y hora, sin zona horaria. Dependiendo de la
compatibilidad del navegador, puede aparecer un selector de fecha en el campo de
entrada. Ejemplo: <label for="birthdaytime">Birthday (date and
time):</label> <input type="datetime-local" id="birthdaytime" name="birthdaytime">
oemail, para campos de entrada que deben contener una dirección de correo
electrónico.Dependiendo de la compatibilidad del navegador, la dirección de correo electrónico
se puede validar automáticamente cuando se envía. Algunos teléfonos inteligentes reconocen
el tipo de correo electrónico y agregan ".com" al teclado para que coincida con la entrada del
correo electrónico. Ejemplo: <label for="email">Enter your email:</label>

o <input type="email" id="email" name="email">
ofile,Define un campo de selección de archivos <input type="file"> y un botón "Examinar" para cargar
archivos. Ejemplo: <label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
omonth, permite al usuario seleccionar un mes y un año.
onumber, define <input type="number">un campo de entrada numérico .
También puede establecer restricciones sobre qué números se aceptan.
El siguiente ejemplo muestra un campo de entrada numérico, donde puede ingresar un valor del 1 al
5: Ejemplo: <label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
orange, define un control para ingresar un número cuyo <input type="range">valor exacto no es importante (como
un control deslizante). El rango predeterminado es de 0 a 100. Sin embargo, puede establecer restricciones
sobre qué números se aceptan con los atributos min, maxy :step. Ejemplo: <label for="vol">Volume (between 0 and
50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">

osearch, se utiliza para los <input type="search">campos de búsqueda (un campo de búsqueda se comporta como un campo de texto normal).
otel, El <input type="tel">se utiliza para campos de entrada que deben contener un número de teléfono. Ejemplo: <label for="phone">Enter your
phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
otime, El <input type="time">permite al usuario seleccionar una hora (sin zona horaria).
Dependiendo de la compatibilidad del navegador, puede aparecer un selector de tiempo en el campo de entrada.
ourl, se utiliza <input type="url">para campos de entrada que deben contener una dirección URL. Dependiendo de la compatibilidad del navegador,
el campo de URL se puede validar automáticamente cuando se envía. Algunos teléfonos inteligentes reconocen el tipo de URL y agregan ".com" al
teclado para que coincida con la entrada de URL. Ejemplo: <label for="homepage">Add your
homepage:</label> <input type="url" id="homepage" name="homepage">

•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.
•VALUE tiene varios significados dependiendo del elemento que se trate. Para campos texto o password especificará el valor por defecto. En
botones de tipo radio o checkbox especificará el valor que tendrá el botón cuando sea presionado (el defecto es on). Para los
botones submit y reset el valor se puede utilizar para especificar la etiqueta del botón. En los campos ocultos especifica el valor que se pasa al
servidor.
•SIZE es el tamaño físico del campo de entrada en elementos texto o password (por defecto es 20).
•MAXLENGTH es el número máximo de caracteres que se permiten en un elemento de tipo texto o password (ilimitado por defecto).
•CHECKED especifica si ese botón, radio o checkbox estará activado por defecto.

Ventajas y desventajas del HTML
Como todo lenguaje informático, el HTML tiene sus ventajas y sus desventajas. Entre las ventajas, podríamos destacar que es apto para
principiantes, que tiene una curva de aprendizaje poco profunda y que es accesible. Además, es de código abierto y completamente gratuito y se
ejecuta de forma nativa en todos los navegadores web.
Por otro lado, entre las desventajas, se encuentra que para una funcionalidad dinámica es posible que haya que utilizar JavaScript o un
lenguaje back-end como PHP. Además, los usuarios deben crear páginas web individuales para HTML, incluso si los elementos son los mismos y
es posible que los navegadores más antiguos no muestren las etiquetas más nuevas.

DIAPOSITIVA.pptx

Recomendados

Recomendados

Más contenido relacionado

Similar a DIAPOSITIVA.pptx

Similar a DIAPOSITIVA.pptx (20)

Último

Último (20)

DIAPOSITIVA.pptx