HTML5 - CSS3. Notas para la programación Web

Tamaño: px

Comenzar la demostración a partir de la página:

Download "HTML5 - CSS3. Notas para la programación Web"

Carmelo Núñez Álvarez
hace 6 años
Vistas:

1 HTML5 - CSS3 Notas para la programación Web

2 HTML

3 Estructura HTML Documento html Navegador Las etiquetas html, head y body conforman la estructura básica de un documento o página html. Únicamente lo que esté dentro del body se verá en el navegador.

4 Estructura HTML Si abrimos el programa SublimeText y guardamos un fichero con extensión.html ya podremos escribir etiquetas de html. Si ponemos doc + TAB, aparecerá algo sí: <html> <head> <meta charset="utf-8"> <title>document</title> </head> <body> </body> </html> Usaremos este programa para escribir el código de nuestras páginas, aunque para jugar un poco con el html también usaremos algunas herramientas online como: JS Bin Code Pen W3Schools

5 Estructura HTML <meta charset="utf-8"> La etiqueta meta define varios tipos de metadatos. El atributo charset especifica la codificación usada en nuestra página.

7 Primeras etiquetas HTML Hay etiquetas que tienen apertura y cierre, como <html></html>, otras sólo tienen apertura. Se usa la identación para hacer la lectura del contenido más legible. Ve m o s d e n t r o d e l < h e a d > información metida hacia dentro. El <body> está vacío, esta página no tiene contenido. <html> <head> <meta charset="utf-8"> <title>document</title> </head> <body> </body> </html>

8 Primeras etiquetas HTML Si escribimos: <html> <head> <meta charset="utf-8"> <title>página de prueba</title> </head> <body> <h1>mi primera página</h1> <h2>introducción</h2> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, iste voluptate quibusdam quia! Dolorem repudiandae, quas quam accusamus nesciunt similique eaque nostrum maiores laudantium nobis commodi alias voluptatum nam, aliquam.</p> </body> </html>

9 Primeras etiquetas HTML Veríamos: Ya vemos que las etiquetas dan una estructura predefinida al contenido. El <h1> es mayor que el <h2> y éste que el texto de <p>.

10 HTML( Las(marcas(de(texto(en(html,(se(emplean(para(el(estructurado( ((( semántco(del(contenido.( (( (( Los(textos(habituales(están(formados(por(párrafos,(palabras(en( negrita(o(cursiva,(anotaciones(y(correcciones,(citas(a(otros( documentos(externos...( ( Marcado(básico:( <p></p>(e(párrafo( <em></em>(e(da(énfasis(al(texto(que(encierra( <strong></strong>(e(máxima(importancia(al(texto(que(encierra( Las(eKquetas(<b>(para(la(bold(o(negrita((y(la(eKqueta(<i>(para(la(itálica(o(cursiva,( son(similares(visualmente,(pero(sin(signiﬁcado(semánkco.(( h\p:// ( ( ( (

11 Hiperenlaces Otras etiquetas que podemos usar son los hiperenlaces, que son una estructura creada para conectar diferentes partes de una página web con información y recursos externos o internos. <a href= ruta o url >texto de enlace</a>

12 Hiperenlaces Hiperenlace Local

13 Hiperenlaces Esta etiqueta tiene el atributo target, que nos indica el modo en que se visualiza el contenido al que se accede, por defecto se abre el enlace en la misma página en la que estamos con lo que perderíamos el foco de la página actual. <a href=" target="_blank">link a Jubatusland</a> Se abre el enlace en una pestaña o ventana nueva.

14 Usando Listas Las listas vienen definidas por la etiqueta <ul>, si son desordenadas y <ol> para listas ordenadas, cada item de la lista se marca con otra etiqueta <li>.

15 Mi primera página <html> <head> <meta charset="utf-8"> <title>página de prueba</title> </head> <body> <h1>mi primera página</h1> <h2>introducción</h2> <p>lorem <b>ipsum dolor sit amet</b>, consectetur adipisicing elit. Pariatur, iste voluptate quibusdam quia! Dolorem repudiandae, quas quam accusamus nesciunt similique eaque nostrum maiores laudantium nobis <i>commodi alias</i> voluptatum nam, aliquam.</p> <a href=" target="_blank">link a Jubatusland</a> <h3>lista desordenada</h3> <ul> <li>lorem ipsum dolor</li> <li>lorem ipsum dolor</li> <li>lorem ipsum dolor</li> </ul> <h3>lista ordenada</h3> <ol> <li>lorem ipsum dolor sit.</li> <li>lorem ipsum dolor sit.</li> <li>lorem ipsum dolor sit.</li> </ol> </body> </html>

Documentos relacionados

Soporte / Trabaje con nosotros. Servicios STAGE PRINCIPAL (ROTATIVO) Soluciones de ingeniería. Noticias y Eventos. imagen

Soporte / Trabaje con nosotros. Servicios STAGE PRINCIPAL (ROTATIVO) Soluciones de ingeniería. Noticias y Eventos. imagen Home STAGE PRINCIPAL (ROTATIVO) Nuestras Empresariales / ERP de gestión de talento Humano de ingeniería Microsoft Financieras Noticias y Eventos Casos de Exito imagen of the printing and typesetting Lorem