Scribd Logo
Importer

Bienvenue sur Scribd !

  • HTML

    Transféré par

    Wilmer Sanchez Gonzales
    7 vues4 pages
    html

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOCX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    html

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    7 vues4 pages

    HTML

    Transféré par

    Wilmer Sanchez Gonzales
    html

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 4

    HTML

    INTRODUCCION:
    HTML es el lenguaje con el que se escribe el contenido de las páginas web. Las páginas web pueden
    ser vistas por el usuario mediante un tipo de aplicación llamada cliente web o más comúnmente
    "navegador". Podemos decir por lo tanto que el HTML es el lenguaje usado por para especificar el
    contenido que los navegadores deben representar a la hora de mostrar una página web.

    ETIQUETAS EN HTML:
    Una etiqueta HTML es (para los más novatos en esto) aquello que vemos entre corchetes angulares
    en el código de nuestra web, por ejemplo: <H1> (Encabezado principal)

    Casi todas las etiquetas deben “encerrar” el contenido al que afecta, aunque no son el 100% de los
    casos como, por ejemplo: <br /> (Salto de línea)

    Estructura básica de un documento HTML

    Lo vemos por encima, porque lo importante en este post son las utilidades concretas de algunas
    etiquetas HTML para tu WordPress, pero básicamente esto es:

    <html> (Abrimos el documento)

    <head> (Abrimos el head)

    En la cabecera o “head” se inserta todo lo referente al title, styles vinculados, scripts, etc.

    </head> (Cerramos el head)

    <body> (Abrimos el body)

    En el cuerpo del documento o “body”, es donde va el contenido general, el grueso de la página.

    </body> (Cerramos el body)

    </html> (Cerramos el documento)

    Vale, esto es “el árbol” o estructura básica. Qué ocurre, que si vamos a la práctica nuestro
    WordPress está basado en lenguaje PHP, el cual, aunque a su vez está basado y utiliza HTML, nos
    complica un poco las cosas.

    Nuestro WordPress no son una serie de páginas HTML estáticas, sino que utilizan PHP
    precisamente para cargar de forma dinámica distintos contenidos dentro de ella, basándose en
    archivos PHP del tipo index.php, header.php, page.php, footer.php,y muchos otros.
    El funcionamiento de todo eso lo explicaré al detalle en el curso de WordPress.org que estoy
    preparando desde hace un tiempo, pero como decía hoy sólo quiero centrarme en el uso
    práctico de algunas etiquetas HTML en concreto.

    Las etiquetas HTML más relevantes

    <title>: para definir el título de una página. Importantisimo para el SEO.

    <link> y <style>: ambas van dentro del <head>, y sirven para aplicar estilos CSS a nuestro
    documento. Con <link> vinculamos de forma externa un archivo.css, y con <style> podemos escribir
    directamente código CSS dentro del head.

    <h1>, <h2>, <h3>…<h6>: encabezados, numerados del 1 al 6 por orden de RELEVANCIA. El uso de
    estos encabezados es determinante para el SEO, porque es la mejor forma que tienen Google de
    entender la estructura de nuestro contenido y poder saber qué es lo relevante.

    Un pequeño tip: no se te ocurra, meter dos o más encabezados <h1>. Lo mejor, es poner sólo uno
    y que contenta tu keyword, y luego estructurar el contenido de forma coherente con <h2> y <h3>,
    incluyendo en ello la keyword y variantes, no siempre la misma exactamente.

    <table>, <tr> y <td>: son las tablas, las filas y las celdas. Están un poco obsoletas, aunque a veces
    me han sacado de un apuro.

    <div>: es un elemento “contendedor” de otras cosas. Realmente es lo que más se usa. Sabiendo
    manejar un <div style=” loquenecesites”>contenido</div> puedes hacer casi todo. Podrás ver un
    ejemplo práctico al final del post.

    <a>: para añadir enlaces. Dentro de ella tendremos dos atributos importantes, que son: href=”
    indica_la_URL_o_RUTA” y target=” self o _blank”, según quieras que el enlace se abra en la misma
    página o en una pestaña nueva.

    <img> es la etiqueta con la que se insertan las imágenes. Este es uno de los pocos casos que no
    necesita etiqueta de cierre, sino que vale con: <img src=” rutadelaimagen” alt=” textoalternativo”
    />, sin poner </img>

    <li>, <ol>, <ul>: son las etiquetas que controlan las listas ordenadas y desordenadas. Ejemplo:

    Estos circulos son de listas desordenadas, usando la etiqueta <ul>

    Este número sale porque utilizo una lista ordenada, con <ol>

    Cada elemento o item de una u otra lista, se controla medianta <li>

    <b>: convierte el texto a negrita. Tambien os podéis encontrar con el antiguo <strong> que hace lo
    mismo.

    <i>: lo mismo, pero para aplicar cursiva al formato de un texto. Ejemplos: esto irá en <b>negrita</b>
    y este otro texto en <i>cursiva</i>

    <p>: con esta etiqueta determinamos un texto de párrafo. Se le aplican estilos como a todas, el dato
    relevante de esta etiqueta sería explicar el hecho de que añade un salto de línea y otro más al
    cerrarla con </p>, como si diéramos dos veces al “intro”, para que me entiendas.
    <br />: esta otra etiqueta, sin embargo, hace un salto de línea simple. Es decir, lo que venga después
    de esto irá justo en la linea siguiente, pero sin dar otro espacio más.

    “Escribo un texto normal y la siguiente linea la escribo después del cierre de un </p>

    Esta es la siguiente linea cerrando con esa etiqueta <p>.”

    “Ahora escribo una linea pero hago un salto de linea simple con <br />
    Esta es la siguiente linea despues de usar el <br />

    ESTRUCTURA DE UNA PAGINA HTML:


    Cada página comienza con: < HTML >.

    A continuación, viene la cabecera, delimitada por < HEAD > y < /HEAD >.

    Después, el comando < BODY >, que indica el comienzo del cuerpo de la página. Las instrucciones
    HTML se escribirán a continuación, y finalizarán con < /BODY >.

    La página acabará con < /HTML >.

    Es decir:

    <HTML>

    <HEAD>

    Definiciones de la cabecera

    </HEAD>

    <BODY>

    Instrucciones HTML

    </BODY>

    </HTML>

    Cabecera

    La cabecera de un documento está delimitada por las etiquetas < HEAD > y </HEAD > Sus
    componentes son opcionales. El más importante es <TITLE>, que permite escribir el título del
    documento. El título no se muestra en la página, sino en la parte superior de la ventana del
    visualizador, como identificador en los bookmarks y en la history list. Se utiliza de la siguiente forma:

    <HEAD>

    <TITLE>Título del documento HTML</TITLE>

    </HEAD>

    Cuerpo
    Es la parte delimitada por <BODY> y < /BODY >. Puede llevar los siguientes atributos:

    BACKGROUND="imagen": define el fondo. Más adelante veremos más sobre imágenes.

    BGCOLOR="######": color del fondo (sólo si no se define una imagen de fondo, o si esta imagen no
    puede obtenerse. Más adelante veremos más sobre colores. Por ahora nos basta saber que para
    los colores básicos se puede utilizar su nombre en inglés: white, blue, red, green.

    TEXT="######": color del texto. Por defecto será negro.

    LINK="######": color de los links. Por defecto será azul.

    VLINK="######": color de los links visitados. Por defecto será violeta.

    Vous aimerez peut-être aussi