Uno de los componentes básicos de HTML son los párrafos. Utilice etiquetas "<p>" y "</p>" para definir párrafos. Por ejemplo:
<p>Este es un párrafo. </p>
Un hipervínculo es un enlace a otra página o sitio. Utilice las etiquetas "<a href=''>" y "</a>" para crear hipervínculos, donde el atributo href especifica la URL del enlace. Por ejemplo:
<a href="https://www.jb51.net">Este es un enlace</a>
Las imágenes pueden mejorar el impacto visual de una página y transmitir más información. Inserte imágenes usando la etiqueta "<img src='' alt=''/>", donde el atributo src especifica la ruta al archivo de imagen y el atributo alt contiene texto alternativo que se muestra cuando la imagen no se puede mostrar. Por ejemplo:
<img src="image.jpg" alt="Una imagen hermosa">
Las tablas son una forma principal de presentar datos en páginas web. Utilice las etiquetas "<table>", "<tr>" y "<td>" para definir tablas, filas y celdas respectivamente. Por ejemplo:
<tabla> <tr> <td>Primera fila, primera columna</td> <td>Primera fila, segunda columna</td> </tr> <tr> <td>Segunda fila, primera columna</td> <td>Segunda fila, segunda columna</td> </tr> </tabla>
Utilice las etiquetas "<ul>" o "<ol>" para crear una lista ordenada u desordenada y luego utilice la etiqueta "<li>" para definir los elementos de la lista. Por ejemplo:
<ul> <li>Listar elemento 1</li> <li>Elemento de lista 2</li> </ul> <ol> <li>Listar elemento 1</li> <li>Elemento de lista 2</li> </ol>
Los formularios son componentes que se utilizan para recopilar la información del usuario. Utilice la etiqueta "<form>" para crear el formulario y la etiqueta "<input>" para definir los campos de entrada. Por ejemplo:
<formulario acción="enviar.php" método="publicar"> <label for="username">Nombre de usuario:</label> <tipo de entrada="texto" nombre="nombre de usuario" id="nombre de usuario"> <label for="contraseña">Contraseña:</label> <tipo de entrada="contraseña" nombre="contraseña" id="contraseña"> <tipo de entrada="enviar" valor="Enviar"> </formulario>
CSS se puede utilizar para controlar la apariencia y el diseño de las páginas web. Los estilos CSS se pueden agregar a documentos HTML usando la etiqueta "<estilo>". Por ejemplo:
<estilo>
cuerpo {
color de fondo: #f2f2f2;
}
h1 {
color: azul;
alineación de texto: centro;
}
</estilo>El fragmento de código anterior es sólo la punta del iceberg en el lenguaje HTML. Sin embargo, pueden ayudarle a crear una estructura y un estilo básicos para una página web y proporcionarle inspiración para seguir aprendiendo. ¡Ahora intenta crear tu propio sitio web usando estos códigos HTML!
Declaración de documentación HTML5
<!DOCTYPE html>
El bloque de código anterior es una declaración de documento HTML5 que indica que la página web actual está escrita de acuerdo con los estándares HTML5.
Al escribir una página web, asegúrese de escribir la declaración del documento HTML5 en la parte superior de la página web. Si no escribe la declaración del documento, algunos navegadores entrarán en un modo extraño. Después de ingresar al modo extraño, el navegador analizará la página y la página no se mostrará normalmente. Por lo tanto, para evitar ingresar a este modo, debe escribir una declaración de documento.
Declaraciones de documentos de uso común
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transicional//ES"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//ES"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Nota: <!DOCTYPE> no es una etiqueta HTML. Proporciona al navegador información (una declaración) sobre qué versión del HTML se escribió.
Para ser compatible con algunas páginas antiguas, el navegador ha configurado dos modos de análisis:
Modo estándares Modo estándares
Modo Quirks modo extraño
Los modos extraños producirán un comportamiento impredecible al analizar páginas web y debemos evitar la aparición de modos extraños.
Tipo de archivo <HTML></HTML> (colocado al principio y al final del archivo)
Título del documento <TITLE></TITLE> (debe colocarse en el bloque "Encabezado")
Encabezado <HEAD></HEAD> (información descriptiva, como "tema")
Estilo <BODY></BODY> (cuerpo del documento)
Título <H?></H?> (del 1 al 6, hay seis niveles de opciones)
Alineación del título <H?ALIGN=LEFT|CENTER|RIGHT></H?>
Distinguir <DIV></DIV>
Alineación diferenciada <DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
Bloque de citas <BLOCKQUOTE></BLOCKQUOTE> (generalmente con sangría)
Énfasis <EM></EM> (generalmente se muestra en cursiva)
Énfasis especial en <STRONG></STRONG> (normalmente se muestra en negrita)
Cita <CITE></CITE> (generalmente se muestra en cursiva)
Código <CODE></CODE> (para mostrar el código fuente)
Muestra<SAMP></SAMP>
Entrada de teclado<KBD></KBD>
Variable<VAR></VAR>
Definir <DFN></DFN> (no proporcionado por algunos navegadores)
Dirección<DIRECCIÓN></DIRECCIÓN>
Caracteres grandes<BIG></BIG>
Letra pequeña<SMALL></SMALL>
Negrita<B></B>
cursiva<I></I>
En pocas palabras <U></U> (algunos navegadores todavía no lo proporcionan)
Tachado <S></S> (algunos navegadores aún no lo proporcionan)
Subíndice<SUB></SUB>
Superíndice <SUP></SUP>
Máquina de escribir <TT></TT> (se muestra en fuente de un solo espacio)
Formato predeterminado <PRE></PRE> (conserva el tamaño de los espacios en el archivo)
El ancho del formato preformateado <PRE WIDTH=?></PRE> (en caracteres)
Alinearlo con <CENTER></CENTER> (tanto texto como imágenes son aceptables)
Shine <BLINK></BLINK> (la etiqueta de la que más se burlan jamás)
Tamaño de fuente <FONTSIZE=?></FONT> (de 1 a 7)
Cambiar tamaño de fuente <FONTSIZE=+|-?></FONT>
Tamaño de fuente base <BASEFONTSIZE=?> (de 1 a 7; el valor predeterminado es 3)
Color de fuente<FONTCOLOR="#$$"></FONT> ($$ es el código de color)
1) Imagen: <img src="dirección de imagen">
2) Únete al enlace: <a href="Dirección relacionada a conectar">Escribe las palabras que quieras escribir</a>
3) Abre el enlace en una nueva ventana: <a href="Dirección relacionada" target="_blank">Escribe las palabras que quieras escribir</a>
4) Fuente móvil (marquee): <marquee>Escribe las palabras que quieras escribir</marquee>
5) Fuente en negrita: <b>Escribe las palabras que quieras escribir</b>
6) Fuente cursiva: <i>Escribe las palabras que quieras escribir</i>
7) Subrayado de fuente: <u>Escribe las palabras que quieras escribir</u>
8) Tachado de fuente: <s>Escribe las palabras que quieras escribir</s>
9) Aumenta el tamaño de fuente: <big>Escribe las palabras que quieras escribir</big>
10) Control del tamaño de fuente: <h1>Escribe las palabras que deseas escribir</h1> (el tamaño de fuente puede ser de h1-h5, h1 es el más grande, h5 es el más pequeño)
11) Cambia el color de la fuente: <font color="#value">Escribe las palabras que quieras escribir</font> (el valor está entre 000000 y ffffff (hexadecimal de 16 bits)
12) Elimina el subrayado de la conexión: <a href="Related Address" style="text-decoration:none">Escribe las palabras que quieras escribir</a>
13) Publicar música: <embed src="Dirección de música" width="Width" height="Height" autostart=false>
14) Pegar flash: <embed src="dirección flash" ancho="ancho" alto="alto">
15) Pegue archivos de vídeo: <img dynsrc="dirección de archivo" ancho="ancho" alto="alto" start=mouseover>
16) Salto de línea:<br>
17) Párrafo: <p>Párrafo</p>
18) Estilo de texto original: <pre>Texto</pre>
19) Cambiar el fondo de la publicación: <body background="dirección de la imagen de fondo">
20) Se corrigió el fondo de la publicación que no se desplazaba con la barra de desplazamiento: <body background="Dirección de la imagen de fondo" bodybgproperties=fixed>
21) Personaliza el color de fondo de la publicación: <body bgcolor="#value">(ver 10 para conocer el valor)
22) Publicar música de fondo: <bgsound="Dirección de música de fondo" loop=infinite>
23) Publique la página web: <iframe="Dirección relacionada" ancho="Ancho" alto="Alto"></iframe>