Programacion web

BASICO

<h1> EMPIEZA TITULO

</H1> TERMINA TITULO

<H2> EMPIEZA SUBTITULO

</H2> TERMINA SUBTITULO

<p> EMPIEZA PARRAFO

</p> TERMINA PARRAFO

Los comentarios en HTML comienzan con <!-- y terminan con un-->

HTML5 introduce etiquetas HTML más descriptivas. Estos incluyen main, header, footer, nav, video, articley section otros.

Estas etiquetas le dan una estructura descriptiva a su HTML, hacen que su HTML sea más fácil de leer y ayudan con la optimización de motores de búsqueda (SEO) y la accesibilidad. La mainetiqueta HTML5 ayuda a los motores de búsqueda y otros desarrolladores a encontrar el contenido principal de su página.

INSERTAR UNA IMAGEN

<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">

ESTE ES UN MODO DE AÑADIR UNA FOTO A UNA WEB CON UNA DESCRIPCION

VINCULAR CONTENIDO FUERA DE ESA PAGINA WEB

Puede usar elementos a ( anclaje ) para vincular a contenido fuera de su página web.

A los elementos necesitan una dirección web de destino llamada href atributo. También necesitan texto de anclaje. Aquí hay un ejemplo:

<a href="https://www.freecodecamp.org">this links to freecodecamp.org</a>

ENLACE INTERNO

Para crear un enlace interno, asigna el href atributo de un enlace a un símbolo hash #más el valor del id atributo para el elemento al que desea vincular internamente, generalmente más abajo en la página. Luego debe agregar el mismo id atributo al elemento al que está vinculando. An id es un atributo que describe de forma única un elemento.

A continuación, se muestra un ejemplo de un enlace de anclaje interno y su elemento de destino:

<a href="#contacts-header">Contacts</a>

...

<h2 id="contacts-header">Contacts</h2>

Mi ejemplo:

<a href="#footer">"jump to bottom"</a>

<footer id="footer">jump to bootom</footer>

TEXTO CON Y SIN LINK

Puedes juntar texo con link y sin con este ejemplo:

<p> view more <a href="https://www.freecatphotoapp.com" target="_blank"> cat photos</a> </p>

= view more cat photos

Target es un atributo de etiqueta de ancla que especifica dónde abrir el enlace. El valor _blank especifica abrir el enlace en una nueva pestaña. El hre fes un atributo de etiqueta de anclaje que contiene la dirección URL del enlace:

El símbolo # o también conocido como hash sirve para crear un enlace muerto

IMAGEN CON HIPERVINCULO A UNA PAGINA

Puede convertir elementos en enlaces anidándolos dentro de un aelemento.

Anide su imagen dentro de un aelemento. Aquí hay un ejemplo:

<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing cat.jpg" alt="A cute orange cat lying on its back."></a>

Recuerde usar #como propiedad ade su elemento hrefpara convertirlo en un enlace muerto.

CREAR VIÑETAS

Las listas desordenadas comienzan con un <ul>elemento de apertura, seguido de cualquier número de <li>elementos. Finalmente, las listas desordenadas se cierran con un </ul>.

Por ejemplo:

<ul>

  <li>milk</li>

  <li>cheese</li>

</ul>

=

• milk
• cheese
• dormir

LISTA ORDENADA

HTML tiene otro elemento especial para crear listas ordenadas o listas numeradas.

Las listas ordenadas comienzan con un elemento de apertura <ol>, seguido de cualquier número de <li>elementos. Finalmente, las listas ordenadas se cierran con la </ol>etiqueta.

Por ejemplo:

  <Ol>

    <li>cat nip</li>

    <li>laser pointers</li>

    <li>lasagna</li>

  </Ol>

=

1. cat nip
2. laser pointers
3. lasagna

CAMPO DE TEXTO

<input type="text">

[pic 1]

CAMPO DE TEXO COMPLETO ANTES DE INGRESAR

El texto de marcador de posición es lo que se muestra en su inputelemento antes de que su usuario haya ingresado algo.

Puede crear texto de marcador de posición así:

<input type="text" placeholder="cat photo url">

Puede crear formularios web que realmente envíen datos a un servidor usando nada más que HTML puro. Puede hacer esto especificando un actionatributo en su formelemento.

...