Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • HTML: Guía de para principiantes

    Cargado por

    Sasha Haji
    28 vistas3 páginas
    HTML es el lenguaje de marcado que se utiliza para crear páginas web. Contiene etiquetas para estructurar el contenido como <head>, <body>, <p>, <ul>, <ol>, <img>, <video>, <audio>, <form>, <input> y <table>. También incluye etiquetas semánticas como <header>, <nav>, <article> y <footer> para mejorar la accesibilidad y el SEO. Los formularios se crean con <form> y contienen campos de entrada como <input type="text">, <textarea>, <select> y

    Descripción original:

    Título original

    HTML Sintaxis

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    TXT, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    HTML es el lenguaje de marcado que se utiliza para crear páginas web. Contiene etiquetas para estructurar el contenido como <head>, <body>, <p>, <ul>, <ol>, <img>, <video>, <audio>, <form>, <input> y <table>. También incluye etiquetas semánticas como <header>, <nav>, <article> y <footer> para mejorar la accesibilidad y el SEO. Los formularios se crean con <form> y contienen campos de entrada como <input type="text">, <textarea>, <select> y

    Copyright:

    © All Rights Reserved
    Descargue como TXT, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    28 vistas3 páginas

    HTML: Guía de para principiantes

    Cargado por

    Sasha Haji
    HTML es el lenguaje de marcado que se utiliza para crear páginas web. Contiene etiquetas para estructurar el contenido como <head>, <body>, <p>, <ul>, <ol>, <img>, <video>, <audio>, <form>, <input> y <table>. También incluye etiquetas semánticas como <header>, <nav>, <article> y <footer> para mejorar la accesibilidad y el SEO. Los formularios se crean con <form> y contienen campos de entrada como <input type="text">, <textarea>, <select> y

    Copyright:

    © All Rights Reserved
    Descargue como TXT, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 3

    HTML: Hypertext Markup Language

    Los : no se ponen, solo es para explicar cada sintaxis

    Etiquetas Y enlances:
    <br>: completa el espacio
    <!DOCTYPE html>: Siempre se pone al principio del codigo. Ultima version de html
    <html></html>: dentro de esta etiqueta se encuentra Toda la página
    <head></head>: lo que no se puede ver en el codigo/no lo muestra en la pagina web.
    <body></body>: parte visible de la pagina web
    <title></title>: titulo de la pestaña
    <link rel="icon" href="ruta donde se encuentra el archivo (el archivo tiene que
    tener formato .ico)">
    -Sirve para poner el icono en la página
    <br></br>:se usa para completar lo que falta de la linea, tira el texto para abajo.
    <h1></h1>: Muestra Titulo. Usada solo 1 vez
    <h2></h2>: Muestra subtitulo. Usada varias veces
    <h3></h3>/<h6></<h6>: Se pueden usar ilimitadas veces. Maximo hasta h6, más allá no
    existe.
    <a href="">Click aquí</a>: enlace/lin
    <a href="https://url"> target="_BLANK": abre la ventana en una pestaña aparte.
    -https:// para poder rutear a la página deseada.
    -/*nombre de la carpeta*: redirecciona a la carpeta deseada
    -../: vuelve una carpeta/paso atras. Se puede poner más de una vez para volver las
    veces deseadas:
    ../ 1 vez, ../../ 2 veces, etc.
    <p></p>: parrafo. Donde se ubica el texto/parrafo.
    -Lorem: texto por defecto para rellenar.
    <b></b>: poner texto en negrita.
    <i></i>: italica
    <strike></strike>:tachado
    <small></small>: letra chica

    Listas:
    <ul></ul>:listas desordenadas con un punto "."
    <ol></ol>: lista ordenada por numeros.
    -<li></li>:lo que va dentro de la lista.
    Multimedia:
    src= source
    <img src="">:se usa para la ruta de la imagen y mostrarla en pantalla
    (no es necesario cerrar la etiqueta <img>)
    -Alt="">:se usa despues de <img src="link", sirve para dar a conocer de que se
    trataba la imagen si no se llegase a
    mostrar en pantalla.
    -width="NUMEROpx": cambia el ancho de la imagen
    -height="NUMEROpx": cambia el alto de la imagen
    (no es muy recomendado usar estas etiquetas ya que se puede hacer en CSS)
    <video src="*link del video*"</video>: muestra un video siempre y cuando el formato
    sea de video.
    -controls>: atributo que no tiene un valor, se preconfigura por el navegador. Se
    usa luego de <video src="" y <audio src="":
    <video src="*link*" controls>
    <audio src="*link*"></audio>: para que se reproduzca audio

    Divs:
    <div></div>: separa y agrupa contenido. Es casi parecido a parrafo <p>

    Formularios:
    <form></form>: formulario (name="" se usa para backend, no es necesario para front
    end *lo que estás estudiando*)
    -<input type="" >: entrada de datos. Tipos de datos:
    <button type="submit">this button submits the form</button>
    <input type="text" placeholder="">: placeholders se ulilizan para completar el
    espacio en blanco
    -"text" *required="">
    *pide de forma obligatoria completar el campo deseado, caso contrario no se
    enviaran datos.
    -"password"
    -"number"
    -"email"
    -"color": deja seleccionar un color
    -"range min="10" max="1000">: deja elegir un rango entre numeros seleccionados
    -"date": fecha
    -"time"
    -"button" value="Boton (o cualquier otra palabra)"
    -"submit" value="" : por defecto ya viene predefinido por el navegador.
    <textarea></textarea>:tambien funciona como un input
    -readonly="": solo podrá leerse el contenido y no se podrá modificar

    Metadatos:
    -<meta charset="utf-8">:codificacion universal. Codifica la pagina para que puedan
    verse caracteres especiales ej:acentos, Ñ, etc.
    -<meta name="keywords" content="*palabras claves y/o tags*">: palabras claves para
    que salga en el navegador
    -<meta name="description" content="*descripcion de la pagina entre 50 y 70
    caracteres*">
    -<meta name="author" content="">: se usa para nombrar al autor de la página
    -<meta name="copyright" content="">: muestra si nuestra empresa está registrada y
    tiene copyright.
    -<meta name="robots" content="index" o "noindex" >: toda pagina buscada en google
    son indexadas
    para que aparezcan y si es no indexada, no aparecerá en las opciones/indice. (no se
    usa mucho a menos que aprendas back-end)

    HTML Semántico:
    Como está separada una página:
    Header: encabezado
    Nav: barra de navegacion (dentro del header)
    Articulo:
    Seccion:
    Aside:
    Pie de pagina o footer: es muy importante porque es donde se debe poner el
    copyright, contacto, etc.

    NAV:
    -<nav></nav>: barra the navegacion para navegar por la pagina
    Tablas:
    -<table></table>: se inicia una tabla
    -<tr></tr>:agrupa datos del mismo tipo en columnas dentro de las tablas
    -<td></td>: crea filas dentro de las tablas
    Alt, ID, íconos y center:
    <center></center>: centra la imagen y textos. Para centrar tablas hay que poner el
    tag <center></center> dentro de los
    td <td></td>. NOTA: no es recomendable usar <center></center> en HTML, es mejor
    hacerlo en CSS.
    -<img src="link" alt="nombre" title="titulo o nombre para mostar al arrastrar el
    mouse en la imagen">:en caso de que la
    imagen no se pueda mostrar aparecerá el nombre puesto en alt. Poner alt="" si o si,
    no olvidarse.
    -<a href="#">ir a tal lugar</a>
    -<h2 id="nombre que se puso despues del #></h2>
    -<link rel="icon" a href="nombre del icono con terminacion .ico">

    <label for="indoor">
    <input id="indoor" type="radio" name="indoor-outdoor">Indoor
    </label>:boton radio es usado como otro input para darle al usuario la chance de
    elegir una sola
    respuesta entre varias preguntas, tipo multiple-choice.
    <label for=""> <input id="" type="checkbox" name=""></label>
    Los formularios suelen usar casillas de verificación (checkboxes) para preguntas
    que puedan tener más de una respuesta.
    Se considera buena práctica definir explícitamente la relación entre un input de
    tipo checkbox (casilla de verificación)
    y su correspondiente label (etiqueta), estableciendo el atributo for en el elemento
    label para que
    coincida con el atributo id del input asociado:
    <label for="loving"><input id="loving" type="checkbox" name="personality">
    Loving</label>

    <label for="indoor">
    <input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
    </label>
    <label for="outdoor">
    <input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
    </label>
    Aquí tienes dos inputs de tipo radio. Cuando el usuario envía el formulario con la
    opción indoor seleccionada,
    los datos del formulario incluirán la línea: indoor-outdoor=indoor.
    Esto proviene de los atributos name y value del input "indoor".
    Si omites el atributo value, los datos del formulario enviado utilizarán el valor
    por defecto, que es on.
    En este escenario, si el usuario hizo click en la opción "indoor" y envió el
    formulario,
    el dato resultante del formulario sería indoor-outdoor=on, lo cual no resulta útil.

    Por lo que el atributo value debe establecerse a un valor que identifique la opción
    claramente.

    Puedes hacer que una casilla de verificación o botón de radio se marque por defecto
    usando el atributo checked.
    Para hacer esto, simplemente agrega la palabra checked al interior de un elemento
    de entrada. Por ejemplo:
    <input type="radio" name="test-name" checked>

    También podría gustarte