Html
24
Html
Transcript of Html
Html
Hace 25 años, el británico Tim Berners-Lee puso en marcha la
World Wide Web, una nueva manera de compartir información entre varias
personas utilizando diferentes ordenadores
El objetivo de Berners-Lee, que tenía entonces 34 años, era mejorar la gestión de la información en el Centro Europeo de Fïsica de Partículas (CERN) en el que trabajaba en Suiza.
“Estábamos en 1989, internet ya existía, podíamos enviar correos pero no existían las páginas en la red. No existía el http o el html. No se podía consultar una página para ver su contenido. Empecé a sentirme muy frustrado por ello. Imaginé un sistema en el que, de manera sencilla, una persona podía visitar una página tras otra y a partir de ahí decidí lo que quería construir”, explica Berners-Lee.
“Debemos pensar en los próximos 25 años y estar seguros de que los principios
básicos de la web siguen vigentes: apertura, privacidad y ausencia de censura, por
ejemplo”, asegura Berners-Lee.
Elemento HTML
La sintaxis básica del lenguaje HTML (Hiper Text Markup Lenguage) es el elemento. Un
elemento HTML está definido por etiquetas (tags) y contenido.
<nombreelemento>contenido</nombreelemento>
Etiqueta de apertura
Etiqueta de Cierre
Contenidoelemento
ejemplo: <p>Lorem ipsum...</p>
Elemento HtmlExisten elementos que requieren la definición de
ciertos parámetros. Los atributos son instrucciones para precisar la definición de un elemento.
!<nombreelemento atributo01= "valor"atributo02= "valor" >contenido</nombreelemento>
Nombre del atributo Valor
ejemplo: <img src="image.jpg" alt="descripción de imagen" width="300" height="225">
Elemento Html No todos los elementos tienen contenido de texto plano. Pueden existir : Elementos vacíos: Existe sólo una etiqueta de apertura y cierre. ejemplo:<br />
Elementos anidados: Etiquetas que por definición pueden contener otros elementos. ejemplo: <a href="mypage.html"><img src="image.jpg" ></a> Elementos compuestos: Elementos que por definición son usados en conjunción con otros elementos. ejemplo: <ol> <li>first item</li> <li>second item</li> <li>third item</li> </ol>
Los elementos también pueden clasificarse en:
Elementos de bloque: Siempre inician en una nueva línea y, generalmente, añaden por definición espacio arriba y abajo. Se
apilan como bloques en el flujo del documento HTML.
ejemplo: <div>, <h1>, <p>, <blockquote>, <pre>, <ol>, <ul>,
<dl>, <hr>
Elementos de línea: Tienen un flujo continuo, por tanto, no añaden saltos de línea (o retorno de carro). ejemplo:
<span>, <a>
Se escribe siempre en bajas (minúsculas) Los atributos se definen en la etiqueta de, NUNCA en la de cierreapertura !Cuando se definen más de un atributo el orden de aparición NO importa.Aunque es una buena práctica agruparlas de forma coherente !Se debe separar siempre con signo = el nombre del atributo y su valor El valor siempre debe ir entre signos " y " !El valor puede ser un número, cadena de texto, URL, dependiendo del atributo Algunos atributos son estrictamente requeridos (como en img y en a) NO es posible definir nuevos atributos
Un documento HTML se compone de una cabeza (head) y de un
cuerpo (body)
!
<html> <head <title>título del documento</title> </head> <body> <!-- cuerpo del documento HTML--> </body> </html>
123
4
html : Identifica al archivo como un documento HTML.Tiene dos subsecciones importantes head y
body. atributos: dir lang xmlns ejemplo:
<html xmlns="http://www.w3.org/1999/xhtml"> xmlns: declara el espacio de nombres XML utilizado en
el documento. Es requerido de forma estricta por documentos XHTML
head : Crea la sección encabezado del documento HTML. En el encabezado es posible definir el título del documento, metadatos, establecer enlaces a hojas de estilo CSS y archivos JS y otros, así como estilos del documento y código JS atributos: dir lang profile ejemplo: !
<title>head element example</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link rel="stylesheet" type="text/css" href="main.css"><script type="text/javascript" src="myfile.js"></script><meta name="description" content="my website description" /><meta name="keywords" content="word01, word02" /></head>
!<head>
title: Define el título del documento atributos: class id dir lang style
ejemplo: !
<title>head element example</title>
!
Contenedor para todos los demás elementos del documento
atributos: class id dir lang style title
ejemplo: <body> <!-- cuerpo del documento HTML--> </body> !
Por lo anterior una estructura básica para un documento XHTML 1.0 se definiría:
!!<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>título del documento</title> </head> <body> <!-- cuerpo del documento --> </body> </html>
