creando una pagina html
principales propiedades de HTML:
Etiquetas: Las etiquetas son los elementos principales de HTML que se utilizan para
marcar el contenido de la página. Las etiquetas se escriben entre corchetes
angulares (< y >),
y pueden incluir atributos para especificar más detalles sobre el contenido.
Estructura básica: Toda página HTML debe tener una estructura básica que incluya
las etiquetas html, head y body.
La etiqueta html define el inicio y el fin del documento HTML, la etiqueta head
contiene información sobre la página, como el título y los metadatos,
y la etiqueta body contiene el contenido real de la página.
Títulos: Los títulos son elementos importantes de HTML que se utilizan para definir
el contenido principal de la página.
Los títulos se escriben con la etiqueta <h1> a <h6>, donde <h1> es el título
principal y <h6> es el título menos importante.
Imágenes: Las imágenes se pueden incluir en una página HTML utilizando la etiqueta
<img>.
La etiqueta <img> incluye un atributo src que especifica la ubicación de la imagen
en el servidor.
Enlaces: Los enlaces se utilizan para vincular una página HTML con otra página web
o con una ubicación dentro de la misma página.
Los enlaces se crean con la etiqueta <a> y un atributo href que especifica la
dirección del enlace.
Listas: HTML tiene etiquetas para crear listas numeradas y con viñetas.
Las listas numeradas se crean con la etiqueta <ol> y las listas con viñetas se
crean con la etiqueta <ul>.
Cada elemento de la lista se crea con la etiqueta <li>.
-----------------------------------------------------------------------------------
----
Estructura de la pagina
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
Contenido de la página
</body>
</html>
-----------------------------------------------------------------------------------
----
agregar una imagen a html
Puedes agregar imágenes a tu página HTML utilizando la etiqueta <img> y
especificando la ubicación de la imagen en el atributo src.
Aquí te muestro un ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de imagen en HTML</title>
</head>
<body>
<h1>Imagen en HTML</h1>
<img src="ruta/de/la/[Link]" alt="Descripción de la imagen">
</body>
</html>
-----------------------------------------------------------------------------------
------
Puedes agregar un enlace o link a una página web en HTML utilizando la etiqueta
<a>.
La sintaxis básica para agregar un enlace es la siguiente:
<a href="url">Texto del enlace</a>
ejemplo:
<a href="[Link] a Google</a>
-----------------------------------------------------------------------------------
------
Crea un archivo CSS: Crea un archivo nuevo en tu editor de texto y guárdalo con la
extensión ".css".
Este archivo será donde escribirás el código CSS para darle estilo a tu página web.
Vincula el archivo CSS a tu página HTML: En la sección <head> de tu archivo HTML,
agrega una etiqueta de enlace (<link>) para vincular tu archivo CSS. Debe verse
algo así:
<head>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
-----------------------------------------------------------------------------------
-------
Escribe el código CSS: Abre el archivo CSS que acabas de crear y escribe el código
CSS para darle estilo a tu página HTML.
Aquí hay algunos ejemplos:
-- Cambiar el color de fondo de la página:
body {
background-color: #f2f2f2;
}
-- Cambiar el color de texto de los encabezados:
h1, h2, h3 {
color: blue;
}
-- Cambiar el tamaño de fuente del texto:
p {
font-size: 16px;
}
-- Agregar bordes a las imágenes:
img {
border: 1px solid black;
}
-----------------------------------------------------------------------------------
---------------
** Aquí te menciono algunas de las principales propiedades de CSS:**
-- color: define el color del texto y otros elementos de la página.
-- background-color: define el color de fondo de un elemento, como el cuerpo de la
página o una sección.
-- font-size: define el tamaño de la fuente del texto.
-- font-family: define el tipo de fuente que se utilizará para el texto.
-- text-align: define la alineación del texto dentro de un elemento, como el centro
o a la derecha.
-- border: define un borde alrededor de un elemento, como una imagen o un cuadro de
texto.
-- margin: define el espacio entre los bordes de un elemento y los elementos
adyacentes.
-- padding: define el espacio entre los bordes de un elemento y su contenido.
-- display: define cómo se mostrará un elemento en la página, como en línea o en
bloque.
-- position: define la posición de un elemento en la página, como fijo o relativo.
-----------------------------------------------------------------------------------
-------------------
crear una página web simple:
<!DOCTYPE html>
<html>
<head>
<title>Mi Página Web</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>Mi Página Web</h1>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Acerca de mi página web</h2>
<p>Bienvenido a mi página web. Esta es una página de ejemplo
creada con HTML y CSS.</p>
</section>
<section>
<h2>Mi último proyecto</h2>
<p>Recientemente, trabajé en un proyecto para crear un sitio web
para una organización sin fines de lucro. Fue una experiencia muy gratificante.</p>
</section>
</main>
<footer>
<p>Derechos reservados © 2023</p>
</footer>
</body>
</html>
-----------------------------------------------------------------------------------
------------------------------
agrega a tu archivo css lo siguiente:
header {
background-color: #87CEFA;
padding: 20px;
}
nav ul li a {
color: #ffffff;
}