insutec html

CURSO DE PHP

INGENIERO:

RAFAEL ROZO

SESIÓN 2

<HTML>

INSUTEC 2010

<HTML>

CONCEPTOS BÁSICOS

• NAVEGADOR: Es el programa que nos ofrece acceso a Internet. Debe ser capaz de

comunicarse con un servidor y comprender el lenguaje de todas las herramientas que

manejan la información Web. Puede decirse que cada casa de software podría tener su

navegador propio, aunque los mas populares sean Mosilla Firefox, Netscape e Internet

Explorer.

• SERVIDOR: Se encarga de proporcionar al navegador los documentos y medios que

este solicita. Utiliza un protocolo HTTP para atender las solicitudes de archivos por parte

de un navegador.

<input type=submit value = "Inscripción" style = 'width:200px; height:25px' onclick='xxx()'>

<HTML>

CONCEPTOS BÁSICOS

• ATRIBUTOS parámetros que dan valor al tag, generalmente modifican el formato comoel tamaño, el color, etc. y las acciones de un área especifica.

• URL: Es el Localizador Uniforme de Recursos, o dicho mas claramente, es la dirección

que localiza una información dentro de Internet (DNS Domain Name System ).

• HTTP: (Hyper Text Transfer Protocol) Es el protocolo de transferencia de hipertexto, o

sea, el protocolo que los servidores de World Wide Web utilizan para mandar

documentos HTML a través de Internet.

• HTML: Esta sigla corresponde con la definición "Lenguaje para marcado de hipertexto".

Más claro aún, se trata de un lenguaje para estructurar documentos a partir de texto en

World Wide Web. Este lenguaje se basa en tags (instrucciones que le dicen al texto como

deben mostrarse).

• TAGS: Básicamente, los documentos escritos en HTML constan del texto mismo del

documento y las tags que pueden llevar atributos. Esto llevado a la práctica, vendría a

ser:

<tag> texto afectado </tag>

La tag del principio activa la orden y la última (que será la del principio precedida del

signo /) la desactiva. No todas las tags tienen principio y final

TIPSGenerar una estructura de programación.

Si no se tiene un editor de HTML trabajar en Notepad.

Los archivos editados en Notepad y guardados con extensión html o php se les debe

cambiar el “tipo de archivo”, de esta forma el archivo queda binario y no de texto evitando

problemas en los interpretadores de html, mysql y php.

ESTRUCTURA DE PROYECTO

<HTML> Esta marca de hipertexto identificael inicio y fin de un documento HTML, limitanel documento e indica que se encuentraescrito en el lenguaje HTML.

<HEAD> Especifica el prólogo del resto delarchivo. Son pocas las tags que van dentrode ella, destacando la del titulo <TITLE> queserá utilizado por los marcadores delnavegador e identificará el contenido de lapágina. Solo puede haber un título pordocumento, preferiblemente corto aunquesignificativo, y no caben otras tags dentro deél.

GENERAR ARCHIVO HTML

ESTRUCTURANDO ARCHIVO HTML

• <BODY> Encierra el contenido del restodel documento, es el “cuerpo” delprograma.

ETIQUETAS DE EDICION DE TEXTO

EN EL “BODY”<H1>, <H2>, <H3>...: Titulares. Sirven paradividir el texto en secciones. Se puedendefinir seis niveles de titulares, el texto quedeseamos que sea un titular se pone entrelas tags <H1> Titular </H1>. Se definenmediante las tags <H1>.....</H1> hasta<H6>.....</H6>

<P>: Párrafos. Se definen por las tags<P>.....</P>. Esta tag, en un principio, sediseñó para saltar de párrafo por lo quepuede ir sola "<P>" al final de un textoindicando que a continuación se quiere unalínea en blanco.

<BR>: Saltos de línea. Esta tag sirve pararealizar un salto de línea, puede poner tantascomo desee y realizará un salto de línea porcada una de ellas.

: Comentarios. Son directivas quenunca se mostrarán a través del navegador yque le servirán para recordatorios en futurasrevisiones del script.


HIPERVÍNCULO

Lo característico del lenguaje HTML es el poder generar vínculos de hipertexto

para enlazar con ellos todos sus documentos en una estructura web predefinida.

Para generar un enlace a otro documento necesitamos el nombre de un archivo

(o su dirección URL) y el texto que servirá de punto de activación del otro

documento. Este segundo elemento será el que veamos en pantalla y que se

servirá del primero para saltar de documento.

<A>: Los enlaces se generan mediante la tag <A>.....</A> y, a diferencia de losvistos anteriormente, llevará siempre dentro de la tag un atributo ya sea <AHREF=""> o <A NAME="">.


HIPERVÍNCULO <A HREF="URL">.....</A>: Es el más habitual de los atributos y sirve para saltar entre

diferentes URL.

Practica

Saltar del archivo “ejemplo3.html” al archivo “index.html”: En el archivo “ejemplo3.html”

incluiremos la directiva <A HREF="archivo2.html">Siguiente página</a> Saltar de nuestra

pagina web a otra pagina web como google seria: <A HREF="http://www.google.com">Ir a

google</A>

<A NAME="parte1">Primera parte</A>: Utilizamos el atributo name para dar nombre a

una sección de nuestro documento. Posteriormente, cuando en nuestro documento

queramos incluir un vínculo a dicha sección escribiremos:

<A HREF="#parte1">Ir a la primera parte</A>

Este tipo de vinculo también se conoce como marcador.


HIPERVÍNCULO

<img src = “imagen">: Con esta tag se puede introducir imágenes dentro de un código

de HTML


IMAGENES

<TABLE>… …</TABLE>: Las tablas se generan a partir de la tag <TABLE>

generalmente la estructura interna de una pagina web esta dado por una tabla y cada

componente (texto o imagen) se coloca en una celda.


TABLAS

<TR>… …</TR>: Esta tag realiza la apertura de las filas de cada tabla, dentro de el se

ubica el tag de las columnas.

<TD>… …</TD>: Esta tag realiza la apertura de las columnas en cada fila de cada tabla,

dentro de el se ubica el contenido de la celda.

BORDER este atributo ubicado dentro de la tag <TABLE> le da a grosor al borde de toda la

tabla

<TABLE BORDER=10>

COLSPAN: Este atributo realiza la unión de dos celda de manera horizontal.

ROWSPAN: Este atributo realiza la unión de dos celda de manera vertical.

BGCOLOR: este atributo coloca color al fondo de la celda.

bgcolor = red bgcolor = rgb(255,255,200)

ALIGN: Con este atributo se alinea el texto hacia el lado que se indique (Center, right) por

defecto es izquierdo

VALIGN: Con este atributo se alinea el texto de manera vertical (top, boton) por defecto es

centro.

Atributos de texto <FONT SIZE = 6>HORARIO DE CLASES</FONT>


ATRIBUTOS DE TABLAS

Otros Atributos

BGCOLOR: Color de fondo de la página.

BACKGROUND: Imagen de fondo.

TEXT: Color del texto.

LINK: Color de los enlaces.

VLINK: Color de los enlaces visitados.

ALINK: Color de los enlaces activos.


ATRIBUTOS DE TABLAS

EJERCICIO

insutec html

Documents