5 pasos para la comprensión básica de código html

HTML es la abreviatura de HyperText Markup Language. Eso es un galimatías para ‘algo que hace que el texto sin formato se ve bien`. Es el ‘código` que hay detrás de cada página web. Incluso éste. Y, sorprendentemente, en realidad es bastante simple.

Las enseñanzas de código HTML básico puede (casi) pueden desglosar en dos disciplinas de todos los gobernantes: estilo a.k.a manipular la apariencia, y referente, a.k.a marcado y que apunta a la ubicación de, y dentro de los documentos. HTML no puede hacer nada más complicado que el dibujo de una tabla, o la creación de marcos, y no vamos a cortar en PHP o Java.

Sin embargo, el HTML es todavía muy fuera de lo común para el usuario estándar. Es la magia, y ninguno de su negocio. Mi objetivo hoy es darle algunos de los componentes básicos de HTML en el transcurso de unos pocos minutos. Usted no va a ser un programador por el momento, pero usted será capaz de rozar la fuente de una página web, entenderlo, y agarrar esa imagen que Flickr está tratando tan duro para mantener de usted.

Paso uno - el concepto de Etiquetas

Como se dijo anteriormente, el código HTML básico manipula un documento de texto para aplicar el estilo y referencia. Lo hace mediante la aplicación de ‘etiquetas. Una etiqueta no hace nada más que lo que indica una posición o selección del documento, y especificando el tipo de magia que hay que hacer.

Vídeo: Curso Basico de HTML - 5. Imagenes

Esta, y sólo este parte del documento se ve afectada.lt;/tag-ejemplo-1GT;
Algo que acaba de pasar, anterior esta parte del documento

El Ejemplo 1 muestra una frase que está encapsulado por dos etiquetas, una empezar- y etiqueta de cierre. Todo lo demás se ve afectada. Ejemplos muy comunes son Negrita, cursivo, o la creación de una enlazar. La etiqueta final es idéntica a la etiqueta de empezar, pero está precedido en corchetes angulares por una barra (/).

Ejemplo 2 muestra una etiqueta que funciona solo y (posiblemente) no lo hace necesitar estar cerrado. Aunque no es necesario, que es de vez en cuando también se escribe como hacer hincapié en este mismo atributo. Loner etiquetas no afectan a ‘parte` del documento, pero significan magia locales, las cosas que suceden‘en medio`. Los ejemplos más comunes son saltos de línea y de párrafo.

Nota: para las etiquetas solitario, , , y todos significan lo mismo.

Esto, y sólo esta parte del documento se ve afectada.

A veces, las etiquetas permiten atributos adicionales a suministrar. Los ejemplos más comunes son la fuente del texto y el color, o anchura de la imagen, la altura y la fuente. En esos casos, el nombre de la etiqueta es seguido por un espacio, y un número de atributo con un valor, de nuevo separados por espacios. El valor es la parte variable de esta fórmula. Tenga en cuenta que la etiqueta final sigue siendo el mismo, independientemente de los atributos.

Vamos a revisar algunas etiquetas comunes en los próximos pasos.

Paso dos - La Parcelación de HTML, CABEZA & CUERPO

Las etiquetas HTML, cabeza y cuerpo son de un documento HTML lo que es un dormitorio, cocina y sala de estar son de una casa. Estas etiquetas que encapsulan parcelar las grandes partes de un documento.

Vídeo: Como crear una pagina web completa en HTML - 5

simplemente indica el uso de código HTML. Ellos muestran en cada página web, normalmente al comienzo y al final, y abrazan la práctica totalidad del resto del código, incluyendo los dos siguientes.
marcar el ‘edificio administrativo`. Estos serán encapsular el título, y permiten a ciertas secuencias de comandos. Por lo general, en la parte de cabeza (sin doble sentido) del documento, esto es, donde no es necesario ser.
se encuentra por debajo de las etiquetas HEAD, y hace que la mayor parte del documento. Esta parte cuenta la historia de lo que realmente está mostrando en su página web. Viven aquí son los de texto, imágenes, enlaces, y casi cualquier cosa que se puede ver en su navegador. Aquí es donde jugamos. Las siguientes etiquetas de todos ocurren dentro de la parte del cuerpo de un documento HTML.

html código básico

Paso tres - Porque , & Make You Feel Pretty

Ya hemos dicho HTML es un lenguaje de marcas. Esto significa tanto como hacer el texto siento bastante. Recuerde, el HTML se remonta a cuando la banda fue una experiencia muy de texto y. Además, el Internet habría sido demasiado lentos para apoyar YouTube. Estas son algunas de las más comunes las etiquetas bastante de decisiones.

hace que su mirada texto negrita
te hace escribir en cursivo
subrayados lo que acaba de escribir

Usted estará encantado de saber que estos también trabajan en la sección de comentarios. No se debe abusar de ellos, sin embargo.

golpea la ruptura, por lo que continúa en una línea nueva
indica un párrafo, la creación de un descanso extra grande

Estos le permiten estructurar el documento, debido a una ruptura real no significa nada en un documento HTML.

le permite manipular un montón de otras cosas con el texto, mediante el uso de atributos como el tamaño, la cara y el color.

Un ejemplo ideal sería pitufos.

a
permite dibujar rápidamente diferentes cabeceras de tamaño. H1 es más grande y más pequeño H7. Los que usamos en los artículos MakeUseOf son por lo general alrededor de H3.

Hoy en día, marcado a menudo se mantienen en un separada CSS archivo. Las cifras exactas se explican estilo externamente, y uno sólo tiene que parte ‘marca` del documento de aplicarlos. Esto se hace mediante el uso de div las etiquetas. Por ejemplo,

algún texto

buscará una headermakeuseof clase en el archivo CSS. No vamos a discutir esto en detalle.

Paso cuatro - Embedded Imágenes con

Las imágenes han convertido en habituales en las páginas HTML, y sin embargo, hay una pieza de código detrás de él. los es una de las dos etiquetas que vamos a discutir en detalle, porque es algo que usted será capaz de utilizar. Basta pensar en esos sitios web molestos que no le permiten descargar algunas imágenes para el escritorio (estoy mirando a ti, Flickr). La próxima vez, sólo tiene que ir a la fuente y agarrar la fuente sí mismo.

Éstos son algunos de los atributos se utiliza junto con la pestaña IMG.

src =”https://site.com/image.jpg/”

Muy importante. El atributo de origen especifica la ubicación de una imagen. Así es, una imagen nunca es realmente hizo en una página web, pero es atraída desde una fuente externa. Una vez que tenga esa dirección, tienes la imagen.

A veces, sólo se muestra parte de la URL. La dirección URL real dependerá de la ubicación del archivo HTML. Esto se denomina una dirección relativa, en contraste con una dirección absoluta. un ejemplar https://site.com/dir1/dir2/dir3/page.html puede mostrar un valor de “imagen.jpg” cuando la imagen se encuentra en el mismo directorio que la página web. En este ejemplo, la dirección completa sería https://site.com/dir1/dir2/dir3/image.jpg.

Si se encuentra una dirección relativa de “dir4 / imagen.jpg”, la imagen se encuentra en https://site.com/dir1/dir2/dir3/dir4/image.jpg

Del mismo modo, “../image.jpg” tendrá que volver un directorio “” ../../image.jpg dos directorios, y así sucesivamente.

height =”200" width =”50%”

Estas etiquetas definen qué tan grande es la imagen desplegado. No dice nada sobre el tamaño real de la imagen. Los tamaños pueden ser añadidos en pixeles (donde 200 y 200 píxeles son una y la misma) o por ciento. Con solamente altura o anchura especificada, el otro cambia en consecuencia. Utilizando las dos etiquetas que permite ‘estiramiento`.

alt =”nombre alternativo o comentario”

La etiqueta alt especifica el texto mostrado en el ratón por encima, o cuando una imagen no se carga. Más específicamente, estos son los que utiliza xkcd para esos virajes divertidos.

El uso apropiado sería, por ejemplo,

Paso cinco - los enlaces se hacen con una etiqueta

Éste podría ser incluso más importante que la etiqueta IMG. Un etiqueta le permite marcar un punto en un documento, y vincular a los documentos, imágenes, archivos, e incluso los anclajes en otros sitios HTML. Estos son los atributos más comunes.

href =”// makeuseof.com”

Uno de los atributos más común, el texto escrito. Se pueden crear enlaces mediante la definición de la dirección web y encapsular dicho ‘texto ancla`. Los enlaces también pueden ser usados en la sección de comentarios, siempre que no vincula a spam o contenido inapropiado.

name =”neverwhere”

Se utiliza junto con el atributo de nombre, la etiqueta creará un ancla. Puede usar esta ancla de vincular de nuevo a partir de dentro de la misma página, o incluso a través de Internet. Uno puede enlazar a un ancla mediante una dirección URL relativa o absoluta, respectivamente, o.

Vídeo: 04. Insertar imagenes en codigo HTML [Rutas absolutas y Relativas en codigo HTML]

En conclusión

Esta es la parte en la que admitir que sólo hemos cepillado de la superficie del código HTML básico. Lo que hoy hemos visto le permitirá hojear y comprender una gran parte de los sitios web simples. Vaya por delante, probarlo. Definitivamente encontrarás algunas etiquetas que no conoces, pero ahí es donde Google es muy útil. Si estás dispuesto que hay mucha más información dónde ha salido, y todo lo que puede encontrar en línea.

Si usted está buscando algo muy específico, como una imagen, un archivo de audio, o un enlace, no hay necesidad de leer toda la página HTML. Presione Ctrl + F y búsqueda de los archivos o las etiquetas relevantes. Ya sabes lo que estás buscando por ahora, y sobre todo cuando lo has encontrado.

¿Qué piensas? Su primer o el último encuentro con HTML? Vamos a saber lo que piensa en la sección de comentarios, y no tenga miedo de probar algunos de los códigos de marcado!