Html

HTML
<Integrantes>
Israel Castillo Cruz
Alejandro Mejía
Leslie Medina

Historia
O 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 HTML
O 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 («/»)

Códigos HTML básicos
O <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 web
O <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
etiqueta <em>).
O <s>: texto tachado (etiqueta
etiqueta <del>).
O <u>: Antes texto subrayado. A partir de
HTML 5 define porciones de texto
diferenciadas o destacadas del resto,
para indicar correcciones

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: #ffffff
Negro: #000000 (ceros)
Rojo: #ff0000
Azul: #0000ff
Verde: #00ff00
Amarillo: #ffff00
O 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”/>

Tablas Nombre Matricula
Juan Pérez 00123456
O Se usan cuando necesitamos mostrar "datos
en formato de tabla“

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

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Html

Último

Html