HTML es el lenguaje de marcado ampliamente utilizado para crear una estructura de página web. Proporciona diferentes etiquetas que se utilizan para agregar diferentes elementos a la página web, como , ,
, y . Estas etiquetas se definen en el editor de texto y visibles en el navegador. Este artículo discutirá:
Prerrequisitos para crear un sitio web Cómo crear una página HTML? Cómo crear el sitio web HTML con código? Cómo diseñar elementos HTML a través de CSS? Prerrequisitos para crear un sitio web
Los requisitos previos para crear un sitio web son:
Un editor de texto Navegador web ¿Qué es un editor de texto??
Un editor de texto es un programa de software de computadora que permite a los usuarios editar, almacenar e imprimir texto. Estos editores a menudo se conocen como software de bloc de notas. Hay varios editores de texto, como:
Bloc Código de Visual Studio Texto sublime Nota: Usaremos Visual Studio Code Editor para la demostración. Los usuarios pueden instalar cualquiera de los editores de texto de acuerdo con sus preferencias.
Cómo crear una página HTML?
El procedimiento paso a paso para crear un sitio web en el código Visual Studio se explica a continuación.
Paso 1: crear una carpeta de proyecto
Primero, crea una carpeta y nombre como quieras. Por ejemplo, hemos especificado el nombre del archivo como "Html ". Dentro de esta carpeta, crearemos subcarpetas y archivos para nuestro proyecto:
Paso 2: Abrir carpeta
Abra la carpeta del proyecto, haga clic con el botón derecho y luego seleccione el "Abrir con código Opción del menú contextual:
Como resultado, se mostrará la siguiente ventana:
Paso 3: crea un nuevo ".archivo html "
El, crea un nuevo archivo haciendo clic en el nuevo icono del archivo como se muestra en la imagen a continuación:
Guarde el archivo con el ".html " extensión.
Paso 4: Agregar código HTML
Agregue el código HTML requerido en el archivo:
Realicemos un ejemplo para ver cómo el código HTML ejecuta y muestra el sitio web en el navegador.
Cómo construir un sitio web en HTML?
Para construir un sitio web desde cero, consulte los pasos a continuación.
Paso 1: crear un contenedor "div"
En HTML, cree un div llamado "envase ". Dentro de este DIV, agregaremos elementos para crear un sitio web:
Paso 2: Agregue elementos de "encabezado" y "Nav"
Dentro del contenedor Div, coloque un "" etiqueta. El elemento encabezado incluye una imagen y una barra de navegación. Más específicamente, la barra de navegación muestra una lista de enlaces a varias secciones de nuestro sitio web:
Paso 3: Agregar "Banner de sección"
Agrega un "" Etiqueta con nombre de clase "bandera ". Esta sección contiene un
Etiqueta para encabezar:
Paso 4: crear la sección "Aboutus"
Entonces, crea un "sobre nosotros "Sección que contendrá información sobre nuestro sitio web. Vamos a crearlo agregando primero un encabezado con un "
Sobre nosotros
Linuxhint es el mejor sitio web de tutorial en línea. Desde aquí puedes aprender diferente
Leer más Avancemos hacia el siguiente paso.
Paso 5: Haga la sección "Ourservices"
A continuación, agregue una sección para "Nuestros servicios ". Esta sección contendrá la información del servicio sobre nuestro sitio web.
Vamos a crearlo agregando dos divs dentro de un Div llamado "Nuestros servicios ". El primer div "servicios "Contendrá divs de árboles con el nombre"servicio "Cada uno con información diferente. Cada "servicio "Div contiene el con diferentes valores de atributos,
y etiquetas de botón:
Brindamos educación de calidad al mundo.
Ver servicio Proporcionamos al mundo conocimiento de las tecnologías emergentes.
Ver servicio Feliz de ayudar al mundo.
Ver servicio Paso 6: Defina el elemento "Pie de pie"
Para hacer un pie de página del sitio web, use el "" etiqueta. Este elemento contiene una etiqueta para mostrar contenido con texto más pequeño:
(c) Copyright: todos los derechos reservados La estructura de nuestro sitio web es Don. Ahora, nos mudemos al CSS para el estilo.
Cómo diseñar elementos HTML a través de CSS?
Ahora, mira cómo vamos a diseñar nuestro sitio web utilizando las propiedades de CSS.
Estilo todos los elementos (*)
* El asterisco " * "Se usa en CSS para seleccionar cualquier tipo o todos los tipos de elementos y aplicar las siguientes propiedades:
"margen La propiedad se utiliza para dar espacio alrededor del elemento. "relleno "Se usa para dar espacio alrededor del contenido del elemento. "dimensionador "Determina el método para calcular la altura y la amplitud del elemento. "Familia tipográfica "Define el estilo de fuente. Etiqueta de estilo "H2"
H2 El " "tamaño de fuente "Se usa para establecer el tamaño de la fuente. "pescado "Especifica el grosor de la fuente. Elemento de estilo "Sección"
sección De estilo "sección ", Aplique las propiedades declaradas:
"acolchado superior "Se utiliza para dar espacio además del contenido. "fondo acolchado "Aplicará espacio en la parte inferior del contenido. Elemento de estilo "botón"
botón Cada botón de nuestro sitio web mantendrá las siguientes propiedades:
"color de fondo "Aplica el color al fondo del botón. "color "La propiedad define un color para el título de botón. "borde La propiedad aplica un borde al botón especificando el ancho, el tipo y el color. "relleno "La propiedad se usa para dar espacio alrededor del contenido del texto. "tamaño de fuente "Establece el tamaño de la fuente. "cursor "Especifica el puntero del mouse en el flotador. Estilo "Container" Div
.envase Aquí:
"anchura máxima "La propiedad define el ancho máximo del elemento. "margen La propiedad se utiliza para dar espacio alrededor del elemento. Etiqueta de estilo "encabezado"
encabezado Según el fragmento de código dado:
"acolchado superior "Se utiliza para dar espacio en la parte superior del contenido. "fondo acolchado "Está configurado en el espacio en la parte inferior del contenido. "color de fondo "Está configurado para aplicar el color al fondo del elemento. "mostrar "Especifica el comportamiento de la pantalla. El valor flexible se utiliza para hacer un diseño flexible. "Justify-Content "Colocará elementos flexibles de acuerdo con el valor que se le da. "ítems alineados "Establece la alineación del elemento dentro de un contenedor flexible. Estilo "Encabezado
encabezado ul La lista desordenada de la etiqueta de encabezado está asociada con las siguientes propiedades:
"estilo de lista "Se usa para dar estilo a la lista. En el ejemplo, hemos establecido su valor como "ninguno "Para eliminar el subrayado de la lista. "mostrar La propiedad se utiliza para especificar el comportamiento de visualización de las etiquetas. El valor flexible se utiliza para hacer un diseño flexible. Etiqueta de estilo "A"
encabezado ul li a Los elementos de anclaje de la etiqueta de encabezado se proporcionan con los siguientes estilos:
"decoración de texto La propiedad se usa para decorar el texto con diferentes estilos de línea. "relleno "Se usa para dar espacio alrededor de cada etiqueta de anclaje. "color La propiedad está configurada para aplicar el color al texto de la etiqueta de anclaje. Estilo "Banner" Div
.banner El div con nombre "bandera "Tiene el estilo de la siguiente manera:
"imagen de fondo "A esta propiedad se le asigna la URL de la imagen de fondo. "posición de fondo "Es la posición de la imagen como el centro. "repetición "La propiedad establece la imagen como no repetir. "tamaño de fondo "Se establece como la portada, lo que significa que la imagen se adapta al Div. "acolchado superior "Da espacio a la parte superior del contenido. "fondo acolchado "Da espacio en la parte inferior del contenido. Etiqueta de estilo "H2" de estilo Div Div
.Banner H2 El
La etiqueta del banner div se aplica con estas propiedades:
"color "La propiedad establece el color del texto. "texto alineado "Con el centro de valor establecerá el texto como el centro alineado. "tamaño de fuente "La propiedad establece el tamaño de fuente del elemento. Estilo "Aboutus" Div
.sobre nosotros El ".sobre nosotros "Se usa para acceder a la clase acerca de. El "texto alineado La propiedad se establece el texto del elemento en el centro.
Etiquetas de estilo "H2" y "P" de "Aboutus" Div
.Acerca de H2,Luego, configure el "fondo acolchado "Propiedad como"20px "Para ambos
y
etiquetas.
Estilo "Ourservices" Div
.Nuestros servicios El Div "Ourservices" está provisto "color de fondo " como "#EFEFEF ".
Estilo "Servicios" Div
.Nuestros servicios .servicios El niño div "servicios "Del padre div"nuestros sesevices "Tiene el estilo de las propiedades que se describen a continuación:
"mostrar Se utiliza la propiedad para establecer el comportamiento de la pantalla. El valor flexible hace un diseño flexible. "Justify-Content La propiedad alinea horizontalmente los elementos del elemento flexible. Estilo "Servicio" Div
.Nuestros servicios .servicio El ".Nuestros servicios .servicio "Se refiere al niño div"servicio "De los padres div"Nuestros servicios "Div. Cada servicio se define con el texto de la propiedad alineado con el centro de valor.
Elemento de estilo "botón"
.Ourservices Botón La propiedad "margen-top "Se utiliza para establecer espacio en la parte superior del elemento del botón.
Elemento de estilo "pie de página"
pie de página La etiqueta de pie de página está diseñada de la siguiente manera:
"acolchado superior "Está listo para dar espacio en la parte superior del contenido del pie de página. "fondo acolchado "Está listo para dar espacio en la parte inferior del contenido de los pies. "color de fondo "Está listo para aplicar el color en la parte posterior del pie de página. "color "Especifica el color de la fuente. "texto alineado "Está establecido como el centro. Paso 5: Guarde el archivo HTML y ábralo en el navegador
Guarde el archivo HTML utilizando la combinación de clave "Ctrl+S "O guardar seleccionando el"Ahorrar Opción "desde el menú Archivo en la esquina superior izquierda del editor. Luego, haga clic con el botón derecho en la ventana de trabajo de Visual Studio Code y haga clic en "Abrir con servidor en vivo "Opción del menú desplegable como se muestra a continuación:
Nota: Si no ha instalado la extensión del servidor en vivo, siga nuestra otra publicación dedicada.
Como puede ver, hemos creado y diseñado con éxito nuestro sitio web:
Eso se trataba de construir un sitio web con código HTML y CSS.
Conclusión
El lenguaje de marcado de hipertexto es el estándar para hacer páginas web. Hay cientos de elementos que se utilizan en archivos HTML. Cada elemento se utiliza para algunas tareas específicas para la aplicación web. Para escribir el código HTML, es esencial usar un editor de texto como Text Sublime, Visual Studio Code, Notepad ++ o más. Este artículo ha explicado con éxito el procedimiento paso a paso para crear un sitio web HTML en Visual Studio Code.
