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.

Por ejemplo:

 <form action="https://www.freecatphotoapp.com/submit-cat-photo"><input type="text" placeholder="cat photo URL"> </form>

AGREGAR BOTON DE ENVIAR

Agreguemos un submitbotón a su formulario. Al hacer clic en este botón, se enviarán los datos de su formulario a la URL que especificó con el actionatributo de su formulario.

Aquí hay un botón de envío de ejemplo:

<button type="submit">submit</button>

OBLIGATORIO

si desea que un campo de entrada de texto sea obligatorio, simplemente puede agregar el atributo requireddentro de su inputelemento, así:<input type="text" required>

SEPARAR

El divelemento, también conocido como elemento de división, es un contenedor de propósito general para otros elementos.

El div elemento es probablemente el elemento HTML más utilizado de todos.

Al igual que cualquier otro elemento que no se cierre automáticamente, puede abrir un div elemento con <div>y cerrarlo en otra línea con </div

VALOR DE BOTONES DE RADIO

Cuando se envía un formulario, los datos se envían al servidor e incluyen entradas para las opciones seleccionadas. Entradas de tipo radio y check box reportar sus valores desde el value atributo. Aquí, usted tiene dos radio entradas. Cuando el usuario envía el formulario con la indoor opción seleccionada, los datos del formulario incluirán la línea: indoor-outdoor=indoor. Esto es de los atributos name y value de la entrada "interior".

Si omite el value atributo, los datos del formulario enviado utilizan el valor predeterminado, que es on. En este escenario, si el usuario hizo clic en la opción "interior" y envió el formulario, los datos del formulario resultante serían indoor-outdoor=on, lo cual no es útil. Por lo tanto, el value atributo debe establecerse en algo para identificar la opción

...