elementos básicos de xhtml...elementos básicos de xhtml conferencia 3 objectivos •reconocer as...
TRANSCRIPT
Tema I - Princípios da programação Web
MSc. Yoenis Pantoja Zaldívar
Elementos básicos de XHTML
Conferencia 3
Objectivos
• Reconocer as principais etiquetas do
linguagem XHTML através de suas
principais atributos e exemplos de
seus usos para desenvolver
documentos Web.
Bibliografía
1. Valentine Chelsea and Minnick
Chris, Serie Práctica XHTML,
Editorial Prentice Hall. 2001.
Disponible en:
http://progwebisutic.wordpress.com
2. Eguíluz Javier, Introducción a
XHTML. Disponible en:
http://www.librosweb.es/xhtml
ELEMENTOS BÁSICOS DE
XHTML
Título: title
<head>
<title>MY HOME PAGE</p>
</head>
Parágrafo: p
<body>
<p>Isto é um parágrafo</p>
<p>Isto é outro parágrafo </p>
</body>
Encabezados: h1-h6
<body>
<h1>Um encabezado de primeiro nível</h1>
<h2>Um encabezado de segundo nível</h2>
<h3>Um encabezado de terceiro nivel</h3>
</body>
Texto em itálico: i, em
<body>
<i>Texto en cursiva</i>
</body>
Texto em negrita: b, strong
<body>
<b>Texto em negrita</b>
</body>
Enlace: a
<body>
<a href="URL" title="um titulo para enlace“
target=“_blank”> Texto de Enlace </a>
</body>
_blank
_parent
_self
_top
TARGET
Imagem: img
<body>
<p>
<img src="imagen.png" />A imagem se
inserirá dantes que o texto
</p>
</body>
Tabela: table, tr, td
<body>
<table border=“1”>
<tr>
<td>fila1 - celda1</td>
<td>fila1 - celda2</td>
<td>fila1 - celda3</td>
</tr>
<tr>
<td>fila2 - celda1</td>
<td>fila2 - celda2</td>
<td>fila2 - celda3</td>
</tr>
</table>
</body>
Formulario: form
Formulario: form
<body>
<form method=”GET” action=“page2.html">
<!-- Controles de formulario -->
</form>
</body>
Controles de formulario: input
• Campo de senha
• Campo de texto
• Caixa de verificação
• Botão de opção
• Botão de envío
input (campo de senha)
<body>
Login: <input type="text" name="login“
size="20" / ><br />
Password: <input type="password“
name="pass" size="20" />
</body>
input (caixa de verificação)
<body>
<input type="checkbox" name="internet“
value="Apartamento"/>El apartamento<br />
<input type ="checkbox" name="internet“
value="Laboratorio" /> El laboratorio<br />
</body>
input (botões de opção)
<input type="radio" name="edad"
value="18-25"> 18 - 25 años<br />
<input type ="radio" name ="edad"
value ="26-35"> 26 -35 años<br />
Lista de seleção: select, option
<body>
<select name="Favorite people">
<option value="sam"> Sam Williams
</option>
<option value="maryM"> Mary Burmeister
</option>
<option value="mom"> Suzy Valentine
</option>
</select >
</body>
Área de texto: textarea
<body>
<textarea name="datos" cols="15"
rows="5"> Escribir texto aqui
</textarea>
</body>
input (botões de envío)
<input type=“submit" name=“botão"
value=“OK">
Novas Tags (HTML5)
• <header> </header>
• <footer></footer>
• <section></section>
• <nav></nav>
• <article></article>
• <aside></aside>
Novas Tags (HTML5)
Novas Tags (HTML5)
New Attribute Syntax
New Media Elements
<audio> Defines sound or music
content
<embed> Defines containers for external
applications (like plug-ins)
<source> Defines sources for <video>
and <audio>
<track> Defines tracks for <video> and
<audio>
<video> Defines video or movie content
Tema I - Princípios da programação Web
MSc. Yoenis Pantoja Zaldívar
Elementos básicos de XHTML
Conferencia 3