¿Cómo crear una página web en HTML?

William Alexander Mancipe Duarte

Junio 2019.

Institución Educativa Simón Bolívar.

Arauca

Informática
 II

Dedicatoria

Dedicamos nuestro esfuerzo al realizar este trabajo a nuestros compañeros quienes serán

nuestro principal objetivo al realizar este trabajo.

 III

Agradecimientos

Gracias a ustedes docente y compañeros por prestar su atención a la exposición de este

trabajo.
 IV

Tabla de contenido
CAPÍTULO 1........................................................................................................................................................................................................1

¿Cómo crear una página web en HTML?................................................................................................................................................1

CAPÍTULO 2........................................................................................................................................................................................................4

Las etiquetas básicas en HTML, sus funciones y atributos.................................................................................................................4

2.1. ¿Qué es el HTML exactamente? ....................................................................................4

2.2. ¿Qué son las etiquetas y los atributos HTML? Ejemplos de etiquetas HTML..................4

CAPÍTULO 3........................................................................................................................................................................................................6

Elegir un buen editor para crear páginas HTML..................................................................................................................................6

3.1. Editores HTML gratuitos versus de pago .......................... ¡Error! Marcador no definido.

3.2. Editores HTML online ..................................................... ¡Error! Marcador no definido.

3.3. Editores visuales (editores WYSIWYG) ............................ ¡Error! Marcador no definido.

3.4. Estructura básica de un documento HTML ............................... ¡Error! Marcador no definido.

CAPÍTULO 4........................................................................... ¡Error! Marcador no definido.

4.1. Cómo embeber Podcasts, vídeos YouTube, etc. ................. ¡Error! Marcador no definido.

4.2. Trabajar con formularios en HTML ........................................ ¡Error! Marcador no definido.

4.2.1. Usos típicos de los formularios HTML ....................... ¡Error! Marcador no definido.

CAPÍTULO 5..........................................................................................................................................¡Error! Marcador no definido.

Usar colores en HTML......................................................................................................................... ¡Error! Marcador no definido.

5.1.Cómo poner un color de fondo en HTML ...................... ¡Error! Marcador no definido.

 V

TABLA DE ILUSTRACIONES

Ilustración 1COMO CREAR UNA PÁGINA .........................................................................2

Ilustración 2COMO CREAR UNA PÁGINA 2 .......................................................................3

 1

CAPÍTULO 1.

¿Cómo crear una página web en HTML?

En el fondo, crear una página web en HTML, no es muy diferente a crear cualquier otro

documento con un editor de texto. Consiste en crear un fichero con extensión .html o .htm y

editarlo.

(Delgado, s.f.)

En este fichero, se creará el contenido en sí (el texto de los títulos, párrafos, crear

formularios HTML, etc.), así como las etiquetas (o “tags”) HTML (luego veremos que son)

necesarias para definir la estructura del documento HTML.

Esto se puede hacer de una manera más purista en modo texto trabajado directamente con

el código HTML, o bien, de una manera más visual y amigable con un editor HTML

especializado, muy parecido a cómo se trabaja también en un editor como Microsoft Word,

por ejemplo.

A partir de aquí, el proceso (que iré desglosando y será lo que aprenderás a lo largo del

post) sería:

Aprender el principio fundamental de HTML: crear documentos estructurados con

etiquetas.

Elegir el mejor editor para tu caso concreto.

Crear la estructura básica de tu página HTML: la cabecera y el cuerpo.

Crear el contenido y aplicarle formato con las etiquetas HTML: títulos, párrafos de

texto, enlaces, imágenes, tablas, audio y vídeo embebido, etc.

 2

Si los necesitas, integrar también los elementos interactivos (formularios).

Implementar, en su caso, en el servidor la lógica para responder a los formularios.

Publicar (hacer visible) la página en Internet o en local.

(Garcia Marquez, 1994)

Un ejemplo minimalista de página, vista como código HTML, no como el resultado final

que ser ve en el navegador, sería éste:

Ilustración 1COMO CREAR UNA PÁGINA

Ejemplo de página HTML con un conjunto mínimo de elementos.

 3

Y aquí puedes ver el resultado de este código en un navegador web:

Ilustración 2COMO CREAR UNA PÁGINA 2

Ejemplo de una página web trivial y en la que no se ha realizado aún la parte de diseño con

CSS.
 4

CAPÍTULO 2.

Las etiquetas básicas en HTML, sus funciones y atributos.

Si te has asustado al ver el código del ejemplo anterior, no te preocupes, como verás a

continuación, es muy fácil.

¿Qué es el HTML exactamente?

El estándar actual que rige HTML es la versión HTML 5, aunque muchas webs siguen

funcionando con las versiones HTML 4.01 / XHTML, las versiones de “toda la vida” que la

versión 5 ha ampliado con nuevas funcionalidades, algunas muy potentes.

De todos modos, como este post es un post de introducción, nos moveremos básicamente

dentro de lo que ya existía en la versión 4.01.

No obstante, te daré, por supuesto, referencias de recursos gratuitos para aprender HTML al

nivel de profundidad que quieras, incluso a un nivel experto si lo deseas, junto con un macro-

ejemplo descargable donde he implementado todo lo que tratamos en este post.

¿Qué son las etiquetas y los atributos HTML? Ejemplos de etiquetas HTML

Esta semántica se consigue mediante el uso de las etiquetas y los atributos.

Lo primero que te llamará la atención en el ejemplo de código arriba son las palabras

entre corchetes. Esto son las así llamadas etiquetas HTML.

¡Estas etiquetas forman una estructura jerárquica, es decir, se pueden anidar entre ellas,

salvo la etiqueta especial <! DOCTYPE HTML> en la primera línea de un documento

HTML.
 5

Google usa esto también para sus resultados de búsqueda porque es aquí de dónde saca

normalmente la descripción que viene debajo de los títulos de los resultados de cada página

que muestra.
 6

CAPÍTULO 3.

Elegir un buen editor para crear páginas HTML.

Ahora que ya hemos visto la teoría básica y un pequeño ejemplo concreto, es hora

de ponerse manos a la obra. Para ello, lo que necesitas ahora es un editor.

Puedes editar HTML en cualquier editor, incluso en el Notepad de Windows, si me

apuras, puesto que, como has podido ver, el código HTML es simple texto.

Sin embargo, no es lo conveniente. Te conviene usar un editor HTML

especializado. Así que veamos cuáles hay y cuál de ellos puede ser una buena opción para ti.
 7

Bibliografía
creatuweb. (01 de septiembre de 2017). /creatuweb. Obtenido de http://creatuweb.

Delgado, H. (s.f.). akus.net. Obtenido de akus.net.

es.tldp. (01 de Septiembre de 2017). es.tldp.org. Obtenido de es.tldp.org.

es.tldp. (01 de Septiembre de 2017). es.tldp.org.

es.tldp. (01 de Septiembre de 2017). es.tldp.orgf. Obtenido de es.tldp.org.

fpsalmon. (2017). estrutura HTML.

Garcia Marquez, G. (1994). Del Amor y Otros Demonios. santafé de Bogota: Carvajal S.A.

mclibre. (01 de Septiembre de 2017). mclibre.org. Obtenido de mclibre.org.

mejÎa, D. (2015). tecnologia y ciencia. mexico .

Perez, J. (07 de febrero de 2007). www.rincondelbago.com. Obtenido de

www.rincondelbago.com.

suarez, p. (1998). paginas hrtml. lima: yahooh.

Tim Berners-Lee. (9 de Diciembre de 1991). World Wide Web Consortium. Obtenido de

World Wide Web Consortium.

wikipedia. (2019). Estrutura de una pagina HTML.

8