Conceptos Fundamentales de HTML

PRACTICA 1.
ELABORE UN RESUMEN SOBRE LOS CONCEPTOS FUNDAMENTALES

DEL HTML.
Primero que nada, ¿Qué significa HTML?... HTML significa Hyper Text Markup Language
Con este lenguaje se define la estructura y contenidos de una página web
Un elemento en HTML es cada uno de los objetos que sirven para definir una estructura
de diferentes tipos de contenidos dentro de una página.
Emplea una sintaxis especial compuesta por marcadores, más conocidos como
elementos que rodean al texto, que hay en un documento para indicar a los navegadores
web cómo deben interpretar el contenido.
En HTML hay dos categorías generales para organizar los elementos en dos tipos de
contenidos y estructuras.
- Elementos de bloque. Están situados en el nivel superior y normalmente definen la
estructura del documento. Este tipo de elementos son útiles cuando quieres
diferenciar entre dos bloques. Un ejemplo de elementos de bloque son los
párrafos, las listas, los títulos y las tablas.
- Elementos en línea. Son los que se encuentran incluidos en los elementos
estructurales de bloque. Están formados sólo por partes pequeñas del contenido
del documento y no por párrafos enteros o grupos de contenido. Los vínculos de
hipertexto, las palabras, frases destacadas o citas breves son ejemplos de
elementos en línea.
HTML se basa en principalmente en etiquetas, que son como instrucciones para dar
formato a las diferentes partes de una página web. Para toda persona interesada en crear
páginas web es importante conocer al menos nociones básicas de este lenguaje, de esta
forma podemos comprender como están hechas las páginas web, desarrollar sitios con
más flexibilidad y mejor construidos.
Por ejemplo, mediante el uso de las etiquetas HTML puedes subrayar textos, ponerlos en
negrita, establecer encabezados, estructurar el texto en guiones, en párrafos, añadir
imágenes y vínculos a otras páginas, etc. De ahí que el conocimiento de estas etiquetas
sea importante para hacer páginas web, mejor dicho imprescindible.
Algunos de los más comunes incluyen diferentes tipo de encabezados que se identifican
como elementos del h1 al h6 y párrafos, identificados como elementos p, entre muchos
otros como el elemento div, que se caracteriza por funcionar como un contenedor general,
entre muchos otros.
El uso de los símbolos comúnmente conocidos como”menor que” y “mayor que”
encerrando a un elemento se conocen como etiquetas,éstas aparecen en pares y pueden
ser etiquetas de apertura o etiquetas de cierre que llevan una diagonal en medio.
Las etiquetas de apertura señalan donde comienza un elemento, enseguida se encuentra
lo que será el contenido de ese elemento, y al final, la etiqueta de cierre correspondiente.
Los atributos son propiedades que se utilizan para proveer información adicional a un
elemento HTML, los atributos más comunes son:
Id = Sirve para identificar a un elemento y es único en la página, no puede haber dos

elementos con el mismo id (Un id no debe llevar espacios ni símbolos como #,!, &, ;, entre
otros, el guión -, o guión bajo son permitidos).
Clase= Nos sirve para agrupar elementos y puede repetirse sin límite de veces en una
página, así como también, puede que un elemento posea varias clases (Una clase no
debe llevar espacios ni símbolos como #,!, &, ;, entre otros, el guión -, o guión bajo son
permitidos).
src= utilizado para definir la ruta hacia un archivo embebido en el contenido
href=Nos permite definir un hipervínculo
Los atributos son definidos dentro de la etiqueta de apertura, después del nombre del
elemento. Generalmente los nombres incluyen un nombre y un valor encerrado entre
comillas.
Todos los documentos HTML tienen dos cosas en común:
- Una estructura conformada por los siguientes elementos y
declaración: <!DOCTYPE html> ,<html>, <head>, y <body>.
- Se guardan como archivos de texto sin formato con la extensión .html, ejemplo:
pagina1.html
<!DOCTYPE html> es una declaración que nos sirve para decirle al navegador que
versión de HTML estamos utilizando, como queremos usar la última versión, es decir
HTML 5, la declaración se quedará de esta misma manera:
<html> Define el inicio del documento HTML

<head> Se encuentra Dentro del elemento, y en él se añade cualquier tipo de metadatos,
es decir, información adicional acerca de la página que no va a ser visible en el contenido
de la misma
<body> Todo el contenido visible en la página wen se encontrará dentro de este
elemento, que a su vez, también se encuentra dentro de <html>
El elemento <html> incluye el atributo lang =”es”, que nos indica que de forma
predeterminada, ese documento está en idioma español.
Dentro de <head>, se encuentran dos elementos comunes: <meta> y <title>, la

información que contienen no va a desplegarse en en contenido del sitio, pero es
información que nos ayuda de otras maneras: <meta charset=”utf8″> indica el tipo de
codificación de los caractéres para evitar conflictos cuando usamos símbolos o acentos
y <title>Mi Página web </title> es el nombre que se muestra en la pestaña del navegador
cuando abrimos la página.
El elemento title es el único elemento obligatorio de la sección head. En la línea del título
del navegador se expone cualquier texto que se contiene en este elemento, junto con el
nombre del navegador que se añade al fin del texto.
Además de que el elemento title siempre debe estar presente en el documento, la
creación de un título bueno es una tarea primordial que tiene 3 fines:
- Indicación del título de la página;
- Prestación de una orientación a los usuarios, o sea, información a los usuarios
acerca de dónde están ellos en el Internet y en la web;
- Prestación de una información adicional sobre la página del sitio web.
En la lista desordenada el orden de la situación no es tan importante. Generalmente tales
listas se llaman listas con viñetas. Su estructura es casi igual, solamente en vez del
elemento <ol></ol> se utiliza el elemento <ul></ul>
El documento empieza con un elemento de tipo de documento o doctype. Este elemento

describe el tipo de HTML que se utiliza para que los agentes de usuario puedan
determinar cómo se debe interpretar el documento y saber si sigue las normas que dice
que seguirá.
No todos los elementos HTML tienen etiqueta de apertura y etiqueta de cierre, algunos de
ellos consisten solo en la etiqueta de apertura con sus atributos, esto sucede porque
dentro de sus atributos se define su comportamiento, sin necesidad de añadir contenido.
La mayoría de los atributos y sus valores posibles están definidos por las especificaciones
HTML; no es posible crear atributos propios sin invalidar el HTML, ya que ello puede
confundir a los agentes de usuario y provocar problemas a la hora de interpretar
correctamente la página web. Las únicas excepciones reales son los atributos id y class;
sus valores están totalmente bajo vuestro control, ya que sirven para añadir significado y
semántica propias a vuestros documentos.
Un elemento que se encuentra dentro de otro elemento se conoce como "hijo" de este
elemento. Así pues, en el ejemplo anterior, abbr es hijo del elemento h1, que al mismo
tiempo es hijo de div. Y al revés, el elemento div sería "padre" del elemento h1. Este
concepto de padre/hijo es muy importante, ya que es la base de CSS y se utiliza mucho
en JavaScript.
Dentro de <body> se encuentra lo que si será contenido visible de nuestra página, y hay
un elemento de encabezado con su contenido <h1>Hola Mundo</h1> y un elemento de
párrafo también con su respectivo contenido <p>Esta es una página web básica</p>
Constantemente, en HTML y en otros lenguajes, cuando los elementos están unos dentro
de otros se dice que están “anidados” y la forma visual de indicar esto, es con un espacio,
como la sangría que se utiliza en textos, una separación que señale el nivel en el que está
cada elemento llamada indentación.
El editor más usado para crear páginas web es Dreamweaver, aunque también se
pueden usar programas gratuitos que vienen normalmente instalados en nuestros
ordenadores, tales como el Bloc de notas para Windows y TextEdit para Mac.
Para editar tu HTML con el Bloc de notas tienes que:
- Abrir el programa y pegar o escribir tu código.
- En las pestañas situadas en la parte superior selecciona Archivo y ahí Guardar
como. La terminación del archivo será .txt y debes cambiarla a .html.
- Abre la carpeta donde hayas guardado el archivo. Sitúate sobre él y selecciona la
opción Abrir con, elige el navegador que desees y ya podrás ver el resultado del
código que has insertado.
Si quieres editar tu HTML con TEXT EDIT debes:

- Abrir el programa y pegar o escribir tu código.
- En la pestaña edición selecciona Convertir en texto normal.
- Guardarlo sustituyendo la terminación .txt por .html, te aparecerá un aviso que
debes aceptar.
- Dirígete a la carpeta donde hayas guardado el archivo y ábrelo usando el
navegador que prefieras y podrás visualizar el resultado del código que has
insertado.
Uno de los principales trabajos de HTML es darle significado al texto (también conocido
como semántica) para que el navegador sepa cómo mostrarlo correctamente.
Los hipervínculos son realmente importantes ya que estos son los que hacen la Web.
Hay muchos otros elementos en HTML para formatear texto, que no hemos tratado en los
artículos fundamentos de texto HTML. Los elementos aquí son menos conocidos, pero
siguen siendo útiles conocer. Así como definimos las partes individuales de tu página
(como "un párrafo" o "una imagen"), HTML también es usado para definir las áreas de tu
sitio web (como "la cabecera", "el menú de navegación", "la columna de contenido
principal").
El HTML ha cambiado de una manera muy importante desde aquellos primeros días, pero
una buena parte del contenido del HTML actual ya se encontraba en esta primera
documentación y más de la mitad de las "etiquetas" descritas en el documento "Etiquetas
HTML" original todavía existen.
A medida que fue habiendo cada vez más gente que escribía páginas web y alternativas
al navegador original, también se fueron añadiendo más funciones a HTML. Muchas se
adoptaron universalmente (como el elemento img utilizado para insertar una imagen en un
documento, que se utilizó por primera vez en NCSA Mosaic). Otras etiquetas eran propias
y sólo se utilizaban en uno o dos navegadores. Cada vez había una necesidad mayor de
estandarización a fin de que los autores de otros navegadores pudieran tener un
documento (conocido como "especificación") que describiera de manera definitiva el
aspecto de HTML para así poder juzgar si se saltaban algunas partes de la implantación
de HTML.
El HTML proporciona:
- Etiquetas que describen exactamente lo que están diseñadas a contener
- Comunicaciones de red mejoradas
- Almacenamiento general ampliamente mejorado
- Web Workers para ejecutar procesos en segundo plano
- La interfaz WebSocket para establecer conexión continua entre la aplicación
residente y el servidor
- Mejor recuperación de los datos almacenados
- Velocidades mejoradas de almacenamiento y carga de páginas
- Soporte para CSS3 para manejar la GUI, lo que significa que el HTML5 puede
estar orientado a contenido
- Manejo mejorado de formularios de navegador
- Una API de base de datos basada en SQL que permite almacenamiento local del
lado del cliente.
- Bastidor y video, para añadir gráficas y video sin instalar plug-ins de terceros
- La especificación Geolocation API, que utiliza capacidades de ubicación de
teléfonos inteligentes para incorporar servicios y aplicaciones móviles de nube
- Formularios mejorados que reducen la necesidad de descargar código JavaScript,
permitiendo una comunicación más eficiente entre dispositivos móviles y
servidores nube
-
El HTML crea una experiencia de usuario más atractiva: las páginas diseñadas utilizando
HTML pueden proporcionar una experiencia similar a la de las aplicaciones de escritorio.
El HTML también ofrece un desarrollo mejorado de múltiples plataformas al combinar la
capacidad de las APIs con la ubicuidad del navegador. Usando HTML5 los
desarrolladores pueden ofrecer una experiencia de aplicación moderna que cruza
plataformas sin problemas.
El IETF (Internet Engineering Task Force, un organismo definidor de estándares que se

preocupa por la interoperabilidad a través de Internet) publicó en el año 1993 un borrador
de propuesta de HTML. Esta propuesta caducó en el año 1994 sin haberse convertido en
un estándar, pero provocó que el IETF creara un grupo de trabajo para estudiar la
estandarización del HTML.
En el año 1995 se redactó "HTML 2.0", que aprovechaba ideas del borrador de HTML
original. Dave Raggett escribió una propuesta alternativa conocida como HTML+; esta
propuesta se utilizó como base para muchos de los elementos nuevos implantados por los
navegadores (como el método para insertar imágenes en documentos, que se utilizó por
primera vez en NCSA Mosaic).
Más tarde, en aquel mismo año apareció un borrador de HTML 3.0, pero se dejó de
trabajar en esta versión a causa de la falta de apoyo por parte de los creadores de
navegadores en cuanto a la dirección que se debía seguir. HTML 3.2 suprimió muchas de
las funciones nuevas de la versión 3.0 y, en lugar de éstas, adoptó muchas de las
creaciones de los navegadores más populares de entonces: Mosaic y Netscape
Navigator.
En el año 1997, el W3C publicó HTML 4.0 como recomendación que adoptaba más
extensiones específicas de navegadores, pero que también intentaba racionalizar y
perfeccionar HTML. Esto se hizo marcando varios elementos como desaprobados
(deprecated), que significa que los elementos están obsoletos y que, aunque todavía
aparecen en esta versión, se eliminarán en una revisión posterior. Esto se hizo para
impulsar un uso mejor y más semántico de HTML en documentos.
En el año 1999 se publicó HTML 4.01, con algunas erratas corregidas en el año 2001. En
el año 2000, el W3C también publicó la especificación XHTML 1.0, que era HTML
reestructurado para ser un documento XML válido.
En el año 2004 el Web Hypertext Application Technology Working Group (WHATWG)

inició el trajo para desarrollar la especificación de HTML5. En enero de 2008 se publicó el
primer "borrador de trabajo" de HTML5, que posteriormente alcanzaría el estatus de
"candidate recommendation" en diciembre de 2012. El documento lo mantiene el HTML
Working Group del W3C.
Un último aspecto que hay que mencionar de un documento HTML es la manera de incluir
caracteres especiales. En el HTML, los caracteres <, > i & son especiales. Estos
caracteres inician y finalizan partes del documento HTML, y no representan los caracteres
de "menor que", "mayor que" y "et".
Uno de los primeros errores que puede cometer un autor de webs es utilizar un carácter
"et" en un documento y entonces ver que aparece algo inesperado. Por ejemplo, si se
escribe la frase "Imperial units measure weight in stones&pounds" puede ser que en
algunos navegadores se vea "...stones£s".
Esto sucede porque en HTML la cadena literal "£" éses en realidad una referencia
de carácter. Una referencia de carácter es una manera de incluir en un documento un
carácter que es difícil o imposible de escribir desde un teclado, o en una codificación de
documento concreta.
El símbolo "et" (&) introduce la referencia, y el punto y coma (;) la acaba. No obstante,
muchos agentes de usuario pueden ser muy condescendientes a la hora de perdonar
errores en el HTML, como por ejemplo el de olvidar el punto y coma, e interpretarán
"&pound" como una referencia de carácter. Las referencias pueden ser números
(referencias numéricas) o palabras abreviadas (referencias de entidades).
CONCLUSIÓN:
Ya metiéndose mas de lleno en la programación, es importante el conocer lo mas que se

pueda sobre el lenguaje HTML, y saber lo básico al menos, y si se cuenta o se sabe algo
sobre la sintaxis y lo que lo compone es mas que excelente, mientras se va aprendiendo
mas a programar, te vas relacionándote mas con este lenguaje, sobre todo, porque es
uno de los principales, que muchas veces, sin darnos cuenta lo usamos mucho,
obviamente, no siempre vemos el “código”, si no, la parte visual, lo “bonito”, y si no
sabemos de este lenguaje y se va directo a programar puede que tengamos
complicaciones en un futuro, ya que es un lenguaje necesario por así decirlo dentro de la
programación web. El HTML es un sistema que permite definir tipos de documentos
estructurados, y si no se conoce al menos esta definición, estamos muy atorados, ya que
es muy importante saber de este lenguaje, para poder programar con facilidad, y inclusive
crear una página web en un futuro para una empresa personal o ajena, donde nos podría
servir como trabajo para ganar dinero o para beneficio de alguien conocido.
REFERENCIAS:
http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html
http://www.naiarafernandez.com/conceptos-basico-de-html/
https://msdn.microsoft.com/es-es/library/wx4hctt4.aspx
http://devskills.mx/conceptos-basicos-html/
http://blogempresas.masmovil.es/conceptos-basicos-de-html/
https://es.scribd.com/document/144282196/CONCEPTOS-BASICOS-DE-HTML
https://www.video2brain.com/mx/tutorial/conceptos-basicos-de-imagenes-y-html
http://www.webestilo.com/html/cap1a.phtml
http://foro.ucoz.es/forum/27-179-1
UANL
UNIVERSIDAD AUTÓNOMA DE NUEVO LEÓN
ESCUELA INDUSTRIAL Y PREPARATORIA TÉCNICA “ÁLVARO OBREGÓN”
UNIDAD MONTERREY I
Programación 3
Etapa 1
Practica 1
Alumno: Luis Armando Morales Sauceda
Matricula: 1816886 Grupo: 4L3 Aula: 131
Maestro: Héctor Francisco Berrones Cortéz
Semestre: AGOSTO- DICIEMBRE
Monterrey, Nuevo León a 14 de Agosto del 2017

Conceptos Fundamentales de HTML

Cargado por

Copyright:

Formatos disponibles

Conceptos Fundamentales de HTML

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Conceptos Fundamentales de HTML

Cargado por

Copyright:

Formatos disponibles

PRACTICA 1.

ELABORE UN RESUMEN SOBRE LOS CONCEPTOS FUNDAMENTALES

Id = Sirve para identificar a un elemento y es único en la página, no puede haber dos

src= utilizado para definir la ruta hacia un archivo embebido en el contenido

href=Nos permite definir un hipervínculo

<html> Define el inicio del documento HTML

Dentro de <head>, se encuentran dos elementos comunes: <meta> y <title>, la

El documento empieza con un elemento de tipo de documento o doctype. Este elemento

Si quieres editar tu HTML con TEXT EDIT debes:

El IETF (Internet Engineering Task Force, un organismo definidor de estándares que se

En el año 2004 el Web Hypertext Application Technology Working Group (WHATWG)

Ya metiéndose mas de lleno en la programación, es importante el conocer lo mas que se

UNIVERSIDAD AUTÓNOMA DE NUEVO LEÓN

ESCUELA INDUSTRIAL Y PREPARATORIA TÉCNICA “ÁLVARO OBREGÓN”

Alumno: Luis Armando Morales Sauceda

Matricula: 1816886 Grupo: 4L3 Aula: 131

Maestro: Héctor Francisco Berrones Cortéz

Semestre: AGOSTO- DICIEMBRE

Monterrey, Nuevo León a 14 de Agosto del 2017

También podría gustarte