HTML

Lenguaje HTML
Programas de Diseo de Web
LENGUAJE HTML
El HTML es un lenguaje creado para el manejo de Hipertexto... Que es HTML? Como crear un archivo HTML
Cuerpo basico de un archivo HTML

Que podemos introducir en un Documento HTML Etiquetas que nos pueden ayudar
Insertar una imagen
QU ES?
Las pginas Web son creadas con el lenguaje HTML . Este lenguaje es el que indica a los navegadores que deben mostrar en pantalla y cmo mostrarlo.
Todas las instrucciones HTML deben ir entre etiquetas, y toda etiqueta debe ir entre corchetes angulares (< >).
HTML: (HyperText Markup Language). Lenguaje de marcado de Hipertexto. Es el lenguaje estndar para describir el contenido y la apariencia de las pginas en el WWW.
COMO CREAR UN ARCHIVO HTML PRIMER PASO: Todo lo que se necesita para escribir una pgina Web es un editor que permita guardar documentos de texto de tipo ASCII, lo que en algunos procesadores de texto se denomina "slo texto". Estos documentos se pueden crear de modo muy sencillo: Con el Bloc de notas (Notepad), si se trabaja en Windows, o la aplicacin SimpleText, si se trabaja en Macintosh. Puede encontrar estos programas en cualquier ordenador Windows o Macintosh. Con cualquier procesador de textos, pero teniendo cuidado de guardarlo como un fichero "Solo texto". En ambos casos, la nica precaucin es aadir al nombre de nuestro fichero el texto ".htm", en Windows, o ".html" (en Macintosh o Unix).
Partes de un documento HTML

Adems de todo esto, un documento HTML ha de estar delimitado por la etiqueta <html> y </html>. Dentro de este documento, podemos asimismo distinguir dos partes principales: El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de ndole informativo como por ejemplo el titulo de nuestra pgina. El cuerpo, flanqueado por las etiquetas <body> y </body>, que ser donde colocaremos nuestro texto e imgenes delimitados a su vez por otras etiquetas como las que veremos. El resultado es un documento con la siguiente estructura:
<html> <head> Etiquetas y contenidos del encabezado Datos que no aparecen en nuestra pgina pero que son importantes para catalogarla: Titulo, palabras clave,... </head> <body> Etiquetas y contenidos del cuerpo Parte del documento que ser mostrada por el navegador: Texto e imgenes </body> </html>
LO QUE PUEDE CONTENER
En un documento Web podemos escribir cualquier texto, como en un procesador de textos cualquiera. Un tipo de texto especial es el que hace de enlace con otros documentos Web. Hemos mencionado antes que en un documento Web, se pueden incluir enlaces de hipertexto, es decir, instrucciones para que el navegador, al hacer un clic sobre el enlace, nos presente un documento situado en cualquier otro ordenador conectado a Internet .
<HTML> <HEAD> <TITLE>Prueba de pgina </TITLE> </HEAD> <BODY> Si pincha en el texto subrayado <A HREF="http://www.duoc.cl"> Duoc Uc</A>, podr acceder a la pgina de ese archivo. </BODY> </HTML>
ETIQUETAS <H#> y </H#> (# = un nmero entre 1 y 6): Define el ttulo de una parte del documento. H1 es el ttulo con un tamao de letra ms grande, y H6, el ms pequeo. Sirven para dividir de un modo lgico los contenidos de una pgina. <UL> y </UL>: Definen una lista no numerada. Los elementos de la lista deben llevar, solo al comienzo de cada elemento, una etiqueta <LI>. <OL> y </OL>: Igual que la anterior, slo que los elementos de la lista irn numerados. (14) <P> y </P>: Indican el comienzo y el fin de un prrafo. En realidad, la etiqueta de fin de prrafo no es necesaria, ya que al comenzar un nuevo prrafo, HTML introduce automticamente un salto de lnea. <BR>: Salto de lnea. No obstante, tanto la lnea anterior como la siguiente estn en el mismo prrafo. <B> y </B>: Texto en negrita. <I> y </I>: Texto en cursiva
Dando formato al texto

As, si desesemos introducir un texto alineado a la izquierda escribiramos: <p align="left">Texto alineado a la izquierda</p> El resultado seria: Texto alineado a la izquierda Para una justificacin al centro: <p align="center">Texto alineado al centro</p> que dara: Texto alineado al centro
Para justificar a la derecha: <p align="right">Texto alineado a la derecha</p> cuyo efecto seria: Texto alineado a la derecha

Usando la Etiquetas DIV <div align="left"> <p>Parrafo1</p> <p>Parrafo2</p> <p>Parrafo3</p> </div>

Usando la Etiquetas
Subrayado
El HTML nos propone tambin para el subrayado el par de etiquetas: <u> y </u> (underlined).
Subndices y Superndices
Este tipo de formato resulta de extremada utilidad para textos cientficos. Las etiquetas empleadas son: <sup> y </sup> para los superndices <sub> y </sub> para los subndices
Ejemplo: La <sup>13</sup>CC<sub>3</sub>H<sub>4</sub>ClNOS es un heterociclo alergeno enriquecido
El resultado:
La 13CC3H4ClNOS es un heterociclo alergeno enriquecido

usando caracteres especiales
En realidad estos caracteres se usan en HTML para no confundir un principio o final de etiqueta, unas comillas o un & con su correspondiente caracter
< & < & > " > "
Ejemplo para el sgte. Texto en html La pgina tiene errores de sintaxis Se debe escribir el sgte. Cdigo: <p>La p á gina tiene errores de sintaxis</p>
Á É Í Ó Ú á é í ó ú À È Ì Ò Ù à è ì ò ù
Algunos ejemplos
IMAGENES
<IMG SRC="nombre de la imagen">: Etiqueta para colocar imgenes en la pantalla. En este caso, hay que indicar en que parte del computador est esa imagen (en qu directorio) y el nombre del archivo que la contiene. Por ejemplo, si queremos poner en nuestra pgina la imagen con el escudo de un archivo, llamado "escudo.jpg", que est en el directorio IMGENES de nuestra unidad C:, la etiqueta completa sera: <IMG SRC="c:\imagenes\escudo.jpg" >

Prctico:
Codifique el siguiente texto en una pgina HTML, utilizando Notepad

Mi primera Pgina HTML Me encanta codificar en HTML, ya que me permite aprender cmo se utilizan los cdigos y etiquetas para formatear un texto.
Elementos Grficos
<img src="name>Agrega una imagen
<img src="name" align=?>Alinea una imagen <img src="name" border=?>Setea el grosor del borde de la imagen <hr>Inserta una linea horizontal <hr size=?>Setea la altura de una linea <hr width=?>Setea el ancho de la linea, en porcentaje o nmeros absolutos <hr noshade>Inserta una linea horizontal sin sombra
Tablas en Html

Tablas <table></table>Crea una tabla <tr></tr> Define cada fila de la tabla <td></td> Define cada columna de la tabla <th></th> Define el encabezado de la columna(una celda normal, con texto centrado y resaltado) Atributos de las Tablas <table border=#> Define el grosor del borde de la tabla <table cellspacing=#> Define la cantidad de espacio entre las celdas <table cellpadding=#> Define la cantidad de espacio entre el borde de las celdas y su contenido <table width=# or %> Define el ancho de la tabla - en pixel o en porcentaje de acuerdo al ancho del documento <tr align=?> or <td align=?> Define la alineacin delas celdas (izquierda, centro, derecha) <tr valign=?> or <td valign=?> Define la alineacin vertical de las celdas (arriba, medio, abajo)
Ancho del borde de la tabla
Encabezados(Ttulos) de la columna
Primera fila
Col.1 Col.2
Col.3 Col.4
Tags de Referencia

Enlace a una pgina Web <a href= http://geneura.ugr.es/~gustavo/html/html.html >Descripcion del Enlace</a> Enlace a una direccin de correo: <a href=mailto:noestoy@disponible.com>mi mail</a><br> Otros Tags: <blockquote> </blockquote> Justifica el texto a ambos
Prctico:
Disee una pgina HTML con el Block de notas , aplicando lo revisado en clases:
El resultado de la pgina debe ser similar o mejor a la imagen siguiente
Listas
Una lista es una forma de organizar la informacin en diferentes lneas. Cada uno de los elementos de la lista puede estar precedida por una marca, nmero, letra o cadena. Las listas pueden anidarse, es decir, podemos crear listas dentro de otras listas. Existen tres tipos de listas: listas no ordenadas listas ordenadas listas de definiciones Dentro de cada lista los diferentes elementos que la componen se indican encerrndolos entre las etiquetas <li> y </li>.
Listas no ordenadas <ul>
Se crean utilizando la etiqueta <ul>. En este tipo de listas los elementos aparecen precedidos de una marca, que, dependiendo del nivel ser diferente. Para escoger el tipo de marca hemos de utilizar el atributo type. Los posibles valores que puede tonar son:
circle: marcas en forma de circulo (por defecto)

square: marcas en forma de cuadrado disk: marcas en forma de disco none: no utilizar ningn tipo de marca
html> <head> <title>ejemplo de lista no ordenada</title> </head> <body> <h1>Ejemplo de lista no ordenada</h1> <ul> <li>primer elemento</li> <li>segundo elemento <ul>
<li>primer elemento</li>
<li>segundo elemento</li> <li>tercer elemento</li> <li>cuarto elemento</li> </ul> </li> <li>tercer elemento</li> <li>cuarto elemento</li>
</ul>
</body> </html>
Tarea
Averiguar como se utilizan las siguientes etiquetas con: listas ordenadas listas de definiciones

Traer un ejemplo de cada una

HTML

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML

Загружено:

Авторское право:

Доступные форматы

Lenguaje HTML

Programas de Diseo de Web

Cuerpo basico de un archivo HTML

Insertar una imagen

Partes de un documento HTML

LO QUE PUEDE CONTENER

Dando formato al texto

Dando formato al texto

Dando formato al texto

Ejemplo: La <sup>13</sup>CC<sub>3</sub>H<sub>4</sub>ClNOS es un heterociclo alergeno enriquecido

Dando formato al texto

Dando formato al texto

Codifique el siguiente texto en una pgina HTML, utilizando Notepad

Ancho del borde de la tabla

Listas no ordenadas <ul>

circle: marcas en forma de circulo (por defecto)

Traer un ejemplo de cada una

Вам также может понравиться