Scribd
Cargar
74 vistas4 páginas

Untitled

El documento describe los principales elementos de HTML como etiquetas, estructura básica de una página, títulos, imágenes, enlaces y listas. Explica cómo agregar una imagen y un enlace a una página HTML, y cómo crear y vincular un archivo CSS para darle estilo a una página.

Cargado por

ANTONIO JEAN PIERRE DIAZ GARRIDO
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como TXT, PDF, TXT o lee en línea desde Scribd
74 vistas4 páginas

Untitled

El documento describe los principales elementos de HTML como etiquetas, estructura básica de una página, títulos, imágenes, enlaces y listas. Explica cómo agregar una imagen y un enlace a una página HTML, y cómo crear y vincular un archivo CSS para darle estilo a una página.

Cargado por

ANTONIO JEAN PIERRE DIAZ GARRIDO
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como TXT, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 4

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/imagen.jpg" 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="https://www.google.com">Ir 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="style.css">
</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="style.css">
</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 &copy; 2023</p>
</footer>

</body>
</html>

-----------------------------------------------------------------------------------
------------------------------
agrega a tu archivo css lo siguiente:

header {
background-color: #87CEFA;
padding: 20px;
}

nav ul li a {
color: #ffffff;
}

También podría gustarte