realizado por: ing. mauricio rivera1 html. realizado por: ing. mauricio rivera2 que es internet? se...

Realizado por: Ing. Mauricio Rivera 1

HTML


Que es Internet?

Se crea en 1957 en el departamento de defensa de USA, para protegerse de los ataques rusos.

Conectando 4 equipos geográficamente distantes con su principal objetivo conseguir una red capaz de recibir daños parciales.

Desarrollaron pruebas de protocolos servidor a servidor


Qué es Internet?

Protocolos de internet mas comunes:

TCP/IP (Transfer Control Protocol)HTTP (Hypertex transfer Protocol)FTP (File transfer Protocol)SMTP (Simple mail transfer Protocol)POP (Post office Protocol)


Que es HTML?

El HTML ó lenguaje de enlaces hipertexto es

un sistema que se encarga de definir tipos de

documentos estructurados y lenguajes de

marcas para representar esos mismos

documentos. El término HTML se suele referir

a ambas cosas, tanto al tipo de documento

como al lenguaje de marcas.

HTML

Para empezar lo primero que debemos conocer son los llamados Tags que son etiquetas que limitan una sección de elementos que serán afectadas.

Su formato es de la siguiente manera:

<xxx> Inicio de etiqueta</xxx> Cierre de la etiqueta

No importa si los nombres están en mayúscula o minúscula. Pero es recomendable que se use minúscula o mayúscula.

HTMLLo que haya entre ambas etiquetas estará influenciada por ellas. Por ejemplo, todo el documento HTML debe estar entre las etiquetas <HTML> y </HTML>:

<HTML> [Todo el documento] </HTML>

Las etiquetas tienen atributos las cuales nos dan personalidad a estas etiquetas.

Ejemplo:

 hola mundo

Comentarios

Para dejar notas o comentarios utilizamos los siguientescaracteres para realizarlo:

Estructura de Comienzo HTMLLa estructura se compone de los siguientes tags:

<HTML> y </HTML> Principio y Final del Documento<HEAD> y </HEAD> El encabezamiento<BODY> y </BODY> Cuerpo o parte donde se trabaja

Ejemplo:

<HTML><HEAD><TITLE> Primer Página </TITLE></HEAD><BODY> Esta es mi primera página</BODY></HTML>

Cuerpo del HTMLEntre los atributos del <BODY> tenemos:

Background = define un gráfico de fondoBgColor = define el color de fondo de una páginaText = define el color de texto de una páginaLink = define el color de un enlace no visitadoVlink = define el color de un enlace ya visitadoAlink = cambia el color mientras lo estamos pulsando para visitarlo.

Ejemplo : <body bgColor=“black” text=“white” link= “green” vlink= “yellow” alink=“black”>

Formatos al Texto

Texto sin ninguna característica pero en párrafo

Diferente, dejando una línea en blanco: 

Separar párrafos sin dejar espacios en blanco con: 

Para utilizar letra negrita: 

Para utilizar letra cursiva: 

Letra Subrayada: 

Letra Tachada: <S> </S>

Formatos al Texto

Letra de máquina de escribir: <PRE> </PRE>Para índice: Para subíndices: 

Font para la fuente de la letra.

EJEMPLO

Encabezados

Entre los encabezados tenemos 6 tamaños el mas pequeño es 6 y el mas grande 1 de la siguiente manera: <H1> </H1>.

Tiene sus atributos como los otros: center, left, right y justify.

Ejemplo : <H1 align=“center”>Primer Línea</H1>

También esta el <HR> que es para mostrar una división, se puede modificar su tamaño.

<HR width=50%>

Espacio en blanco entre palabras = &nbsp&;


Listas

También existen los conceptos de listas, que tienen

tres tipos:

Listas no ordenadas,Listas ordenadas y Listas de definición.

Listas no OrdenadasListas no ordenadas (no numeradas) , sirven para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un número. Etiquetas<UL> <LI> item </UL>

Ejemplo:

<UL> <UL><LI> Una cosa <LI> Mamíferos<LI> Otra cosa <LI> Peces<LI> Otra más <LI> Mamíferos<LI> Etc. <LI> Peces</UL> <UL>

<LI> Sardina<LI> Bacalao</UL><LI> Aves</UL>

Listas OrdenadasListas Ordenadas (numéricas), sirven para presentar cosas en un ordendeterminado. Su estructura es muy similar a la anterior. La diferencia estriba en que en el resultado aparecerá automáticamente un número correlativo para cada cosa. Etiqueta

<OL> <LI> item </OL>

Ejemplo: <OL><LI> Primera cosa<LI> Segunda cosa<LI> Tercera cosa<LI> Etc.</OL>

Formas de las viñetasPodemos definir el tipo de viñeta empleada para cada elemento. Para ello debemos especificarlo por medio del atributo type incluídodentro de la etiqueta de apertura <ul>, si queremos que el estilo sea válido para toda la lista o dentro de la etiqueta <li> si queremos hacerlo específico de un solo elemento. La sintáxis es del siguiente tipo:

<ul type="tipo de viñeta">

Donde “tipo de viñeta” puede ser una de las siguientes características:

circle disc square

EjemplosOrdenamos por números

<ol type="1"> <li>Elemento 1 <li> Elemento 2 </ol>

Ordenamos por letras <ol type="a"> <li>Elemento a <li> Elemento b </ol>

Ordenamos por números romanos empezando por el 10

<ol type="i" start="10"> <li>Elemento x <li> Elemento xi </ol>

Listas de DefiniciónListas de Definición, como su nombre indica, son apropiadas para glosarios (o definiciones de términos). Etiquetas:

<DL> <DT> <DD> </DL>

Ejemplo:

<DL><DT> Una cosa a definir<DD> La definición de esta cosa<DT> Otra cosa a definir<DD> La definición de esta otra cosa</DL>


HTML Caracteres EspecialesHay que tomar en cuenta que algunas configuraciones de browser no entenderán todos los caracteres disponibles, así que hay manerasde realizar los acentos y otros como se explica a continuación.

La forma de realizar esto es la siguiente: Para las vocales acentuadas se forman comenzando con &, seguido de la vocal encuestión seguido de la palabra acute y después ;

á para la áé para la é¿ para ¿ñ para la ñü para la ü

HTML

Si usted desea cambiar el tamaño de toda la página en el tamañopara comenzar se puede utilizar la siguiente etiqueta:

Ejemplo:

<BODY><BASEFONT SIZE=5>

<BODY>

También puede forzar el texto obteniendo un determinado tipode fuente:

Este texto con la fuente Verdana


Ejercicio 1

realizado por: ing. mauricio rivera1 html. realizado por: ing. mauricio rivera2 que es internet? se...

Documents