Mtro. Fernando Arciniega

Apoyame con un clic en los anuncios, me ayudas a seguir generando contenido de calidad. ¡Gracias por tu apoyo!

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Search in posts
Search in pages

HTML – Clase1

HTML – Clase1
Print Friendly, PDF & Email

[et_pb_section admin_label=»section»][et_pb_row admin_label=»row»][et_pb_column type=»4_4″][et_pb_text admin_label=»Texto» background_layout=»light» text_orientation=»left» use_border_color=»off» border_color=»#ffffff» border_style=»solid»]

overvoiew

 

La estructura Web de HTML

La capacidad de codificar utilizando HTML es esencial para cualquier profesional de la web. La adquisición de esta habilidad debe ser el punto de partida para cualquier persona que está aprendiendo cómo crear contenido para la web.

El Diseño Web moderno se compone de:

  • HTML : Estructura
  • CSS : Presentación
  • JavaScript : Comportamiento
  • PHP o similares : backend (Administración del contenido dinámico)
  • CMS : Gestores de Contendo

Ejercicio:

Reorganizar el código para rodear el texto «Estoy aprendiendo HTML en SoloLearn!» con la apertura y cierre de etiquetas <p>:

01-html-p

 

La etiqueta <html>

Aunque varias versiones han sido liberados en los últimos años, los principios básicos de HTML siguen siendo los mismos. La estructura de un documento HTML se ha comparado con la de un sándwich. Como un sándwich con dos rebanadas de pan ( < y >), el documento HTML ha de abrir y cerrar las etiquetas HTML. Estas etiquetas, como el pan de un sándwich, que rodea todo lo demás:

02-etiqueta-html

Ejercicio

  • ¿Cuál es la etiqueta de apertura de HTML?
  • ¿Cuál es la etiqueta de cierre de HTML?

 

La etiqueta <head>

Inmediatamente después de la etiqueta de apertura HTML, se encuentra la cabeza/cabecera del documento, que se identifica mediante la apertura y cierre de etiquetas HEAD.

La cabecera de un archivo HTML contiene todos los elementos no visuales que ayudan a hacer el trabajo de la página. Aqui se especifican enlaces a archivos externos, titulo de la página, entre otros.

2-etiqueta-head

Ejercicio. Rellena los espacios en blanco, utilizando las etiquetas que se muestran en color verde.

rellena-los-espacios-en-blanco

 

La etiqueta <body>

La etiqueta del cuerpo BODY sigue después de la etiqueta de la cabeza HEAD. Todos los elementos visuales estructurales están contenidos dentro de la etiqueta BODY. Encabezados <h>, párrafos <p>, listas <i>, citas <cite>, imágenes <img> y enlaces <a> son sólo algunos de los elementos que pueden estar contenidos dentro de la etiqueta cuerpo .

Ejercicio. Reorganizar el código para crear una estructura básica de los documentos HTML.

reorganiza-el-codigo-html

 

El archivo HTML

Los archivos HTML son archivos de texto, por lo que puede utilizar cualquier editor de texto para crear su primera página web. Hay algunos editores de HTML muy agradables disponibles. Por ahora vamos a escribir los ejemplos en el Bloc de notas .

bloc-de-notas

Ejercicio. Teclea en el bloc de notas el siguiente código. Guárdalo como: ejemplo1.html

Es muy importante poner la extensión «.html» de lo contrario se guardará como un archivo de texto con extensión «.txt»

[html]
<html>
<head>
</head>
<body>
This is a line of text.
</body>
</html>
[/html]

Prueba el resultado en el navegador, haciendo doble clic al archivo ejemplo1.html

 

La etiqueta <title>

Para colocar un título en la pestaña del navegador, la cuál que describe la página web, debemos añadir la etiqueta <title> dentro de las etiquetas <head>.

ejemplo-con-title

 

Cuestionario

Para finalizar resuelve las siguientes preguntas:

04

01

02

03

 

Ésta es una versión al español del curso HTML de:

solo-learn-html-logo

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.