html
TRANSCRIPT
Lenguaje de marcado (html)Lenguaje de marcado (html)
Html significa hypertext markup language al español lenguaje de marcado de hipertexto se usa principalmente en el diseño de paginas webSe podria decir que es un lenguaje interpretado ya que nuestros navegadores web examinan cada etiqueta dentro del codigo fuente y luego lo combierten en la representacion grafica de este.
historia
En 1989 existían dos técnicas que permitían vincular documentos electrónicos, por un lado los hipervínculos (links) y por otro lado un poderoso lenguaje de etiquetas denominado SGML. Por entonces, Tim Berners-Lee da a conocer a la prensa que estaba trabajando en un sistema que permitirá acceder a ficheros en línea, funcionando sobre redes de computadoras o máquinas electrónicas basadas en el protocolo TCP/IP.
historia
A principios de 1990, Tim Berners-Lee define por fin el HTML como un subconjunto del conocido SGML y crea algo más valioso aún, el World Wide Web. En 1991, Tim Berners-Lee crea el primer navegador web, que funcionaría en modo texto y sobre un sistema operativo UNIX.
historia
Los trabajos para crear un sucesor del HTML, denominado HTML +, comenzaron a finales de 1993. HTML+ se diseñó originalmente para ser un superconjunto del HTML que permitiera evolucionar gradualmente desde el formato HTML anterior. A la primera especificación formal de HTML+ se le dio, por lo tanto, el número de versión 2 para distinguirla de las propuestas no oficiales previas. Los trabajos sobre HTML+ continuaron, pero nunca se convirtió en un estándar, a pesar de ser la base formalmente más parecida al aspecto compositivo de las especificaciones actuales.
Como funciona
Cada elemento de html se coloca entre signos de < y > para abrirlo y para cerrarse con </ elemento >
los atributos son los valores que el elemento va a tomas seguido de una variable que es la que toma el atributo la sintaxis de esto seria la siguiente :
<elemento atributo=”variable”>contenido</elemento>
Nota: es importante usar comillas despues de cada atributo para eliminar apegarnos a los estandares de la w3c
Como funciona
Códigos HTML básicos
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
esto indica que version de html estamos usando
Códigos HTML básicos
<html> </html>
Estas son las etiquetas con las que se debe comenzar cualquier archivo de codigo html e indican presisamente eso que es un archivo que contiene codigo en html.
Códigos HTML básicos
<head> </head>
La etiqueta head (cabecera) nos probee de un bloque en el cual podremos agregar algunas otras etiquetas que nos permitiran extender la capacidad de nuestro lenguaje o agregar funciones tales como cambiar el titulo de la pagina o agregar un tema
Códigos HTML básicos
<title> </title>
Esta etiqueta nos permite cambiar el texto que aparece en la barra de titulo de nuestro navegador web
ejemplo:
<title>Mi primer Pagina en html</title>
Códigos HTML básicos
<link>
Esta etiqueta nos sive para algo no tan simple y es el incrustar hojas de estilo en lenguaje CSS( Cascading Style Sheet) esto es para dar mayor vista a nuestra pagina
Ejemplo:
<link rel=”stylesheet” href=”estilo.css” type=”text/css” media=”all”>
Códigos HTML básicos
<style> </style>
La etiqueta <style> tiene una funcion similar a link pero no igual debido a que <style> no incrusta una hoja de estilo externa si no que permite crear una hoja de estilo interna en lenguaje css
Ejemplo:
<style>
body{background:#f0f;}/*esto cambia el color de fondo de nuestra pagina*/
</style>
Códigos HTML básicos
<meta>
<meta>: para metadatos como la autoría o la licencia, incluso para indicar parámetros http (mediante http-equiv="") cuando no se pueden modificar por no estar disponible la configuración o por dificultades con server-side scripting.
Ejemplo:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> cambia colasion de caracteres de pagina
Códigos HTML básicos
<body> </body>
La etiqueta body como su nombre lo indica es donde iran todas las etiquetas que constituiran nuestra pagina web.
Ejemplo:
<html>
<head><title>Mi primer pagina</title></head>
<body>FUNCIONA!!!!!!!!</body>
</html>Esta web mostrara el mensaje funciona y tendra como titulo mi primer pagina
Códigos HTML básicos
<h1> </h1>
Los encabezados o titulos de parrafo se escriben entre etiquetas <h#> siendo # un posible numero del 1 al 6:
Ejemplo:
<body>
<h1>TITULO</h1>
funciona!!!!
</body>
</html>
Códigos HTML básicos
<table> </table>
Esta etiqueta permite crear tablas junto con otras dos etiquetas que son <tr> y <td>.
<tr> nos permite incrustar una fila
<td>nos permite incrustar una columna
dentro de <td> existen otros dos atributos llamados colspan y rowspan que nos permiten unir una o mas celdas
rowspan para unir filas y colspan para unir columnas
Códigos HTML básicos
Códigos HTML básicos
<a> </a>
hypervinculos o links en html se incrustan de esta manera
<a href=”ruta”>texto</a>
existen enlases o links internos tambien llamados anclas que sirven para desplazarse dentro de la pagina internamente.
<a name=”aqui”>aqui se situara</a>
<a href=”#aqui”>ve a aqui</a>es importante usar el signo # para indicar que es un enlase interno de otro modo no
funcionara
Códigos HTML básicos
<img>
la etiqueta <img> permite incrustar una imagen con sus atributos src que tomara como valor la ruta ,width para controla el ancho y heigth para controlar el alto:
ejemplo
<img src=”imagen.jpg” width=”100” height=”250”>
es recomendable usar imagenes pequeñas o en formatos que no pesen tanto como jpg o png
Códigos HTML básicos
Existen dos tipos de lista las ordenadas <ol> que apareceran con numeros y las no ordenadas<ul> que apareceran con viñeras.
Para <ol> y <ul> existe una misma etiqueta para agregar elementos y esa es <li>.
●1●2●3●4
1)A2)B3)C4)D
Códigos HTML básicos
<ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
<ol><li>A</li><li>B</li><li>C</li><li>D</li></ol>
Códigos HTML básicos
<p> </p>
los parrafos en html se incrustan con la etiqueta <p>
ejemplo:
<p>
Devus rekta oid ke, et aŭ poŭpo espereble. Pro et devi elnombrado, fo oho meta gibi antaŭeniri. If pero sori negativa ian, da kaŭ eksteren dek, os naŭ lasta des. Turpa senigi malprofitanto sia um, gv ekoo iliard pli, kuzo vidalvide substantivo kz end. Oni se aligi intere kapabl, mili jesa oid nu.
</p>
Códigos HTML básicos
Estilos de fuente:
negritas
<b>Texto en negritas</b>
Italica
<i>Texto en italica</i>
Subrayado
<u>Texto Subrayado</u>
Tachado
<s>Texto Tachado</s>
Códigos HTML básicos
Debemos recordar que html no fue creado pensando en el idioma ingles asi que muchos caracters como la “Ñ” no existen y solo mostraria un ? Dentro de nuestra web pero existen dos maneras de que estos aparescan una es utilizando la tabla de caracteres especiales de html y la segunda es declarando la colasion de caracteres de nuestra pagina .
Códigos HTML básicos
Códigos HTML básicos
La segunda manera es usando una meta etiqueta que aparece a continuacion:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
cambia colasion de caracteres de pagina
Español : iso-8859-1
el recomendado por se casi universal seria= utf-8
por que no solo detecta caractes como la ñ si no que tanmbien caractes asiaticos comoらき☆すた
Códigos HTML básicos
<embed> </embed>
la etiqueta <embed> sirve para empotrar archivos de audio y video sin embargo si nuestro navegador no cuenta con los codecs adecuados o con un complemento de reproducción estos no funcionaran.
Ejemplo:
<embed src=”mivideo.wmv” autoplay=”true”></embed>
HTML5 !!!
Actualmente aun en desarrollo el estandar que sustituira al html actual ,este incorpora mejoras tales como una etiqueta especial para incrustar audio y una para video dejando obsoleto a los reproductores flash.
Pero al encontrarse aun en desarrollo el programar codigo html en esta version del lenguaje haria que nuestras paginas no se muestren adecuadamente en todos los navegadores.
Otro de los problemas que tiene es que aun no se decide que estandar de multimedia usara lo cual afectara a todos los navegadores si se escoge h.264 o ogg
html5
<audio src=”miaudio.ogg”>tu navegador no soporta html5</audio>
<video src=”mivideo.ogv”>tu navegador no soporta html5</video>
Adios D: