es un elemento de marcado de hipertexto ( HTML ), elemento que contiene el contenido . Los desarrolladores web a menudo utilizan elementos
, junto con los valores de conexión en cascada de hojas de estilo ( CSS ) para definir cómo el contenido se estructura y se mostrará en la página web. Puedes elementos
anidar entre sí para crear formatos complejos , sin usar tablas . En este tutorial , creará un elemento
exterior y tres elementos
interiores , junto con tres diferentes estilos CSS . Cosas que necesitará de computadora con Windows 7
Bloc de notas u otro editor de texto
Internet Explorer u otro navegador
Mostrar más instrucciones
Cómo crear una página Web
1
anidada <html> es el elemento más externo y permite que el navegador sabe que debe traducir el contenido como HTML. El elemento head contiene elementos que definen la información general de la página. En este ejemplo , el elemento <title> define el texto que aparece en la barra de título cuando se muestra la página. El elemento <body> contiene el contenido presentado en la página. <br> <p> 3 Haga clic en el menú " Archivo" y haga clic en la opción de menú " Guardar" para que aparezca la opción "Guardar como" cuadro de diálogo . <br> 4 <p> Seleccione " Todos los archivos " de la opción "Guardar como tipo" lista desplegable . Esto es necesario para prevenir la extensión ". Txt" se añada al final del nombre de archivo. <br> 5 <p> Type " DivsExample.html " en el campo " Nombre de archivo" . <br> <br> 6 <p> Vaya a la ubicación donde desea guardar el archivo. Asegúrese de que se acuerde para su uso en los pasos posteriores. <br> 7 <p> clic en el botón "Guardar" para guardar el archivo. <br> Probar la página <br> 8 <p> clic en el botón "Inicio" y haga clic en el elemento de menú "Equipo" . <br> 9 <p> Vaya a la ubicación donde guardó " DivsExample.html " . <br> 10 < p> doble clic en " DivsExample.html " y verificar que las pantallas de título correcto en la barra de título del navegador . Si no es así , compruebe el margen de beneficio que ha escrito para asegurarse de que usted no escribe nada mal . <br> Cree el exterior Div <br> 11 <p> Escriba el siguiente marcado entre la etiqueta head y < /head> : . <p> <br> <style type="text/css"> <br> <p> outerDiv { <br> <p> frontera : 2px sólidos <style> elemento se utiliza para definir estilos CSS en línea . Usted preceder el nombre del estilo con un "." para indicar que se ha seleccionado el estilo basado en el valor del atributo "class" del elemento. Por lo tanto , acaba de crear un estilo CSS en línea que se aplicará también todos los elementos con un atributo de clase en " outerDiv " . Defina las propiedades del estilo entre llaves . Las propiedades se definen como "nombre de : . Pares de valores " <br> 12 <p> Escriba el siguiente marcado entre la <body> y la etiqueta < /body> : <br> <p> < div class = " outerDiv "> <br> <p> caja exterior <br> <p> < /div > <br> <p> al establecer el atributo "class" del elemento <div> a " outerDiv " , usted indica que el estilo que ha definido en el paso 1 se debe aplicar a la div . El contenido del elemento <div> es " externo de la caja . " Este es el texto que se mostrará dentro de la caja . <br> 13 <p> Haga clic en el menú " Archivo" y haga clic en la opción de menú " Guardar" . <br> 14 <p> Llevar el " Nested " ventana del navegador demostración Div al primer plano. Haga clic derecho en la ventana y haga clic en la opción de menú " Actualizar" . Una caja con una frontera del moreno se debe mostrar . Debe contener la "caja exterior . " Text Si no se muestra correctamente , compruebe su margen de beneficio y corregir cualquier error . <br> Crear una Inner Div <br> 15 <p> Agregue el siguiente código de marcado CSS dentro del elemento <style> debajo de la llave de cierre ( } ) del outerDiv estilo se puede aplicar a cualquier elemento que tiene su atributo "class " en " vBarDiv " . El estilo define una barra de negro el 100 por ciento de 100 píxeles de alto y 300 píxeles de largo , que se posicionan en relación con los demás elementos <br> 16 <p> Escriba el siguiente marcado por debajo de la " Caja externa " text : . <br> <p> <div class="vBarDiv"> <br> <p> < /div > <br> 17 <p> Haga clic en el menú " archivo" y haga clic en la opción de menú " Guardar" . <br> 18 <p> Coloque la ventana del navegador " Nested Div demostración " al primer plano. Haga clic derecho en la ventana y haga clic en la opción de menú " Actualizar" . Un cuadro negro debe establecerse dentro de la caja marrón con borde , debajo del texto. Si no es así , compruebe para asegurarse de que usted no hizo un error de mecanografía . <br> Crear Otras Divisiones interiores <br> 19 <p> Escriba el siguiente código de marcado CSS debajo de la llave de cierre del el estilo varBarDiv definición de estilo crea un cuadro rojo que es de 100 píxeles de ancho . El contenido de la caja se centrarán <br> 20 <p> Agregue el marcado siguiente después de la " Caja externa " text : . <br> <p> <div Class="wordDiv"> <br> <p> Inner <br> <p> < /div > <br> 21 <p> Agregue el siguiente marcado debajo del elemento <div> que señala a la barra de negro : <br> <p> < div class = > <br> <p> Box
<div class="escomad2"><script language='javascript' src='http://www.ordenador.online/ad/es/2.js'></script></div>
</div>
<div class=contentpage>
<div class=p1>Página anterior: <a class='LinkPrevArticle' href='http://www.ordenador.online/Programacion/Lenguajes-De-Programación/Cómo-editar-los-datos-en-un-objeto-DataSet-.html' >Cómo editar los datos en un objeto DataSet </a> </div>
<div class=p2>Página siguiente: <a class='LinkNextArticle' href='http://www.ordenador.online/Programacion/Lenguajes-De-Programación/Cómo-declarar-las-variables-como-un-formulario-en-VBA-.html' >Cómo declarar las variables como un formulario en VBA </a> </div>
</div>
<dl class=xgc>
<dt><span>Lenguajes De Programación</span></dt>
<dd><a href="http://www.ordenador.online/Programacion/Lenguajes-De-Programación/Cómo-convertir-un-JDW-a-un-Eclipse-.html">Cómo convertir un JDW a un Eclipse </a></dd><dd><a href="http://www.ordenador.online/Programacion/Lenguajes-De-Programación/Cómo-convertir-una-lista-para-un-conjunto-de-datos-.html">Cómo convertir una lista para un conjunto de datos </a></dd><dd><a href="http://www.ordenador.online/Programacion/Lenguajes-De-Programación/Cómo-combinar-columnas-de-DataGrid-.html">Cómo combinar columnas de DataGrid </a></dd><dd><a href="http://www.ordenador.online/Programacion/Lenguajes-De-Programación/Computer-System-Analysis---Design-.html">Computer System Analysis & Design </a></dd><dd><a href="http://www.ordenador.online/Programacion/Lenguajes-De-Programación/Datos-sobre-MIME-Formato-.html">Datos sobre MIME Formato </a></dd><dd><a href="http://www.ordenador.online/Programacion/Lenguajes-De-Programación/Cómo-utilizar-la-minería-de-datos-Algoritmos-.html">Cómo utilizar la minería de datos Algoritmos </a></dd><dd><a href="http://www.ordenador.online/Programacion/Lenguajes-De-Programación/Cómo-construir-un-índice-invertido-con-MapReduce-.html">Cómo construir un índice invertido con MapReduce </a></dd><dd><a href="http://www.ordenador.online/Programacion/Lenguajes-De-Programación/Cómo-crear-texto-Typewriter-Uso-Programación-HTML-.html">Cómo crear texto Typewriter Uso Programación HTML </a></dd>
</dl>
</div>
<!--right-->
<div class=rightmain>
<div class=esrightlist>
<div class=e1>Los últimos artículos de equipo</div>
<ul>
<li><a href="http://www.ordenador.online/Programacion/Lenguajes-De-Programación/¿Cuál-es-la-diferencia-entre-Visual-Studio-y-Visual-Studio-NET-.html" >¿Cuál es la diferencia entre Visual Studio y Visual Studio NET </a> </li><li><a href="http://www.ordenador.online/Programacion/Lenguajes-De-Programación/Cómo-convertir-valores-del-registro-binario-a-String-.html" >Cómo convertir valores del registro binario a String </a> </li><li><a href="http://www.ordenador.online/Programacion/Lenguajes-De-Programación/Cómo-visualizar-una-lista-de-puntos-en-WPF-.html" >Cómo visualizar una lista de puntos en WPF </a> </li><li><a href="http://www.ordenador.online/Programacion/Lenguajes-De-Programación/Cómo-matar-a-un-comando-con-Python-.html" >Cómo matar a un comando con Python </a> </li><li><a href="http://www.ordenador.online/Programacion/Lenguajes-De-Programación/Cómo-utilizar-un-bucle-For-Next-en-Visual-Basic-.html" >Cómo utilizar un bucle For Next en Visual Basic </a> </li><li><a href="http://www.ordenador.online/Programacion/Lenguajes-De-Programación/Consejos-y-trucos-para-Frontpage-2003-.html" >Consejos y trucos para Frontpage 2003 </a> </li>
</ul>
</div>
<div class=esrightlist>
<div class=e1>Artículos de la popular computadora</div>
<ul>
<li> <a href="http://www.ordenador.online/Programacion/Lenguajes-De-Programación/Incorporado-Funciones-en-T--SQL-.html" >Incorporado Funciones en T -SQL </a></li><li> <a href="http://www.ordenador.online/Programacion/Lenguajes-De-Programación/Game-Maker--Tutorial-Matriz-.html" >Game Maker: Tutorial Matriz </a></li><li> <a href="http://www.ordenador.online/Programacion/Lenguajes-De-Programación/Cómo-instalar-el-ISA-Server-2006-Proxy-Client-.html" >Cómo instalar el ISA Server 2006 Proxy Client </a></li><li> <a href="http://www.ordenador.online/Programacion/Lenguajes-De-Programación/Cómo-compilar-un-archivo-RESX-a-una-DLL-.html" >Cómo compilar un archivo RESX a una DLL </a></li><li> <a href="http://www.ordenador.online/Programacion/Lenguajes-De-Programación/Cómo-dividir-valores-de-un-campo-donde-un-personaje-existe-en-Crystal-Reports-.html" >Cómo dividir valores de un campo donde un personaje existe en Crystal Reports </a></li><li> <a href="http://www.ordenador.online/Programacion/Lenguajes-De-Programación/Cómo-convertir-de-ColdFusion-para-PHP-.html" >Cómo convertir de ColdFusion para PHP </a></li>
</ul>
</div>
<div class="esrightad">
<script language='javascript' src='http://www.ordenador.online/ad/es/r.js'></script>
</div>
<div class=esrightlist>
<div class=e1>Más categorías</div>
<ul>
<li><a href='http://www.ordenador.online/Programacion/C--C-----Programming/' target="_self">C /C + + Programming</a></li>
<li><a href='http://www.ordenador.online/Programacion/Lenguajes-De-Programación/' target="_self">Lenguajes De Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Delphi-Programación/' target="_self">Delphi Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Programación-Java/' target="_self">Programación Java</a></li>
<li><a href='http://www.ordenador.online/Programacion/JavaScript-Programación/' target="_self">JavaScript Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Programación-PHP--MySQL/' target="_self">Programación PHP /MySQL</a></li>
<li><a href='http://www.ordenador.online/Programacion/Perl-Programming/' target="_self">Perl Programming</a></li>
<li><a href='http://www.ordenador.online/Programacion/Python-Programming/' target="_self">Python Programming</a></li>
<li><a href='http://www.ordenador.online/Programacion/Rubí-Programación/' target="_self">Rubí Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Visual-Basics-Programación/' target="_self">Visual Basics Programación</a></li>
</ul>
</div>
</div>
<!--right end-->
<div class="cl"></div>
</div>
<div class=esfoot>
<div class=copy>Conocimientos Informáticos © http://www.ordenador.online</div>
</div>
</body>
</html>
Bloc de notas u otro editor de texto
Internet Explorer u otro navegador
Mostrar más instrucciones
Cómo crear una página Web
1
Haga clic en el botón "Inicio" , seleccione la opción de menú "Todos los programas " , haga clic en la opción " Accesorios " y haga clic en la opción de menú " Bloc de notas " .
2
Escriba el marcado siguiente en la ventana de documento :
Div