Creación de una plantilla de HTML le ayuda a crear rápidamente las futuras páginas de un sitio web. Copie el código de la plantilla y pegarlo en el editor para crear una nueva página. El uso divs significa que usted puede cambiar fácilmente el diseño de su sitio web mediante la edición de un archivo: el archivo CSS , que controla la distribución de los divs a través de todo el sitio. Cosas que necesitará
HTML /CSS editor de su elección
Mostrar más instrucciones
1
Crear un archivo HTML en un editor de su elección.
2
Inserte el siguiente código HTML , lo que crea la estructura de la página e incluye un enlace al archivo CSS. (El archivo CSS se creó en una etapa posterior . )
Layout 1 < /title> <br> <p> <link type="text/css" media="screen" rel="stylesheet" href="MyName.css" /> <br> <p> < /head> <br> < p> <body> <br> <p> < /body> <br> <p> < /html > <br> <p> Añadir un título de su elección para sustituir el texto "Diseño 1 " . <br> Página 3 <p> Añada las siguientes " divs " entre las etiquetas " <body> " . <p> <br> <div id="header"> <br> <p> jefe <br> <p> < /div > <div <br> <p> id="navigation"> <br> <p> navegación <br> <p> < /div > <br> < p> <div id="content"> <br> <p> contenido <br> <p> < /div > <div <br> <p> id="footer"> <br> < p> Pie <br> <p> < /div > <br> <p> se trata de una estructura típica de una página web. La " cabecera" se refiere a la parte superior de la página , el menú está situado por debajo. El contenido principal de cada página individual entra en la sección " Contenido" , y la sección " Pie de página " por lo general se encuentra el menú de abajo en una página web. Cada sección tiene un identificador que se utiliza en el archivo CSS para hacer referencia a cada elemento y colocarlo en la sección correspondiente de la página. <br> 4 <p> Guardar la página. ( Asegúrese de que se guarda como un archivo ". Html" archivo. ) <br> 5 <p> Crear una nueva . " Css" archivo. <br> 6 <p> Escribe el código de la disposición para el esfuerzo documento y luego agregar y manipular la fuente y el color de fondo usando el siguiente código: <br> <p> * { <br> margen <p> : 0 ; <br> <p> padding : 0 ; <br> < p >} <br> <p> body { <br> <p> fondo : # eeeeee ; <br> <p> font- family: sans -serif ; <br> <p> font- size: 12px ; <br> <p> } <br> 7 <p> Añada el estilo de la div de encabezado , que definirá la altura y el color: <br> <p> div # header { <br> <p> altura : 160px ; <br> <p> fondo : # 800000 ; } <br> <p> <br> 8 <p> Defina el estilo para los demás elementos div de la página: la " navegación " , el "contenido " y el " pie de página ": <br> <p> div # { navegación <br> <p> fondo : blanco; <br> ancho <p> : 25 % ; <br> <p> float : left; <br> < p >} <br> <p> div # content { <br> margen <p> : 0 25 % ; <br> <p> fondo : # BDBD00 ; <br> <p> } <br> <p> div # footer { <br> <p> fondo : # 800000 ; <br> ancho <p> : 100 % ; <br> <p> clear: left ; <br> <p> } <br> 9 < p > Guarde el archivo como " MyName.css " . <br> 10 <p> Pruebe la página en un navegador , abra la página HTML que acaba de crear . Copia el código HTML y añadir contenido aplicable para crear cada nueva página de su sitio web . <br> <br>
<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/software/Código-abierto/144045.html' >¿Qué significa Open Source </a> </div>
<div class=p2>Página siguiente: <a class='LinkNextArticle' href='http://www.ordenador.online/software/Código-abierto/144047.html' >Problemas con OpenOffice y Foxfire </a> </div>
</div>
<dl class=xgc>
<dt><span>Código abierto</span></dt>
<dd><a href="http://www.ordenador.online/software/Código-abierto/144214.html">¿Cuál es la mejor forma de eliminar todos los rastros de un historial de exploración </a></dd><dd><a href="http://www.ordenador.online/software/Código-abierto/143761.html">Cómo corregir un error Sandbox Emerge </a></dd><dd><a href="http://www.ordenador.online/software/Código-abierto/143852.html">Cómo convertir números de punto flotante a binario </a></dd><dd><a href="http://www.ordenador.online/software/Código-abierto/334916.html">Implementar un sumador completo usando decoder? </a></dd><dd><a href="http://www.ordenador.online/software/Código-abierto/144064.html">Cómo alojar un servidor de computadora gratis </a></dd><dd><a href="http://www.ordenador.online/software/Código-abierto/144175.html">Cómo instalar sistemas operativos libres para Ordenadores </a></dd><dd><a href="http://www.ordenador.online/software/Código-abierto/143887.html">Cómo instalar Delta paquete Eclipse 3.3 </a></dd><dd><a href="http://www.ordenador.online/software/Código-abierto/286064.html">¿Qué es la informática de código abierto? </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/software/Código-abierto/144193.html" >Sun Java Struts Tutorial </a> </li><li><a href="http://www.ordenador.online/software/Código-abierto/143945.html" >Cómo instalar un servidor de VLC </a> </li><li><a href="http://www.ordenador.online/software/Código-abierto/144177.html" >¿Cómo puedo ocultar mi ISP Dirección Totalmente Gratis </a> </li><li><a href="http://www.ordenador.online/software/Código-abierto/143912.html" >Cómo crear etiquetas META en Joomla SEO </a> </li><li><a href="http://www.ordenador.online/software/Código-abierto/144239.html" >Cómo instalar Java Biblioteca </a> </li><li><a href="http://www.ordenador.online/software/Código-abierto/143998.html" >Cómo cambiar el nombre del administrador de OpenCart 1.4.8 </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/software/Código-abierto/144221.html" >Alternativas a Microsoft Streets & Trips </a></li><li> <a href="http://www.ordenador.online/software/Código-abierto/143901.html" >Diferencias entre la CSS y CSS3 </a></li><li> <a href="http://www.ordenador.online/software/Código-abierto/339480.html" >¿Qué programas que traducen el código fuente al código de objeto? </a></li><li> <a href="http://www.ordenador.online/software/Código-abierto/143811.html" >El Best Lossless PNG optimización Herramientas </a></li><li> <a href="http://www.ordenador.online/software/Código-abierto/143853.html" >Cómo instalar Calamar Proxy Server </a></li><li> <a href="http://www.ordenador.online/software/Código-abierto/143816.html" >Cómo mover mensajes de correo electrónico de Thunderbird a una memoria USB </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/software/Adobe-Illustrator/' target="_self">Adobe Illustrator</a></li>
<li><a href='http://www.ordenador.online/software/Software-de-Animación/' target="_self">Software de Animación</a></li>
<li><a href='http://www.ordenador.online/software/Antivirus-Software/' target="_self">Antivirus Software</a></li>
<li><a href='http://www.ordenador.online/software/Software-Audio/' target="_self">Software Audio</a></li>
<li><a href='http://www.ordenador.online/software/Copia-de-seguridad-de-datos/' target="_self">Copia de seguridad de datos</a></li>
<li><a href='http://www.ordenador.online/software/Grabar-CDs/' target="_self">Grabar CDs</a></li>
<li><a href='http://www.ordenador.online/software/Grabar-DVDs/' target="_self">Grabar DVDs</a></li>
<li><a href='http://www.ordenador.online/software/compresión-de-datos/' target="_self">compresión de datos</a></li>
<li><a href='http://www.ordenador.online/software/Software-de-base-de-datos/' target="_self">Software de base de datos</a></li>
<li><a href='http://www.ordenador.online/software/edición/' target="_self">edición</a></li>
<li><a href='http://www.ordenador.online/software/desktop-Video/' target="_self">desktop Video</a></li>
<li><a href='http://www.ordenador.online/software/Software-de-vídeo-digital/' target="_self">Software de vídeo digital</a></li>
<li><a href='http://www.ordenador.online/software/Drupal/' target="_self">Drupal</a></li>
<li><a href='http://www.ordenador.online/software/Software-Educativo/' target="_self">Software Educativo</a></li>
<li><a href='http://www.ordenador.online/software/Ingeniería-del-Software/' target="_self">Ingeniería del Software</a></li>
<li><a href='http://www.ordenador.online/software/Tipos-de-extensiones-de-archivos/' target="_self">Tipos de extensiones de archivos</a></li>
<li><a href='http://www.ordenador.online/software/Software-financiero/' target="_self">Software financiero</a></li>
<li><a href='http://www.ordenador.online/software/GIMP/' target="_self">GIMP</a></li>
<li><a href='http://www.ordenador.online/software/Graphics-Software/' target="_self">Graphics Software</a></li>
<li><a href='http://www.ordenador.online/software/Software-Home-Recording/' target="_self">Software Home Recording</a></li>
<li><a href='http://www.ordenador.online/software/Microsoft-Access/' target="_self">Microsoft Access</a></li>
<li><a href='http://www.ordenador.online/software/Microsoft-Publisher/' target="_self">Microsoft Publisher</a></li>
<li><a href='http://www.ordenador.online/software/Microsoft-Word/' target="_self">Microsoft Word</a></li>
<li><a href='http://www.ordenador.online/software/Código-abierto/' target="_self">Código abierto</a></li>
<li><a href='http://www.ordenador.online/software/Otro-Software-Informática/' target="_self">Otro Software Informática</a></li>
<li><a href='http://www.ordenador.online/software/Juegos-de-PC/' target="_self">Juegos de PC</a></li>
<li><a href='http://www.ordenador.online/software/Photoshop/' target="_self">Photoshop</a></li>
<li><a href='http://www.ordenador.online/software/Formato-de-Documento-Portátil/' target="_self">Formato de Documento Portátil</a></li>
<li><a href='http://www.ordenador.online/software/PowerPoint/' target="_self">PowerPoint</a></li>
<li><a href='http://www.ordenador.online/software/Software-para-presentaciones/' target="_self">Software para presentaciones</a></li>
<li><a href='http://www.ordenador.online/software/Software-de-Productividad/' target="_self">Software de Productividad</a></li>
<li><a href='http://www.ordenador.online/software/Quicktime/' target="_self">Quicktime</a></li>
<li><a href='http://www.ordenador.online/software/Gestión-de-Escritorio-remoto/' target="_self">Gestión de Escritorio remoto</a></li>
<li><a href='http://www.ordenador.online/software/SQL-Server/' target="_self">SQL Server</a></li>
<li><a href='http://www.ordenador.online/software/Skype/' target="_self">Skype</a></li>
<li><a href='http://www.ordenador.online/software/Software-versiones-beta/' target="_self">Software versiones beta</a></li>
<li><a href='http://www.ordenador.online/software/Consultores-de-Software/' target="_self">Consultores de Software</a></li>
<li><a href='http://www.ordenador.online/software/Las-compañías-de-desarrollo-de-software/' target="_self">Las compañías de desarrollo de software</a></li>
<li><a href='http://www.ordenador.online/software/Licencias-de-software/' target="_self">Licencias de software</a></li>
<li><a href='http://www.ordenador.online/software/Hojas-de-cálculo/' target="_self">Hojas de cálculo</a></li>
<li><a href='http://www.ordenador.online/software/Impuestos-Preparación-de-Software/' target="_self">Impuestos-Preparación de Software</a></li>
<li><a href='http://www.ordenador.online/software/Software-de-utilidades/' target="_self">Software de utilidades</a></li>
<li><a href='http://www.ordenador.online/software/Web-Clip-Art/' target="_self">Web Clip Art</a></li>
<li><a href='http://www.ordenador.online/software/Windows-Media-Player/' target="_self">Windows Media Player</a></li>
<li><a href='http://www.ordenador.online/software/Software-de-Procesamiento-de-Texto/' target="_self">Software de Procesamiento de Texto</a></li>
<li><a href='http://www.ordenador.online/software/Facebook/' target="_self">Facebook</a></li>
<li><a href='http://www.ordenador.online/software/Twitter/' target="_self">Twitter</a></li>
<li><a href='http://www.ordenador.online/software/Instagram/' target="_self">Instagram</a></li>
<li><a href='http://www.ordenador.online/software/LinkedIn/' target="_self">LinkedIn</a></li>
<li><a href='http://www.ordenador.online/software/TikTok/' target="_self">TikTok</a></li>
<li><a href='http://www.ordenador.online/software/WhatsApp/' target="_self">WhatsApp</a></li>
<li><a href='http://www.ordenador.online/software/WordPress/' target="_self">WordPress</a></li>
<li><a href='http://www.ordenador.online/software/Chrome/' target="_self">Chrome</a></li>
<li><a href='http://www.ordenador.online/software/Discord/' target="_self">Discord</a></li>
<li><a href='http://www.ordenador.online/software/Amazon/' target="_self">Amazon</a></li>
</ul>
</div>
</div>
<!--right end-->
<div class="cl"></div>
</div>
<div class=esfoot>
<div class=copy>Conocimiento de la computadora © http://www.ordenador.online</div>
</div>
</body>
</html> 