Your SlideShare is downloading. ×
Html
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html

1,008
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,008
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Grupo de traballo – I.E.S. Ponteareas Deseño de Páxinas web Que é HTML? • HTML = Hyper Text Markup Language • HTML non é unha linguaxe de programación, senón de etiquetado. • HTML emprega etiquetas para describir páxinas web. • As etiquetas de HTML xeralmente veñen en pares, unha indicando o inicio e outra o final: <etiqueta> texto ó que afecta </etiqueta> Que se necesita para traballar con HTML? Nada específico. Cun editor de texto (coma o Bloc de Notas) é suficiente. Outros programas para edición web poden axudarnos a crear as nosas páxinas, pero xeralmente fan máis complexa a súa edición posterior xa que o código que crean adoita ser algo máis reiterativo. Os programas específicos máis populares son: • Expression Web (antes FrontPage) é un programa de pago da suite Microsoft Office. • DreamWeaver é un programa de pago de Adobe. • Writer da suite gratuita OpenOffice (http://es.openoffice.org/), dispoñible entre moitas outras en castelán e galego, permite gardar os documentos como Pátinas web pero produce un código bastante descoidado. • KompoZer (http://kompozer.net/) é un programa gratuito sinxelo, pero só hai versión en inglés. • BlueFish (http://bluefish.openoffice.nl) é un programa gratuito e que ofrece recursos incluso para deseñadores web avanzados, pero só hai versión en inglés. • Quanta Plus (http://quanta.kdewebdev.org/) é un programa gratuito para entornos KDE e GNOME. En inglés. • SkEdit (http://www.skti.org/) é un programa de pago para Mac OS X. En inglés. Exemplo de etiquetado: <html> <body> <h1>Título</h1> <p>O meu primeiro parágrafo.</p> </body> </html> Gardar un arquivo Os arquivos HTML deben ter extensión .htm ou .html Ambas extensións cumpren a mesma función, e na actualidade non hai diferencia entre elas. Se estás a empregar Bloc de Notas, no nome indica a extensión desexada e no tipo selecciona "Todos os arquivos". Deseño de páxinas web Páxina 1
  • 2. Etiquetas básicas para a estructura dos parágrafos <html> … </html> Indica o comezo e final do código HTML da nosa páxina. En xeral, serán a primeira e a última etiqueta do código respectivamente. <body> … </body> Indica o comezo e final do corpo da nosa páxina. Todo o contido que se vaia a amosar directamente na pantalla estará etiquetado aquí. <h1> … </h1> Cabeceiras ("header") de distintos niveis. Son moi útiles á hora de ata organizar as nosas páxinas porque lles dan ós buscadores web a <h6> … </h6> estructura da mesma. <p> … </p> Indica cada un dos parágrafos da nosa web. <br /> Quebra de liña sinxela ("break"), que se pode introducir dentro dun parágrafo. Obsérvese a súa estructura diferente, xa que non hai unha etiqueta de inicio e outra de final. <hr /> Liña divisoria horizontal, que funciona de xeito análogo á etiqueta anterior. Obsérvese a estructura standard actual, aínda que moitos programas de deseño web empregan un standard antigo. Etiquetas de formato <b> … </b> Negra ("bold"). <i> … </i> Cursiva ("italic"). <big> … </big> Tamaño de letra grande. <small> … </small> Tamaño de letra pequeno. <tt> … </tt> Formato teletipo. <sup> … </sup> Superíndice. <sub> … </sub> Subíndice. Existen moitas outras etiquetas de formato, pero na maior parte dos navegadores o resultado visual coincide cas anteriormente citadas. Enlaces <a href="URL"> … Cando queiramos enlazar unha páxina con outra, debemos indicar a </a> dirección da mesma ("URL") co atributo href. Se está no mesmo cartafol, basta con poñer o nome do arquivo (sen olvidar a extensión, xa sexa .htm, .html ou outra). Se está noutro cartafol, debemos indicar en cal, empregando o símbolo "/" para entrar nun posterior e "../" para indicar que queremos regresar a un previo. Se está noutro servidor debe facilitarse a dirección completa (comezando por "http://"). <a href="URL" En xeral, a nova páxina abrirase na mesma pestana do navegador. target="destino"> … Se queremos que se abra noutra, teremos que indicar en cal. </a> O valor "_blank" fará que de cada vez se abra nunha nova. Deseño de páxinas web Páxina 2
  • 3. Imaxes <img src="URL" /> De xeito análogo ó enlace de páxinas, ó engadir unha imaxe debemos proporcionar a dirección da mesma. <img src="URL" Os valores que asignemos ós atributos width e height son o ancho e width="valor" alto cos que se amosará a imaxe. Pode indicarse en píxeles ou height="valor" porcentaxe. Esto NON modifica o arquivo en absoluto, só o xeito en alt="texto" /> que se ve na páxina. Por outra banda, o texto alternativo que propoñamos en alt amosarase cando a imaxe non poida cargarse. Listas <ol> … </ol> Lista ordeada ("ordered list"). Cada un dos elementos dentro da lista irá marcado cun número. <ul> … </ul> Lista non ordeada ("unordered list"). Cada un dos elementos dentro da lista irá marcado cunha viñeta. <li> … </li> Cada un dos elementos da lista ordeada ou non ordeada. <dl> … </dl> Lista de definicións ("definition list"). Cada un dos elementos dentro da lista consta de dúas partes: termo a definir e definición do mesmo. <dt> … </dt> Termo definido ("definition term"). Debe ir dentro dunha lista de definicións. <dd> … </dd> Definición ("definition description"). Tamén debe ir dentro dunha lista de definicións; xeralmente a continuación do termo definido. Táboas <table> … </table> Indica o comezo e final dunha táboa. Dentro deberán ir as filas e celas correspondentes. Os atributos máis relevantes dunha táboa son o ancho do borde (border="valor"), o espacio entre o borde da cela e o seu contido (cellpadding="valor") e o espacio entre celas (cellspacing="valor"). <tr> … </tr> Dentro dunha táboa, indica o comezo e final de cada fila ("table row"). <td> … </td> Dentro de cada fila, indica o comezo e final de cada cela ("table data"). Se se queren unir varias celas da mesma columna pode facerse co atributo rowspan="valor", e de xeito análogo para varias celas da misma fila con colspan="valor". <th> … </th> Cela que funciona como cabeceira da táboa ("table header"), cun xeito de emprego idéntico ó da etiqueta anterior. Deseño de páxinas web Páxina 3
  • 4. Formularios <form> … </form> Indica o comezo e final dun formulario. O resto de etiquetas relativas ó mesmo irán dentro desta. A codificación dun formulario esixe o emprego doutro tipo de linguaxes, como pode ser PHP ou ASP. <input type="text" Campo de texto dunha liña. name="nome" /> <input Campo de texto dunha liña que oculta o seu contido. type="password" name="nome" /> <input type="radio" Cada un dos elementos a seleccionar entre un número limitado, que name="nome" aparecerán listados cun circuliño. value="valor" /> <input Cada un dos elementos a seleccionar entre un número limitado, type="checkbox" puidendo realizarse unha selección múltiple, que aparecerán listados name="nome" cunha caixiña. value="valor" /> <input type="submit" Botón para enviar o formulario. value="Enviar" /> <select name="nome"> Campo desplegable. Poden engadirse tantas opcións como sexan <option value="valor"> necesarias. … </option> </select> <textarea Campo de texto que permite múltiples liñas. name="nome"> … </textarea> Información da páxina <head> … </head> Encabezamento da páxina. Forma parte do código HTML, pero debe ir fóra do corpo ("body") da páxina. Contén as etiquetas que figuran a continuación. <title> … </title> Define o título da páxina, que poderá verse no navegador. <meta Descrición da web. Non é visible na páxina, pero pode ser name="description" empregada por buscadores, servicios webs ou navegadores. content="descrición" /> <meta Palabras clave á hora de clasificar a paxina. Deben ir separadas por name="keywords" comas. Tampouco son visibles na propia páxina. content="termos" /> <meta name="author" Indica o autor da web. content="autor" /> <meta http- Codificación de caracteres por defecto. A aquí indicada é a máis equiv="Content-Type" frecuente para as linguas da Europa occidental. content="text/html; charset=ISO-8859- 1" /> Deseño de páxinas web Páxina 4
  • 5. Símbolos especiais O conxunto de caracteres ISO-8859-1 é o que máis frecuentemente empregado na Europa occidental. Este inclúe unha serie de caracteres especiais que non darán problemas sempre que a codificación de caracteres esté indicada no encabezamento da páxina e o usuario non a modifique no navegador. En xeral, é recomendable indicalos como caracteres especiais empregando o código correspondente, xa que daquelas non haberá problema en ningún caso. " &quote; < &lt; > &gt; & &amp; ñ &ntilde; ç &ccedil; é &eacute; è &egrave; ê &ecirc; ë &euml; ¡ &iexcl; ¿ &iquest; A táboa anterior é un brevísimo exemplo, pero hai moitos máis caracteres especiais de uso frecuente, ademáis de caracteres en alfabeto grego e símbolos matemáticos que tamén contemplan este mesmo recurso á hora de empregarse nunha web. Véxase unha lista completa en: http://www.w3schools.com/tags/ref_entities.asp Deseño de páxinas web Páxina 5
  • 6. Que é CSS? • CSS = Cascading Style Sheets • CSS define o xeito en que se amosan os elementos creados con HTML. • Pode empregarse directamente sobre cada elemento, agruparse en follas de estilo internas para toda a páxina ou como arquivos externos compartidos por varias páxinas. Estilos con CSS nunha etiqueta Para empregar o CSS directamente sobre un elemento, basta con engadirlle á etiqueta correspondente o atributo style="..." onde incluiremos todos as propiedades (e os seus respectivos valores) que queiramos, separados por un punto e coma. <p style="text-align:center;">O meu primeiro parágrafo CENTRADO.</p> Se o código ó que queremos aplicarlle a propiedade non se corresponde con ninguna etiqueta, podemos empregar as xenéricas <div> … </div> e <span> … </span>. Existen multitude de propiedades aplicables, con diferentes valores. Na táboa seguinte, os máis empregados: Propiedade Valores posibles Descrición background-color Nome dun color (en inglés), Color de fondo. valor RGB (por exemplo: rgb(255,0,0)) ou código hexadecimal (por exemplo: #FF0000). background-image url('URL_da_imaxe') Imaxe de fondo. color Nome dun color (en inglés), Color do texto. valor RGB (por exemplo: rgb(255,0,0)) ou código hexadecimal (por exemplo: #FF0000). text-align right, left, center, justify Aliñación horizontal do texto. vertical-align baseline, top, middle, bottom Aliñación vertical do texto. font-family Times, Courier, Verdana, Tipo de letra. Pode indicarse o Arial, etc., ou serif, sans-serif, tipo concreto ou xenérico. cursive, monospace, etc. font-size Valor en píxeles (por exemplo, Tamaño do texto. 16px) ou proporción (1em). font-style normal, italic Normal ou cursiva. font-weight normal, bold Normal ou negra. text-decoration underline, overline, line- Decoración do texto. through, none text-transform uppercase, lowercase, Maiúsculas, minúsculas, capitalize versales. text-indent Valor en píxeles (por exemplo, Sangrado da primeira liña. 10px). Deseño de páxinas web Páxina 6
  • 7. Das específicos para un tipo concreto de etiquetas, merecen especial atención as relativas a módulos "en caixa", como poden ser as táboas ou a etiqueta de sección <div> … </div>. Propiedade Valores posibles Descrición width Valor en píxeles (por exemplo, Ancho. 10px) ou porcentaxe (50%). height Valor en píxeles (por exemplo, Alto. 10px) ou porcentaxe (50%). border Ancho en píxeles (1px), tipo Características do borde. (solid, double, dashed, dotted) e color. padding Valor en píxeles (por exemplo, Distancia do borde ó contido. 10px) ou porcentaxe (50%). margin Valor en píxeles (por exemplo, Distancia do borde ós 10px) ou porcentaxe (50%). restantes elementos. Follas de estilo con CSS Ademáis de engadirse a unha determinada etiqueta, tamén poden crearse follas de estilo que se apliquen a todas as etiquetas dun mesmo tipo ou a aquelas que nós indiquemos. Para eso crearemos dentro da cabeceira da páxina un apartado adicado ó estilo. <style type="text/css"> body {color:green;} h1 {text-decoration:underline;} </style> Esto permite planificar dun xeito cómodo (e sinxelo de editar!) os aspectos de estilo xerais da páxina, cunha certa independencia do contido. Asimesmo, podemos identificar unha etiqueta concreta (mediante o atributo id="nome") ou reunir varias delas que desexamos que compartan sempre o mesmo estilo (mediante o atributo span="nome") e indicar as propiedades que desexamos aplicarlles. Para eso, debemos referirnos ás primeiras coa referencia #nome, e ás segundas coa referencia .nome na nosa folla de estilo. Este segundo caso, en particular, evitaranos a tarefa de asignar repetitivamente o mesmo estilo. <html> <head> <style type="text/css"> #taboa {font-weight:bold;} .tipo1 {background-color:lightblue; color:black;} .tipo2 {background-color:black; color:lightblue;} </style> </head> <body> <table id="taboa"> <tr><td class="tipo1">Cela 1</td><td class="tipo2">Cela 2</td></tr> <tr><td class="tipo2">Cela 3</td><td class="tipo1">Cela 4</td></tr> </table> </body> </html> Deseño de páxinas web Páxina 7
  • 8. As vantaxes de aplicar un mesmo estilo a varios elementos dunha mesma páxina (e modificalos todos dunha vez!) poden ampliarse se empregamos unha folla de estilo externa, que nos permita ser aplicada a varias páxinas ó tempo. Para facer eso, o único que necesitamos é colocar a folla de estilo nun arquivo externo (que nomearemos con extensión .css). E no lugar da etiqueta <style> ... </style> teremos que colocar agora unha indicación de onde se aloxa a nosa folla de estilo. <link rel="stylesheet" type="text/css" href="estilo.css" /> Lista de cores A lista de cores sorportados pola meirande parte de navegadores que poden introducirse de xeito nominal é longuísima, pero o standar redúcese ós 16 seguintes: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. En calquer caso, non se limitan as posibilidades no que se refiere ás cores en RGB (máis de 16 millóns), e a meirande parte dos programas de edición de imaxes permitennos obter ese valor nalgún ou ambos formatos aceptados por CSS. Un listado de referencia moi completo pode atoparse en: http://www.w3schools.com/css/css_colorsmore.asp Deseño de páxinas web Páxina 8