Índice de archivo html. Crear una página HTML en el Bloc de notas: explicaciones para principiantes. Crear una página html sencilla

Los sitios son diferentes. La opción más sencilla es un sitio web de tarjetas de presentación. Ahí es donde comenzaremos.

sitio web de tarjetas de visita Es un sitio web pequeño, que generalmente consta de una o más páginas web y que contiene información básica sobre una organización, individuo, bienes o servicios. Suele contener información de contacto, una breve descripción de los productos, listas de precios, etc. Un sitio web de tarjeta de presentación (en adelante, simplemente un sitio web) puede contener información tanto estática como dinámica (cambiante). En sus páginas excepto información de texto Puede colocar gráficos (fotos, imágenes), animaciones en forma de videos flash y todo tipo de adornos.

Recolectando materiales

Primero, decida el tema del sitio y si tiene suficiente información. Seleccione textos sobre el tema (es mejor escribirlo usted mismo o al menos modificar el de otra persona), fotografías, imágenes.
Inicialmente escribimos los textos en cualquier editor, sin aplicarle estilos (resaltado, inclinación, color). Continuaremos agregando materiales a medida que estén disponibles).

Crear una carpeta específicamente para los archivos de su sitio web. Se le puede llamar, por ejemplo, “sitio” (el nombre puede ser diferente, pero preferiblemente en latín y corto).

Crear una página html sencilla

Las páginas del sitio se pueden crear en cualquier editor de texto con la ayuda lenguaje de marcado de documentos HTML. abramos bloc de notas y escribe:

Este es mi primer sitio.

En el texto de nuestra primera página HTML, un acceso directo (o etiqueta) para el lenguaje HTML está entre corchetes angulares. Esta es una etiqueta y señala que en este archivo Se utiliza lenguaje HTML. Es decir, todo lo que se encuentra entre las etiquetas. Y- escrito en HTML. La mayoría de los navegadores modernos pueden reconocer un documento sin etiquetas. Y, pero aún así su uso es muy deseable.

Ahora recordemos el archivo llamado index.html en la nueva carpeta que creó.
Abramos el archivo index.html usando un navegador (por ejemplo, Internet de Microsoft Explorador). Veremos esta imagen:

Arroz. 1. Nuestra primera página.

Hay muchos otros atajos (etiquetas) en HTML. Las etiquetas pueden utilizar letras tanto minúsculas como mayúsculas.
Hay etiquetas de apertura y cierre (con una barra "/"). Por ejemplo, la etiqueta- cerrando.
Para algunas etiquetas, no se requiere una etiqueta de cierre emparejada.

Normalmente, las páginas HTML utilizan varias etiquetas obligatorias. Entre ellos está el atajo. (y cerrando) para describir el título de una página html. Aquí puede especificar el nombre de la página. El título debe colocarse entre las etiquetas. . Por ejemplo:

En los navegadores estándar, el título se mostrará en la parte superior del marco principal de la ventana principal, como en la Fig. 1.
porque etiqueta


pagina personal

diseñador nikolenko

Este es mi primer sitio. Dar formato al texto Por ejemplo, copiamos el primer texto encontrado en portal de noticias

e insertamos este texto en nuestro archivo después de las etiquetas

. En la ventana del navegador vemos texto sólido sin formato.

Arroz. 2 - Texto sin formato.

).
El texto se ve mucho mejor si está dividido en párrafos. Hay una etiqueta para esto en los documentos html.

(y emparejado con él Etiqueta Se puede especificar con el parámetro
alineación horizontal
align, que puede tener los siguientes valores:
izquierda: alineación con el borde izquierdo de la ventana del navegador.
centro: se alinea con el centro de la ventana del navegador.

derecha: alineación con el borde derecho de la ventana del navegador.

justificar: alineación del ancho (que se extiende a ambos lados de la ventana del navegador).
Y Si no se especifica el parámetro de alineación, el texto se alinea a la izquierda.
Y Las etiquetas emparejadas también se utilizan con mayor frecuencia para dar formato al texto: - muestra el texto en negrita.- usado para resaltar
...

fragmentos importantes


(n.p. encabezados) texto. Los navegadores suelen mostrar el texto entre las etiquetas en negrita.

Después de formatear el texto, nuestra página se verá así: Arroz. 3 - Texto enriquecido. También puede insertar una imagen en el texto. Seleccione imágenes o fotografías que planea publicar en su sitio web, redúzcalas al tamaño deseado en cualquier
editor gráfico .
y coloque las imágenes en miniatura en la carpeta del sitio (incluso puede crear una subcarpeta img o una imagen para las imágenes del sitio).

Para insertar una imagen en el texto, hay una etiqueta.

En la página con el texto, inserte la siguiente línea donde desea que esté la imagen: hay un parametro con los siguientes valores:
izquierda: la imagen se presiona en el margen izquierdo de la ventana, el texto fluye alrededor de la imagen en el lado derecho
derecha: la imagen se presiona en el margen derecho de la ventana, el texto fluye alrededor de la imagen en el lado izquierdo

Si planea publicar muchas fotos (por ejemplo, fotos de vacaciones o ejemplos de su trabajo), le sugerimos que lo haga utilizando programas ya preparados.

Cómo hacer esto se describe

Enlace entre páginas Y.

En el párrafo anterior, había un enlace en el texto a otro sitio. Para esto se utiliza una etiqueta emparejada.

Por ejemplo, así: aquí... Usando una etiqueta
También puede vincular no sólo a otros sitios, sino también a páginas de su sitio. Y).

Por ejemplo, creemos una segunda página y llamémosla photo.html. Puede crear páginas nuevas simplemente copiando un archivo existente, pero con un nombre diferente.
Lo principal es cambiar cuidadosamente no solo el texto de la nueva página, sino también su título (encerrado entre las etiquetas.

Coloquemos algunas fotos en la nueva página. Esto se puede hacer manualmente o usando los programas descritos y en la primera página (principal) pondremos un enlace a la segunda página, para ello agregaremos la siguiente línea:


Mis trabajos se pueden ver aquí...

Esto es lo que sucede: Arroz. 5. Enlace en el texto. Vale la pena señalar aquí que en el sitio sólo uno la página puede llamarse

índice.html
.

- principal. Cuando un visitante llega a su sitio, se cargará primero. Es aconsejable colocar el sitio web de su tarjeta de presentación en uno gratuito; para ello, debe registrarse. Puede leer cómo hacer esto en nuestras preguntas frecuentes (desde respuestas en inglés hasta preguntas frecuentes): después de tu cuenta se activará en el alojamiento, podrá cargar archivos al servidor mediante una conexión FTP. La forma más sencilla de hacerlo es utilizando un navegador, p. Explorador de Internet"a. Entra en

barra de direcciones
navegador una de las siguientes direcciones:

ftp://[email protected], donde LOGIN es su inicio de sesión y sN.site (s1.site, s2.site, etc.) es el nombre del servidor de alojamiento en el que se encuentra su sitio. Después de esto, aparecerá una ventana en su navegador solicitando su contraseña FTP; ingrésela y tendrá acceso a su

directorio de inicio

en el servidor.

Arroz. 6. Acceder vía ftp mediante un navegador.

Debe copiar los archivos de su sitio web a la carpeta htdocs. Pero antes de eso, recomendamos leer la sección de preguntas frecuentes "". marcado de hipertexto". Es importante comprender que HTML no es un lenguaje de programación, sino un lenguaje de marcado de sitios.

Todo navegadores modernos saber reconocerlo. Luego muestran la información en forma conveniente para el usuario, según lo previsto previamente por el autor.

Este lenguaje utiliza etiquetas especiales. Cada etiqueta realiza su propia función. Hay muchos de ellos. Idealmente, necesitas aprender todo. Pero para un principiante conocimientos basicos bastante.

Conceptos básicos de HTML

Antes de crear una página HTML, necesita saber en qué consiste. Hay dos conceptos en este lenguaje: elemento y etiqueta.

Se utilizan etiquetas de apertura y cierre para indicar dónde comienza y termina este elemento. Se parece a esto.

<открывающий тег>contenido

Como puede ver, la única diferencia entre la etiqueta de apertura y de cierre es "/".

Todo el documento HTML es una colección de estos elementos. Existen ciertos requisitos para la estructura del documento. Todo el contenido de la página debe estar entre dos etiquetas. Y. Cuando escriba código, acostúmbrese a incluir inmediatamente una etiqueta de apertura y cierre.

Recuerda también que la estructura del lenguaje HTML tiene su propia jerarquía. De lo contrario se llama anidamiento. es el más importante, ya que todos los demás están dentro de él.

HTML tiene dos elementos secundarios:

• ... ;
• ..
  
  .

El bloque HEAD indica diversa información de servicio. Esta información no se muestra en el navegador. Por ejemplo, instrucciones para desarrolladores, para cualquier programa, para robots y mucho más.

Lo más importante es que aquí no hay contenido.

La sección CUERPO especifica el contenido del documento que se mostrará al usuario.

Aprenda a hacer inmediatamente abierto y etiquetas cerradas, ya que puede haber 10 elementos anidados. Además, por conveniencia, se recomienda sangrar las etiquetas anidadas. Por ejemplo, así.

Esto se hace para que las etiquetas de igual importancia estén en el mismo nivel y las etiquetas secundarias estén "adentro". Esto hace que sea mucho más fácil comprender y encontrar el código correcto. De lo contrario podrías confundirte. Pero para ahorrar espacio, la propia carrocería se puede realizar sin hendiduras. Esto se hace para que todos los demás no tengan sangrías adicionales. Es recomendable separar todo lo demás.

Cómo crear una página HTML sencilla

Para escribir código necesitas algún tipo de editor. Hay muchos de ellos. Los más populares son Notepad++ y Adobe Dreamweaver. También puedes utilizar un bloc de notas.

Así es como se ve el editor Notepad++.

esto es muy editor conveniente y al mismo tiempo gratis. El Adobe Dreamweaver anterior es una versión paga. La diferencia entre los editores diseñados para escribir y un bloc de notas es que se resaltan etiquetas especiales. Si no está resaltado, entonces lo escribiste incorrectamente.

Para que la luz de fondo coincida con el idioma, se debe especificar en la configuración.

Veamos cómo crear página HTML en un bloc de notas. Es decir, terminemos. parte técnica y luego pasaremos directamente al estudio de las etiquetas.

Cómo crear una página web en el Bloc de notas HTML

Para comenzar, abra el Bloc de notas.

Luego escribe en él lo que se indica en la siguiente captura de pantalla.

Acostúmbrate a escribir con las manos en lugar de simplemente copiar. Cuando escribes con las manos, es mejor que recuerdes toda la base de etiquetas.

Después de esto, puedes abrir el archivo en un navegador y admirar el resultado. Ahora deberías entender cómo crear una página web en un bloc de notas HTML.

Consorcio Mundial W3C

Existe una organización llamada W3C, que desarrolla e implementa todos los estándares para Internet. Todos los navegadores cumplen con estos estándares y procesan el marcado (código) de la página de acuerdo con estas reglas.

En la web oficial de los desarrolladores del lenguaje HTML puedes encontrar una tabla con todas las etiquetas y las reglas para su uso. En este artículo consideramos los más básicos.

Quizás estés pensando, ¿cuáles podrían ser las reglas? Todas las etiquetas descritas tienen su propia recomendación. Hay varios de ellos:

• Etiqueta opcional.
• Prohibido.
• Etiqueta vacía.
• Anticuado
• Perdido.

Etiquetas en HTML

Antes de crear una página HTML, debe comprender qué debe contener la parte del servicio HEAD.

El área HEAD contiene datos obligatorios y etiquetas opcionales. A etiqueta requerida se refiere el titulo. esta designado . Se asigna a todo el documento. Y lo que ves en los resultados. motor de búsqueda Google es la etiqueta del título.

Pasemos a la sección CUERPO. Hay elementos que se muestran en el navegador, y también los hay que no. Por ejemplo, los comentarios no se muestran al usuario. Se pueden utilizar para notas o para dar pistas a otros empleados si trabaja en equipo.

Son designados como

Todo lo que hay en el medio, es considerado por el programa como tal. Tenga en cuenta que no puede anidar una etiqueta de comentario dentro de otra etiqueta de comentario. Porque una vez que abres.

Un ejemplo de tal anidamiento:

continuación del primer comentario -->

El resultado en el navegador será el siguiente

continuación del primer comentario -->

Aquí hay una pieza no será visible. Segunda etiqueta de apertura