Creando tu propia página web sobre el tema. Creando la primera página html
9 votosBienvenido a las páginas del blog Start-Luck. Hoy me gustaría mostrarles cómo usar el código. Escribir sitios web es una actividad interesante que puede parecer increíblemente difícil para muchos. De hecho, se puede crear una página sencilla en sólo 5 minutos.
En este artículo hablaré sobre la creación de una página html. Completaremos esta tarea en menos de 10 minutos y luego veremos las etiquetas principales con más detalle. Sería un error llamar a una publicación de este tipo una lección. Es más bien una semilla diseñada para mostrarte la simplicidad del trabajo y darte el deseo de seguir adelante, aprender más y hacerlo mejor.
Cómo crear una páginaTe sugiero que hagas la primera página en un bloc de notas. La más sencilla, que se encuentra en el menú Inicio, es la carpeta "Accesorios". No es necesario descargar nada todavía. Intenta usar lo que tienes.
Abra el documento.
Pegue este código en él.
| mi primera pagina Hemos llegado al fondo Ahora sabes un poco más sobre las etiquetas y puedes utilizarlas. Intentemos insertar un enlace para vincular varias páginas. Por ejemplo, aquí hay un enlace a mi blog, Start-Luck, que simplemente habla de "cosas difíciles". |
Mi primera página Crear una página es más fácil de lo que crees Muchos pueden pensar que crear sitios web es difícil, incluso imposible. Para hacer esto necesitas estudiar, aprender y hacer mucho. De hecho, hay alrededor de 100 etiquetas que ni siquiera necesitas aprender. Sólo es importante entender qué se usa y dónde. Puede buscar información en varias hojas de trucos y, con el tiempo, comenzará a recordar las etiquetas automáticamente.
Código simple para hacer que el texto sea rojo
No es mucho más difícil escribir en negrita.
Hemos llegado al fondo
Ahora sabes un poco más sobre las etiquetas y puedes utilizarlas. Intentemos insertar un enlace para vincular varias páginas juntas.
Bueno, eso es todo. Tu primera página está lista
El archivo debe llamarse index.html. Fin ".html" indica la extensión del archivo. Si simplemente ingresa el nombre del índice, el documento se guardará como un archivo de texto y el navegador no lo abrirá.
Guardé el documento en mi escritorio. Ahora necesitas encontrarlo, hacer clic derecho y abrirlo usando cualquier navegador. Elegiré Google Chrome.
Así es como se ve la página que acabo de crear. El tuyo no será diferente. Todo es exactamente igual: con imágenes y fuente de color.
Ahora hablaré de las etiquetas con más detalle, pero por ahora simplemente eliminemos “del título centro" e inserte una línea que contenga la palabra "Color". Por cierto, ya escribí. Es muy sencillo, recomiendo leerlo.
Guarde el documento nuevamente, esta vez simplemente puede usar el método abreviado de teclado Ctrl + S y luego actualizar la página en el navegador usando el botón F5.
Recuerde, casi cualquier etiqueta debe abrirse y cerrarse. Es decir, el código con una barra debe estar ubicado en algún lugar. En este caso queda así: .
Verás que el título se ha vuelto rojo. De la misma forma, puedes darle el tono deseado a cualquier parte del texto.
Bueno, eso es todo, el ejemplo está listo y deberías estar orgulloso de ti mismo. Por supuesto, todavía no está en línea; para ello, es necesario publicar la página web proporcionada por el hosting. También necesitas conectar tu dominio para que otras personas puedan ver tu creación.
Por ahora, sólo tú puedes ver la página. Pero hay que admitir que un lugar así sólo puede sorprender a una persona de la Edad del Hierro. Pero este es el primer intento, hagámoslo aún más exitoso entendiendo las etiquetas que usamos. Esto te ayudará a aprender cómo crear tus propios proyectos sin la ayuda de nadie.
EtiquetasCon su permiso, cambiaré al programa NotePad++. Tiene una serie de ventajas en comparación con un bloc de notas normal. Ahora realmente necesitaré resaltar etiquetas para mostrarles los elementos de los que hablaré. En general, si vas a aprender HTML, te recomiendo instalar este programa gratuito.
Ella no es la única y puedo ofrecerle algunas más si alguien está interesado en alternativas. Pasaremos a la parte teórica.
BásicoLa página comienza y termina con etiquetas. . Muestran al navegador que se trata de un documento web creado con HTML.
Luego viene o título. Contiene la información más importante sobre la página, en nuestro caso: . Si aún no ha encontrado la frase "Mi primera página", que está presente en el código, preste atención a la pestaña, encima de la línea de búsqueda.
son las etiquetas son responsables del inicio y final de la información principal de la página.
Etiqueta indica que la frase es un título. De forma predeterminada, es un poco más grande que el texto principal y está resaltado en negrita. Si usted y yo ahora escribiéramos no solo en html, sino que también creáramos un archivo CSS con el que nuestro archivo se superpusiera, podríamos controlar el tamaño, la fuente e incluso el color de todos los títulos de la página sin escribir. estilo de fuente, como hicimos en el ejemplo. Aunque es demasiado pronto para hablar de esto también.
Por cierto, el título y el H1 influyen a la hora de asignar un lugar a su sitio en los resultados de búsqueda. Debes tratarlos con mucha atención y no escribir nada dentro porque sí. Están relacionados con. Además de h1, también existen h2, h3, h4.
En la misma línea hay una apertura y un cierre. . Gracias a este elemento, puedes alinear el texto en el medio. Si se elimina esta etiqueta, el texto se alineará a la derecha.
- una de las pocas etiquetas individuales. Es decir, funciona por sí solo. Gracias a esto, saltas elementos de una línea a otra. En pocas palabras, usted sangra. Lo escribimos una vez, lo que significa que bajamos una vez, dos veces, como hice yo, y la sangría resultó ser un poco más grande.
Luego viene la etiqueta imagen, es decir, imagen, cuadro. Se abre el corchete, se ingresa en él toda la información básica sobre la imagen y solo después se cierra. Cabe señalar que imagen es una etiqueta, y todos los demás elementos de código que caben dentro son sus atributos.
Lo primero es alternativo, es decir, una descripción. Esto también es necesario para la optimización. A veces también se añade título. Cuando pasa el mouse sobre la imagen, aparece una información sobre herramientas junto al cursor cuando la página ya está abierta en el navegador.
Era posible cargar el dibujo en la carpeta del sitio y escribir la ruta, pero tomé la ruta simple. Encontré una imagen en Pixabay, la abrí en una ventana nueva y pegué el enlace.
en la etiqueta src se especifica la ruta a la imagen. Es él quien le dice al navegador qué debe moverse a continuación para encontrar la imagen deseada y en qué dirección mirar; usted mismo lo escribe.
se encarga de darle algún estilo especial a parte del texto, por ejemplo, como en nuestro caso, un color diferente. estilo = "color: rojo" indica que el color será rojo. Si quieres amarillo, escribe amarillo, verde - verde. Puede utilizar códigos de color de Photoshop.
ayuda a poner el texto en negrita.
dibuja una línea horizontal. Es simple y se usa sólo cuando está cerrado. si escribes varias veces, obtendrá exactamente la misma cantidad de franjas horizontales cuando abra la página en el navegador.
Campo de golfle dice al navegador que habrá un enlace a continuación. Quiere redirigir al lector a una dirección diferente. Esta etiqueta viene con un atributo obligatorio. href=”dirección”. Las comillas contienen la ruta a donde el navegador debe llevar al visitante de la página. Después de escribir esta etiqueta, se inserta una descripción, una palabra o varias, que, al hacer clic, llevará al lector más lejos. Una vez que se cumplan estas condiciones, puede insertar una segunda etiqueta de cierre. .
Después de escribir la parte principal de la página, cierra la etiqueta. cuerpo, ya que el cuerpo está terminado. E indica que dejas de usarlo por hoy. HTML .
Si desea obtener más información sobre las etiquetas HTML y aprender a insertar no solo imágenes, sino también videos, crear botones, varios formularios, listas, párrafos, puedo ofrecerle un curso gratuito de Evgeniy Popov " Conceptos básicos de HTML" Sólo 33 lecciones te ayudarán a alcanzar el siguiente nivel.
También me gustaría recomendarte un curso en vídeo que te explica cómo se diseñan los sitios web. Todo el proceso se muestra con ejemplos reales, lo cual es especialmente bueno. El curso está destinado tanto a principiantes que ni siquiera conocen HTML todavía, como a aquellos que ya conocen bien HTML y CSS, pero no saben cómo diseñar bien sitios web. Puedes obtener información más completa siguiendo el enlace: www.srs.myrusakov.ru/makeup
Además, llévate Libro gratuito sobre creación de sitios web.! Este libro está destinado a principiantes y aquí es donde se crea el sitio web DESDE y HACIA. Es decir, se prepara un diseño, luego se diseñan las páginas, se escribe la parte del software y luego se publica el sitio en Internet. El autor comenta todo cuidadosamente y el libro contiene muchas capturas de pantalla e ilustraciones. Además, la peculiaridad del libro es que no se trata de crear un sitio abstracto, sino uno completamente real que existe en Internet.
Hoy has hecho mucho, porque el primer paso es el más difícil.
Suscríbete al boletín y grupo vkontakte y aprenda también: cómo y por qué necesita un motor de sitios web, qué son el diseño de bloques y la cuadrícula modular, cómo escribir sitios web correctamente y mucho más.
¡Nos vemos de nuevo y mucha suerte!
El sitio es en realidad una colección de archivos de código en varios idiomas. Y el código se puede escribir en cualquier editor de texto normal, incluso en el Bloc de notas. Por supuesto, es mejor utilizar software más avanzado, como Notepad++ o programas de desarrollo completos. Bueno, está bien, veamos cómo hacer un sitio web en un bloc de notas usando html y css.
Cómo crear un sitio web desde cero en HTML en el Bloc de notas: instrucciones paso a pasoY aquí está nuestra palabra clave: HTML. Es a partir de este lenguaje que comienza la creación de un sitio web. Es imposible imaginar el desarrollo web sin él. Es como intentar cocinar sopa sin agua. No se apresure a cerrar la página si es un cero absoluto en HTML. En esta instrucción paso a paso, crearemos juntos un sitio web simple e intentaré explicar los fragmentos de código que agregaremos al bloc de notas.
Paso 1: crear archivosAl crear un sitio web HTML en el Bloc de notas, debe comenzar creando dos documentos de texto en alguna carpeta vacía. Uno debería recibir la extensión .html y el segundo .css. Los nombres pueden ser cualquier cosa. Tenga en cuenta que no es site.html.txt, sino site.html.
Para hacer esto, al guardar el documento manualmente, agréguele una extensión usando un punto. Hacemos la misma manipulación con el segundo archivo, pero le damos la extensión .css. Ah, sí, no olvides seleccionar la codificación UTF-8.
Paso 2. Colocación de la estructura.Los archivos han sido creados y puedes empezar a trabajar. Abra el documento html. Aquí es donde se desarrollará el trabajo principal. El componente básico de este lenguaje son las etiquetas: palabras especiales entre paréntesis angulares que le indican al navegador qué mostrar en una página web.
Insertemos algo en nuestro documento, de lo contrario estará completamente vacío.
¡Hola Mundo! ¡Hola Mundo!
Entonces, insertamos un montón de etiquetas a la vez y tal vez no entiendas nada. Intente abrir la página en su navegador. Allí verás las palabras “Hola mundo” si todo se hace correctamente. Esta es, de hecho, la página web más sencilla.
html es un contenedor para todas las demás etiquetas. Contiene toda la página web.
En la parte superior indicamos el tipo de documento. La etiqueta principal es información de servicio sobre la página. Aquí usamos una etiqueta para establecer el nombre de la página, que se mostrará en la línea superior del navegador. A continuación, configuramos la codificación e incluimos el archivo CSS usando la etiqueta.
Como puede ver, hay etiquetas individuales y emparejadas. Ahora no me detendré en esto en detalle, depende de las funciones que realice el equipo.
Paso 3: planificaciónAhora dejemos el código en paz por un minuto y pensemos. ¿En qué crees que consiste un recurso web típico? Por supuesto, hay muchos en la red y todos son diferentes, pero hay algunos elementos estructurales idénticos, ¿verdad? Por ejemplo, menús verticales y horizontales, columnas laterales, encabezados (la parte superior donde se encuentra el logotipo) y el pie de página (la parte inferior del sitio).
Entonces, planifiquemos cómo crear nuestro primer sitio web sencillo. En este asunto, todo debe empezar con la planificación. Es necesario resaltar las partes estructurales de la futura plantilla, en qué consistirá. Digamos que nuestra plantilla simple tendrá un encabezado, una parte del cuerpo, una columna lateral y un pie de página o pie de página (lo mismo).
Paso 4. ¡Empecemos!Esto significa que necesitamos 4 bloques principales. En HTML es posible anidar un número ilimitado de otras etiquetas en una etiqueta emparejada, por lo que sugiero el siguiente método:
Cree un contenedor común en el que se ubicarán nuestros 4 bloques principales.
Así que volvamos al código. Lo escribiremos en la etiqueta del cuerpo, ya que representa la página futura. No dudes en eliminar la inscripción "Hola, mundo" y escribir esto:
Este es nuestro encabezado Esta es la barra lateral Este es el contenido Pie de página
Por lo tanto, creamos un bloque grande en el que colocamos los 4 restantes. El bloque en html se crea mediante una etiqueta div emparejada, que no tiene los atributos requeridos, pero inmediatamente agregué una identificación única a cada uno de ellos para poder diseñarlos más tarde. la apariencia a través de CSS.
Copie este código usted mismo y actualice la página en su navegador. Por ahora solo ves 4 líneas de texto frente a ti, pero está bien, ¡ahora las convertiremos en un sitio web!
Ahora comencemos a diseñar nuestros bloques. Por supuesto, debes comenzar con el contenedor más grande. Creamos un archivo css al principio, pero nunca le escribimos nada. Es hora de arreglar esto. Agreguemos el siguiente código allí:
*( tamaño de caja: cuadro de borde ) #main( ancho: 810px; margen: 0 automático; borde: 5px negro sólido )
La primera regla establece el comportamiento de los bloques para que el relleno y los bordes no aumenten su ancho. Más adelante en el código nos referimos al bloque con el identificador main , para ello basta con poner un hash y agregar el nombre del identificador. Inmediatamente después de esto, se abren llaves que enumeran las reglas de apariencia que se aplicarán al elemento.
Establecemos el ancho del contenedor general en 810 píxeles, la regla automática margen: 0 establece el bloque en el centro, es decir, nuestro sitio se mostrará bien en el centro y no presionado hacia el borde izquierdo. La última propiedad, borde, agrega un borde negro sólido a cada lado del bloque.
Bueno, hemos creado estilos para el contenedor principal. En la página web todavía mostramos 4 líneas de texto, pero en un marco negro. Sigamos adelante.
Ahora es el momento de personalizar la apariencia de los cuatro componentes principales de nuestra página. Proporcionaré inmediatamente el código y lo comentaré a continuación.
#header(alto: 100px; borde inferior: 5px negro sólido) #sidebar(ancho: 200px; alto: 500px; flotante: izquierda; borde derecho: 5px negro sólido) #content(ancho: 600px; flotante: derecha; alto : 500px ) #footer( altura: 75px; claro: ambos; borde superior: 5px negro sólido; )
Como puedes imaginar, simplemente me refiero a elementos con diferentes ID, describiéndolos de arriba a abajo. Primero, se configuran los estilos para el encabezado: configuré la altura en 100 píxeles y un borde en la parte inferior para que esté separado del resto de los bloques.
Pero luego las cosas se ponen más interesantes. El hecho es que, de forma predeterminada, los bloques se muestran de arriba a abajo si simplemente los escribe en código html y no establece ninguna regla adicional. Pero la columna lateral es sólo una columna lateral, que se mostrará al lado de la parte principal de la página. ¿Cómo hacer esto? Mira, configuramos la altura, el ancho, el marco de la barra lateral y una propiedad más (flotante: izquierda).
Esta regla significa que el elemento será empujado hacia el borde izquierdo del padre (es decir, el elemento padre, el bloque #main). Genial, ahora estableceremos la misma propiedad para el bloque con el contenido y también se presionará hacia el borde izquierdo, pero después de la columna lateral.
Por supuesto, el contenido adquiere más ancho, porque así debería ser, pero establecemos la altura igual. En un sitio web real, normalmente habrá mucha información en el bloque principal, por lo que no es necesario establecer la altura en absoluto. Lo mismo ocurre con una barra lateral si constantemente se le agrega información. Pero a modo de ejemplo, especificamos explícitamente la altura para que se puedan ver claramente los tamaños de los bloques.
Finalmente, queda describir el último bloque: el pie de página. Obtiene una altura pequeña, un marco con altura y otra propiedad nueva para nosotros. Esta es la propiedad clara con el valor ambos. ¿Por qué escribirlo? Hemos presionado los dos bloques anteriores hasta el borde izquierdo. Se convirtieron en los llamados bloques flotantes, pero, de forma predeterminada, es posible que los bloques comunes no noten los bloques flotantes y los atropellen.
Para evitar que esto suceda, nuestro sótano recibió el siguiente comando: dicen, mira, es un bloque normal, hay dos flotantes encima de ti. Fíjate en ellos y colócate más bajo que ellos. Este es el comando esencialmente dado por la propiedad clear:ambas, que obliga a colocar un bloque regular debajo de todos los flotantes.
Genial, ahora actualiza la página en tu navegador. Bueno, ya se parece mucho más a un sitio web, al menos en estructura.
La siguiente etapa, muy interesante, agregaremos algunos colores a nuestro sitio. Que no tenga un fondo blanco sólido, sino algo más interesante. Puedes configurar el fondo de dos maneras:
- Fondo general para todo el sitio a la vez, asignándolo al contenedor común #main
- Si cada uno de los bloques principales debe tener su propio tono de color, entonces deberá establecer un color para cada uno por separado. Pero es mejor no dejarse llevar: un encabezado rojo, un contenido verde y un sótano amarillo no se verán muy bien, te lo diré de inmediato.
Sugiero hacerlo usando el primer método. Encontré un bonito tono azul claro en un servicio en línea, que propongo utilizar como fondo del sitio. Agregue la siguiente propiedad a los estilos de contenedor generales:
#principal (antecedentes: #B3C1E6)
Actualizamos la página y nos aseguramos de que nuestro sitio tenga una bonita combinación de colores azul claro. Ahora propongo avanzar un poco en el nivel de diseño: dejar que el fondo del encabezado y pie de página sea más oscuro que el de los otros bloques. Puede agregar las siguientes líneas de código:
#encabezado, #pie de página (fondo: #9091DA)
Aquí utilizamos una nueva técnica: escribimos dos bloques separados por comas y el nuevo fondo se aplicará a ambos.
Paso 7. Trabajando en el encabezado.El trabajo posterior consistirá en decorar bloques individuales para darles un estado más atractivo. Empecemos por el encabezado. ¿Qué solemos tener en el sombrero? Así es, un hermoso nombre y logotipo para el sitio. Esto es lo que agregaremos.
Sugiero comenzar con el logo. Como estamos creando el sitio usando html, colocaremos el logo de este idioma en la esquina izquierda del encabezado. Encontré este lindo logo en Internet.
Debe descargarse y colocarse en la misma carpeta donde está almacenado el documento html.
Ahora veamos:
#header(fondo: #9091DA url(html.jpeg) centro del 5% sin repetición)
Llamé a la imagen html y su formato es jpeg, así que esta es la entrada. Luego también especificamos los siguientes comandos: la imagen de fondo no debe repetirse, sino que debe colocarse con un desplazamiento horizontal del 5% desde el comienzo del bloque y centrada verticalmente. Siempre se registra primero la posición horizontal y luego la vertical.
Naturalmente, si su imagen tiene un nombre diferente o tiene un formato diferente, entonces deberá cambiar ligeramente el código dado. Genial, tenemos un logo. Es hora de eliminar la inscripción: este es el encabezado del sitio y poner un título hermoso en su lugar. Eliminemos el texto del encabezado e insertemos un nuevo elemento allí:
Nombre del sitio
Ahora falta formalizarlo:
#title(tamaño de fuente: 32px; flotante: izquierda; margen izquierdo: 200px; familia de fuentes: Tahoma; color: amarillo; padding-top: 20px; sombra de texto: 0 0 5px naranja;)
Hemos establecido una cantidad decente de estilos: tamaño de fuente, familia de fuentes, alineación izquierda del encabezado, relleno izquierdo, color, relleno superior y sombra de texto. No tiene sentido explicar cómo funciona cada propiedad ahora, así que simplemente copie el código y péguelo en la hoja de estilos (archivo css).
Eso es todo, el sencillo sombrero está listo. Por supuesto, en un sitio web real puede contener otros enlaces, direcciones, etc. Bueno, agreguemos algo para darle realismo. Este código html debe insertarse en el contenido del encabezado del sitio.
- Sobre nosotros
- Blog
- Comentario
Genera una lista de sus tres enlaces. En realidad, deberían llevarnos a alguna parte, pero para nosotros son sólo enlaces vacíos. También crearemos una lista y enlaces en ella.
#about( float: derecha; estilo de lista: ninguno; margen derecho: 50px ) #about a( color: amarillo; )
Paso 8. Hacer un menú en la columna lateralNormalmente, la columna lateral contiene el menú del sitio y muchos otros widgets. Hagamos un menú simple allí. Nuevamente, la lista con la que ya hemos mostrado enlaces en el encabezado nos ayudará con esto, pero como el menú principal supuestamente es más grande, habrá más enlaces.
Menú (estilo de lista: ninguno)
En realidad, aquí solo escribí una regla: eliminé los marcadores de los elementos de la lista, todo lo demás está bien. También puedes agregar un título antes del menú y diseñarlo de alguna manera. Puedes hacerlo tú mismo. Los títulos están escritos en etiquetas emparejadas, donde la primera es la más grande (título del artículo) y la última es la más pequeña, a menudo no se usa en absoluto. Para el título del menú en la columna lateral, lo óptimo es utilizar .
Paso 9. Diseña el bloque de contenidoBueno, ¿por qué formalizarlo allí? Debe agregar algo de texto para que parezca un sitio web real con un artículo.
Título del artículo
Y aquí habrá algún artículo...
El contenido del artículo se divide en párrafos y subtítulos...
Subtítulo del artículo.Cualquier contenido se puede insertar en un bloque de contenido. Los párrafos que contiene forman el contenido principal y las etiquetas h1-h2 forman los títulos y subtítulos. La etiqueta h1 debe ser la única en la página.
El diseño en este caso consiste en determinar el color del texto. Por ejemplo, puedes poner marrón. Los títulos se pueden resaltar en un tono ligeramente diferente. No daré ningún código aquí, puedes descubrirlo tú mismo.
Paso 10. Decorar el sótano.Para ser honesto, no tengo ningún deseo de tirar nada al sótano en este momento. En sitios reales, contiene información de derechos de autor, a veces contiene menús y enlaces a otros sitios. Simplemente escribiré la palabra copyright allí y la centraré así:
#pie de página (alineación de texto: centro)
Paso 11. Oh no, no más pasosEso es todo, en realidad. El proceso de creación de la plantilla HTML más sencilla puede considerarse completo. Tenemos un logo, un nombre de sitio, un menú, un artículo, un pie de página. En general, este es un sitio muy primitivo, pero sigue siendo un sitio.
Por supuesto, el sitio se ve de tal manera que no querrás volver a verlo nunca más, pero esto no cambia la esencia. Lucir bien es el trabajo de un diseñador web.
¿Qué debemos hacer con él a continuación?El propósito de este artículo era simplemente mostrarle cómo crear un sitio web sencillo utilizando html y css. Puedes trabajar en su diseño y el resultado puede ser algo atractivo. Pero aún debes recordar que este es un sitio estático. Si se le agregan nuevas páginas, esto se hace manualmente, creando nuevos documentos html.
Este método de gestionar una web es cosa del pasado, aunque tiene sus ventajas. Para poner un sitio web en línea, debe cargar todos los archivos html, hoja de estilo e imágenes necesarias en algún hosting, de pago o gratuito. También debe registrar el nombre del sitio para que se llame de alguna manera. Se puede obtener un dominio de tercer nivel de forma gratuita en muchas empresas, pero tendrás que pagar por un dominio de segundo nivel (.ru, .com, .ua, etc.)
Lo que hicimos con usted durante este artículo se llama diseño de sitio web. Si desea administrar su sitio web utilizando un editor visual conveniente, entonces el diseño ya creado deberá integrarse con cualquiera de los motores populares. Mejor con WordPress.
Este es un tema aparte: la integración es, en muchos sentidos, mucho más complicada que el diseño en sí. Para aprender a crear sitios web para el motor, es necesario realizar un buen curso de formación. Es posible que la información gratuita en Internet no sea suficiente para usted. Describí el proceso de creación de un sitio web en Wordpress, pero allí no encontrarás información sobre cómo integrar una plantilla html con el motor.
El artículo presenta el llamado método de diseño de bloques, es decir, colocamos todo el contenido en bloques. Hoy en día este sigue siendo el método más popular. En general, es recomendable utilizar etiquetas HTML5 en el proceso en lugar de solo bloques, pero en aras de la simplicidad, en este artículo se utilizó la opción más sencilla.
Espero que tengas al menos una idea mínima de cómo hacer un sitio web html en el Bloc de notas o cualquier otro editor de texto.
Construir sitios web mal vaya que es dificilEse no es el caso, como parece. Aprenda a codificar una página sencilla conusando lenguaje HTMLy marcado para la Web.
Diseñar y crear un sitio web sencillo es muy fácil. Incluso los principiantes pueden aprender diseño web sin dedicar demasiado esfuerzo y tiempo.
HTML es el lenguaje de marcado principal para páginas web. Aprendamos los conceptos básicos e intentemos crear una página sencilla.
Introducción a HTML
HTML es un lenguaje de marcado de hipertexto.
El hipertexto es texto que actúa como enlace.
HTML define la estructura de una página web y garantiza que se muestre correctamente en un navegador. Un documento HTML puede ser muy simple o complejo, según el propósito que se tenga entre manos.
Los navegadores web reciben documentos HTML de un servidor web y los muestran como páginas web. Cada navegador entiende HTML y reproduce imágenes, texto y videos tal como está escrito en el código.
HTML es el lenguaje de marcado principal para la Web. Sin embargo, se utiliza para crear páginas web estáticas, sin interactividad ni animación. HTML5, la última versión de HTML, es un poco mejor en este sentido, especialmente cuando se trata de vídeo o audio.
HTML hoy es HTML5, la versión más nueva que agrega más funciones que las anteriores y ahora puede determinar la forma en que se muestran videos, imágenes y texto en la pantalla del navegador.
HTML5 es una de las herramientas poderosas para desarrollar páginas web. Con HTML5, la transmisión de medios es posible sin el uso de complementos de terceros como Flash. HTML5 también admite el almacenamiento de datos del lado del cliente. Esto se puede utilizar para admitir aplicaciones web cuando el cliente está fuera de línea.
Web y HTML
La red está formada por páginas web y aplicaciones interconectadas, así como por imágenes, vídeos, animaciones y contenidos interactivos. Los lenguajes de marcado forman la base de la Web. Estos lenguajes se han utilizado desde la época en que los sitios web eran muy simples, y seguirán siendo parte de la web, su desarrollo y futuro.
HTML sigue siendo una habilidad fundamental para todos los desarrolladores y diseñadores web.
Según una encuesta de W3Techs, HTML es el lenguaje utilizado en el 74,3% de todos los sitios web.
Cómo crear una página HTML sencilla
El desarrollo de HTML es sencillo y, por lo tanto, se puede aprender fácilmente a codificar una página HTML sencilla. Pero primero necesitas aprender los conceptos básicos del idioma.
Codificar HTML usando un editor de texto
Un documento HTML es básicamente un documento de texto. Hay muchos editores de texto disponibles que puedes usar para escribir HTML. Los dos más populares son Dreamweaver y Sublime Text. Los editores gratuitos son Notepad++ para Windows y Text Wrangler para Mac. De hecho, puedes crear una página web en Microsoft Word, pero no deberías hacerlo porque agrega código adicional e innecesario a los documentos HTML.
Por ejemplo, usaremos Notepad++ como editor. Puede elegir cualquier editor de su elección.
Crear y editar HTML
Crear un nuevo documento HTML es lo mismo que cualquier otro tipo de documento. Seleccione Archivo - Nuevo para abrir un nuevo documento en Notepad++. Realice cambios en el documento y haga clic en Guardar.
Guardar HTML
Un documento HTML es un archivo con la extensión .htm o .html. Algunos editores también pueden ofrecer la opción "Guardar como HTML". Es mejor nombrar el archivo en letras latinas, con una letra minúscula y reemplazar los espacios con guiones o puntos.
Si escribió el código en el Bloc de notas y lo guardó como un documento de texto, puede traducirlo a una página html usando el programa Total Commander. Seleccione el comando "Cambiar nombre" y cambie la extensión del archivo de .txt a .html.
Formato de página HTML
HTML como lenguaje consta de elementos, etiquetas y atributos que definen el contenido de un sitio web. Los elementos HTML nos permiten agregar tablas, imágenes, vídeos, audio, etc. a una página web.
elementos HTML
Los elementos definen la estructura y el contenido de una página web. Indicado por corchetes angulares alrededor del nombre del elemento. El contenido que no esté entre "" se mostrará en el sitio web. El elemento se parece a esto:
Etiquetas
Un elemento con corchetes angulares alrededor forma una etiqueta (). Las etiquetas no se muestran en la pantalla, pero ayudan al navegador a comprender lo que debe mostrar. La etiqueta de apertura marca el comienzo del elemento y la etiqueta de cierre marca el final del elemento.
Por ejemplo:
Etiqueta de apertura:
Etiqueta de cierre:
El contenido entre las etiquetas de apertura y cierre es el contenido del elemento.
Las etiquetas se pueden utilizar de dos maneras:
Usar etiquetas en pares
Las etiquetas emparejadas contienen una etiqueta de apertura y una de cierre. Así es como se ven:
Hay algo de texto aquí.Hay una etiqueta de apertura () y una etiqueta de cierre () para indicar el final del párrafo. Esto significa que todo lo que hay entre estas dos etiquetas es un párrafo.
Etiquetas individuales
Las etiquetas individuales se utilizan para definir elementos de cierre automático y para insertar elementos como imágenes. No es necesario definir el inicio y el final de estos elementos.
Estos elementos se escriben así:
El cierre / (barra oblicua) también es opcional. Esto es lo mismo que cuando se graba. Sin embargo, para evitar confusiones con la etiqueta de apertura, se recomienda agregar una / (barra oblicua) al final.
Atributos
Los atributos son elementos que amplían las etiquetas con información adicional. El atributo se coloca en la etiqueta de apertura e incluye un nombre y un valor.
La etiqueta de atributo se verá así:
La etiqueta "HTML" anterior tiene un atributo "lang" con el valor "en-US".
Estructura del documento HTML
Todo documento HTML tiene una estructura básica definida por los siguientes elementos:
DOCTYPE o DTD: la declaración del tipo de documento especifica la versión de HTML utilizada. Esta etiqueta se coloca al principio del documento.
HTML: un par de etiquetas HTML definen el principio y el final de un documento HTML.
sección ENCABEZADO< head>: esta sección define información general de la página y suele ser breve. El contenido de este elemento no se muestra en la página. El título contiene una etiqueta TITLE, que especifica el título del documento que aparece en la barra de título del navegador. HEADER también puede contener metadatos o enlaces a archivos externos.
Sección CUERPO: Esta sección contiene el cuerpo de la página. Su contenido se muestra en el navegador. La mayor parte del código de una página HTML se encuentra dentro del elemento del cuerpo.
Codificación: esta etiqueta especifica la codificación utilizada en el documento HTML. La codificación especifica cómo se guarda el archivo y cómo se mostrarán los caracteres especiales. El valor generalmente aceptado para esta etiqueta es UTF-8, que permite mostrar casi todos los caracteres del idioma.
Página HTML sencilla
Ahora que entendemos los elementos básicos de HTML, intentemos crear una página HTML básica. Comencemos creando un documento de texto en blanco en un procesador de textos.
Paso 1: La primera línea de código HTML que se agregará especifica el elemento DOCTYPE como "html". Esto significa que se está utilizando la última versión de HTML.
Paso 3: Luego agregamos una etiqueta de título con la etiqueta de título y los detalles del conjunto de caracteres.
Hola Mundo
Paso 4: Después de esto se escribe la etiqueta BODY.
Hola Mundo
Paso 5: Ahora el documento HTML en blanco está listo. Comencemos a agregar texto para mostrar. Agregamos una etiqueta de título y una etiqueta.
Definen el título de primer nivel y el párrafo debajo de él.
Hola Mundo
Hola Mundo
Página HTML sencilla
La página HTML básica está lista y podemos guardarla en una carpeta de nuestra elección.
Ver página HTML
Para ver una página HTML, debemos abrirla en un navegador. Navegue hasta la carpeta donde guardó el documento HTML y haga doble clic en él.
Se abrirá en el navegador y veremos una página muy sencilla. Puedes comprobar lo que muestra:
Título como "Hola mundo"
Título de primer nivel como "Hola mundo"
Párrafo con el texto “Página HTML simple”
Ahora que hemos creado una página HTML simple, veamos cómo podemos agregar más funciones. HTML proporciona mucha más funcionalidad que la que hemos agregado a la página HTML básica. Puede agregar color de fondo, fuentes, especificar colores de fuente, imágenes, enlaces, listas, etc. para crear una hermosa página HTML. Echemos un vistazo a algunas de estas características adicionales.
Formato de texto avanzado
HTML proporciona elementos especiales para dar formato especial al texto.
Los niveles de encabezado se pueden configurar usando etiquetas -. Hay un total de 6 niveles disponibles para títulos. Además, este es el mayor de ellos y el más pequeño.
Etiquetas
Se utilizan para indicar el comienzo de un nuevo párrafo. El navegador suele añadir una línea en blanco entre dos párrafos.
Los elementos de formato se utilizan para mostrar tipos especiales de texto. El texto se puede formatear con las siguientes etiquetas:
Atrevido -
cursiva –
Subrayado –
Fuente -
Una lista completa de estas etiquetas está disponible aquí.
Agregar enlaces
Este es el texto del enlace.
Agregar imágenes
Etiqueta Es una etiqueta única, sin etiqueta de cierre. Puede especificar atributos de imagen.
El atributo src especifica la ubicación de la imagen.
El atributo de estilo tiene muchos parámetros, incluido el ancho y el alto de la imagen en píxeles.
El atributo alt proporciona una breve descripción de la imagen. Se utiliza si por alguna razón la imagen no se carga.
Agregar un título
La etiqueta es nueva en HTML5 e indica el elemento superior de una página web. Los encabezados suelen contener el logotipo de la empresa, información de contacto, enlaces de navegación, etc. Puede haber varios elementos en un solo documento.
Conceptos avanzados en HTML
HTML es una tecnología fácil de aprender, por lo que muchos diseñadores simplemente trabajan con conceptos básicos. Si desea aprovechar al máximo HTML, deberá familiarizarse con conceptos avanzados. Esto le ayudará a crear un sitio web atractivo con menos esfuerzo.
Mencionaremos algunos conceptos que le ayudarán más. Puede continuar aprendiendo más y utilizando HTML avanzado y sus funciones.
Comprobación de código HTML
La validación HTML se utiliza para comprobar si hay errores en el código HTML. Si su página web no se carga, puede utilizar una verificación para encontrar la causa del problema.
La validación también proporciona orientación sobre el código que no cumple con el último estándar HTML. Un HTML no válido hará que el sitio sea inutilizable. Esto puede causar problemas de carga o resultados inconsistentes en diferentes navegadores. Muchos servicios de verificación son gratuitos, como validator.w3.org
Agregar etiquetas adicionales
Hay muchas más etiquetas y atributos HTML de los que hemos analizado aquí. Dos buenos recursos para aprender son w3schools y HTML Dog, que tienen más tutoriales y una lista completa de etiquetas.
También puede utilizar Ver página fuente en su navegador para examinar el código de sitios web bien diseñados y ver nuevas técnicas.
Con un servicio de alojamiento web, puede agregar varias páginas HTML a su dominio web. Es posible que necesite un software de carga FTP para transferir sus archivos HTML al servidor web. Existen muchos servicios de alojamiento web que brindan funcionalidad FTP.
Agregar CSS y JavaScript
CSS se puede utilizar para mejorar rápidamente la apariencia de su sitio web. Puede utilizar CSS para agregar color, fuentes y cambiar la ubicación de los elementos. Con una hoja de estilos CSS vinculada a una página HTML, puedes cambiar el estilo de todo el texto.
JavaScript es un lenguaje de programación y se puede utilizar para agregar funcionalidad adicional a las páginas HTML. Los comandos JavaScript se insertan entre . Se pueden utilizar para agregar botones interactivos, realizar cálculos matemáticos, etc.
El maravilloso mundo del desarrollo web se abre ante ti. ¡A por ello! Es fácil conquistar este pico, sólo hay que empezar.
¡Hola queridos lectores! Quizás todos los internautas, mientras caminan por las infinitas extensiones de Internet, tarde o temprano tengan el deseo de dejar algo propio allí, de transmitir a la gente su opinión sobre determinadas cosas.
Por cierto, aquí no hay nada complicado incluso para los usuarios novatos. En este artículo te contaré cómo crear una página web. Aprenderá los conceptos básicos de este proceso.
¿Qué es una página web?Un documento de hipertexto o una página web es un archivo de texto marcado con etiquetas que utilizan HTML (lenguaje de marcado de hipertexto).
Todos los objetos allí presentados se recrean según las instrucciones escritas por esta herramienta, que fueron enviadas a petición suya por el servidor. Para agregar marcas a un documento, se utilizan etiquetas, que están entre corchetes angulares. Por regla general, están emparejados, es decir, hay una apertura y un cierre, y alguna información en el medio.
Por ejemplo, una etiqueta que le dice al navegador que debajo hay un documento HTML tiene este aspecto: . Y el de cierre, que dice que el código termina aquí, se ve así: . Por lo tanto, la única diferencia entre una etiqueta de cierre y una etiqueta de apertura es la presencia de una barra diagonal después del corchete de apertura.
Este lenguaje de marcado le permite formatear el texto de una página web, instalar imágenes y elementos gráficos en él, crear enlaces de hipertexto, agregar elementos multimedia, grabaciones de sonido, scripts (VBScript, JavaScript).
Para saber qué es este idioma, no es necesario leer aburridos libros de texto. Para mí, personalmente, fue suficiente abrir mi navegador y seleccionar la opción “Ver código fuente” (haga clic con el botón derecho del mouse). Las líneas de código presentadas en la ventana son el mismo código html. Es este código el que el navegador transforma posteriormente en una página web.
Tipos de páginas de InternetHay tres tipos de páginas web:
Los editores HTML se utilizan para crear páginas web: FCKeditor, TinyMCE WYSIWYG Editor, Macromedia Dreamweaver, Microsoft FrontPage y otros. Todos estos editores tienen muchos asistentes diferentes que permiten crear sitios web fácilmente, así como plantillas para páginas con diseño y estructura. Con su ayuda, podrás crear rápidamente tu propia página web.
Pero para aquellos a quienes les gusta hacer todo ellos mismos, pueden usar un simple bloc de notas, que ya está instalado en cualquier computadora de forma predeterminada.
Instrucciones:
título
Entonces, el código generalmente debería verse así:
título Cuerpo de la página web
¡Felicidades! Ahora ya sabes cómo crear tu propia página web, ¡aunque sea muy sencilla! No olvides guardar el documento; de lo contrario, todo tu trabajo se desperdiciará y tendrás que volver a hacerlo todo.
Hoy en día existen muchos editores visuales de código HTML, gracias a los cuales puedes crear páginas de Internet sin conocer en absoluto el lenguaje de marcado HTML. Pero creo que todavía es necesario saber lo básico.
Por cierto, mi blog fue creado en la plataforma gratuita WordPress. Sólo pago por el dominio y el hosting, es bastante. ¿Quieres saber más? Aquí está el enlace.
¡Atentamente! Abdullin Ruslan
