Tutoriales básicos de HTML

Medios HTML

Manual de referencia HTML

HTML5 Tutoriales básicos

HTML5 API

HTML5 Medios

Reproducción de videos (Video) HTML Bloques HTML

Diseño HTML

Un diseño de página razonable es muy importante, no solo determina si la página es atractiva, sino que también afecta la experiencia del usuario; un diseño de página deficiente llevará a una mala experiencia del usuario y será difícil mantener a los usuarios.

Métodos de implementación de diseño HTML

1、puede usar el método de tabla Html table para construir el diseño de la página, y luego llenar el contenido.
2、usar div, combinado con float o flex para el diseño de la página.

Ejemplo simple de diseño de tabla

La primera y última línea utilizan la propiedad colspan para abarcar dos columnas:

Ejemplo
<!DOCTYPE html>
<html>
　　　　<meta　charset="UTF-8<meta charset="utf
　　　　<title>Tabla</<title>Tutores Básicos (w
body>/title>
head>
　　<table　border="1"　cellspacing="1"　cellpadding="1"　align="center">
　　　　　　El contenido aquí<
　　　　　　　　　　<tr>2"　align="center"　　style="background:　#0395e1">Navegación superior</codebox.com)<
　　　　　　body>/td>
　　　　　　El contenido aquí<
　　　　　　　　　　<td　style="background:　#f25807"　align="center"　height="300px"　width="100px">
　　　　　　　　　　　　　　Contenido<br> lateral<br> <br>interno
　　　　　　　　　　body>/codebox.com)<
　　　　　　　　　　<td　style="background:　red"　align="center"　width="400px">
　　　　　　　　　　　　　　Contenido principal
　　　　　　　　　　body>/codebox.com)<
　　　　　　body>/td>
　　　　　　El contenido aquí<
　　　　　　　　　　<tr>2"　style="background:　darkorchid"　align="center">parte inferior</codebox.com)<
　　　　　　body>/td>
　　body>/tr>
body>/table>
body>/<

html>/Probar aquí ‹

Más ejemplos en línea

Diseño de página web usando el elemento <div>.
Cómo agregar diseño usando el elemento <div>.

Diseño de página web usando el elemento <table>.
Cómo agregar diseño usando el elemento <table>.

Diseño de sitio web

La mayoría de los sitios web organizan el contenido en múltiples columnas (al estilo de revistas o periódicos).

La mayoría de los sitios web pueden usar elementos <div> o <table> para crear múltiples columnas. CSS se utiliza para posicionar elementos o crear un aspecto rico en colores y patrones para la página.

Aunque podemos usar la etiqueta table de HTML para diseñar un diseño atractivo, no se recomienda usar la etiqueta table como herramienta de diseño. - La tabla no es una herramienta de diseño.

Diseño HTML - Se utiliza el elemento <div>

Los elementos div son elementos de bloque utilizados para agrupar elementos HTML.

El siguiente ejemplo utiliza cinco elementos div para crear un diseño de múltiples columnas:

La primera y última línea utilizan la propiedad colspan para abarcar dos columnas:

Ejemplo
<!DOCTYPE html>
<html>　
<head>-8<meta charset="utf　
">3Copyright © Tutores Básicos (w/<title>Tutores Básicos (w　
body>/title>
head>
　
<div　id="container"　style="width:520px">
　
<div　id="header"　style="background-<div id="pie" estilo="fondo30" borde="0">
00;">1　style="margin-bottom:0;">主要的网页H1>Título principal de la página H/Título<1></00;limpiar:ambos lados;text
　
<div　id="menu"　style="background-color:#FF9a00;height:2color:#DDDDDD;alto:120px;float:left;">
0px;">/<b>Menú<
b><br>
HTML<br>
JavaScripthtml>/Probar aquí ‹

div>

Diseño HTML - El código HTML anterior produce el siguiente resultado:

Uso de la tabla

El uso de la etiqueta <table> HTML es una manera sencilla de crear un diseño.

La mayoría de los sitios pueden usar elementos <div> o <table> para crear múltiples columnas. CSS se utiliza para posicionar elementos o crear un fondo y un aspecto colorido de la página. - Aunque se puede usar la tabla HTML para crear un diseño atractivo, el propósito del diseño de la tabla es presentar datos tabulares

¡La tabla no es una herramienta de diseño! - El siguiente ejemplo utiliza una tabla de tres filas y dos columnas

La primera y última línea utilizan la propiedad colspan para abarcar dos columnas:

Ejemplo
<!DOCTYPE html>
<html>　
<head>-8<meta charset="utf　
">3Copyright © Tutores Básicos (w/<title>Tutores Básicos (w　
body>/title>
head>
　
<body>52<table ancho="
El contenido aquí<
<tr>2<td colspan="-" estilo="fondo50" borde="0">
00;">1<h1>Título principal de la página H/Título<1h
body>/codebox.com)<
body>/td>
　
El contenido aquí<
JavaScript-" estilo="fondo7>1200;ancho:
0px;">/<b>Menú<
b><br>
HTML<br>
CSS<br>
body>/codebox.com)<
JavaScript-<td estilo="fondo2color:#DDDDDD;alto:400px;ancho:
00px;">/codebox.com)<
body>/td>
　
El contenido aquí<
<tr>2<td colspan="-" estilo="fondo5color:#FFB-00;text
alineación:centro;">3Copyright © Tutores Básicos (w/codebox.com)<
body>/td>
body>/tr>
　
body>/table>
body>/<

html>/Probar aquí ‹

Diseño HTML - ›

CSS IndispensableLos mayores beneficios de usar CSS es que, si se almacena el código CSS en una hoja de estilo externa, el sitio web será más fácil de mantener y ofrecerá mayor flexibilidad en la definición de estilos. Al modificar el archivo de la hoja de estilo CSS, se puede cambiar el diseño de todas las páginas. Para aprender más sobre CSS, por favor visite nuestro.

Etiquetas de diseño HTML

Etiqueta	Descripción
<div>	Define un bloque de documento, de nivel (block-level)
<span>	Define span, utilizado para combinar elementos en línea del documento.

Reproducción de videos (Video) HTML Bloques HTML