Básicamente, crear documentos HTML es digitar etiquetas, atributos y contenido. Ya vimos unas cuantas etiquetas en la estructura básica de un código de página web.
HTML es un lenguaje de marcas o etiquetas, que son las herramientas que dan forma a la página. Hay etiquetas para cada tipo de elemento que puede conformar una página web: título, párrafo, imagen, video, audio, enlace, tabla, viñeta, línea, etc., hasta para un salto de línea existe una etiqueta.
Las etiquetas se distinguen porque van entre un mayor que (<) y un menor que (>), y van generalmente de a pares, una etiqueta de apertura, que va al inicio del elemento que va a definir y la otra etiqueta similar de cierre, que va al final y se distingue porque tiene una barra inclinada (/), indicando que hasta allí va el título, el párrafo, el link, etc. Ejemplo, etiqueta de párrafo: <p>Aquí va el párrafo hasta que llegue al punto final.</p>. El texto que están en medio de la etiqueta de apertura y la de cierre, se conoce como el contenido del elemento. Más adelante veremos, que no todas las etiquetas tienen contenido y que no todas tiene etiqueta de cierre, pero si la mayoría.
Además de etiquetas y contenido, los elementos de una página web pueden tener atributos, los cuales definen una propiedad de la etiqueta. Por ejemplo, la etiqueta <html> tiene permitido el atributo lang para indicar el idioma de la página web. Estos atributos siempre van acompañados por un igual y el valor asignado a ese atributo, en este caso, por ejemplo: lang="es" para español o lang="en" para inglés.
Volvamos a la estructura básica de HTML para repasar y aclarar los términos vistos hasta el momento, además de ver unas definiciones más concretas para las etiquetas vistas.
HTML es un lenguaje de marcas o etiquetas, que son las herramientas que dan forma a la página. Hay etiquetas para cada tipo de elemento que puede conformar una página web: título, párrafo, imagen, video, audio, enlace, tabla, viñeta, línea, etc., hasta para un salto de línea existe una etiqueta.
Las etiquetas se distinguen porque van entre un mayor que (<) y un menor que (>), y van generalmente de a pares, una etiqueta de apertura, que va al inicio del elemento que va a definir y la otra etiqueta similar de cierre, que va al final y se distingue porque tiene una barra inclinada (/), indicando que hasta allí va el título, el párrafo, el link, etc. Ejemplo, etiqueta de párrafo: <p>Aquí va el párrafo hasta que llegue al punto final.</p>. El texto que están en medio de la etiqueta de apertura y la de cierre, se conoce como el contenido del elemento. Más adelante veremos, que no todas las etiquetas tienen contenido y que no todas tiene etiqueta de cierre, pero si la mayoría.
Además de etiquetas y contenido, los elementos de una página web pueden tener atributos, los cuales definen una propiedad de la etiqueta. Por ejemplo, la etiqueta <html> tiene permitido el atributo lang para indicar el idioma de la página web. Estos atributos siempre van acompañados por un igual y el valor asignado a ese atributo, en este caso, por ejemplo: lang="es" para español o lang="en" para inglés.
Volvamos a la estructura básica de HTML para repasar y aclarar los términos vistos hasta el momento, además de ver unas definiciones más concretas para las etiquetas vistas.
(de clic sobre la imagen para verla mejor)
Analicemos un poco el código:
- <!DOCTYPE html> Lo primero que nos encontramos es la declaración del tipo de documento que se está mostrando. El DOCTYPE variará según el tipo de documento realizado, en nuestro ejemplo hemos utilizado el doctype del HTML5 que es bastante sencillo en comparación al de HTML4 (consultar cuales eran los anteriores).
- html Tras declarar el tipo de documento, indicamos que iniciamos nuestro documento HTML. Esta etiqueta se cierra cuando finalizamos el documento. Vemos que lleva un atributo lang, que sirve para indicar el idioma del documento (en nuestro caso español).
- head En un documento HTML tenemos una cabecera dónde colocaremos los metadatos de la página, el código JavaScript y el CSS que utilizará el navegador para renderizar la página.
- meta charset Es muy recomendable en HTML5, ya que indica el juego de caracteres que requiere el documento, utilizaremos el utf-8. Como todo metadato debe ir dentro del head (consultar que es utf-8 y cuáles otros tipos de caracteres hay).
- title Es un tipo de metadato especial que nos proporciona el título de la cabecera de la página. Por motivos de posicionamiento (SEO) se recomienda que el meta <title> sea parecido al <h1> que tendrá nuestra página y a la URL que llevará. (Definir las siglas SEO y URL).
- body En su interior tendremos todos los elementos que conformarán el cuerpo de la página, etiquetas, atributos y contenido.
Actividad en clase
Con ayuda de la siguiente tabla de etiquetas y la consulta en internet de lo que requiera:
(de clic sobre la imagen para verla mejor)
Cree la siguiente página web lo más parecida posible (marque al final con su(s) nombre(s)):
Observaciones:
- Al descargar la imagen que va a utilizar, tenga en cuenta de qué formato es: png, jpg, gif… para asignarle la extensión al nombre de la imagen en la etiqueta <img>. La sintaxis de esa etiqueta quedaría así: <img src:"nombre_de_la_imagen.ext">.
- Para aumentar el grosor de una línea o barra insertada debe utilizar en la etiqueta <hr>, el atributo size y para que quede con relleno sólido y no hueco, el atributo noshade. Ejemplo: <hr size=4 noshade>.
- Guarde su trabajo con el nombre Taller 1 de HTML (recuerde asignarle la extensión correcta). No espere hasta digitar todo el código para guardar el archivo, debe guardar e ir probando el funcionamiento de las etiquetas y no esperar hasta el final para ver que falla. Después de revisar que todo funcione bien, por última vez, envíe por correo para su entrega, tanto el archivo de la página web como la imagen.
Para: informaticajdsm@gmail.com
Asunto: Taller 1 de HTML 11-4
Mensaje: nombre(s) completo(s) de quien(es) envia(n) el mensaje.
Adjuntar el archivo de la página web y el archivo de la imagen.
Si deseas que tu negocio crezca y que muchas personas lo conozcan debes contactar a Diseño web en León, con ellos pude obtener una página web espectacular para mi restaurante y pude surgir mucho mejor.
ResponderEliminarTenemos una web y queríamos darla a conocer mediante el SEO. Lo mejor que hemos hecho fue conseguir que un profesional nos ayudase.
ResponderEliminarEs la agencia seo marbella sin duda muy recomendables.