HTML
HTML El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para estructurar y desplegar una página web y sus contenidos. Por ejemplo, sus contenidos podrían ser párrafos, una lista con viñetas, o imágenes y tablas de datos.
Definición
ETIQUETAS
BASICAS: CODIGOS PARA
1. TITULO H1, H2. H3 <h1> – Encabezado de sección.
2. NEGRILLA
<strong> o la etiqueta <b>
3. SALTO DE
PARRAFO O LINEA <br>
4. IMAGEN <img>
5. VIDEO <video>
6. SONIDO <audio>
7. LINK DE
OTRA PAGINA <A>
8. TABLAS –
LISTAS <ol> para listas ordenadas,
<ul> para listas desordenadas, <li> para elementos dentro de la
lista
9. FORMULARIO
10. COLOR
DE FONDO
En una página index.htlm para guardar
En el hear hay que agregar tabulador
<Meta name="ancho" contenido="width=device-width, initial-scale=1"
Añadir un comentario (sintaxis)
Para que el acuerde porque monto eso ahí
< Esta es la etiqueta para caracteres especiales
Etiqueta
El cliente ve lo que hay dentro del contenedor
PALABRAS
FAVICON PNG EJEMPLO TULIPAN
GUIA BASICA DE LENGUAJE HTML https://uneweb.com/tutoriales/guia+Html.pdf
CODIGO ASCII https://elcodigoascii.com.ar/
F12 arroja los códigos
PAGINA WEB BEATRIZ
<!DOCTYPE html>
<html>
<head>
<title> beatriz </title>
<link rel="icon" href="img/even.png" type="image/png">
</head>
<body>
<h1> LAS MUJERES QUE AMAN DEMACIADO </h1>
<h2> De que trata </h1>
<a href="https://www.censa.edu.co/">Mi Censa</a>
<video controls>
<source src="VID/andres.mp4" type="video/mp4">
</video>
<h3> En este libro la autora ofrece un camino para que todas aquellas mujeres que aman demasiado puedan amarse a sí mismas y establezcan una relación de pareja sana, feliz y duradera. Cómo cambiar nuestra manera de amar y así dejar de sufrir. «Cuando estar enamorada significa sufrir, es que estamos amando demasiado. </h1>
<p><b>
En este libro la autora ofrece un camino para que todas aquellas mujeres que aman demasiado puedan amarse a sí mismas y establezcan una relación de pareja sana, feliz y duradera. </b><br> Cómo cambiar nuestra manera de amar y así dejar de sufrir. <i> «Cuando estar enamorada significa sufrir, es que estamos amando demasiado. </i> </h1>
</p>
<img src="img/mujeresqueaman.jpg"/>
</body>
</html>
05 DE AGOSTO 2024
En una página index.htlm para guardar
En el hear hay que agregar tabulador
<Meta name="ancho" contenido="width=device-width, initial-scale=1"
Añadir un comentario (sintaxis)
Para que el acuerde porque monto eso ahí
< Esta es la etiqueta para caracteres especiales
Etiqueta El cliente ve lo que hay dentro del contenedor
<!DOCTYPE html>
<html>
<head>
<meta chartset="utf-8"> <!--esta etiquta para caracter especial-->
<meta name ="viewport" contente="width=device-width, inicial-scale=1">
<title>nombre pestana</title> <!-- esto solo sale en la pestaña -->
<link rel="stylesheet" type="text/css" href="css/estilo.css">
</head>
<body>
<div class="titulo">
<h1>Nombre Empresa</h1>
</div>
<nav>
<ul>
<li><a href="">Inicio</a></li>
<li><a href="">Quienes somos</a></li>
<li><a href="">Galeria</a></li>
<li><a href="">Contacto</a></li>
</ul>
</nav>
<div class="contenido">
<div class="articulo">
<div>
<h2>informacion primaria</h2>
<p>Vinculados con la nobleza y con los reyes, los tulipanes en tonos morados y púrpura tienen un significado de dignidad, orgullo y éxito. También transmiten apoyo en un momento de duda o de miedo y son ideales para festejar el Día de la Mujer.</p>
<img src="img/tulipanes.jpeg">
</div>
</div>
<div class="segundario">
<h2>informacion secundaria</h2>
<p>notas secundarias
</div>
</div>
<div class="piedepagina">
<p>mas informacion sobre la pagina </p>
</div>
</body>
</html>
</html>
ESTILO
archivo nueva ventana
padding margen interna
*{
padding:0;
margin:0;
font-family: century gothic;
color: black;
text-decoration: none;
text-align: center;
}
.titulo {
padding: 20px;
}
nav ul{
width: 80%;
margin: auto;
border-radius: 20px;
list-style-type: none;
background-color: #F6B1C4;
}
nav li {
display: inline-flex;
}
nav a {
padding:20px;
width: 150px;
}
nav ul a:hover {
background-color: indianred;
}
.contenido {
display: flex;
width: 80%;
margin: auto;
margin-top: 50px
}
Comentarios
Publicar un comentario