Html

HTML

<Integrantes> Israel Castillo Cruz

Alejandro MejíaLeslie Medina

HistoriaO Tim Berners-Lee, da a conocer a la prensa que

estaba trabajando en un sistema que permitirá acceder a ficheros en línea que funcionaba sobre redes de computadoras o máquinas electrónicas basadas en el protocolo TCP/IP.

O 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 Consortium (W3C). En 1991, Tim Berners-Lee crea el primer navegador web, ViolaWWW, que funcionaría en modo texto y sobre un sistema operativo UNIX.

O 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.

O El borrador del estándar HTML 3.0 fue propuesto por el recién formado W3C en marzo de 1995. Con él se introdujeron muchas nuevas capacidades; por ejemplo, facilidades para crear tablas, hacer que el texto fluyese alrededor de las figuras y mostrar elementos matemáticos complejos.

O En 1997, HTML 4.0 se publicó como una recomendación del W3C. HTML 4.0 adoptó muchos elementos específicos desarrollados inicialmente para un navegador web concreto, pero al mismo tiempo comenzó a limpiar el HTML señalando algunos de ellos como «desaprobados»

O En 2006, el W3C se interesó en el desarrollo de HTML5, y en 2007 se unió al grupo de trabajo del WHATWG para unificar el proyecto junto con Apple, Mozilla y Opera.

¿Qué es HTML?O HTML, siglas de HyperText Markup

Language («lenguaje de marcas de hipertexto»), hace referencia al lenguaje de marcado para la elaboración de páginas web.

O Es un estándar que define una estructura básica y un código (denominado código HTML) para la definición de contenido de una pagina web, texto, imágenes, etc.

Marcado HTMLO El HTML se escribe en forma de

“etiquetas”, rodeadas por corchetes angulares(<,>).

O HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir o hacer referencia a un tipo de programa llamado script, el cual puede afectar el comportamiento de navegadores web

O HTML consta de varios componentes vitales, entre ellos los elementos y sus atributos, tipos de data y la declaración de tipo de documento.

O HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y final, mediante las cuales se determina la forma en la que debe aparecer en su navegador el texto, así como también las imágenes y los demás elementos, en la pantalla del ordenador.

<Elementos>O Los elementos son estructuras básicas de

HTML. Los elementos tienen dos propiedades básicas: Atributos y Contenidos

O Cada atributo y contenido tienen ciertas restricciones para que se considere válido al documento HTML.

O Un elemento generalmente tiene una etiqueta de inicio <nombre-de-elemento> y una etiqueta de cierre </nombre-de-elemento>

O NOTA: La mayoría de etiquetas deben cerrarse como se abren, pero con una barra («/»)

Etiquetas Básicas

Códigos HTML básicosO <html>: define el inicio del documento

HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML. Esto es así de sencillo, ya que en teoría lo que define el tipo de documento es el DOCTYPE. Con el DOCTYPE especificamos este lenguaje y la versión del mismo. Los navegadores leerán esta declaración de DOCTYPE e interpretarán la página atendiendo a las reglas definidas en ese lenguaje. .

O <script>: incrusta un script en una web, o llama a uno mediante src="url del script.

O <head>: define la cabecera del documento HTML. Dentro de la cabecera <hed> es posible encontrar:

O <title>: define el título de la página. Por lo general, el título aparece en la barra de título encima de la ventana.

O <link>: para vincular el sitio a hojas de estilo o iconos. Por ejemplo:<link rel="stylesheet" href="/style.css" type="text/css">.

O <style>: para colocar el estilo interno de la página; ya sea usando CSS u otros 0usando la etiqueta <link>.

O <meta>: para metadatos como la autoría o la licencia, incluso para indicar parámetros http (mediante http-equiv="")

O <body>: define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes. Dentro del cuerpo <body> es posible encontrar numerosas etiquetas

Etiquetas <body>O <h1> a <h6>: encabezados o títulos del

documento con diferente relevancia.O <table>: define una tabla.O <tr>: fila de una tabla.O <td>: celda de una tabla (debe estar

dentro de una fila).O <a>: hipervínculo o enlace, dentro o

fuera del sitio webO <p>: inserta un párrafo en el

documento.

O <div>: división de la página. Se recomienda, junto con css, en vez de <table> cuando se desea alinear contenido.

O <img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagen. Por ejemplo: <img src="./imágenes/mifoto.jpg" />.

O <li><ol><ul>: etiquetas para listas.

O <b>: texto en negrita (etiqueta desaprobada. Se recomienda usar la etiqueta <strong>).

O <i>: texto en cursiva (etiqueta desaprobada. Se recomienda usar la etiqueta <em>).

O <s>: texto tachado (etiqueta desaprobada. Se recomienda usar la etiqueta <del>).

O <u>: Antes texto subrayado. A partir de HTML 5 define porciones de texto diferenciadas o destacadas del resto, para indicar correcciones

NOTA: es importante recordar que las etiquetas deben cerrarse como se abren pero con una barra ‘/’<table><tr><td>Contenido de una celda</td></tr></table>

O Los caracteres especiales como signo de puntuación, letras con tilde o diéresis o símbolos de escritura del lenguaje se deben convertir en entidad HTML para mostrarse en un navegador. La siguiente es una lista de caracteres españoles y su correspondiente entidad HTML:

Carácter Entidad HTML Carácter Entidad HTML

Á á Á Á

É é É É

Í í Í Í

Ó ó Ó Ó

Ú ú Ú Ú

Ü ü Ü Ü

Ñ ñ Ñ Ñ

¡ ¡ ¿ ¿

Tipos de elementos de marcado

O El marcado estructural describe el propósito del texto. Por ejemplo: <h2>Hola</h2> establece “Hola” como un encabezamiento de segundo nivel.

O El marcado presentacional describe la apariencia del texto, sin importar su función. Por ejemplo, <b>negrita</b> indica que los navegadores web visuales deben mostrar el texto en negrita.

O El marcado hipertextual se utiliza para enlazar partes del documento con otros documentos o con otras partes del mismo documento. Para crear un enlace es necesario utilizar la etiqueta de ancla <a> junto con el atributo href, que establecerá la dirección URL a la que apunta el enlace.

O <Ejemplo de marcado Hipertextual>Un enlace que muestre el texto de dirección y vaya a la pág. Solicitada podría ser de la forma:<a href=“http://www.ubuntu.com”>http://www.ubuntu.com</a>.

También se pueden crear enlaces sobre otros objetos, tales como imágenes.<a href=“enlace”><img src=“imagen1.jpg” /></a>

<Atributos>O La mayoría de atributos son pares nombre-valor.

Separados por un signo de igual (=) y escritos en la etiqueta de comienzo de un elemento, después el nombre de este.

O El valor puede estar rodeado por comillas dobles o simples, aunque ciertos tipos de valores pueden estar sin comillas en HTML pero no en XHTML.

O El punto y coma que sigue al atributo se usa para separar los diferentes comandos de estilo.

<h2 style="background-color:#ff0000;">Mi amistad con HTML</h2>

O Con el atributo style se puede añadir efectos de presentación a tu sitio web. Por ejemplo, un color de fondo:

<html> <head> </head> <body style="background-color:#ff0000;"> </body> </html>O O un color de texto<h2 style="background-color:#ff0000;">Hola a todos</h2>

O Cada color tiene su propio número hexadecimal.. Y estos son algunos ejemplos:

Blanco: #ffffffNegro: #000000 (ceros)Rojo: #ff0000Azul: #0000ffVerde: #00ff00Amarillo: #ffff00O También se pueden usar los nombres en inglés

para los colores más comunes (white: blanco, black: negro, red: rojo, blue: azul, green: verde y yellow: amarillo).

Nota:O El lenguaje HTML puede ser creado y

editado con cualquier editor de textos básico, como puede ser Gedit en Linux, el Bloc de notas de Windows, o cualquier otro editor que admita texto sin formato como GNU Emacs, Microsoft Wordpad, TextPad, Vim, Notepad++, entre otros.

Empezar a crear un sitio web

O Para empezar a crear nuestra pagina web abrimos nuestro bloc de notas.

O Escribe "<html>" en la primera línea del documento creado con el Bloc de notas. Recuerda que <html> en una etiqueta de inicio y tiene que cerrarse con una barra </html>

O Lo siguiente que necesita el documento es una "cabecera“(head) que proporcionará información relativa a este mismo documento, y un "cuerpo“(body) donde se incluirá el contenido del documento.

O En la sección del encabezado se incluye información sobre la propia página, mientras que el cuerpo contiene la información que constituye la página en sí.

O El elemento que se usa para el título es title, o sea, escribe el título de la página entre la etiqueta de inicio <title> y la etiqueta de cierre </title>:

O En la sección cuerpo o body escribiríamos lo siguiente:

O Nos quedaría:

Agregando mas elementos :D

O Esta vez usaremos los tipos de relevancia <h1> a <h6>

O Agregaremos las etiquetas <p>O Enfatizadores <em> y <strong>O Textos pequeños<small>O Insertar líneas con <hr>O Insertar elementos de listas con

<ul>, <li>, <ol>

Enlaces

O Para crear enlaces se usa lo que siempre usamos al codificar HTML: un elemento. Un sencillo elemento con un atributo y podrás enlazar con cualquier cosa y con todo

<a href="http://es.wikipedia.org/wiki/File_Transfer_Protocol/">Definicion de FTP de wikipedia</a>

O También podemos crear enlaces internos dentro de una misma página:

O Usa el atributo id para marcar el elemento con el que quieras enlazar. Por ejemplo:

<h1 id="encabezado1">Primer encabezado</h1>

O Ahora ya puedes crear un enlace a dicho elemento usando "#" en el atributo "href" del elemento a. El símbolo "#" debe ir seguido del id de la etiqueta con la que quieres enlazar. Por ejemplo:

<a href="#encabezado1">Enlace con el primer encabezado</a>

Imágenes O Lo que hay que hacer es indicar al

navegador que quieres insertar una imagen, usando el elemento img y, luego, dónde está localizada por medio del atributo src

O El elemento img se abre y cierra usando la misma etiqueta.

<img src=“html.jpg” alt=“html”/>

O Se usan cuando necesitamos mostrar "datos en formato de tabla“

Tablas Nombre Matricula

Juan Pérez 00123456

O Que se verá así en el navegador:

O Para las tablas existen muchos atributos. Aquí mostramos dos más:

O align: especifica la alineación horizontal del contenido de toda la tabla, de una fila o de una sola celda. Por ejemplo, left, center o right.

O valign: especifica la alineación vertical del contenido de una celda. Por ejemplo, top, middle o bottom.

Html

Engineering

Transcript of Html