¿Qué es HTML?
HTML significa lenguaje de marcado de hipertexto . _
HTML es el lenguaje de marcado estándar para las páginas web
Los elementos HTML son los componentes básicos de las páginas HTML.
Los elementos HTML están representados por etiquetas <>
Elementos HTML
Un elemento HTML es una etiqueta de inicio y una etiqueta de finalización con contenido intermedio:
<h1>Este es un encabezado</h1>
| Start tag | Element content | End tag |
|---|---|---|
| <h1> | This is a Heading | </h1> |
| <p> | This is paragraph. | </p> |
Atributos HTML
- Los elementos HTML pueden tener atributos
- Los atributos proporcionan información adicional sobre el elemento .
- Los atributos vienen en pares de nombre/valor como charset="utf-8"
Un documento HTML simple
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Page Title</title>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is
another paragraph.</p>
</body>
</html>
Ejemplo explicado
Los elementos HTML son los componentes básicos de las páginas HTML.
- La
<!DOCTYPE html>declaración define este documento como HTML5 - El
<html>elemento es el elemento raíz de una página HTML. - El
langatributo define el idioma del documento. - El
<meta>elemento contiene metainformación sobre el documento. - El
charsetatributo define el juego de caracteres utilizado en el documento. - El
<title>elemento especifica un título para el documento. - El
<body>elemento contiene el contenido de la página visible. - El
<h1>elemento define un encabezado grande - El
<p>elemento define un párrafo.
Documentos HTML
Todos los documentos HTML deben comenzar con una declaración de tipo de documento: <!DOCTYPE html>.
El documento HTML en sí comienza <html>y termina con </html>.
La parte visible del documento HTML está entre <body>y </body>.
Estructura del documento HTML
A continuación se muestra una visualización de un documento HTML (una página HTML):
Nota: Solo el contenido dentro de la sección <body> (el área blanca arriba) se muestra en un navegador.
Encabezados HTML
Los encabezados HTML se definen con etiquetas <h1>to .<h6>
<h1>define el encabezado más importante. <h6>define el encabezado menos importante:
Ejemplo
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
Párrafos HTML
Los párrafos HTML se definen con <p>etiquetas:
Ejemplo
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Enlaces HTML
Los enlaces HTML se definen con <a>etiquetas:
Ejemplo
<a href="https://www.w3schools.com">This is a link</a>
El destino del enlace se especifica en el hrefatributo.
Imágenes HTML
Las imágenes HTML se definen con <img>etiquetas.
El archivo de origen ( src), el texto alternativo ( alt),
widthy heightse proporcionan como atributos:
Ejemplo
<img src="img_w3schools.jpg" alt="W3Schools" style="width:120px;height:150px"
Botones HTML
Los botones HTML se definen con <button>etiquetas:
Ejemplo
<button>Click me</button>
Listas HTML
Las listas HTML se definen con etiquetas <ul>(sin ordenar/lista de viñetas) o
<ol>(lista ordenada/numerada), seguidas de <li>
etiquetas (elementos de lista):
Ejemplo
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Tablas HTML
Una tabla HTML se define con una <table>etiqueta.
Las filas de la tabla se definen con <tr>etiquetas.
Los encabezados de las tablas se definen con <th>etiquetas. (negrita y centrado por defecto).
Las celdas de la tabla (datos) se definen con <td>etiquetas.
Ejemplo
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Programación HTML
Cada elemento HTML puede tener atributos .
Para el desarrollo y la programación web, los atributos más importantes son id y class. Estos atributos se utilizan a menudo para abordar manipulaciones de páginas web basadas en programas.
| Atributo | Ejemplo |
|---|---|
| identificación | < id de la tabla ="tabla01" |
| clase | <p clase ="normal"> |
| estilo | <p estilo ="font-size:16px"> |
| datos- | <div datos -id="500"> |
| al hacer clic | <input onclick ="miFunción()"> |
| el ratón por encima | <a onmouseover="this.setAttribute('estilo','color:rojo')"> _ |
Tutorial HTML completo
Esta ha sido una breve descripción de HTML.
Para obtener un tutorial HTML completo, vaya al Tutorial HTML de W3Schools .
Para obtener una referencia de etiqueta HTML completa, vaya a Referencia de etiqueta de W3Schools .