Tutoriales En Linea Tutoriales En Linea
  • Tutoriales
    • Aprendizaje
    • Video Tutorial
    • Manuales
    • Hagalo usted mismo
    • Explorar todo
  • Adobe
    • After Effects
    • Dreamweaver
    • Premiere Pro CC
    • Photoshop
    • Photoshop Mix
    • Lightroom
    • Illustrator
    • Adobe Muse
    • Creative Cloud
  • Android
    • Developer Android
    • Aplicaciones
    • Android Studio
    • Android Wear
    • Desarrolladores
    • SDK Platform-Tools
    • ADB...depuración Bridge
    • Fastboot
    • Root
    • Recovery
  • Apple
    • iPhone y iPad
    • iPhone
    • iPad
    • Mac OS
    • iCloud
    • iTunes
  • Cursos
    • Actívate
    • Autoempleo
    • Idiomas
    • Curso De HTML
    • Curso de C++
    • Javascript
    • jQuery
    • Matematicas
    • Programacion
    • Python
    • Udacity
    • Diseño Web adaptativo
  • Ciberseguridad
    • Malware
    • Ransomware
    • Virus
    • Troyano
    • Dorkbot
    • Filecoders
    • keylogger
    • Spyware
    • Jackware
    • DDoS
    • HackerOne
    • Interpol
  • Criptomonedas
    • Blockchain
    • Mineria de Criptomonedas
    • Bitcoin (BTC)
    • Bitcoin Cash (BCH)
    • DASH (Dash)
    • Dogecoin (Doge)
    • Ethereum (ETH)
    • Litecoin (LTC)
    • Monero (XMR)
    • Ripple (XRP)
    • Zcash (ZEC)
    • Forex
    • Trading
  • Desarrollo Web
    • Sistema de gestion de contenidos
    • AMP
    • Datalife Engine
    • Blogger
    • WordPress
    • Joomla
    • Bootstrap
    • Plantillas
    • @font-face
    • Schema
    • Website
    • Desarrolladores
    • Lenguaje Web
  • Diseño Web
    • Web Responsive
    • Lenguaje Web
    • Datos estructurados
    • HTML
    • CSS3
    • JavaScript
    • Ajax
    • jQuery
    • PHP
  • Encuestas
    • GlobalTestMarket
    • Centro de opinion
    • Ipsos i-Say
    • Triaba
    • Panel opinea
    • Toluna
    • YouGov
    • ClixSense
    • ySense
    • Panel Cint
    • Beruby
  • Electricidad
  • Electronica
  • Ganar dinero comprando
    • CashbackDeals
    • Cashback
    • Por ir de compras
    • Aklamio
    • Intercambio de tráfico
    • Justificante de pagos
    • Webs estafas
  • Google
    • Google Pay
    • Adsense
    • Gmail
    • Google Apps
    • Google Chrome
    • Google Cloud Platform
    • Google Consumer Surveys
    • Google Desarrolladores
    • Google Fit
    • Google Maps
    • Google Photos
    • Google Play
    • Google Translation
    • DoubleClick
    • YouTube
    • Chromebooks
  • Marketing
    • SEM
    • SEO
    • Posicionamiento
    • Contenido
    • Publisuites
    • Space Content
    • Coobis
    • Marketing
  • Computadora u ordenador
    • Sistemas operativos
      • Windows
      • Mac OS
      • Android
      • Linux
      • Ubuntu
      • Kali Linux
      • Wifislax
    • hardware
    • Software
    • BIOS
    • Unidad de disco duro
    • Programacion
    • Dispositivos
    • Internet
  • Ofimática
    • Microsoft
    • Suite Ofimatica
    • Access
    • Word
    • Excel
    • Powerpoint
    • Outlook
    • Microsoft Publisher
  • PTC
    • No pierdas tiempo con estas web
  • Redes Sociales
    • Delicious
    • Facebook
    • Instagram
    • linkedin
    • Snapchat
    • TikTok
    • Twitter
    • Pinterest
    • Spotify
    • Vkontakte - VK
    • WhatsApp
  • Smartphone
    • Telefonos
    • Telefonia movil y telecomunicaciones
    • Desbloquear
    • Códigos NCK
    • Liberar
    • Tarjeta SIM
    • Tablet
  • Sitio Web
    • Dominios
    • Hosting
    • Servidores
    • Demo DLE
    • Documentación sobre Datalife Engine
    • Modulos DLE
    • Hack
    • Optimizacion
    • Google Adsense
    • Plantillas
  • Tips
    • Cabello
    • Consejos
    • Cremas
    • Cosmético
    • Cuerpo
    • Dieta
    • Exfoliantes
    • Entrenamiento
    • Ejercicio
    • Estilo
    • Fitness
    • Habitos
    • Hidratante
    • Look
    • Maquillaje
    • Moda
    • Piel Radiante
    • Recetas
    • Ropa
    • Rutina
    • Salud
    • Tratamientos
  • Trabajos
    • Atencion al cliente
    • Asistente virtual
    • Transcripcíon
    • Transcripcíones medica
    • Entrada de datos
    • De edicion y correccion
    • Mystery Shopping
    • Micro trabajos
    • Contabilidad
    • Tutoria y aprendizaje
    • Mas ingresos extras
  • Torrent
  • Webmasters
    • Git
    • GitHub
    • Criptografia
    • Deep Web
    • Hacker
    • FTP
    • Indexar
    • Newsletter
    • Redes y VPN
    • Herramientas online
  • Windows
    • Skype
    • Windows
    • Windows 11
    • Windows 10
    • Windows 8
    • Windows 7
    • Puerta trasera de Windows
    • Microsoft Edge
Facebook Twitter YouTube Instagram Linkedin
  • Sobre nosotros
  • Últimos artículos
  • Herramientas SEO
  • Ver mas temas
  • Más sitios que te gustarán
Tutoriales En Linea Tutoriales En Linea
  • Secciones
    1. Android
    2. Adobe
    3. Bricolaje
    4. Bachillerato
    5. Cursos
    6. Criptomonedas
    7. Criptografia
    1. Diseño Web
    2. Encuestas
    3. Empleo
    4. Electricidad
    5. Electronica
    6. Forex
    7. Fisica
    1. Google
    2. Hardware
    3. Herramientas Ofimaticas
    4. Herramientas
    5. Internet
    6. Idiomas
    7. IPTV
    1. Lenguajes De Programacion
    2. Libros
    3. Microsoft
    4. Manuales
    5. Matematica
    6. Newsletter
    7. Optimizacion
    1. Redes Sociales
    2. Software
    3. Seguridad
    4. Telefonia
    5. WebSite
    6. Webmasters
    7. Ver todas las categorias
  • Smartphone
    ¿Cómo ejecutar dos WhatsApp en un smartphone?

    ¿Cómo ejecutar dos WhatsApp en un smartphone?

    ¿Cómo saber quién te esta llamando?

    ¿Cómo saber quién te esta llamando?

    ¿Cómo sacar el mejor provecho de tu smartphone?

    ¿Cómo sacar el mejor provecho de tu smartphone?

    WhatsApp dejará de funcionar en estos smartphones a partir de 2023

    WhatsApp dejará de funcionar en estos smartphones a partir de 2023

    Smartphone vivo V25 Pro en busca del equilibrio

    Smartphone vivo V25 Pro en busca del equilibrio

  • Tecnología
    1. Móviles
    2. Ordenadores
    3. Software
    4. Hardware
    5. Seguridad
    6. Ver todo
    ¿Cómo ejecutar dos WhatsApp en un smartphone?

    ¿Cómo ejecutar dos WhatsApp en un smartphone?

    ¿Cómo saber quién te esta llamando?

    ¿Cómo saber quién te esta llamando?

    ¿Cómo sacar el mejor provecho de tu smartphone?

    ¿Cómo sacar el mejor provecho de tu smartphone?

    WhatsApp dejará de funcionar en estos smartphones a partir de 2023

    WhatsApp dejará de funcionar en estos smartphones a partir de 2023

    Guía Completa De Icloud Drive

    Guía Completa De Icloud Drive

    Consejos para mejorar el rendimiento de la PC en Windows - Archivo de intercambio

    Consejos para mejorar el rendimiento de la PC en Windows - Archivo de intercambio

    Biostar lanzó las tarjetas de referencia Radeon RX 7900 XTX y RX 7900 XT

    Biostar lanzó las tarjetas de referencia Radeon RX 7900 XTX y RX 7900 XT

    Kerish Doctor 2022 - Licencia gratis

    Kerish Doctor 2022 - Licencia gratis

    GNU/linux

    GNU/linux

    TrueCrypt

    TrueCrypt

    Guía Completa De Icloud Drive

    Guía Completa De Icloud Drive

    Google Chrome comenzará a bloquear la carga de la página a través del protocolo HTTP inseguro

    Google Chrome comenzará a bloquear la carga de la página a través del protocolo HTTP inseguro

    Prototipo de pantalla de 27 pulgadas para realidad espacial

    Prototipo de pantalla de 27 pulgadas para realidad espacial

    La nueva generación de realidad virtual de PlayStation®VR2 y PlayStation®5

    La nueva generación de realidad virtual de PlayStation®VR2 y PlayStation®5

    Colaboración entre Sony INZONE y EXCEL Esports

    Colaboración entre Sony INZONE y EXCEL Esports

    Galax presenta HOF Extreme 50 SSD de hasta 10 GB/s y módulos de memoria HOF Pro DDR5-8000

    Galax presenta HOF Extreme 50 SSD de hasta 10 GB/s y módulos de memoria HOF Pro DDR5-8000

    TrueCrypt

    TrueCrypt

    El ABC de la detección y prevención del phishing

    El ABC de la detección y prevención del phishing

    Protocolos de seguridad en redes inalambricas

    Protocolos de seguridad en redes inalambricas

    Virus en el sistema DataLife Engine (DLE) y cómo tratarlos

    Virus en el sistema DataLife Engine (DLE) y cómo tratarlos

    Prototipo de pantalla de 27 pulgadas para realidad espacial

    Prototipo de pantalla de 27 pulgadas para realidad espacial

    La nueva generación de realidad virtual de PlayStation®VR2 y PlayStation®5

    La nueva generación de realidad virtual de PlayStation®VR2 y PlayStation®5

    Colaboración entre Sony INZONE y EXCEL Esports

    Colaboración entre Sony INZONE y EXCEL Esports

    Galax presenta HOF Extreme 50 SSD de hasta 10 GB/s y módulos de memoria HOF Pro DDR5-8000

    Galax presenta HOF Extreme 50 SSD de hasta 10 GB/s y módulos de memoria HOF Pro DDR5-8000

  • Estilo de vida
    1. Entrenamiento
    2. Maquillaje
    3. Dieta
    4. Moda
    5. Trucos y tips
    6. Ver todo
    Descubre los beneficios y funciones de la suplementación deportiva

    Descubre los beneficios y funciones de la suplementación deportiva

    Razones por las que los ejercicios HIIT son los más efectivos

    Razones por las que los ejercicios HIIT son los más efectivos

    Alimentos que mejorarán tu desempeño en el gimnasio

    Alimentos que mejorarán tu desempeño en el gimnasio

    Actividades en pareja para salir de la rutina

    Actividades en pareja para salir de la rutina

    Cosas a considerar al comprar mesas de maquillaje al por mayor

    Cosas a considerar al comprar mesas de maquillaje al por mayor

    Consejos efectivos para tratar las ojeras

    Consejos efectivos para tratar las ojeras

    Cuidado de la piel saludable para adolescentes

    Cuidado de la piel saludable para adolescentes

    Hinchado, brillante y quebradizo? Usted podría ser demasiado exfoliante

    Hinchado, brillante y quebradizo? Usted podría ser demasiado exfoliante

    Top 5 por las que estas realmente ansioso por el chocolate

    Top 5 por las que estas realmente ansioso por el chocolate

    Aumento de peso por retención de agua

    Aumento de peso por retención de agua

    Aprende a perder peso de manera eficiente y correcta

    Aprende a perder peso de manera eficiente y correcta

    Maneras de preparar ensaladas con aspecto atractivo

    Maneras de preparar ensaladas con aspecto atractivo

    Cómo llevar un vestido largo todo el año

    Cómo llevar un vestido largo todo el año

    Los mejores consejos de moda femenina para hacerte lucir más elegante

    Los mejores consejos de moda femenina para hacerte lucir más elegante

    Ideas para tu boda del sueño

    Ideas para tu boda del sueño

    Que hacer para que los zapatos de las mujeres sean más cómodos

    Que hacer para que los zapatos de las mujeres sean más cómodos

    Como ayuda el ajo para tu salud

    Como ayuda el ajo para tu salud

    Cómo remover las uñas de acrílico en casa

    Cómo remover las uñas de acrílico en casa

    Voluminizadores de Labios naturales para hacerlos tu misma

    Voluminizadores de Labios naturales para hacerlos tu misma

    Beneficios del Té de manzanilla

    Beneficios del Té de manzanilla

    ¿Qué es el adoquín con efecto fotocatalítico?

    ¿Qué es el adoquín con efecto fotocatalítico?

    “Sugar Daddy”: ¡Todas las preguntas que quieres hacer!

    “Sugar Daddy”: ¡Todas las preguntas que quieres hacer!

    El progreso del Yoga antes y ahora

    El progreso del Yoga antes y ahora

    Top 10 de posturas de yoga

    Top 10 de posturas de yoga

  • Marketing
    Herramienta de analisis de tus problemas de SEO

    Herramienta de analisis de tus problemas de SEO

    Herramientas SEO para posicionamiento de nuestra web 2023

    Herramientas SEO para posicionamiento de nuestra web 2023

    Herramienta online de generador de datos estructurados

    Herramienta online de generador de datos estructurados

    Reescritor de Articulos - herramienta de paráfrasis

    Reescritor de Articulos - herramienta de paráfrasis

    Analisis de backlinks: Herramienta gratuita de SEO (Backlinks Checker)

    Analisis de backlinks: Herramienta gratuita de SEO (Backlinks Checker)

  • Juegos
    Juegos - HTML5 Canvas

    Juegos - HTML5 Canvas

    Como jugar online y resolver un sudoku

    Como jugar online y resolver un sudoku

    Cómo jugar Ajedrez Online TL

    Cómo jugar Ajedrez Online TL

    Como se juega al ajedrez

    Como se juega al ajedrez

    Tetris en JavaScript – Open source

    Tetris en JavaScript – Open source

  • Herramientas

¡Bienvenido de nuevo!

Inicie sesión o Regístrate ahora

VK Facebook

o con Email

¿Has olvidado tu contraseña?
Búsqueda extendida

Escriba arriba y presione Enter para buscar.


Tutoriales En Linea » Diseño Web » Curso intensivo para principiantes en HTML5

Curso intensivo para principiantes en HTML5


Por Tutoriales En Linea - En: Diseño Web, html5, Html, WebSite, Cursos, Tutorial 0 08-09-20

7.4К
VISTO
Facebook Twitter Pinterest LinkedIn Tumblr WhatsApp VKontakte Email
Compartir
Facebook Twitter LinkedIn Pinterest Email
Curso intensivo para principiantes en HTML5

Introducción


Este curso intensivo es para cualquier persona que quiera aprender los conceptos básicos del desarrollo web sin ningún requisito previo. Si nunca ha escrito una línea de código, este curso es para usted.
HTML sin CSS es muy feo, pero no nos estamos enfocando en el estilo aquí, nos estamos enfocando en la sintaxis HTML.

Tabla de contenido:

 Detalles
¿Qué es HTML?
Prerrequisitos
Crear un archivo HTML
Términos HTML comunes
Sintaxis HTML y estructura de página
Elementos HTML
Estructura de construcción

¿Qué es el HTML?


Primero respondamos una pregunta que todos tienen al principio; ¿Qué es HTML?

HTML significa Hyper Text Markup Language. NO es un lenguaje de programación, más bien es un lenguaje de marcado para crear páginas web. Los lenguajes de programación tienen lógica, bucles, sentencias condicionales. HTML no tiene nada de eso. Simplemente muestra y formatea elementos en la página. Es estrictamente presentacional, no incluye lógica.

Dicho esto, eso no hace que ningún lenguaje de programación sea más importante que HTML. De hecho, si te estás metiendo en el desarrollo web. HTML es el bloque de construcción más importante de la web. Cada sitio web utiliza HTML. Es un requisito previo para cualquier otra pila de tecnología en el desarrollo web. Leer mas…

Prerrequisitos


Solo necesitamos algunas cosas para comenzar:

  • Un navegador web (Chrome , Edge, Firefox).
  • Un editor de texto (Visual Studio Code, Sublime Text, Atom).

Se prefieren las opciones resaltadas y son las que usaremos en este curso.

Crear un archivo HTML


Para crear un archivo HTML, simplemente podemos crear un nuevo archivo con extensión .html . Cree una nueva carpeta en su escritorio, llámela Mi sitio web. Abra tu editor de HTML preferido y abra esa carpeta dentro de él. Luego cree un nuevo archivo llamado index.html. Ahora puede escribir código dentro de él y también puede abrirlo en su navegador.

Comprender los términos HTML comunes


Al comenzar a usar HTML, lo más probable es que encuentre términos nuevos, y a menudo extraños. Con el tiempo, se familiarizará cada vez más con todos ellos, pero los tres términos HTML más comunes con los que debe comenzar son elementos, etiquetas y atributos .

Los elementos definen la estructura y el contenido dentro de una página. Los elementos se identifican mediante el uso de corchetes angulares menores que y mayores que rodean el nombre del elemento.
<h1> es un ejemplo de un elemento de encabezado.
Dos de los mismos elementos en un par (abrir y cerrar uno) forman una etiqueta . 
Cualquier cosa entre las etiquetas de apertura y cierre es el contenido de ese elemento. Veremos con más detalle cómo cerramos las etiquetas en la sección Sintaxis HTML.
<h1>Encabezado de contenido</h1> Es un ejemplo de una etiqueta de encabezado completo.
los atributos son propiedades utilizadas para proporcionar información adicional sobre un elemento. Los atributos más comunes incluyen el atributo id, que identifica un elemento, el atributo de clase, que clasifica un elemento; el atributo src, que especifica una fuente del contenido; y el atributo href, que proporciona una referencia de hipervínculo a un recurso vinculado.


Los atributos se definen dentro de la etiqueta de apertura, después del nombre de un elemento.  En general, los atributos incluyen un nombre y un valor.
<h1 id="main-heading">Encabezado de contenido</h1> Es un ejemplo de una etiqueta de encabezado con un atributo id.

Sintaxis HTML


El tema más importante de este curso es la sintaxis, la forma en que escribimos HTML.

Como aprendimos antes, hay una etiqueta de apertura, un contenido y luego la etiqueta de cierre.
Hay una excepción a esta regla: elementos de cierre automático. Algunos de los elementos se cierran automáticamente, lo que significa que no necesitan una etiqueta de cierre separada.

Algunos ejemplos de etiquetas de cierre automático son: <br>, <img>, <meta>, <hr>.

Estructura de página HTML


Después de aprender los conceptos básicos de la sintaxis, ahora podemos aprender cómo estructurarlo en un solo documento HTML válido.
<!doctype html>
<html>
<head>
<title>Tutoriales En Linea</title>
</head>
<body>
<h1>Este es un encabezado.</h1>
<p>Este es un parrafo.</p>
</body>
</html>
La primera línea es una declaración de doctype. Es una instrucción para el navegador web sobre en qué versión de HTML está escrita la página. La única opción viable hoy en día es HTML5, que es la versión más nueva.
El doctype para HTML5 es <!doctype html>.
Después de eso, tenemos una etiqueta <html>. Se envuelve alrededor de todo el documento.

Dentro de la <html> etiqueta podemos encontrar las  etiquetas <head> y <body>.

El elemento <head> es un contenedor de metadatos y se coloca entre la etiqueta <html>y la etiqueta <body>. Los metadatos HTML son datos sobre el documento HTML. Los metadatos no se muestran, pero definen el título del documento, el conjunto de caracteres, los estilos, las secuencias de comandos y otra información meta.

Por ejemplo, la etiqueta <title> cambiará el nombre de su sitio web en una pestaña de Chrome.

Después de la etiqueta <head> de cierre , hay una etiqueta <body>. TODO lo demás que vamos a mencionar en el resto de este curso irá dentro del <body>. Representa todo lo que puedes ver en un sitio web.

Elementos HTML


Encabezados


<h1> <h2> <h3> <h4> <h5> <h6> — Los encabezados son elementos de nivel de bloque, y vienen en seis clasificaciones diferentes.

Los encabezados ayudan a dividir rápidamente el contenido y a establecer una jerarquía, y son identificadores clave para los usuarios que leen una página. También ayudan a los motores de búsqueda a indexar y determinar el contenido de una página.

Los encabezados deben usarse en un orden que sea relevante para el contenido de una página. El encabezado principal de una página o sección debe ser un encabezado <h1>, y los encabezados posteriores deben usar los números del 2 al 6.

Cada nivel de encabezado se debe usar donde se valora semánticamente, y no se debe usar para hacer que el texto sea en negrita o grande; hay otras formas mejores de hacerlo.

Aquí hay un ejemplo de HTML para todos los diferentes niveles de encabezado y la visualización resultante en una página web.

Encabezado Nivel 1


Encabezado Nivel 2


Encabezado Nivel 3


Encabezado Nivel 4


<h1>Encabezado Nivel 1</h1>
<h2>Encabezado Nivel 2</h2>
<h3>Encabezado Nivel 3</h3>
<h4>Encabezado Nivel 4</h4>

Los párrafos <p>


Los títulos suelen ir seguidos de párrafos de apoyo. Los párrafos se definen usando la etiqueta <p>.

Los párrafos pueden aparecer uno tras otro, agregando información a una página como se desee. Aquí hay un ejemplo de cómo configurar párrafos.

Steve Jobs fue cofundador y director ejecutivo de Apple desde hace mucho tiempo.

 El 12 de junio de 2005, Steve dio el discurso de graduación en la Universidad de Stanford. .
<p>Steve Jobs fue cofundador y director ejecutivo de Apple desde hace mucho tiempo</p>
<p>El 12 de junio de 2005, Steve dio el discurso de graduación en la Universidad de Stanford.</p>
Dentro de los párrafos podemos etiquetas como: <strong> o <em> para envolver las palabras que queremos hacer más audaces o las que queremos enfatizar. Aquí hay un ejemplo:

Steve Jobs fue cofundador y director ejecutivo de Apple.

El 12 de junio de 2005 , Steve dio el discurso de graduación en la Universidad de Stanford.
<p><strong> Steve Jobs</strong> fue cofundador y director ejecutivo de Apple desde hace mucho tiempo.</p>
<p><em> El 12 de junio de 2005</em>, Steve dio el discurso de graduación en la Universidad de Stanford.</p>

Etiqueta de anclaje <a>


El elemento HTML <a> (o elemento de anclaje), junto con su atributo href , crea un hipervínculo a otras páginas web, archivos, ubicaciones dentro de la misma página, direcciones de correo electrónico o cualquier otra URL.

Tutoriales En Linea
<a href="https://tutorialesenlinea.es/ ">Tutoriales En Linea </a>

Listas <ul> <ol> <li>


HTML ofrece dos formas de especificar listas de información. Todas las listas deben contener uno o más elementos de la lista. Hay dos tipos de listas:

  • <ul> — Una lista desordenada. Esto enumerará los elementos usando viñetas simples.
  • <ol> — Una lista ordenada. Esto agregará números a los elementos de su lista.

Lista desordenada en HTML


Una lista sin orden comienza con la etiqueta <ul>. Cada elemento de la lista comienza con la etiqueta <li>. Los elementos de la lista se marcarán con viñetas (pequeños círculos negros) de forma predeterminada:

  • Artículo de la lista 1
  • Artículo de la lista 2
  • Artículo de la lista 3
  • Artículo de la lista 4

<ul>
    <li>Artículo de la lista 1</li>
    <li>Artículo de la lista 2</li>
    <li>Artículo de la lista 3</li>
    <li>Artículo de la lista 4</li>
</ul>

Lista ordenada en HTML 


Una lista ordenada comienza con la etiqueta <ol>. Cada elemento de la lista comienza con la etiqueta <li>. Los elementos de la lista se marcarán con números de forma predeterminada:

  1. Artículo de la lista 1
  2. Artículo de la lista 2
  3. Artículo de la lista 3
  4. Artículo de la lista 4

<ol>
    <li>Artículo de la lista 1</li>
    <li>Artículo de la lista 2</li>
    <li>Artículo de la lista 3</li>
    <li>Artículo de la lista 4</li>
</ol>

Tables <table> <tr> <th> <td>


Una tabla HTML se define con la etiqueta <table>.

Cada fila de la tabla se define con la etiqueta <tr>. Un encabezado de tabla se define con la etiqueta <th>. Por defecto, los encabezados de las tablas están en negrita y centrados. Una tabla de datos/celda se define con la etiqueta <td>.


NombreEmailDescripción
AlexanderAlexander@gmail.comAutor
AlexanderAlexander@gmail.comInstagram

<table>
<thead>
<tr>
<th>Nombre</th>
<th>Email</th>
<th>Descripcion</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alexander</td>
<td>Alexander@gmail.com</td>
<td>Autor</td>
</tr>
<tr>
<td>Alexander</td>
<td>Alexander@gmail.com</td>
<td>Instagram</td>
</tr>
</tbody>
</table>
Tablas En DIVs…

Formulario


El elemento HTML <form> define un formulario que se utiliza para recopilar la entrada del usuario.

Se requieren formularios HTML cuando desea recopilar algunos datos del visitante del sitio. Por ejemplo, durante el registro del usuario, le gustaría recopilar información como nombre, dirección de correo electrónico, tarjeta de crédito, etc.

Un formulario tomará información del visitante del sitio y luego lo publicará en una aplicación de fondo como CGI, ASP Script o script PHP, etc. La aplicación de back-end realizará el procesamiento requerido en los datos pasados en función de la lógica empresarial definida dentro la aplicación.

Hay varios elementos de formulario disponibles como campos de texto, campos de área de texto, menús desplegables, botones de opción, casillas de verificación, etc.

<form method="POST">
<div>
<label>Primer nombre</label>
<input type="text" name="firstName" placeholder="Primer nombre">
</div>
<br>
<div>
<label>Apellido</label>
<input type="text" name="lastName">
</div>
<br>
<div>
<label>Email</label>
<input type="email" name="email">
</div>
<br>
<div>
<label>Mensaje</label>
<textarea name="message"></textarea>
</div>
<br>
<div>
<label>Genero</label>
<select name="gender">
<option value="male">Masculino</option>
<option value="female">Femenino</option>
<option value="other">Otros</option>
</select>
</div>
<br>
<div>
<label>Edad:</label>
<input type="number" name="age" value="30">
</div>
<br>
<div>
<label>Cumpleaños:</label>
<input type="date" name="birthday">
</div>
<br>
<input type="submit" name="submit" value="Enviar">
</form>
Mas sobre formularios…

Botones


El elemento HTML <button> representa un botón en el que se puede hacer clic, que se puede usar en formularios o en cualquier parte de un documento que necesite una funcionalidad de botón simple y estándar.

<button>Haz clic en mi</button>

Imágenes


Al principio, la Web era solo texto, y realmente era bastante aburrida. Afortunadamente, no pasó mucho tiempo antes de que se agregara la capacidad de incrustar imágenes (y otros tipos de contenido más interesantes) dentro de las páginas web. Hay otros tipos de multimedia a considerar, pero es lógico comenzar con el elemento <img> humilde, usado para incrustar una imagen simple en una página web. En este curso, veremos cómo usarlo en profundidad, incluidos los conceptos básicos, anotarlo con subtítulos <figure> y detallar cómo se relaciona con las imágenes de fondo CSS.

Para poner una imagen simple en una página web, utilizamos el elemento <img>. Este es un elemento vacío (lo que significa que no tiene contenido de texto o etiqueta de cierre) que requiere un mínimo de un atributo para ser útil src (a veces dicho como su título completo, fuente ). El atributo src contiene una ruta que apunta a la imagen que desea incrustar en la página, que puede ser una URL relativa o absoluta, de la misma manera que los valores de los atributos del elemento <a> en href.

Entonces, por ejemplo, si se llama a su imagen logo.webp y se encuentra en el mismo directorio que su página HTML, puede incrustar la imagen de esta manera:
<img src="logo.webp">
Si la imagen estaba en un subdirectorio llamado images, que estaba dentro del mismo directorio que la página HTML, entonces la incrustaría así:
<img src="images/logo.webp">
Y así.

Puede incrustar la imagen usando su URL absoluta, por ejemplo:
<img src="/images/logo.webp">
La etiqueta <img> tiene dos atributos obligatorios: src y alt.
Consejo: para vincular una imagen a otro documento, simplemente anide la etiqueta <img> dentro de las etiqueta <a>.

Estructura de construcción


Durante mucho tiempo, la estructura de una página web se creó mediante divisiones. El problema era que las divisiones no proporcionan un valor semántico, y era bastante difícil determinar la intención de estas divisiones. Afortunadamente, HTML5 introdujo nuevos elementos basados estructuralmente:

  • <header>: Se utiliza para contener el encabezado de un sitio.
  • <footer>: Contiene el pie de página de un sitio.
  • <nav>: Contiene la funcionalidad de navegación de la página.
  • <article>: Contiene un contenido independiente que tendría sentido si se distribuye como un elemento RSS, por ejemplo, una noticia.
  • <section>: Se utiliza para agrupar diferentes artículos en diferentes propósitos o temas, o para definir las diferentes secciones de un solo artículo.
  • <aside>: Define un bloque de contenido que está relacionado con el contenido principal que lo rodea, pero que no es central para el flujo del mismo.

Todos estos elementos nuevos tienen por objeto dar sentido a la organización de nuestras páginas y mejorar nuestra semántica estructural. Todos son elementos a nivel de bloque y no tienen ninguna posición o estilo implícito. Además, todos estos elementos se pueden usar varias veces por página, siempre que cada uso refleje el significado semántico adecuado.

Con elementos estructurales y elementos basados en texto bajo nuestros cinturones, nuestro conocimiento de HTML realmente está comenzando a unirse. Ahora es un buen momento para volver a visitar nuestro sitio web de la Conferencia de estilos y ver si podemos proporcionarle una estructura un poco mejor.

¡Eso es!


¡Lo hiciste hasta el final! Eso es todo lo que hay en HTML5. Si desea un próximo artículo/video de la misma manera que este, sobre CSS o jаvascript.

No dude en hacer cualquier pregunta y dejar comentarios o críticas.

¡Lo más útil sería el soporte en YouTube desde que recientemente creé un canal! Haga clic aquí, ¡hay muchas cosas interesantes muy pronto! :)

También puede consultar los tutoriales sobre: Comandos Git.
Compartir Facebook Twitter Pinterest Tumblr WhatsApp VKontakte
Síguenos en Síguenos en Google News
Articulo anterior Cómo utilizar z-index y los cont...
Articulo siguiente Introducción a las variables CSS
¿Te gusto la informacion?

Si te gustó la publicación, apóyanos compartiendo en tus redes sociales o dejanos tu comentario.

  • 100
  • 1
  • 2
  • 3
  • 4
  • 5
Tutoriales En Linea
Tutoriales En Linea
  • Website
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
  • Instagram

Sobre mi: CEO de Tutoriales En Linea:
https://tutorialesenlinea.es
Fundador y CEO deTutoriales En Linea...Leer mas...

Post Relacionados

¿Qué elementos admiten el método focus()?

¿Qué elementos admiten el método focus()?

El método focus() en javascript

El método focus() en javascript

Introducción a las variables CSS

Introducción a las variables CSS

El caso del colapso de márgenes en CSS

El caso del colapso de márgenes en CSS

Como utilizar em y rem en CSS

Como utilizar em y rem en CSS

Haciendo un spinner con CSS

Haciendo un spinner con CSS


Comentarios



Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!

Destacados

Cómo crear un USB de arranque para instalar Windows 10

Cómo crear un USB de arranque para instalar Windows 10

12-Octubre
Como instalar Windows 11 cuando tu hardware no cumple con los requisitos

Como instalar Windows 11 cuando tu hardware no cumple con los requisitos

10-Octubre
Herramienta de analisis de tus problemas de SEO

Herramienta de analisis de tus problemas de SEO

18-Mayo
Como activar Windows 10 con KMSAuto

Como activar Windows 10 con KMSAuto

14-Junio

Últimas publicaciones

Lista IPTV con canales para España

Lista IPTV con canales para España

Por Tutoriales En Linea 06-02-2377
¿Cómo hacer crecer su pequeña empresa en línea?

¿Cómo hacer crecer su pequeña empresa en línea?

Por Sachin Agrawal 06-02-23121
Lista IPTV con canales para Latinoamerica

Lista IPTV con canales para Latinoamerica

Por Dianna 03-02-23207

Etiquetas

CursoHTML5Tutoriales En LineaArticulosPostNoticiasDiseñoPaginasPaginas WebElementoencabezadoArchivosindexCurso intensivoCursos online gratuitoscursos online y gratuitoscursosCurso de HTML





Sobre nosotros

Tutoriales En Linea

Es un portal web de tutoriales, cursos online y de aprendizaje que pretenden simular al maestro mostrando al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad. Leer mas...

Tiene una pregunta? Contactar...

Enlaces

  • Sobre nosotros
  • Ultimos tutoriales
  • Publicar tutorial
  • Ver mas temas
  • Ultimos comentarios
  • ¿Preguntas Frecuentes?
  • Derechos de autor
  • Politica de cookies
  • DMCA
  • Nuestro equipo
  • Normas

Herramientas online

  • Buscador de recetas
  • Prueba de diseño web
  • Codificar en binarios, hexadecimales...
  • Cual es mi IP
  • Test de velocidad
  • Editor HTML
  • Test de escritura
  • Test de nutricion
  • Descargar Videos
  • Generador de datos estructurados

Recursos

  • Analisis de tus problemas de SEO
  • Herramientas SEO
  • Generar palabras claves
  • Referencia de CSS3
  • Convertir HTML a XML
  • Acortador de URL
  • Selector de colores
  • Contador de palabras
  • Comprimir imagenes
  • Conversor a URI de datos
  • Suscribirse
Disponible en Google Play - Google Play y el logotipo de Google Play son marcas comerciales de Google LLC.
Facebook Twitter Instagram Pinterest Linkedin Youtube
  • Anunciarse
  • Socios externos
  • Política de privacidad
  • Términos y Condiciones
  • Sobre nosotros
  • Contactar
© Tutoriales En Linea. Reservados todos los derechos, queda prohibida la reproducción parcial o total sin previa autorización.