Hostwinds Tutoriales
Resultados de búsqueda para:
Tabla de contenido
Cómo crear una página de destino personalizada usando HTML y CSS
Etiquetas: Web Site
Esta guía aprenderá cómo crear la página Basic 'en la construcción de construcción con HTML y CSS.
Para crear una página de destino, deberá tener un editor de texto, ya sea el proporcionado en su administrador de archivos CPanel, Bloc de notas ++, o cualquier editor de texto de su elección funcionará bien para seguir adelante en esta guía.Si está utilizando un panel de control como CPANEL, agregará estos archivos a su directorio public_html o en la raíz del documento para su nombre de dominio.Si no está utilizando un panel de control, lo más probable es que agregue estos archivos a su / var / www / html, aunque la ubicación de la raíz del documento de su dominio puede variar.
Creación de su archivo de sitio
Comencemos creando un archivo index.html y ábralo en su editor de texto.
¿Por qué índice?
La forma en que Apache está configurada, en su carpeta de dominio (o Public_HTML), lee su DirectoryIndex, como index.htm, index.html, o index.php si estos archivos existen y sirven este archivo como la página de inicio de su carpeta.Si no hay uno de estos archivos, entonces mostrará un listado de índice.Puede cambiar su índice de directorio a través de su archivo .htaccess.
Su HTML es esencialmente la estructura de la página de su sitio web, por lo que deberá asegurarse de que esté configurado correctamente.
Para este ejemplo, deberá identificar el script HTML, el encabezado y el cuerpo.Puedes hacer esto usando las siguientes "Etiquetas"
<html>
<head></head>
<body></body>
</html>
Las etiquetas son cómo identificamos diferentes elementos en nuestro documento HTML y generalmente vienen en parejas.La mayoría de las etiquetas tendrán un inicio \ <> y un final \, algunas etiquetas no tendrán la segunda etiqueta y terminarán con A /> Esto se llama un 'elemento vacío', que se ve principalmente en los enlaces e imágenes.
La etiqueta de la cabeza
Aquí es donde almacena los datos que no están contentando, como los metadatos del sitio, el título del documento, el conjunto de caracteres, los estilos en línea, los enlaces de secuencias de comandos y otras metaduras.Usaremos dos etiquetas diferentes en nuestra sección de cabeza:
Título TAG: esta etiqueta cambiará lo que se muestra en la pestaña
Etiqueta de enlace: aquí es donde conectaría cualquier estilo o scripts externos.Utilizaremos esto para agregar una hoja de estilo a nuestro sitio web.
La etiqueta del cuerpo
Aquí es donde se irá el contenido de su sitio.Si queríamos, podríamos agregar pruebas directamente.Por ejemplo, si agregamos "Hello World!"En nuestro HTML, se verá así:
<!DOCTYPE html>
<HTML>
<head></head>
<body>Hello World!!</body>
</HTML>
Así es como se verá la página web después de agregar este código y visitar su nombre de dominio con su navegador:
A continuación, vamos a conectar la hoja de estilos en su HTML.Como mencionamos anteriormente, puede adjuntar una hoja de estilo agregando vinculando su hoja de estilo a la cabeza de su documento HTML.Después de que hayas terminado, debería verse así:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css.css"/>
</head>
<body>
</body>
</html>
Agregar contenedores y contenido
Para ayudar a organizar mejor su contenido, puede usar etiquetas para especificar diferentes objetos, como contenedores, imágenes, encabezados, etc., llamará a estas etiquetas diferentes más adelante en su hoja de estilo.
Para este ejemplo, estaré usando un contenedor div y el
y \
etiquetas.
<!DOCTYPE html>
<html>
<head>
<title>Coming Soon</title>
<link rel="stylesheet" href="css.css"/>
</head>
<body>
<div>
<h1>This Site is Under Construction</h1>
<p>Content Coming December 2018</p>
</div>
</body>
</html>
Así es como se verá la página web antes de agregar la hoja de estilo:
Agregar estilo a su sitio
Crea y edita tu STYLESHEET 'CSS.CSS'
Ahora, vamos a crear un archivo .css.Esto debería coincidir con el nombre del archivo que está arriba, por lo que nuestro ejemplo es CSS.CSS.Puede llamar a los diferentes elementos que etiquetó a través de etiquetas en su documento HTML en su hoja de estilo.
En este ejemplo, tenemos 4 elementos diferentes: cuerpo, div, H1 y p. A continuación, podemos ver cómo puede usar estas etiquetas para cambiar el fondo, centrarlo y cambiar el tamaño del texto. También demostraremos cómo agregar una sombra de texto para ayudar con la claridad.
Aquí está nuestro archivo CSS.css:
body {
background-image:url('background-background-image-blue-sky-1054218.jpg');
background-size: 100%, 100%;
}
div {
font-family: verdana;
color:black;
text-align: center;
margin-top:250px;
}
h1{
text-align:center;
font-size: 75px;
margin:0px;
padding:0px;
text-shadow: 2px 1px 1px grey;
}
p{
font-size: 40px;
text-shadow: 1px 1px 3px lightgrey;
}
Hay muchos atributos diferentes que puede agregar a su hoja de estilo. En este artículo, acabamos de cubrir algunas opciones básicas.
Muchas propiedades diferentes requieren una estructura ligeramente diferente dependiendo de lo que está cambiando.
Prueba tu sitio
¡Ahora puedes consultar tu nueva página de destino!Si aún no ha señalado su dominio a su hosting, puede usar un sitio de prueba como Hosts.cx o su dirección IP dedicada para ver su sitio.
Escrito por Hostwinds Team / noviembre 24, 2018