Scribd
Cargar
9 vistas

Estructura del código HTML

El documento proporciona instrucciones para crear un sitio web básico, incluyendo la creación de un archivo index.html y páginas adicionales como arquitectura.html, lenguaje.html y css.html. También se detalla la creación de archivos CSS y JS, así como el contenido de cada archivo. Finalmente, se incluyen instrucciones para ejecutar el proyecto localmente y se describe la estructura del proyecto.

Cargado por

Fabian Vilchis
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
9 vistas

Estructura del código HTML

El documento proporciona instrucciones para crear un sitio web básico, incluyendo la creación de un archivo index.html y páginas adicionales como arquitectura.html, lenguaje.html y css.html. También se detalla la creación de archivos CSS y JS, así como el contenido de cada archivo. Finalmente, se incluyen instrucciones para ejecutar el proyecto localmente y se describe la estructura del proyecto.

Cargado por

Fabian Vilchis
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 8

1. Crea el Archivo index.

html

o En la carpeta principal mi_sitio_web, crea un archivo llamado


index.html.

2. Crea Páginas Adicionales

o Crea una carpeta llamada pages y dentro de ella, crea


archivos como arquitectura.html, lenguaje.html, y css.html.

3. Crea Archivos CSS y JS

o En assets/css, crea un archivo llamado styles.css.

o En assets/js, crea un archivo llamado script.js.

Contenido de los Archivos

1. index.html

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-


scale=1.0">

<title>Página de Inicio</title>

<link rel="stylesheet" href="assets/css/styles.css">

</head>

<body>

<header>

<h1>Bienvenido a Mi Sitio Web</h1>

<nav>

<ul>

<li><a href="pages/arquitectura.html">Arquitectura de
Servicios</a></li>

<li><a href="pages/lenguaje.html">Lenguaje de
Marcas</a></li>
<li><a href="pages/css.html">CSS3</a></li>

</ul>

</nav>

</header>

<main>

<p>Este sitio web explora temas importantes de desarrollo


web.</p>

</main>

<footer>

<p>&copy; 2024 Mi Sitio Web</p>

</footer>

<script src="assets/js/script.js"></script>

</body>

</html>

2. arquitectura.html

html

Copiar código

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<title>Arquitectura de Servicios</title>

<link rel="stylesheet" href="../assets/css/styles.css">

</head>

<body>

<header>

<h1>Arquitectura de Servicios</h1>
<nav>

<a href="../index.html">Inicio</a>

</nav>

</header>

<main>

<h2>Evolución del Desarrollo Web</h2>

<p>La evolución del desarrollo web ha llevado a arquitecturas más


eficientes...</p>

<img src="../assets/images/arquitectura.jpg" alt="Arquitectura


Cliente-Servidor">

</main>

<footer>

<p>&copy; 2024 Mi Sitio Web</p>

</footer>

</body>

</html>

3. lenguaje.html

html

Copiar código

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<title>Lenguaje de Marcas</title>

<link rel="stylesheet" href="../assets/css/styles.css">

</head>

<body>

<header>
<h1>Lenguaje de Marcas</h1>

<nav>

<a href="../index.html">Inicio</a>

</nav>

</header>

<main>

<h2>Ejemplos de HTML5</h2>

<p>A continuación, algunos ejemplos de etiquetas HTML5:</p>

<pre><code>&lt;p&gt;Texto de párrafo&lt;/p&gt;</code></pre>

<pre><code>&lt;h1&gt;Título Principal&lt;/h1&gt;</code></pre>

<pre><code>&lt;input type="text"&gt;</code></pre>

<!-- Agrega más ejemplos según sea necesario -->

</main>

<footer>

<p>&copy; 2024 Mi Sitio Web</p>

</footer>

</body>

</html>

4. css.html

html

Copiar código

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<title>CSS3</title>

<link rel="stylesheet" href="../assets/css/styles.css">


</head>

<body>

<header>

<h1>CSS3</h1>

<nav>

<a href="../index.html">Inicio</a>

</nav>

</header>

<main>

<h2>Ejemplos de CSS3</h2>

<style>

.animacion {

width: 100px;

height: 100px;

background-color: red;

animation: mover 2s infinite;

@keyframes mover {

0% { transform: translateX(0); }

100% { transform: translateX(100px); }

</style>

<div class="animacion"></div>

</main>

<footer>

<p>&copy; 2024 Mi Sitio Web</p>

</footer>
</body>

</html>

5. styles.css

css

Copiar código

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

header {

background: #007BFF;

color: white;

padding: 20px;

text-align: center;

nav ul {

list-style: none;

padding: 0;

nav a {

color: white;

text-decoration: none;

margin: 0 15px;
}

footer {

text-align: center;

padding: 20px;

background: #f1f1f1;

6. script.js

javascript

Copiar código

// Aquí puedes agregar interacciones JavaScript si es necesario

Documentación

1. Instrucciones para Ejecutar el Proyecto Localmente

 Instalación de XAMPP/WAMP:

o Descarga e instala XAMPP o WAMP.

 Coloca la Carpeta del Proyecto:

o Copia mi_sitio_web dentro de la carpeta htdocs de XAMPP o


la carpeta www de WAMP.

 Ejecuta el Servidor:

o Abre el panel de control de XAMPP/WAMP y inicia el servidor


Apache.

 Accede al Sitio Web:

o Abre un navegador y escribe


http://localhost/mi_sitio_web/index.html.

2. Estructura del Proyecto

 La estructura general del proyecto incluye una carpeta principal


mi_sitio_web que contiene:

o index.html: Página de inicio.


o pages/: Carpeta para páginas adicionales (arquitectura,
lenguaje, CSS).

o assets/: Carpeta que contiene css/, js/ y images/.

 Cada sección del sitio se relaciona a través de enlaces en la


navegación.

Diagramas

Para crear diagramas de la estructura, puedes utilizar herramientas


como Lucidchart, Draw.io, o simplemente dibujarlos a mano.

Si necesitas más detalles o ayuda en un área específica, ¡háznoslo


saber!

También podría gustarte