HTML
19
REPUBLICA BOLIVARIANA DE VENEZUELA UNIVERSIDAD NOR-ORIENTAL GRAN MARISCAL DE AYACUCHO CATEDRA: ELECTIVA TÉCNICA CARRERA: ING. INFORMATICA SECCION: 1S HTML Profeso: Autores: Mascia Vicenzo Egurrola Wilcar C.I: 18.768.334
-
Upload
gabriela-zamora -
Category
Documents
-
view
6 -
download
0
Transcript of HTML
REPUBLICA BOLIVARIANA DE VENEZUELA
UNIVERSIDAD NOR-ORIENTAL GRAN MARISCAL DE AYACUCHO
CATEDRA: ELECTIVA TÉCNICA
CARRERA: ING. INFORMATICA
SECCION: 1S
HTML
Profeso: Autores:
Mascia Vicenzo Egurrola Wilcar C.I: 18.768.334
Kairouz Charlybel C.I: 18.514.497
Zamora Gabriela C.I: 21.248.107
Fecha: Guayana, Septiembre del 2014.
ÍNDICE
Índice 2
Introducción 3
Desarrollo 4
¿Qué es HTML? 4
Etiquetas de HTML básicas 4
Etiqueta Body 4
Headings 4
Imagen 1 5
Párrafos 5
Imagen 2 5
Comentarios 5
Salto de Línea 6
Imagen 3 6
Trazar un Línea 6
Imagen 4 6
Otras Etiquetas 6
Etiquetas de formato lógico 6
Inserción de líneas (rulers) 7
Etiqueta <FONT> >/FONT> 7
Imagen 5 7
Etiqueta de imágenes 8
Caracteres Especiales 8
ISO 8859-1 Símbolos 8
ISO 8859-1 Caracteres 9
Otros caracteres especiales que soporta HTML 10
Formularios 11
Conclusiones 13
Preguntas 14
Bibliografía 15
2
INTRODUCCIÓN
En presente trabajo tratara de lo que es HTML y sus diversas herramientas,
HTML es el lenguaje básico de casi todo el contenido web. La mayor parte de lo que ves
en la pantalla de tu navegador está escrita, fundamentalmente, usando HTML.
Específicamente, HTML es el lenguaje con el que se escribe la estructura y la semántica
del contenido de un documento web. HTML se creó en un principio con objetivos
divulgativos. No se pensó que la web llegara a ser un área de ocio con carácter
multimedia, de modo que, el HTML se creó sin dar respuesta a todos los posibles usos
que se le iba a dar y a todos los colectivos de gente que lo utilizarían en un futuro. Sin
embargo, pese a esta deficiente planificación, si que se han ido incorporando
modificaciones con el tiempo, estos son los estándares del HTML.
3
DESARROLLO
¿Qué es HTML?
HTML es la Lengua materna de tu navegador, HyperText Markup language
(Lenguaje de Marcas HiperTexto).
Es el lenguaje que se emplea para el desarrollo de páginas web, está compuesto
por una serie de etiquetas que el usuario (navegador) interpreta y da forma en pantalla.
Dispone de etiquetas para imágenes, hipervínculos que nos permiten dirigirnos a otras
páginas, saltos de líneas, listas, tablas.
El lenguaje HTML está definido por lo que se llama etiquetas, que se encuentran
entre los símbolos < y >, de la siguiente forma: <etiqueta>. El contenido de los
documentos está definido entre estas etiquetas, mismas que tienen una representación
para indicar su límite, de la siguiente forma: <etiqueta>Contenido</etiqueta>.
Etiquetas HTML Básicas
Todo archivo HTML comienza siempre con la etiqueta <HTML> y finaliza con la
etiqueta </HTML>. La estructura de una página está compuesta básicamente por dos
secciones: el encabezado (header) y el cuerpo (body), delimitados por las etiquetas:
<head>, </head> y <body>, </body>.
La etiqueta <BODY>
El uso adecuado de la etiqueta <body>, que por supuesto tiene atributos,
permite entre otras cosas cambiar o estableces el color del texto un color o una imagen
de fondo y los colores de los enlaces que tendrá la pagina.
Por ejemplo:
<body background = ” Nombre de la imagen” Bgcolor = ” color del fondo” Text=
“color del texto” Link = ”color enlace” vlink= “color enlace v” alink =”color enlace
a”> </body>
Headings
<h1> Nos da el tipo de letra más grande. <h1> al ser usado como titulo de una
página web, es de suma importancia ya que es una de los parámetros que google y
4
demás buscadores tiene en cuenta a la hora de indexar un sitio web. <h6> Nos da el tipo
de letra más pequeño.
1. Ejemplo y uso de la etiqueta Heading.
Párrafos
Los párrafos se definen con la etiqueta <p>
2. Ejemplo y uso de la etiqueta para los párrafos.
Comentarios
La etiqueta <!-- ... --> se utiliza para insertar un comentario dentro del código que
estamos escribiendo. El mismo es ignorado por el navegador al momento de leerlo. Los
comentarios nos sirven para explicar mejor el código y son de gran ayuda en el momento
que necesitemos editarlo.
Por ejemplo:
<!-- Esto es un comentario. -->
5
Salto de línea
El salto de línea está definido con la etiqueta <br>. Es utilizado cuando queremos
cortar una línea sin necesidad de terminar con el párrafo. La etiqueta <br> obliga a saltar
de línea dondequiera que la ubiquemos.
3. Ejemplo y uso del salto de línea.
Trazar una línea
La etiqueta <hr> nos permite trazar una línea horizontal como las que separan las
distintas secciones de este tutorial. La etiqueta <hr> no tiene cierre.
4. Ejemplo y uso del trazo de una línea
Otras Etiquetas
Etiquetas de formato lógico
Salida Etiquetas requeridas
La siguiente es una cita.La siguiente es <CITE>una
cita</CITE>.>
Representa un listado de computadora.
<CODE>Representa un listadode computadora.</CODE>
Una secuencia de caracteres literales.Una secuencia de<SAMP>
caracteres literales.</SAMP>
Nota:Esta es una cita de algún texto.
Nota: <BLOCKQUOTE> Esta esuna cita de algún
texto.</BLOCKQUOTE>
La siguiente es una definición.La siguiente es <DFN>unadefinición.</DFN>
El siguiente texto está enfatizado.El siguiente <EM> texto </EM>
está enfatizado.
Caracteres de teclado. <KBD>Caracteres de teclado.</KBD>
El siguiente texto está fuertemente enfatizado.El siguiente <STRONG> texto
</STRONG> está fuertementeenfatizado.
6
El siguiente nombre es una variable de programa.El siguiente <VAR> nombre </VAR>es una variable de programa.
Inserción de líneas (rulers)
Salida Etiquetas requeridas
Fin de la parte anterior.
Nueva parte.
Fin de la parte anterior.<HR> Nueva parte.
Solo 40% de ancho.
Nueva parte.
Solo 40% de ancho.<HR WIDTH=40%> Nueva parte.
Alto del ruler = 10.
Nueva parte.
Alto del ruler = 10.<HR SIZE=10> Nueva parte.
Etiqueta <FONT> >/FONT>
Esta etiqueta permite controlar tres atributos del texto que se encuentre encerrado entre ellas, su tamaño (SIZE), su color (COLOR) y el tipo de fuente (FACE).
Sintaxis:
<FONT SIZE=”X” COLOR= “color” FACE=”Nombre de la fuente”> Texto </FONT>
5. Código de los colores
Por ejemplo:
<FONT SIZE=”6” COLOR= “blue” FACE=”arial”> Texto </FONT>
7
<FONT SIZE=”8” COLOR= “#800000” FACE=”comic sans ms”> Texto </FONT>
<FONT SIZE=”10” COLOR= “red” FACE=”stencil”> Texto </FONT>
Etiqueta de imágenes
Para insertar imágenes lo único que se necesita conocer es la ruta y nombre del archivo que lo contiene. La etiqueta <IMG> junto con su atributo SRC=”ruta y/o nombre del archivo” permite mostrar una imagen:
<IMG SRC=”logo.png”>
Caracteres Especiales
ISO 8859-1 Símbolos
Resultado
Descripción Nombre Número
Espacio de "no ruptura".  ¡ Signo de exclamación abierta. ¡ ¡
¢ Signo de centavo. ¢ ¢£ Signo de libra esterlina. £ £¤ Signo monetario. ¤ ¤
¥ Signo del yen. ¥ ¥¦ Barra vertical partida. ¦ ¦
§ Signo de sección. § §¨ Diéresis. ¨ ¨© Signo de derecho de copia. © ©
ª Indicador ordinal femenino. ª ª« Signo de comillas francesas de
apertura.« «
¬ Signo de negación. ¬ ¬
Guión separador de sílabas. ­ ­® Signo de marca registrada. ® ®
¯ Macrón. ¯ ¯° Signo de grado. ° °± Signo de más-menos. ± ±
² Superíndice dos. ² ²³ Superíndice tres. ³ ³
´ Acento agudo. ´ ´µ Signo de micro. µ µ¶ Signo de calderón. ¶ ¶
· Punto centrado. · ·
8
¸ Cedilla. ¸ ¸¹ Superíndice 1. ¹ ¹
º Indicador ordinal masculino. º º» Signo de comillas francesas de cierre. » »
¼ Fracción vulgar de un cuarto. ¼ ¼½ Fracción vulgar de un medio. ½ ½¾ Fracción vulgar de tres cuartos. ¾ ¾
¿ Signo de interrogación abierta. ¿ ¿× Signo de multiplicación. × ×
÷ Signo de división. ÷ ÷
ISO 8859-1 Caracteres
Resultado
Descripción Nombre Número
À A mayúscula con acento grave. À ÀÁ A mayúscula con acento agudo. Á ÁÂ A mayúscula con circunflejo. Â ÂÃ A mayúscula con tilde. Ã ÃÄ A mayúscula con diéresis. Ä ÄÅ A mayúscula con círculo encima. Å ÅÆ AE mayúscula. Æ ÆÇ C mayúscula con cedilla. Ç ÇÈ E mayúscula con acento grave. È ÈÉ E mayúscula con acento agudo. É ÉÊ E mayúscula con circunflejo. Ê ÊË E mayúscula con diéresis. Ë ËÌ I mayúscula con acento grave. Ì ÌÍ I mayúscula con acento agudo. Í ÍÎ I mayúscula con circunflejo. Î ÎÏ I mayúscula con diéresis. Ï ÏÐ ETH mayúscula. Ð ÐÑ N mayúscula con tilde. Ñ ÑÒ O mayúscula con acento grave. Ò ÒÓ O mayúscula con acento agudo. Ó ÓÔ O mayúscula con circunflejo. Ô ÔÕ O mayúscula con tilde. Õ ÕÖ O mayúscula con diéresis. Ö ÖØ O mayúscula con barra inclinada. Ø ØÙ U mayúscula con acento grave. Ù ÙÚ U mayúscula con acento agudo. Ú ÚÛ U mayúscula con circunflejo. Û ÛÜ U mayúscula con diéresis. Ü ÜÝ Y mayúscula con acento agudo. Ý ÝÞ Thorn mayúscula. Þ Þß S aguda alemana. ß ßà a minúscula con acento grave. à àá a minúscula con acento agudo. á áâ a minúscula con circunflejo. â âã a minúscula con tilde. ã ãä a minúscula con diéresis. ä äå a minúscula con círculo encima. å åæ ae minúscula. æ æç c minúscula con cedilla. ç çè e minúscula con acento grave. è èé e minúscula con acento agudo. é éê e minúscula con circunflejo. ê êë e minúscula con diéresis. ë ë
9
ì i minúscula con acento grave. ì ìí i minúscula con acento agudo. í íî i minúscula con circunflejo. î îï i minúscula con diéresis. ï ïð eth minúscula. ð ðñ n minúscula con tilde. ñ ñò o minúscula con acento grave. ò òó o minúscula con acento agudo. ó óô o minúscula con circunflejo. ô ôõ o minúscula con tilde. õ õö o minúscula con diéresis. ö öø o minúscula con barra inclinada. ø øù u minúscula con acento grave. ù ùú u minúscula con acento agudo. ú úû u minúscula con circunflejo. û ûü u minúscula con diéresis. ü üý y minúscula con acento agudo. ý ýþ thorn minúscula. þ þÿ y minúscula con diéresis. ÿ ÿ
Otros caracteres especiales que soporta HTML
Resultado Descripción Nombre NúmeroŒ OE Mayúscula. Œ Œœ oe minúscula. œ œŸ Y mayúscula con diéresis. Ÿ Ÿˆ Acento circunflejo. ˆ ˆ˜ Tilde. ˜ ˜– Guiún corto. – –— Guiún largo. — —‘ Comilla simple izquierda. ‘ ‘’ Comilla simple derecha. ’ ’‚ Comilla simple inferior. ‚ ‚“ Comillas doble izquierda. “ “” Comillas doble derecha. ” ”„ Comillas doble inferior. „ „† Daga. † †‡ Daga doble. ‡ ‡… Elipsis horizontal. … …‰ Signo de por mil. ‰ ‰‹ Signo izquierdo de una cita. ‹ ‹› Signo derecho de una cita. › ›€ Euro. € €™ Marca registrada. ™ ™
Formularios
Los formularios son posiblemente la herramienta más utilizada en Internet para
obtener datos e información acerca de la gente que navega nuestro sitio. La idea de los
formularios es recolectar información online en la interacción con el usuario y luego
ejecutar una determinada acción con la misma, que podría ser por ejemplo, quizás el
10
caso más utilizado, un formulario de venta que el usuario completa y luego es enviado
vía email al vendedor en forma encriptada.
Los formularios más sencillos se pueden crear utilizando solamente dos
etiquetas: <form> y <input>. Si se considera el formulario que muestra la siguiente
imagen:
Formulario sencillo definido con las etiquetas form e input. El código HTML
necesario para definir el formulario anterior se muestra a continuación:
<html>
<head><title>Ejemplo de formulario sencillo</title></head>
<body>
<h3>Formulario muy sencillo</h3>
<form action="http://www.librosweb.es/maneja_formulario.php" method="post">
Escribe tu nombre:
<input type="text" name="nombre" value="" />
<br/>
<input type="submit" value="Enviar" />
</form>
</body>
</html>
La etiqueta <form> encierra todos los contenidos del formulario (botones,
cuadros de texto, listas desplegables) y la etiqueta <input> permite definir varios tipos
diferentes de elementos (botones y cuadros de texto).
11
La mayoría de formularios utilizan sólo los atributos action y method. El
atributo action indica la URL de la aplicación del servidor que se encarga de procesar
los datos introducidos por los usuarios. Esta aplicación también se encarga de generar la
respuesta que muestra el navegador.
El atributo method establece la forma en la que se envían los datos del
formulario al servidor. Este atributo hace referencia al método HTTP, por lo que no es
algo propio de HTML. Los dos valores que se utilizan en los formularios son GET y POST.
De esta forma, casi todos los formularios incluyen el atributo method="get" o el
atributo method="post".
12
CONCLUSIONES
Conclusión por Wilcar Egurrola.
Además de los muchos estilos y capacidades de presentación que nos ofrece
HTML para estructurar el documento en sí, disponemos de varias directivas que nos
permiten definir relaciones entre diferentes documentos y estructurar todo un conjunto de
documentos para crear una unidad lógica. La facilidad para definir este tipo de enlaces
es una de las razones de la potencia y versatilidad de HTML. Por la similitud de
tratamiento que tienen los enlaces y los gráficos.
Los enlaces en HTML se expresan rodeando con la directiva <a> el objeto (que
puede ser un fragmento de texto o un gráfico) que vaya a servir como anclaje para el
enlace. Por ejemplo, si marcamos con <a> un gráfico, cuando en el documento final se
pulse con el ratón sobre dicho gráfico saltaremos al objeto referenciado en el enlace: otro
documento, un vídeo musical, o un servidor de información meteorológica.
Conclusión por Charlybel Kairouz
Conclusión por Gabriela Zamora
Podemos decir por lo tanto que el HTML es el lenguaje usado por los
navegadores para mostrar las páginas webs al usuario, siendo hoy en día la interface
más extendida en la red. Sin HTML, no existiría el Internet que hoy conocemos, si no se
hubiera inventado, seguiríamos con el aburrido FTP (Protocolo de Transferencia de
Ficheros) mandándonos o bajando archivos que a veces ni sabíamos lo que eran, sin
tener la posibilidad de visualizarlo antes.
Ahora por medio de una página llena de colores y botones por la cual se puede
navegar, se puede tener acceso a bastante información y archivos. El lenguaje de HTML
abrió una puerta al mundo permitiéndoles a las personas expresar sus ideas por medio
de páginas y mostrárselas a todas las personas de todos los países
13
PREGUNTAS
1. ¿Cuáles son los nuevos elementos que nos brinda html5?
ARTICLE: Especifica un artículo, es decir, una unidad de contenido.
SECTION: Es una sección dentro de un documento.
HEADER: La cabecera de una página.
FOOTER: El pie de página o informaciones que formen el pie de una
sección.
ASIDE: Es una parte de la web que muestra contenido accesorio,
generalmente colocado en un panel lateral.
NAV: con el que colocar el navegador principal de una página web.
2. ¿Qué es la etiqueta meta viewport?
El Viewport es una de las etiquetas más representativas de la web móvil, que
nos permite configurar cómo debe interpretar una página el navegador web para móviles.
La etiqueta meta viewport fue introducida por Apple en Safari para móviles, para
ayudar a los desarrolladores a mejorar la presentación de sus aplicaciones web en un
iPhone, iPod Touch o iPad.
14
BIBLIOGRAFÍA
http://www.aprenderaprogramar.com/index.php?
option=com_content&view=article&id=435:ique-es-y-para-que-sirve-html-el-lenguaje-
mas-importante-para-crear-paginas-webs-html-tags-cu00704b&catid=69:tutorial-basico-
programador-web-html-desde-cero&Itemid=192 – (¿Qué es HTML?)
http://www.virtualnauta.com/html-etiquetas-basicas - (Etiquetas básicas)
http://www.ceia.uns.edu.ar/cursos/html/etiquet1.htm - (Otras Etiquetas)
http://es.slideshare.net/AndyQuinteroMacea/etiquetas-bsicas-en-html - (Otra Etiquetas)
http://www.virtualnauta.com/html-caracteres-especiales - (Caracteres Especiales)
http://www.virtualnauta.com/html-guia-de-referencia-caracteres-especiales - (Caracteres
Especiales)
http://librosweb.es/xhtml/capitulo_8/formularios_basicos.html - (Formularios)
15
