HTML BÁSICO EN ESPAÑOL PARTE I Según estándares W3
Ileana Echandi W. ileana@seoemporio.com
¿QUÉ ES HTML? •
HTML es un lenguaje para describir las páginas web.
•
Las siglas HTML son por »Hyper Text Markup Language»
•
HTML no es un lenguaje de programación en sí, es un lenguaje de marcado (incorpora marcas que contienen información)
•
HTML usa las etiquetas de marcado para descrbir las páginas web
•
Los documentos HTML describen páginas web
•
Los documentos HTML contienen etiquetas HTML y archivos de texto plano
•
En resumen: Documento HTML = página web
ETIQUETAS HTML •
Las etiquetas de marcado HTML son usualmente llamadas etiquetas HTML (HTML Tags)
•
Las etiquetas HTML son palabras escritas entre paréntesis angulares <html>
•
Normalmente vienen en pares : <html> </html>
•
La primera etiqueta es “la etiqueta de comienzo”, la segunda es la “etiqueta de fin”
•
En inglés son llamadas “start tag u opening tag” y “end tag o closing tag”
•
No siempre vienen en pares. Ej. La etiqueta utilizada para crear una línea entre párrafo y párrafo: <hr />. Se coloca el / después de las letras, para indicar que ahí comienza y termina.
*No olvide colocar las etiquetas de cierre cuando sean pares.
ELEMENTOS Y ATRIBUTOS DE HTML •
Un elemento HTML es todo desde el comienzo de una etiqueta hasta la etiqueta de cierre.
Ej. <a href="http://www.facebook.com">Facebook</a> Todo esto un elemento •
Atributos
1. Estos proveen información adicional acerca del elemento 2. Siempre se especifican en la etiqueta de comienzo 3. Vienen en formato de nombre/valor…. nombre="valor" Ej. <a href="http://www.facebook.com">Facebook</a>
*Procure escribir los elementos y atributos en minúscula. Los valores de los atributos van entre doble comilla “….”
EJEMPLO <html> ! Describe la página web <body> ! Describe el contenido visible de la página <h1>Encabezado principal va aquí</h1> <p>Párrafo va aquí</p> </body> ! Aquí termina el contenido visible de la página </html> ! Aquí termina el documento HTML
*El propósito de un navegador de internet (Explorer, Firefox…) es leer los documentos HTML y desplegarlos como una página web. Las etiquetas no son visibles, si desea verlas vaya a un sitio web y presione el botón derecho del mouse, seleccione “ver código fuente”.
EMPIECE A CREAR SU PÁGINA WEB Pasos sencillos para comenzar una página 1.
Vaya a Accesorios y abra su Bloc de notas
2.
Copie las siguientes etiquetas y péguelas en
el bloc: <html> <body> <h1>escriba aquí el título que deseé</h1> <p>escriba aquí el párrafo que quiera</p> </body> </html>
3. Guarde el archivo en su escritorio con el nombre que guste, pero al final escriba «.html» 4. Abajo donde dice «tipo» seleccione la opción de todos los archivos 5. En su escritorio debería de aparecerle el documento, el cual al hacerle clic abrirá como una
página web.
FELICIDADES! En este momento usted de seguro ha podido crear su primera prueba en la web. Ya cumplió con los principios más básicos como lo son el encabezado y el párrafo. Por favor ponga atención a las siguientes notas: •
Una página puede tener varios encabezados <h1>Aquí va el encabezado principal de su sitio</h1> <h2>Segundo encabezado</h2> <h3>Tercer encabezado</h3> …
•
También puede escribir cuantos párrafos deseé, estos no van numerados. Tan sólo escriba <p>párrafo</p> <p>Aquí su segundo párrafo</p>… Y así sucesivamente.
ETIQUETAS QUE DEBERÍA DE SABER Para crear una página web, usted necesitará aprender a escribir y reconocer otras etiquetas. A continuación le explicaré una por una las demás etiquetas básicas para la creación de un documento HTML.
HTML HIPERVÍNCULO <a href="url aquí">aquí va el texto que se despliega en vez del url</a> Ej. Código HTML: <a href="http://www.google.com/">Google</a> Resultado visible en el sitio: Google *Al igual que un hipervínculo en Word, estos pueden redireccionar a una página web, o a un sitio dentro del mismo documento (en este caso dentro del mismo sitio web).
___________________________________________________________________________
Variantes Abrir el link en una nueva página: <a href="http://www.youtube.com" target="_blank">YouTube</a>
*Cada símbolo como /, debe de ser respeto tal y como se muestra en el primer ejemplo
IMÁGENES HTML <img src=“flor.gif" alt=“rosa roja" width=“40" height=“45" /> etiqueta
nombre de la
ancho y altura de la imagen
imagen atributo
Texto que aparece en caso de que la imagen no se despliegue
Usar una imágen como link (puede usar una de su escritorio para efectos del ejercicio): <a href="default.asp"><img src=“flor.gif" alt=“rosa roja" width=“40" height=“45" /></a>