Cómo crear un archivo html de índice. Etapas de la creación de una página html. Enlaces entre páginas

Lección 12.

Página de índice.

¿Qué es una página de índice? Este pagina de inicio sitio.

Cada sitio tiene una página de inicio. Supongamos que tenemos un sitio web de automoción con 4 páginas. Esta es una página sobre autos Audi, la segunda es sobre BMW, la tercera es sobre Mercedes y la cuarta es la página principal de nuestro sitio. En consecuencia, la carpeta en la que se encuentra nuestro sitio tendrá 4 archivos. Estos son audi.html, bmw.html, mercedes.html e index.html.

Digamos que nuestro sitio ya está en Internet y tiene nombre de dominio"nemeckieavto.ru".
Sigue el enlace nemeckieavto.ru/audi nuestro archivo se abrirá audi.html
Sigue el enlace nemeckieavto.ru/bmw nuestro archivo se abrirá bmw.html
Sigue el enlace nemeckieavto.ru/mercedes nuestro archivo se abrirá mercedes.html
¡Ahora atención! Para acceder a la página principal de nuestro sitio, no es necesario ingresar barra de direcciones nemeckieavto.ru/index, bastará con entrar nemeckieavto.ru

Para aquellos que no entienden, aquí está la segunda explicación:
1) Cada sitio web en Internet tiene un nombre de dominio (dominio).
2) Cada sitio (a excepción de los de una página) tiene un cierto número de páginas (archivos) que tienen sus propios nombres.
3) Estas mismas páginas (archivos) del sitio estarán disponibles en www.dominio/nombre de la página
4) Página principal del sitio (archivo índice.html) estará disponible en www.dominio

Archivo índice.html V obligatorio presente en absolutamente cualquier sitio web. El sitio no funcionará sin este archivo.
En los sitios de una página solo hay archivo de índice.html, ningún otro archivo.

Creemos tres páginas html más.

En la segunda lección creamos una carpeta "Sitio" y en ella creamos un archivo con extensión html. Lo más probable es que este archivo se llame "nuevo 0". Ahora creemos 3 archivos más en esta carpeta. Para no molestarse con la extensión y la codificación (lección 2), simplemente puede hacer 3 copias de nuestro archivo "nuevo 0". De esta forma tendremos 4 archivos con extensión html. Antes de realizar copias, elimine todos códigos html, que escribimos durante el trabajo. Dejar sólo etiquetas relacionadas con la estructura. paginas html.

Trabajaremos con estos archivos en las siguientes lecciones. Ahora cambiemos el nombre de los archivos y llamémoslos audi.html, bmw.html, mercedes.html e index.html. No utilizar en nombres de archivos letras mayúsculas Aprenderá con qué está conectado esto en la próxima lección. ¡Atención! Si escribo que el archivo debería tener un nombre como bmw.html, esto no significa que debas darle el nombre bmw.html, significa que el archivo debe tener un nombre BMW, A HTML- ¡Esta es la extensión (tipo) del archivo, no parte de su nombre!

Para aquellos que están en el tanque, como resultado, en la carpeta "Sitio" tenemos 4 archivos con extensión html.

Vlad Merzhevich

Desde la perspectiva del desarrollador, el sitio se puede dividir condicionalmente en dos niveles: lógico y físico. En nivel lógico un sitio es una colección de páginas web interconectadas diseño uniforme, estilo y enlaces. Al mismo tiempo, en nivel fisico el sitio también es una colección de archivos diferentes tipos

- puede incluir programas, documentos, imágenes y mucho más.

Pensar detenidamente y crear una estructura de archivos conveniente ayuda no solo al desarrollador a optimizar su trabajo, sino también al visitante a comprender mejor la estructura del sitio.

• Para simplificar, asumiremos que estamos ante un sitio creado utilizando archivos html, sin ningún tipo de programación web.
• Antes de crear carpetas y archivos en la raíz del sitio, es necesario desarrollar la estructura del sitio: qué secciones y subsecciones estarán presentes, cómo se llamarán. A modo de ejemplo, aquí se muestra un diagrama de un sitio web dedicado a la optimización de gráficos. pagina de inicio
• Formatos
• archivos gráficos Resolución de imagen
• Optimización en programa photoshop
• Optimización en Mejoramiento
• formato gif
• formato JPEG
• Antialiasing

corte de imagen Lista de términos Cada sección es un único documento HTML que debes crear y darle un nombre. Es mejor nombrar los nombres de los archivos en caracteres latinos sin espacios en

minúscula . Este enfoque garantiza versatilidad y rendimiento en diferentes plataformas. Antes de nombrar archivos, hay algunas cosas a considerar:

configuración del servidor web

, bajo cuyo liderazgo operará el sitio. Esto incluye qué archivo se descargará primero, si se deshabilitará el acceso a archivos individuales, cómo se realizará el seguimiento de errores y otras cuestiones similares. ¿Qué archivo debo descargar primero? Normalmente, la navegación por un sitio web comienza desde la página de inicio. Con abundancia en la raíz del sitio. varios archivos¿Cómo sabe el servidor web qué descargar automáticamente? Por supuesto, si la ruta al archivo se especifica directamente, no surgen preguntas. en stock. Como regla general, dicho archivo tiene los nombres index.html, index.htm, default.htm; en general, la lista continúa. Para no complicarse la vida averiguando qué archivo es más importante, puede configurarlo usted mismo utilizando el archivo .htaccess, colocándolo en la raíz del sitio. Este archivo es el archivo de configuración del popular servidor web apache

y es un documento de texto normal. En él se debe escribir la siguiente línea.

DirectorioIndex index.html index.htm Donde, separados por un espacio, se indican los nombres de los archivos que deben analizarse para verificar su disponibilidad y ejecutarse automáticamente. Después de esto, al especificar la ruta a diferentes archivos y carpetas, los documentos se abrirán en el navegador, como se muestra en la tabla (indicación protocolo http

:// omitido por brevedad).	Camino
que esta corriendo	www.misitio.ru
www.mysite.ru/index.html	www.mysite.ru/index.html
www.mysite.ru/16.html	www.mysite.ru/16/
www.mysite.ru/16/index.html	www.mysite.ru/1/6

www.mysite.ru/1/6/index.html Como puede verse en la tabla, incluso si la ruta al archivo no está completamente especificada, el propio servidor web sustituirá los valores faltantes. Puedes aprovechar esto creando enlaces a varios documentos

• , esto no afectará su rendimiento.
• el archivo .htaccess se escribe sin ninguna extensión con un punto obligatorio al principio del nombre;
• Es posible que .htaccess no funcione en algunos servidores; Las rutas parciales como se muestran en la tabla solo funcionan bajo gestión de servidores web , en computadora local
• este truco no funcionará; si falta el archivo index.html en carpeta especificada

, el navegador mostrará una lista de los archivos que contiene.

Denegar el acceso a las carpetas Para evitar que los visitantes vean información en carpetas separadas En un sitio, que a veces es necesario para limitar el acceso a información privada y aumentar la seguridad del sitio, existen dos formas principales. El primero es crear archivo vacío index.html y colóquelo en la carpeta deseada. Como se indicó anteriormente, este archivo se descargará primero cuando seleccione una ruta de carpeta. Y como está vacío, no podrás ver nada innecesario. El segundo método es utilizar nuevamente el archivo .htaccess, que debe colocarse en la carpeta deseada. No te sorprendas, esto

archivo universal

y se puede colocar en cualquier cantidad y en cualquier lugar del sitio.

Debes escribir la siguiente información en él. Opciones -Índices Cuando un navegador abre una carpeta que contiene dicho archivo .htaccess, el visitante verá una advertencia de error con el número 403, que indica que el acceso a

este lugar

Todas las imágenes utilizadas en las páginas web suelen almacenarse en una carpeta llamada imágenes o img. Esta tradición sistematiza el material, rompiéndolo en bloques. Resulta que solo hay una cosa para las fotos. ubicación de almacenamiento, para guiones, otro, para estilos, un tercero.

Seguimiento de errores

En creación adecuada todos los enlaces nunca surgen, el llamado " enlaces rotos", cuando el enlace conduce a un archivo cuya ruta o nombre está especificado incorrectamente. Sin embargo este error con el número 404 puede ocurrir simplemente cuando la dirección de la página está escrita incorrectamente. En este caso sería bueno deslizar al usuario un mensaje de error para que no se preocupe y crea que todo se puede corregir. Para ello crean página web separada, que se mostrará justo cuando error similar. Puede volver a vincular el proceso del error y nuestro archivo usando root.htaccess. Se le agrega la siguiente línea.

Documento de error 404 /err404.html

El archivo se llama err404.html y se encuentra en la raíz del sitio; se requiere una barra diagonal (/) antes del nombre del archivo.

Estructura de archivos del sitio.

Volvamos ahora al sitio, estructura de archivos que se debe crear. Hay dos enfoques diferentes aquí. En el primer caso, cada sección corresponde a un documento HTML ubicado en la raíz del sitio. La ruta hacia él se verá como www.mysite.ru/optimize.html. Opción alternativa— crear carpetas que corresponderán a determinadas secciones. Cada carpeta contiene un archivo index.html. Dado que no es necesario especificar este archivo en la dirección, la ruta se verá como www.mysite.ru/optimize.

En la figura. 1 y fig. La Figura 2 muestra dos conjuntos de organización de archivos en el sitio.

La estructura a elegir depende únicamente de la voluntad de los creadores del sitio.

Archivos adicionales Cualquier sitio web no puede prescindir archivos adicionales

, generalmente ubicado en la raíz del sitio. Esto incluye archivos que están diseñados para realizar tareas específicas y tienen un nombre requerido, así como archivos cuyo nombre lo determinan los desarrolladores.

Nombres requeridos

index.html: el nombre de la página principal, así como las páginas web ubicadas en carpetas que deberían abrirse cuando se especifica en la dirección. Este nombre, como ya se mencionó, puede variar dependiendo del tipo de servidor web y su configuración. Pero normalmente así es. htaccess- archivo de configuración Servidor web apache. es el más popular y extendido en el mundo, razón por la cual este archivo se puede encontrar en todas partes. Por supuesto, hay excepciones.

robots.txt es un archivo destinado a motores de búsqueda. Al indexar un sitio, se busca primero en él. Un ejemplo de prohibición de que todos los motores de búsqueda visiten las carpetas del sitio cgi-bin y de imágenes.

Agente de usuario: *
No permitir: /cgi-bin/
No permitir: /images/

favicon.ico es un ícono de sitio que aparece junto a la dirección del sitio cuando lo agrega a la sección "Favoritos" de su navegador.

Este es un dibujo de 16 x 16 píxeles en formato ICO.

Nombres opcionales Hoja de estilo: ningún sitio puede prescindir de los estilos, generalmente colocados en archivo separado

. Esta disposición ofrece varias ventajas: es fácil cambiar la apariencia de los elementos en todas las páginas cambiando los parámetros en un solo lugar, el archivo se almacena en caché y se carga más rápido y se reduce el volumen total de todos los documentos.

El archivo de estilo suele tener una extensión css. Conclusión Aunque los nombres de algunos archivos de servicio dependen de la configuración del servidor y pueden variar de un sitio a otro, los principios dados son típicos para la mayoría de ellos. Para los sitios dinámicos, cuyo contenido se genera mediante un programa, el llamado "motor", la estructura será ligeramente diferente a la que se muestra. Sin embargo, incluso en este caso,

archivos de servicio , como hojas de estilo, .htaccess, favicon.ico y robots.txt permanecerán vigentes. HTML En general aprecio el tiempo.

estudio basico

Como de 2 a 8 horas, el resto es opcional. Y, por supuesto, el tiempo para estudiar depende del interés. Recomiendo dividirlo en 20-30 minutos durante varios días.

¿Estás listo? ¡Entonces vámonos!

1) NO necesitamos una conexión a Internet para crear una página HTML. necesitaremos Elegir editor de texto. Suficiente por primera vez Bloc)

(en él solo necesitamos el comando Guardar como Si desea comenzar inmediatamente a programar en editores de texto especializados, preste atención a: 1) para ventanas Bloc de notas++(descargar o) en tipo (descargar) 2) para Impermeable Y(descargar o) linux Editor de pescado azul Su diferencia con los editores de texto habituales radica principalmente en el hecho de que realizan sangrías automáticas. haga posible volver a guardar el archivo en una codificación diferente (tenga en cuenta que encontrará esto en el futuro), coloree las etiquetas en

2) varios colores como el código al final de la lección. En un editor normal será del mismo color. Cualquier navegador de Internet, p. Explorador de Internet para Windows o Safari, para Mac OS X e iOS. Sí, sí, tú también puedes. , Mozilla, Google Chrome 2) para Ópera navegadores, etc

Comencemos a crear la página HTML.

1) crear una carpeta en el escritorio HTML. Haremos esto para garantizar que las lecciones estén estructuradas y contenidas en un solo lugar.

2) nosotros creamos nuestro archivo en un editor de texto, por ejemplo el Bloc de notas. Próximo Bloc.

Es mejor seleccionar la codificación UTF-8 y luego seleccionar todos los tipos de archivos y seleccione el nombre del archivo con .html al final, por ejemplo índice.html

Seleccionamos el nuestro como directorio (carpeta) donde guardarlo. HTML
Hacer clic ahorrar. ¡Listo!

A menudo se pregunta qué extensión de archivo no visible. Tomémoslo en orden

Poder ver las extensiones de archivos puede ayudar definición precisa tipo de archivo y permite manualmente (con el comando rebautizar) cambiar no solo la extensión, sino también el tipo de archivo (por ejemplo, de txt a html)

Esto NO es lo que debería verse: foto, documento de texto, juego Así es como debería verse: foto.jpg; documento de texto.txt; juego.exe Pero si los nombres de sus archivos aún se ven como en la primera opción (SIN, por ejemplo, .txt; jpg; .exe al final de los nombres de los archivos), haga lo siguiente: Veamos la configuración de archivos y carpetas: Para WindowsXP Abra cualquier carpeta - Herramientas (arriba en el panel) - Opciones de carpeta - Ver - Ocultar extensiones para archivos registrados (desmarcar) - Aplicar Para ventana 7 Abra cualquier carpeta - Organizar - Opciones de archivo y búsqueda - Ver - Ocultar extensiones para tipos de archivos registrados (desmarcar) - Aplicar Para Mac OS Haga clic en el escritorio - Finder - Preferencias - Avanzado - marque la casilla Mostrar todas las extensiones de archivos - Aplicar

3) pegue en él el código completo (junto con los comentarios) a continuación:

titulo de mi pagina

4) abre el archivo. Puedes elegir un navegador diferente para abrir este archivo, para hacer esto, haga clic botón derecho ratón sobre nuestro archivo índice.html - abrir con y seleccione un navegador de la lista, por ejemplo, Internet Explorer, Google Chrome, Mozilla, Yandex Browser, etc.

Como resultado, al abrir el navegador de Internet resultante índice.html, Deberías ver una página como esta:

Figura 1.

En Figura 1 Como resultado, vemos cómo el navegador muestra su página. El texto de los siguientes elementos está resaltado en rojo:

titulo de mi pagina

¡Esta es mi primera página web!

En el código que se presenta a continuación puede ver el mínimo básico de un documento HTML. Es imperativo aprenderlo y no confundir las etiquetas de apertura y cierre.

Etiqueta cabeza Selecciona el encabezado del documento. Contiene elementos principalmente relacionados con ayudar al navegador a procesar los elementos de su página (título, palabras clave, autoría, etc.) Hablaremos específicamente de su contenido más adelante.

Etiqueta título significa título de página. Esta es la única etiqueta contenida en cabeza, que se muestra en la página. Lo que ingreses después de la etiqueta de apertura y antes de la etiqueta de cierre será el Título de tu página en Internet.

Etiqueta cuerpo significa cuerpo de página. Qué incluir después de las etiquetas de apertura y cierre cuerpo y será el Contenido de tu página

cualquier titulo

Solo envía un mensaje de texto

Texto en un párrafo. Se escribirá con nueva linea y terminar con una etiqueta de cierre

Otro texto

Casi todas las etiquetas en HTML apertura y cierre(excepción, por ejemplo, etiqueta img, que indica insertar una imagen).

Permítanme recordarles una vez más que es importante no olvidarse de escribir etiquetas de cierre para todos los demás tipos de etiquetas; de lo contrario, el navegador no entenderá exactamente dónde desea terminar este o aquel elemento. Como a continuación:

quiero resaltar texto gordo, pero este ya esta cursiva

Olvidamos intencionalmente la etiqueta de cierre b después de la palabra en negrita. Como resultado, el navegador mostró lo siguiente

quiero resaltar texto gordo, pero este ya esta cursiva

Como puede ver, el texto estará resaltado en negrita hasta el final, y el que debía estar en cursiva estará tanto en negrita como en cursiva. ¡Así que ten cuidado!

5) Si desea editar algo en su archivo índice.html(y ahora se abre solo en el navegador de forma predeterminada), luego haga clic derecho en nuestro archivo índice.html- elegir abrir con y de la lista seleccionamos un editor de texto, será Bloc u otro editor de texto que haya instalado.

Básicamente explicó los conceptos básicos. Hasta ahora, una página HTML parece bastante simple, pero en las siguientes lecciones le contaré en detalle sobre estos y otros elementos y su propósito: insertaremos imágenes, crearemos enlaces y muchas otras cosas interesantes).

¡Felicidades!
¿No es difícil?)

A continuación veremos ambos métodos.

Alojamiento de un sitio web en el Panel de control

El formulario para iniciar sesión en el Panel de control se encuentra a la derecha esquina superior nuestro sitio web. Para ingresar al Panel de control, indique su nombre de usuario y contraseña, que le serán enviados en una carta después de registrar su cuenta.

Para alojar un sitio web a través del Panel de control, utilice la sección "Administrador de archivos", diseñada para trabajar con archivos en su cuenta. Muestra el contenido actual de la cuenta. En cada cuenta nueva alojamiento virtual la carpeta se encuentra inicialmente público_html, en el que se deben colocar los archivos del sitio. Para ingresar a una carpeta, haga clic en su nombre.

Al ingresar a una carpeta en " Gestor de archivos» se mostrará su contenido:

• carpeta cgi-bin, diseñado para alojar scripts CGI;
• archivo.htaccess, que es un archivo de configuración adicional para el servidor web Apache;
• archivo index.html, que es la página de índice (principal) del sitio (es decir, al ingresar al sitio, el visitante será llevado a esta página).

Contenido de la página índice.html puede ser visto por el dominio principal o (en caso de que el dominio principal aún no esté funcionando).

Esta página contiene información general sobre cómo trabajar con una nueva cuenta, así como nuestra información de contacto. Esta página no será necesaria para que el sitio funcione y debe eliminar los archivos antes de descargarlos. .htaccess 2) para índice.html de la carpeta público_html.

Para eliminar el archivo index.html, debe marcarlo y hacer clic en "Eliminar". Esto se hace para que en el futuro, al cargar el sitio, la primera página que se abra no sea la nuestra. página estándar y la página del sitio recién alojado. El archivo .htaccess también se debe eliminar o se debe cargar un nuevo .htaccess que reemplace el anterior.

Después de la eliminación, puede comenzar a cargar archivos del sitio al servidor. Para hacer esto necesitarás hacer lo siguiente:

• Haga clic en el enlace " Descargar».
• En la ventana que aparece, haga clic en el botón “ Revisar» y seleccione el archivo en su computadora que debe cargarse en su cuenta.
• Después de seleccionar el archivo, haga clic en " Subir».

Una vez que se complete la descarga, la lista de contenido de la cuenta se actualizará y el archivo descargado aparecerá en esa lista. Si todavía hay pocos archivos del sitio, puede descargarlos todos de esta manera. Si necesitas descargar gran número archivos del sitio, se recomienda descargar estos archivos como un archivo. Para hacer esto debes:

• Prepare un archivo en su computadora de los archivos que desea descargar.
• Sube este archivo a tu cuenta.
• Después de la descarga, descomprima el archivo. Para hacer esto, haga clic en el ícono de la carpeta ubicado a la izquierda del nombre del archivo descargado. Una ventana que aparece le pedirá que especifique la ruta. De forma predeterminada, el directorio actual en el que se encuentra el archivo ya está configurado allí, y en caso general Puedes presionar inmediatamente el botón Abrir la cremallera».

Después de completar esta tarea, todos los archivos del archivo estarán disponibles en su cuenta.

El sitio debe tener una página de índice (principal). Por lo tanto, debemos nombrar el archivo que debería abrirse primero al cargar el sitio, index.html, es decir. hacer que este archivo sea indexado. Por ejemplo, si quieres que la página mipágina.html abrió primero al cargar el sitio, luego se debe cambiar el nombre del archivo mypage.html a índice.html. El nombre del archivo debe estar en minúsculas.

Puede cambiar el nombre del archivo en su computadora antes de cargar el sitio en su cuenta o después de cargarlo. Si consideramos la segunda opción, después de la descarga deberá:

• Haga clic en el ícono de ajustes (“operaciones”) que aparece en la línea del archivo cuando pasa el cursor sobre él.
• Seleccione la función "Cambiar nombre" en el menú desplegable.
• En la ventana que aparece, escribe index.html y haz clic en el botón “ Rebautizar" El archivo cargado pasará a llamarse index.html.

Alojamiento de un sitio web mediante el protocolo FTP

Es conveniente utilizar un cliente FTP para colocar los archivos del sitio web en el alojamiento. Un cliente FTP es un programa que le permite administrar un sitio web mediante el acceso FTP a su cuenta.

La conexión se realiza en la ventana del programa, donde se indica el host (el nombre del dominio en el que se encuentra el sitio o la dirección IP del servidor donde se encuentra la cuenta, se enumera en el menú izquierdo del Panel de control ), login y contraseña de la cuenta FTP principal o adicional y puerto 21.

Si no hay ningún cliente FTP instalado en su computadora, se puede realizar una conexión FTP directamente desde el navegador. Para hacer esto, ingrese una dirección como esta en la barra de direcciones de su navegador:

ftp://iniciar sesión: [correo electrónico protegido]

Se presenta información detallada sobre cómo trabajar con FTP en.

Creando una base de datos MySQL

Si se supone que el sitio utiliza una base de datos, puede crearla en la sección "Base de datos MySQL" del Panel de control. Para crear una base de datos, debe hacer clic en el botón "Crear base de datos" y en la ventana que se abre, especificar el nombre de la base de datos y establecer la contraseña que se utilizará al conectarse a la base de datos.

Puede cargar un volcado en la base de datos creada usando el Panel de control; este es el contenido de la base de datos en el formulario archivo de texto, teniendo la extensión “.sql”. El volcado de la base de datos debe estar previamente colocado en la cuenta. En la sección " bases de datos mysql"Para descargar el volcado, existe la opción "importar base de datos desde archivo", al hacer clic en este enlace, se abre una ventana donde botón "Examinar" selecciona el archivo de volcado y el nombre de la base de datos de la lista desplegable.

Se presenta información detallada sobre cómo trabajar con bases de datos.