TALLER |
|
Aprendiendo a programar con NeCLO desde cero: Programación Web, HTML
HTML es un lenguaje de etiquetas, esta afirmación se hace porque los distintos elementos que utilizaremos para programar se llaman etiquetas o tags. Ahora vamos a comenzar a conocer estas etiquetas HTML, que serán la argamasa en la construcción de nuestras páginas web.
Llegó la hora, qué es necesario para crear nuestro primer archivo
Ahora sí, comenzaremos creando un archivo de texto con el editor que hayamos elegido, este será el primer paso para poder probar el código conforme lo vayamos aprendiendo y de este modo lo fijemos mejor en nuestra mente, este documento de texto en vez de usar la terminación .txt lo guardaremos con la extensión .html y el nombre que deseemos usar, quedando de la siguiente manera: nombreelegido.html Así de sencillo, ya tenemos un archivo donde introducir nuestro código para que lo ejecute un navegador. La estructura y el armazón –toma de contacto- Ahora bien, llego el momento de comenzar a programar, pero no podemos escribir el código como nos apetezca, la estructura de una página web o lo que es lo mismo un documento HTML debe seguir unas pautas si no queremos tener problemas, tanto a corto como a largo plazo debe estar perfectamente organizada, mediante las etiquetas específicas, como a continuación vamos a utilizar nosotros mismos en el documento html que acabamos de crear y en el que usaremos los nuevos elementos de HTML5. 1. La etiqueta de definición de documento, en adelante DTD. Lo primero que debe aparecer en un documento HTML es decirle en nuestro archivo que clase de documento es y lo haremos con la siguiente etiqueta (para empezar y simplificar, una etiqueta es algo así como una instrucción u orden de programación de toda la vida). <!DOCTYPE> A esta etiqueta le añadiremos un atributo, el atributo “html” quedando de la siguiente manera <!DOCTYPE html> Esta será la primera línea, activando las nuevas funciones de HTML5 y activando el modo estándar de nuestro navegador, ¿por qué decimos que de HTML5?, pues porque la nueva especificación simplifica el uso de esta etiqueta. La definición del documento que se hacía con la etiqueta <!DOCTYPE> antes, era más amplia y engorrosa, en la que había que indicar la versión HTML, pudiéndose definir anteriormente de distintos modos: de un modo estricto, transicional, transicional más los marcos…, pero como todo esto no nos afecta en estos momentos más allá de coger un poco de culturilla y de que a la hora de modificar una página antigua no nos sorprenda, seguiremos sin entrar en más detalles de cómo se hacía antes. La etiqueta HTML Cuando tengamos un documento html delante de nosotros la siguiente etiqueta que encontraremos y que por supuesto deberemos usar cuando creemos nuestro propio documento es <html>. Después de la etiqueta <!DOCTYPE html> recordemos que la siguiente etiqueta siempre será <html> ,dentro de ella quedará encerrado todo el código que necesitemos introducir en nuestra página. Decimos “Quedará encerrado” y recalcamos porque, las etiquetas en HTML, lo normal es que vayan a pares. ¿A pares? Sí, la primera etiqueta que vimos <!DOCTYPE html>, tal cual, cumplirá su función, pero la mayoría de las etiquetas necesitarán una etiqueta de apertura en la que la etiqueta/comando irá encerrada entre dos símbolos menor que (<) y mayor que (>), de este modo <html> y una segunda etiqueta que será de cierre en la que esa misma etiqueta irá entre un símbolo menor que (<) seguido de una contra barra (\) y un símbolo mayor que (>), quedando de la siguiente manera </html>. Y entre estas dos etiquetas, <html>, que es la etiqueta de apertura y </html> que es la de cierre irá el código al que hace referencia dicha etiqueta, aunque la etiqueta <html> es excepcional, dado que el caso de esta etiqueta encerrará tooodo el código, dada su función estructural, con la excepción de la etiqueta <!DOCTYPE html> que irá antes. Esta función estructural o de estandarización del HTML posee unas características, digamos por defecto y otras modificables mediante atributos, por ejemplo: esta etiqueta indica al navegador que su contenido ocupará toda la pantalla y que por defecto su fondo será de color blanco, algo que como veremos más adelante es fácil de modificar a nuestro antojo con hojas de estilos, pero no nos adelantemos.
Debido a la estandarización siempre que veamos un documento html la segunda etiqueta y la última será la etiqueta <html>, si bien a esta etiqueta no siempre la veremos exactamente igual ya que se le puede añadir el atributo…
“lang” el cual define el idioma de nuestro documento: Inglés, Español, Árabe… Por ejemplo:
De esta manera con el atributo “lang” y el valor “es” indicaríamos al navegador que el documento está escrito para el lenguaje Español, véase en la imagen, dicho atributo con su correspondiente valor.
Como veréis, el lenguaje HTML es un lenguaje extremadamente sencillo, siendo realmente fácil de aprender. Las órdenes y comandos en HTML se dan mediante los comandos llamados etiquetas que acabáis de ver y cuyas estructuras para visualizarlas mejor os ponemos a continuación de un modo más esquemático. <ETIQUETA> Ejemplo… <!DOCTYPE> O <ETIQUETA>TEXTO</ETIQUETA> Ejemplo… <html> aquí escribiremos todo el código de la página, fotos, texto, video, etc </html> Como podemos observar estas etiquetas van siempre entre los símbolos “<” menor que y “>” mayor que. Como antes hemos explicado y podemos ver en el esquema superior, mientras que la primera es una sola etiqueta la segunda consta de una etiqueta de apertura <html> y otra de cierre </html> en la cual se le añade la barra invertida “/”. Estas etiquetas a parte de dar órdenes sencillas pueden dar órdenes más específicas mediante lo que llamaremos atributos cuya estructura será la siguiente: <ETIQUETA ATRIBUTO=”VALOR”> Ejemplo… <!DOCTYPE html> O <ETIQUETA ATRIBUTO=”VALOR”>TEXTO<ETIQUETA> Ejemplo… <html lang=”es”> aquí texto, lo que quieras poner </html>
Rubén Luna S.
Temas relacionados: Programación, Taller, Taller De Programación, Rubén Luna S. Reconocimientos y más información sobre la obra gráfica ADVERTENCIA: En este foro, no se admitirán por ninguna razón el lenguaje soez y las descalificaciones de ningún tipo. Se valorará ante todo la buena educación y el rigor sobre el tema a tratar, así que nos enorgullece reconocer que rechazaremos cualquier comentario fuera de lugar.
0 Comentarios
Deja una respuesta. |