Descargar el PDFDescargar el PDFX
Nuestro equipo de editores e investigadores capacitados han sido autores de este artículo y lo han validado por su precisión y amplitud.
El equipo de contenido de How.com.vn revisa cuidadosamente el trabajo de nuestro personal editorial para asegurar que cada artículo cumpla con nuestros altos estándares de calidad.
Este artículo ha sido visto 37 000 veces.
Este How.com.vn te enseñará cómo usar la aplicación Bloc de notas de Windows para guardar información para una página web escrita en HTML y CSS. HTML es el lenguaje de programación usado para crear tu página web, mientras que CSS es el lenguaje que determina el estilo (color, fuente, etc.) de los elementos HTML de la página web.
Pasos
Abre el Bloc de notas. Abre Inicio, escribe bloc de notas y haz clic en la aplicación azul Bloc de notas de la parte superior de la ventana de "Inicio".
Indica el tipo de documento. Escribe <!DOCTYPE html> en el Bloc de notas y luego presiona ↵ Enter para comenzar una nueva línea.
Añade la etiqueta HTML. Escribe <html> y presiona ↵ Enter.
Ingresa la etiqueta BODY. Escribe <body> y presiona ↵ Enter. Ahora puedes empezar a ingresar la información de la página web.
Añade un encabezado. Escribe <h1>TEXTO</h1>, asegurándote de reemplazar "TEXTO" con el título de página que prefieras, y presiona ↵ Enter.- Por ejemplo, para crear un encabezado de página que diga "¡Bienvenido!", escribirías <h1>¡Bienvenido!</h1> en el Bloc de notas.
Añade texto debajo del encabezado. Escribe <p1>TEXTO</p1>, asegurándote de reemplazar "TEXTO" con el mensaje que prefieras, y presiona ↵ Enter.- Por ejemplo, para añadir un texto que diga "Soy una iguana", ingresarías <p1>Soy una iguana</p1> en el Bloc de notas.
Añade más encabezados y párrafos. Cada encabezado y párrafo subsiguiente debe tener un número ascendente aplicado a él. Por ejemplo, el segundo encabezado tendría las etiquetas <h2></h2> alrededor, y el segundo párrafo tendrá las etiquetas <p2></p2>.- Asegúrate de seguir presionando ↵ Enter después de cada línea de código.
Cierra las etiquetas BODY y HTML. Una vez que hayas ingresado la última línea de código, escribe </body> en su propia línea y presiona ↵ Enter, y luego escribe </html>. El documento ahora está listo para darle estilo con CSS.Anuncio
Entiende cómo funciona CSS. CSS se usa para cambiar la apariencia de un elemento HTML (por ejemplo, un párrafo). CSS normalmente se escribe en el siguiente formato de línea por línea:[1]etiqueta del elemento {(por ejemplo,p {)modificador: propiedad;(por ejemplo,font-size: 20px;)modificador: propiedad;(por ejemplo,color: black;)}
Coloca un espacio entre las etiquetas<html>y<body>. Estas deben estar cerca de la parte superior de la página.
Ingresa una etiqueta HEAD. Escribe <head> y presiona ↵ Enter.
Añade una etiqueta STYLE. Escribe <style> y presiona ↵ Enter.
Cambia el color de fondo de tu página web. Para hacerlo:- Escribe body { y presiona ↵ Enter.
- Escribe background-color: lightblue; y presiona ↵ Enter.
- Puedes usar cualquier color que sea soportado, además de los modificadores "light" (claro) o "dark" (oscuro).
- Escribe } y presiona ↵ Enter.
Dale estilo al primer encabezado. Escribe h1 { y presiona ↵ Enter, añade un modificador y presiona ↵ Enter, y escribe } y presiona ↵ Enter. Puedes añadir varios modificadores a un elemento siempre y cuando cada modificador esté en su propia línea. Modificadores comunes incluyen los siguientes:- Tamaño de texto: escribe font-size: 30px; para establecer el texto como una fuente de 30 puntos. Sustituye el número con cualquiera que quieras usar.
- Color de texto: escribe color: black; para hacer el texto negro. Sustituye el color por cualquiera que quieras usar.
- Alineación del texto: escribe text-align: center; para centrar el texto. También puedes escribir left (izquierda) o right (derecha) para alinear el texto apropiadamente.
- Fuente usada: escribe font-family: times new roman; para establecer la fuente como Times New Roman. También puedes usar fuentes como verdana o georgia.
Dale estilo al primer párrafo. Escribe p1 { y presiona ↵ Enter, añade un modificador y presiona ↵ Enter, y escribe } y presiona ↵ Enter.- Los modificadores que puedes usar son idénticos a los usados para el encabezado.
Dale estilo al resto del documento. Puedes darle estilo a cualquier elemento haciendo referencia al texto de su etiqueta y colocando una llave abierta ({), añadiendo modificadores y luego cerrando la llave (}).
Cierra las etiquetas STYLE y HEAD. En una nueva línea debajo del último texto de estilo, escribe </style> y presiona ↵ Enter, y luego escribe </head> y presiona ↵ Enter. La hoja CSS está completa, lo que significa que ahora puedes revisarla y guardarla.Anuncio
Revisa tu hoja de estilo CSS. El documento CSS variará un poco, pero debe verse algo así:<!DOCTYPE html><html><head><style>body {background-color: lightblue;}h1 {font-size: 45px;}p1 {color: black;}</style></head><body><h1>Hi!</h1><p1>Soy una iguana</p1></body></html>
Haz clic en Archivo. Está en la esquina superior izquierda de la ventana del Bloc de notas. Aparecerá un menú desplegable.
Haz clic en Guardar como…. Esto lo verás cerca del final del menú desplegable. Al hacerle clic, se abrirá una ventana.
Selecciona una ubicación para guardar. Haz clic en una carpeta (por ejemplo, Escritorio) en el lado izquierdo de la ventana.
Haz clic en el cuadro desplegable de "Tipo". Aparecerá un menú desplegable.
Haz clic en Todos los archivos. Está en el menú desplegable.
Ponle nombre al archivo con una extensión ".html". En el campo de texto de "Nombre", escribe el nombre de documento que prefieras (por ejemplo, "Mi CSS") seguido de .html.- Por ejemplo, si nombraste al archivo "Mi CSS", escribirías mi css.html en el campo.
- Si usas un programa que pueda ejecutar archivos ".css", puedes usar .css en vez de .html.
Haz clic en Guardar. Está en la parte inferior derecha de la ventana "Guardar como". Esto guardará la hoja CSS en un formato ejecutable, lo que significa que puedes abrirlo en tu navegador o editor HTML preferido en lugar de en el Bloc de notas.Anuncio
Consejos
- Al codificar en HTML o CSS, en realidad no importa cuántos espacios haya entre las líneas de código. Puedes presionar ↵ Enter varias veces después de cada línea sin cambiar la función del programa.
- Trata de poner sangría en diferentes partes de la hoja de estilo CSS para hacer que sea más fácil encontrar los elementos. Por ejemplo, podrías poner sangría al código del encabezado una vez y al código del párrafo dos veces.
Anuncio
Advertencias
- Siempre prueba el código antes de cargarlo a un sitio web o compartirlo con otras personas.
Anuncio
Referencias
Acerca de este How.com.vn
Redactor de How.com.vn
Nuestro equipo de editores e investigadores capacitados han sido autores de este artículo y lo han validado por su precisión y amplitud.
El equipo de contenido de How.com.vn revisa cuidadosamente el trabajo de nuestro personal editorial para asegurar que cada artículo cumpla con nuestros altos estándares de calidad. Este artículo ha sido visto 37 000 veces.
El equipo de contenido de How.com.vn revisa cuidadosamente el trabajo de nuestro personal editorial para asegurar que cada artículo cumpla con nuestros altos estándares de calidad. Este artículo ha sido visto 37 000 veces.
Categorías: CSS
Esta página ha recibido 37 000 visitas.
¿Te ayudó este artículo?
⚠️ Disclaimer:
Content from Wiki How Español language website. Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply.
Wiki How does not encourage the violation of any laws, and cannot be responsible for any violations of such laws, should you link to this domain, or use, reproduce, or republish the information contained herein.
- - A few of these subjects are frequently censored by educational, governmental, corporate, parental and other filtering schemes.
- - Some articles may contain names, images, artworks or descriptions of events that some cultures restrict access to
- - Please note: Wiki How does not give you opinion about the law, or advice about medical. If you need specific advice (for example, medical, legal, financial or risk management), please seek a professional who is licensed or knowledgeable in that area.
- - Readers should not judge the importance of topics based on their coverage on Wiki How, nor think a topic is important just because it is the subject of a Wiki article.
Anuncio
