2 HTML

INTRODUCCIN AL LENGUAJE HTML
Por: Fausto R. Richardson Hernndez
NAVEGADORES
DE INTERNET
Los navegadores son los softwares utilizamos para accesar las pginas web. Interpretan el cdigo HTML. Los ms usados: Netscape Navigator Internet Explorer Mozilla Firefox Google Chrome Opera Safari
que
QU ES HTML ? HTML significa HyperText Markup Language. No es sensible a maysculas y minsculas. Modo de escritura: Nombres de etiquetas y atributos en minsculas. Etiquetas de cierre para elementos no vacos. Los valores de los atributos deben estar incluidos entre comillas dobles. Uso: crear pginas web. Extensin: archivo.html Protocolo: HTTP Puerto: 80
3
IMPORTANCIA
DE LAS
PGINAS WEB
Son la manera menos costosa de transmitir informacin a los usuarios. Es uno de los medios ms utilizados de mercadeo. Sirven como plataforma para brindar informacin que usted quiera transmitir.
EDITORES HTML Notepad Bluefish Macromedia Dreamweaver Geany (Java) Homesite netBeans IDE (Java) phpEdit TopStyle (Editor CSS)
MI PRIMERA PGINA WEB El cdigo por defecto de una pgina web es el siguiente: <HTML> <HEAD> <TITLE> Ttulo de la pgina </TITLE> </HEAD> <BODY> [Aqu van las etiquetas que visualizan la pgina] </BODY> </HTML>
6
ETIQUETAS HTML <html> <body> El contenido de la pgina se pone aqu. </body> </html> <html> Le dice al navegador que el cdigo HTML comenzar a leerse. <body> Le indica al navegador que el contenido de la pgina web comienza a partir de el. 7
ABRIENDO
UNA
ETIQUETA <TAG>
Para iniciar una etiqueta que deseemos utilizar debemos de iniciarla con el siguiente tag:
CERRANDO
UNA
ETIQUETA </TAG>
El / que se pone delante del tag, le indica al navegador que ah termina el uso de ese <taq>
PRINCIPALES ETIQUETAS HTML <head> Esta etiqueta se pone inmediatamente luego del codigo <html>, y esta se utiliza para informaciones valiosas como por ejemplo el nombre de la pgina. <title> Este tag debe de ponerse entre <head> y </head>, y su uso es cambiar el nombre de la barra de titulo del navegador. <h2> Este es un <tag> de encabezado. El ms grande va desde <h1> y el ms pequeo <h6>.
10
PRINCIPALES ETIQUETAS HTML <p> Este es un <tag> de prrafo. Cuando quieras iniciar un prrafo, simplemente le pones ese <tag> delante. <br> Este <tag> se utiliza para saltos de lneas.
11
COMANDOS BSICOS HTML

12
PRRAFOS
EN
HTML
Los prrafos <p> Atributos de los prrafos <p align=justify></p> Los saltos de lneas <br> Las lneas para separar <hr> Comentar lneas <!- - esto es un comentario - ->
13
ENCABEZADOS
EN
HTML
Los encabezados en HTML estn definidos por los siguientes <tag>. <h1> <h2> <h3> <h4> <h5> <h6>
14
<TAG>
PARA FORMATEAR UN TEXTO
<b> Pone en negrita un texto <i> Pone un texto en itlica <strong> <sub> Pone un texto en sub ndice <sup> Pone un texto en super ndice
15
ENLACES HTML Definicin de Links (enlace) Tag: <a> Hay dos tipos de link. Link externo
Sintaxis: <a href=> Link Text </a> Ejemplo: <a href=http://www.google.com> Google </a>
Link Interno
Sintaxis: <a href=#parteuno>Ir a la primera parte</a> Sintaxis: <a name=parteuno>Primera Parte</a>
16
IMGENES Tag: <img> Sintaxis: <img src=ruta_de_imagen> Atributos: src Alt Height Width
17
TABLAS Las tablas se dividen en filas y las filas se dividen en columnas. Filas Tag: <tr> Columnas Tag: <td> Atributos Border Align Width Bgcolor background 18
LISTAS Listas ordenadas Tag: <ol> Listas no ordenadas Tag: <ul> Definicin de los tems Tag: <li> Listas de Definicin Tag: <dl> Define un tem en una DL - <dt> Define la descripcin del tem - <dd>
19
HTML COLOR CHART
20
FORMULARIOS
21
FORMULARIOS Los formularios se utilizan para pasar data a travs del servidor. Tag: <form></form> Elementos: Text fields Password fields Checkboxes Radio-button Submit button Reset Radio Select 22
ELEMENTOS DE UN FORMULARIO Tag: <input type=> Tipos: Text Checkbox Radio Button Submit Reset Password Hidden
23
ELEMENTOS DE UN FORMULARIO - TEXTFIELDS Atributos: Size Maxlenght Ejemplo:

<form name="myWebForm" action=desplegar.html" method="post"> First: <input name="first" type="text" size="12"> Last: <input name="last" type="text" size="18"> <input type="submit" value="SUBMIT" > </form>
24
ELEMENTOS DE UN FORMULARIO PASSWORDS FIELDS Utilizado para esconder los caracteres digitados por el usuario. Tag: <input> Sintaxis: <input type=password>
25
ELEMENTOS DE UN FORMULARIO SUBMIT @ RESET Submit -> enva informacin capturada en el formulario. Reset -> limpia los campos llenados en el formularios. Ejemplo:
<form method="post" action="mailto:youremail@youremail.com"> Nombre:<input type="text" name=nombre" size="12" maxlength="12"> Apellido:<input type="text" name=apellido" size="24" maxlength="24"> <input type="submit" value="Send Email"> <input type=Reset value=Limpiar Campos> </form>
26
ELEMENTOS DE UN FORMULARIO - CHECKBOXES Se utilizan cuando se desea seleccionar en un formulario todas las opciones que aplican. Sintaxis: <input type="checkbox" name="checkbox_name" />
27
ELEMENTOS DE UN FORMULARIO - RADIO Se utiliza para seleccionar una opcin entre mltiples opciones. Sintaxis: <input type=radio name=nombre>
28
ELEMENTOS DE UN FORMULARIO - SELECT Este elemento genera una lista de valores. Ejemplo: <select name="selectionField"> <option value=OPT1" >Opcin 1</option> <option value=OPT2>Opcin 2</option> <option value=OPT3" >Opcin 3</option> </select>
29
ELEMENTOS DE FORMULARIOS HIDDEN FIELDS Son utilizados para pasar valores. Almacenan la informacin temporalmente. Sintaxis: <input type=hidden name=nombrecampo>
30
ELEMENTOS DE UN FORMULARIO UPLOAD FORMS Proveen una interface para seleccionar un archivo y subirlo. Sintaxis: <input type=file name=subirarchivo>
31
ELEMENTOS DE UN FORMULARIOS - TEXTAREA Es un campo texto con mayor capacidad. Sintaxis: <textarea name=t cols=50 rows=5></textarea>
32
<TAG> ESPECIALES
33
HTML SPECIAL <TAGS>

Body <body topmargin="50"> <body leftmargin="50"> <body link="white" vlink="black" >
<bodylink="rgb(255,255,255) link="rgb(0,0,0)" >
Music codes Display

Width Height Hidden <embed src="beethoven.mid" width="360" height="165" /> Funcionality
Autostart Volume Loop
<embed src="beethoven.mid" autostart="false" loop="false" volume="60" />
34
HTML SPECIAL <TAGS> Video Codes

<embed src="http://www.tizag.com/files/html/htmlexample.mpeg" autostart="false" />
Tipos de Videos
.swf .wmv .mov .mpeg
Atributos de los Videos

Autostart Hidden Loop Playcount volumn
35
HTML SPECIAL <TAGS> Meta tag description

<head> <meta name="description" content="Tizag contains webmaster tutorials." /> </head>
Refrescar y Redireccionar
<head> <meta http-equiv="refresh" content="10; url=http://www.tizag.com" /> </head>
36
HTML CHARACTER ENTITIES - &copy & - & < - < > - > - ¼ - ½ - ¾ - ¿ X2 - x² - á - é - í - ó - ú - ñ
37
HTML FORMATTING TAGS

38
HTML FORMATTING TAGS Negritas

<b></b>
Lnea Horizontal
<hr>
Prrafos
<p></p>
Correo
<a href= "mailto:abc@mail.com" ></a>
<a href= "mailto: a@b.com?subject=Web Page Email&body=This email is from your website" >
Encabezados
<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
Itlicas
<i></i>
Code
<code></code>
Superscript
<sup></sup>
Saltos de lnea
<br>
Subscripted
<sub></sub>
39
ASPECTOS TECNICOS
DE UN
WEBSITE
40
ASPECTOS TCNICOS Tener su propio servidor web Costos de Hardware Costos de Software Costos de Labores Usar un ISP Internet Service Provider Velocidad de conexin Hardware poderoso (sin costo) Seguridad y estabilidad
41
ASPECTOS TCNICOS Cosas a considerar con un ISP: Soporte 24horas Backup diario Volumen del Trafico Ancho de Banda y Restricciones de contenido Capacidad de Correo Acceso a la base de datos
42
43

2 HTML

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

2 HTML

Caricato da

Copyright:

Formati disponibili

INTRODUCCIN AL LENGUAJE HTML

Por: Fausto R. Richardson Hernndez

COMANDOS BSICOS HTML

PARA FORMATEAR UN TEXTO

HTML COLOR CHART

ELEMENTOS DE UN FORMULARIO - TEXTFIELDS Atributos: Size Maxlenght Ejemplo:

HTML SPECIAL <TAGS>

Music codes Display

HTML SPECIAL <TAGS> Video Codes

Atributos de los Videos

HTML SPECIAL <TAGS> Meta tag description

HTML FORMATTING TAGS

HTML FORMATTING TAGS Negritas

Potrebbero piacerti anche