HTML es un lenguaje de marcación que sirve para definir el contenido de las páginas web. Se compone en base a etiquetas, también llamadas marcas o tags, con las cuales conseguimos expresar las partes de un documento, cabecera, cuerpo, encabezados, párrafos, etc. En definitiva, el contenido de una página web.
HTML es el primer lenguaje que debe aprender cualquier persona interesada en construir un sitio web. A partir del HTML podemos pasar a muchos otros lenguajes interesantes que sirven para hacer cosas diversas y más avanzadas. Es decir, sea cual sea la tecnología, herramienta o gestor de contenido que nos hayamos propuesto aprender, o que tengamos que usar en nuestro día a día, HTML siempre será el lenguaje en el que toda web se construye y, por tanto, es de obligado conocimiento para todos.
Aprender HTML es sencillo. En pocos días o semanas serás capaz de entender y usar las etiquetas más comunes y componer documentos HTML (páginas web) correctas. Aquí encontrarás muchas ayudas para poder dar esos primeros pasos y luego profundizar en cualquier área que necesites.
El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para estructurar y desplegar una página web y sus contenidos. Por ejemplo, sus contenidos podrían ser párrafos, una lista con viñetas, o imágenes y tablas de datos. Como lo sugiere el título, este artículo te dará una comprensión básica de HTML y cúal es su función.
https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/HTML_basics
https://desarrolloweb.com/home/html
EJEMPLOS DEL HTML
Ejemplo 1: Altos y anchos
El ejemplo siguiente muestra el uso de las propiedades de alto (height) y ancho (width) junto a imágenes de dimensiones variadas:
<!DOCTYPE html PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html lang=»es»>
<head>
<title>Ejemplo de height/width</title>
<script type=»text/javascript»>
function iniciar() {
var arrImages = new Array(3);
arrImages[0] = document.getElementById(«imagen1»);
arrImages[1] = document.getElementById(«imagen2»);
arrImages[2] = document.getElementById(«imagen3»);
var objOutput = document.getElementById(«salida»);
var strHtml = «<ul>»;
for (var i = 0; i < arrImages.length; i++)
strHtml +=
«<li>imagen» +
(i + 1) +
«: height=» +
arrImages[i].height +
«, width=» +
arrImages[i].width +
«, style.height=» +
arrImages[i].style.height +
«, style.width=» +
arrImages[i].style.width +
«<\/li>»;
strHtml += «<\/ul>»;
salida.innerHTML = strHtml;
}
</script>
</head>
<body onload=»iniciar();»>
<p>
La 1ª imagen: – alto (height): no – ancho (width): no – estilo (style): no
<img
id=»imagen1″
src=»http://www.mozilla.org/images/mozilla-banner.gif» />
</p>
<p>
La 2ª imagen: – height=»50″ – width=»500″ – style: no
<img
id=»imagen2″
src=»http://www.mozilla.org/images/mozilla-banner.gif»
height=»50″
width=»500″ />
</p>
<p>
La 3ª imagen: – height y width: no – style=»height: 50px; width: 500px;»:
sí
<img
id=»imagen3″
src=»http://www.mozilla.org/images/mozilla-banner.gif»
style=»height: 50px; width: 500px;» />
</p>
<div id=»salida»></div>
</body>
</html>
height y width son además propiedades de los elementos OBJECT y APPLET.
Ejemplo 2: Atributos de una imagen
Tecnología para desarrolladores web
Ejemplos
This page was translated from English by the community. Learn more and join the MDN Web Docs community.
Ejemplos
En este capítulo se brindan ejemplos relativamente extensos que ilustran el uso del DOM para el desarrollo web y XML. Siempre que sea posible, usaremos las APIs, trucos y patrones comunes en JavaScript para la manipulación del objeto document.
Ejemplo 1: Altos y anchos
El ejemplo siguiente muestra el uso de las propiedades de alto (height) y ancho (width) junto a imágenes de dimensiones variadas:
HTML
Copy to Clipboard
<!DOCTYPE html PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html lang=»es»>
<head>
<title>Ejemplo de height/width</title>
<script type=»text/javascript»>
function iniciar() {
var arrImages = new Array(3);
arrImages[0] = document.getElementById(«imagen1»);
arrImages[1] = document.getElementById(«imagen2»);
arrImages[2] = document.getElementById(«imagen3»);
var objOutput = document.getElementById(«salida»);
var strHtml = «<ul>»;
for (var i = 0; i < arrImages.length; i++)
strHtml +=
«<li>imagen» +
(i + 1) +
«: height=» +
arrImages[i].height +
«, width=» +
arrImages[i].width +
«, style.height=» +
arrImages[i].style.height +
«, style.width=» +
arrImages[i].style.width +
«<\/li>»;
strHtml += «<\/ul>»;
salida.innerHTML = strHtml;
}
</script>
</head>
<body onload=»iniciar();»>
<p>
La 1ª imagen: – alto (height): no – ancho (width): no – estilo (style): no
<img
id=»imagen1″
src=»http://www.mozilla.org/images/mozilla-banner.gif» />
</p>
<p>
La 2ª imagen: – height=»50″ – width=»500″ – style: no
<img
id=»imagen2″
src=»http://www.mozilla.org/images/mozilla-banner.gif»
height=»50″
width=»500″ />
</p>
<p>
La 3ª imagen: – height y width: no – style=»height: 50px; width: 500px;»:
sí
<img
id=»imagen3″
src=»http://www.mozilla.org/images/mozilla-banner.gif»
style=»height: 50px; width: 500px;» />
</p>
<div id=»salida»></div>
</body>
</html>
height y width son además propiedades de los elementos OBJECT y APPLET.
Ejemplo 2: Atributos de una imagen
HTML
Copy to Clipboard
<!DOCTYPE html PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html lang=»es»>
<head>
<title>Modificación del borde de una imagen</title>
<script type=»text/javascript»>
function setBorderWidth(width) {
document.getElementById(«img1»).style.borderWidth = width + «px»;
}
</script>
</head>
<body>
<p>
<img
id=»img1″
src=»image1.gif»
style=»border: 5px solid green;»
width=»100″
height=»100″
alt=»test de borde» />
</p>
<form name=»Formulario»>
<p>
<input
type=»button»
value=»Definir un borde de 20px»
onclick=»setBorderWidth(20);» />
<input
type=»button»
value=»Definir un borde de 5px»
onclick=»setBorderWidth(5);» />
</p>
</form>
</body>
</html>
Ejemplo 3: Manipulación de estilos
En este ejemplo sencillo, algunas propiedades de estilo básicas de un elemento párrafo HTML son accedidas utilizando el objeto estilo en el elemento y aquellas propiedades de estilo CSS del objeto, pueden ser entregadas y establecidas desde el DOM. En este caso, está manipulando los estilos directamente. En el siguiente ejemplo (ver ejemplo 4), puede utilizar las hojas de estilo y sus reglas para cambiar estilos para el documento entero.
!DOCTYPE html PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html lang=»en»>
<head>
<title>Changing color and font-size example</title>
<script type=»text/javascript»>
function changeText() {
var p = document.getElementById(«pid»);
p.style.color = «blue»;
p.style.fontSize = «18pt»;
}
</script>
</head>
<body>
<p id=»pid» onclick=»window.location.href = ‘http://www.cnn.com/’;»>
linker
</p>
<form>
<p><input value=»rec» type=»button» onclick=»changeText();» /></p>
</form>
</body>
</html>
https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Examples
HTML4 