Contenido
- ¿Qué es CSS?
- HTML a archivo CSS a la pantalla
- Otras lecturas
- HTML con hoja de estilo externa
- Etiquetas, elementos y propiedades básicos de HTML y CSS para una página web
- Conceptos básicos de los elementos HTML
- Documento HTML sin formato
- Etiquetas definidas
- Crear un archivo CSS
- Vincular la hoja de estilo
- HTML con enlace a hoja de estilo
- Mira los resultados
- ¡Atajo para el desarrollo de sitios web!
- Marco HTML
- preguntas y respuestas
La Sra. Millar ha sido escritora en línea durante más de ocho años. Ella está bien versada en el desarrollo de sitios web y ha creado varios sitios web.
¿Qué es CSS?
CSS significa hoja de estilo en cascada. Se utiliza un código CSS para diseñar un documento HTML. Cuando crea un sitio web, un navegador lee el archivo HTML y cualquier código CSS, javascript, etc., escrito dentro del HTML. Luego lo muestra de acuerdo con lo que esos códigos le dicen que haga.
A veces, el código CSS se escribe directamente en el HTML. Esto se llama interno hoja de estilo. El código se escribe entre las etiquetas head> y / head> usando la etiqueta style>.
Otras veces, el código CSS afectará solo a una frase, palabra o párrafo específico. Esto se llama en línea hoja de estilo. Está escrito en la misma línea que debe afectar usando la etiqueta style> y el atributo que se va a aplicar.
Cuando el sitio web tiene varias páginas, un CSS externo se utiliza. Este es el tipo de hoja de estilo que repasaremos hoy. La hoja de estilo externa se puede aplicar a varios documentos HTML. Cuando se modifica el código CSS, afectará a todas las páginas. Se puede formatear un sitio web completo a partir de una hoja de estilo. Esto ahorra mucho tiempo, de lo contrario, tendría que modificar cada página de un sitio web.
Al ingresar la etiqueta link>, el navegador lee el archivo al que ingresó un vínculo y lo aplica en todas las páginas del sitio web.
La etiqueta link> es un puntero que se coloca dentro de las etiquetas head> y / head> del documento HTML.
Se puede utilizar cualquier editor de texto para escribir una hoja de estilo CSS. Hoy usaremos el Bloc de notas.
HTML a archivo CSS a la pantalla
Otras lecturas
Leer más sobre el hoja de estilo interna.
Leer más sobre el hoja de estilo en línea.
HTML con hoja de estilo externa
Etiquetas, elementos y propiedades básicos de HTML y CSS para una página web
| NOTACIÓN | QUÉ HARÁ EN SU PÁGINA WEB | EJEMPLO |
|---|---|---|
>, /> | Los corchetes de apertura y cierre utilizados en los elementos para indicar al navegador que este es el comienzo> y /> este es el final de los elementos especificados. Es decir, lo que quiere ver en su página web y cómo quiere verlo. El> inicia la declaración y /> la cierra. | cuerpo> Aquí le ha dicho al navegador que este es el comienzo del cuerpo. Cuando haya ingresado lo que desea en la sección del cuerpo, DEBE cerrar con / body>. |
p>, / p> | Las etiquetas de párrafo de apertura y cierre. Esto se mostrará como la sección de párrafo. | p> Escriba su contenido entre estos corchetes ./> |
h1>, h2>, h3> hasta h10> | Utilice estas etiquetas para indicar qué encabezado desea que se muestre. El número del 1 al 10 indica qué tamaño de encabezado desea. h1> siendo el más grande. | h1> Es el encabezado más grande / h1>. h2> Es el siguiente tamaño hacia abajo./h2>. h3> Es aún más pequeño./h3> Y así sucesivamente. |
{valor de la propiedad;} | Una declaración especifica la propiedad y el valor de un artículo cómo desea que se muestre. | {color: red: font-size: 12px;} o {font-style: italic:} |
Colon: y punto y coma; | Su propiedad de declaración DEBE tener: (dos puntos) después. El valor DEBE tener el; (punto y coma) después como se muestra. | {color rojo; tamaño de fuente: 12px;} |
estilo> / estilo> | Estas son las etiquetas de estilo de inicio y cierre. Indican a los navegadores cómo desea que se vea la pantalla HTML. Aquí es donde usaría un estilo interno o en línea. | cabeza> estilo> h1 {color: rojo; tamaño de fuente: 12px;} p {color: azul; familia de fuentes: georgia; tamaño de fuente: 12px;} / style / head> |
enlace> / enlace> | Estas son las etiquetas de enlace de inicio y cierre. Colocaría su enlace a una hoja de estilo externa entre estas etiquetas. | head> link rel = "stylesheet" type = "text / css" href = "mystyle.css"> / head>. Esto enlaza a una hoja de estilo externa con el nombre y la extensión "mystyle.css" |
Conceptos básicos de los elementos HTML
Como puede imaginar, hay una gran cantidad de opciones para agregar, modificar y personalizar su página web. El punto que estoy tratando de hacer aquí es brindarle suficiente información para que algo que haya creado se muestre en su explorador de Internet como una página web. Una vez que haya aprendido a mostrarlo, puede comenzar a manipularlo para que se vea como lo desea.
Para presentar una página que ha creado al mundo en la World Wide Web, necesitaría comprar un sitio web para colocar su página y contratar un alojamiento para mostrarlo cuando alguien escriba su dirección web en la barra de búsqueda. Pero eso nos está adelantando mucho. ¡Hagamos que los conceptos básicos de los elementos HTML funcionen primero!
La tabla anterior muestra y explica básico Elementos HTML y CSS y algunos de los elementos de propiedad que desea ver cuando muestre su página web.
Si se coloca un enlace externo después la hoja de estilo interna en el encabezado HTML> sección lo externo tendrá prioridad sobre lo interno hoja de estilo.
Primero crearemos el documento HTML básico y lo veremos en su navegador.
El siguiente documento HTML tiene algunos de los elementos más comunes que encontrará. Los conocerá muy bien con el tiempo porque son la base de la página HTML. Usando el Bloc de notas crearemos una página web y le vincularemos un CSS externo.
Haga clic en Inicio -> Todos los programas -> Bloc de notas
Ingrese el siguiente código:
Documento HTML sin formato
! DOCTYPE html> html> head> h1> Crear su propia página web es inspiradorh1> body> Cuando abre su navegador y escribe la ubicación de su documento HTML, su página aparece como una página web porque ES una página web! / Body > p> Las diversas etiquetas que coloque en su documento HTML afectarán cómo se muestra su página web. Realmente depende de usted qué tan creativo quiera ser./p> / body> / html>
Etiquetas definidas
Una vez que haya escrito el código HTML, guárdelo en algún lugar, como su escritorio, para recuperarlo fácilmente. Utilice la extensión de archivo .htm o .html.
El código que acaba de ingresar le dice al navegador, línea por línea, qué mostrar.
La primera línea es importante porque le dice al navegador qué tipo de documento está leyendo.
Ingresar! DOCTYPE html> le dice al navegador que es un documento HTML.
El html> le dice al navegador, aquí está el comienzo de la página web. / html> lo dice, este es el final de la página web.
La etiqueta body> le dice al navegador que esto es lo que quiero que aparezca en la pantalla. La etiqueta del cuerpo termina con / body> etiqueta.
Ingresar h1> le dice al navegador que este es el primer encabezado. Indicar el número uno hará que el encabezado parezca más grande que el resto del texto. H2 es más pequeño que h1, h3 es más pequeño, h4 es aún más pequeño y así sucesivamente.
Los párrafos comienzan con p> y terminan con / p>.
Ahora abre tu navegador. Usaré Internet Explorer.
En la parte superior de la página, a la izquierda, haga clic en -> Archivo -> Examinar y busque donde guardó el documento HTML. Haga clic en el documento y presione Aceptar.¡La página ahora se muestra en su navegador!
Crear un archivo CSS
Ahora abra un nuevo documento de Bloc de notas. Haga clic en Inicio -> Todos los programas -> Bloc de notas. Este será el archivo CSS al que colocamos un enlace.
Ingrese el siguiente código:
cuerpo
{
color de fondo: amarillo
}
{
familia de fuentes: "Georgia";
tamaño de fuente: 30px;
}
Haga clic en Guardar y asígnele el nombre "mystyle" (menos las comillas). Guárdelo como un tipo de archivo .css.
Vincular la hoja de estilo
Cambiar el color del texto
Ahora agregaremos un enlace al archivo .css que acaba de crear en el documento HTML que cambiará el color de fondo, el tipo de fuente y el tamaño de la fuente que se muestra.
Busque su documento HTML y ábralo.
Agregue el siguiente enlace> al HTML después de la sección head>. (Inserte el nombre en el que guardó su archivo .css si es diferente al mystyle.css sugerido): link rel = "stylesheet" type = "text / css" href = "mystyle.css">
Esto le dice al navegador que estás usando una hoja de estilo y está en el formato de texto / css y que la recupere en "mystyle.css".
Así que ahora su HTML se parece al código siguiente.
HTML con enlace a hoja de estilo
! DOCTYPE html> html> head> link rel = "stylesheet" type = "text / css" href = "mystyle.css"> / head> h1> Crear su propia página web es inspiradorh1> body> Cuando abre su navegador y escribe en la ubicación de su documento HTML, su página aparece como una página web porque ES una página web! / body> p> Las diversas etiquetas que coloque en su documento HTML afectarán cómo se muestra su página web. Realmente depende de usted qué tan creativo quiera ser./p> / body> / html>
Mira los resultados
Guarde su HTML con el mismo nombre que eligió antes y haga clic en OK si pide sobrescribir el actual.
Abra su navegador, haga clic en Archivo -> Abrir -> Examinar-> y busque su archivo HTML y haga clic en él, haga clic en Aceptar y su página debería aparecer. Debería verse similar a la imagen de abajo.
Simplemente cambiando el nombre del color en su archivo .css cambiará la salida y lo mismo ocurre con la fuente y el tamaño de la fuente.
¡Atajo para el desarrollo de sitios web!
Como ha aprendido, escribir HTML es meticuloso. Cada punto y coma, cada corchete, cada cierre / debe estar en su lugar o el navegador no lo mostrará correctamente, o no lo mostrará en absoluto. Esto puede ser MUY frustrante cuando su página no se muestra o se muestra mal, y tiene que revisar línea tras línea de su código en busca de lo que se perdió (Sí, lo que se perdió. Los navegadores no leen mal).
Si va a escribir más de una página de HTML, o simplemente no quiere olvidar cómo escribirlo, puede simplificar el proceso guardando una plantilla, o comúnmente llamada marco del HTML que sabe que funciona. Luego, cuando necesite escribir una página HTML, ¡todo lo que necesita hacer es abrir su marco y completar los detalles! Vea un ejemplo de un marco a continuación (puede copiar el siguiente marco si lo desea).
Marco HTML
! DOCTYPE html> html> cuerpo> h1> / h1> p> / p> / cuerpo> / html>
Este artículo es exacto y verdadero según el leal saber y entender del autor. El contenido es solo para fines informativos o de entretenimiento y no sustituye el asesoramiento personal o el asesoramiento profesional en asuntos comerciales, financieros, legales o técnicos.
preguntas y respuestas
Pregunta: ¿Cómo hago una hoja de estilo interna con HTML en un cuaderno?
Respuesta: Con una computadora portátil, debe abrir el bloc de notas (si está instalado) y crear la página HTML como está escrita. Se puede utilizar cualquier programa de procesamiento de texto para escribir HTML. La parte importante es guardar el código que escribiste. Cuando lo guarde, asegúrese de usar la extensión .html
