HTML5 - CSS3 Notas para la programación Web
HTML
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.
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
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.
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>
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>
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>.
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(significado(semánkco.(( h\p://www.w3.org/wiki/html/elements/b( ( ( ( (
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>
Hiperenlaces Hiperenlace Local
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="http://www.euronet.es/mvc" target="_blank">link a Jubatusland</a> Se abre el enlace en una pestaña o ventana nueva.
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>.
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="http://www.euronet.es/mvc" 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>