html
TRANSCRIPT
Prof. Clara Ferreira
HTML
HTML (HyperText Markup Language) é uma linguagem de marcação de texto utilizada para publicar na Internet.
Usam-se rótulos – TAGS que marcam trechos e blocos de texto que são utilizados por um browser para formatar o documento e criar uma página.
Para fazer um site em HTML apenas é necessário o bloco de notas.
O que é?
Os elementos HTML são representados no texto através de rótulos (ou tags).
O browser interpreta como tags todos os elementos HTML válidos que estejam entre < e >.
<BR> é interpretado como uma quebra de linha.
<NHAC> é ignorado e não aparece na página, pois não existe.
Tags
Apesar de não aparecerem, elementos inválidos não devem ser usados para texto escondido. Existe uma marcação especial para comentários.
A maioria dos elementos HTML possuem um rótulo inicial e um rótulo final, envolvendo o texto que é marcado por eles. A sintaxe básica é:
Tags
<Elemento> Texto marcado por Elemento </Elemento>
Alguns elementos podem ter um ou mais atributos, que definem características especiais.
Os atributos, quando presentes, aparecem no rótulo inicial separados por espaços, logo depois do nome do elemento.
Tags
Exemplos de elementos HTML com atributos:
define uma imagem de fundo, disposta em mosaico, para a página.
define uma borda para a tabela.
define uma linha horizontal sem sombra, com largura de 50% da página,com 10 pixeis de espessura e alinhada à esquerda.
Tags
<BODY BACKGROUND="backgrounds/papel-de-parede.gif">... corpo do documento ... </BODY>
<table border=1> ... conteúdo e rótulos de tabela ... </table>
<hr noshadow width=50% size=10 align=left>
A estrutura básica (mínima) de uma página HTML é a seguinte:
Estrutura
<!DOCTYPE HTML Public "-//IETF//DTD HTML//EN" --> <HTML> <HEAD> <TITLE> Descrição do documento </TITLE> [elementos opcionais] </HEAD> <BODY> [texto e elementos HTML] </BODY> </HTML>
<HTML>
<HEAD>
<TITLE> Descrição do documento </TITLE>
</HEAD>
<BODY> [texto e elementos HTML] </BODY>
</HTML>
Inicio do html
Inicio do cabeçalho
Inicio e fim de titulo
Fim do html
Fim do cabeçalho
Inicio e fim do corpo da página
Exercício:No notepad++ crie um documento “index.html” com o seguinte conteúdo:
Estrutura
<HTML><HEAD> <TITLE> Página de Teste </TITLE></HEAD><BODY>Olá Mundo!</BODY></HTML>
Podem ser usados 6 tipos de títulos:H1,H2,H3,H4,H4 e H6Exemplo:
Títulos
<h1>Este é o tamanho de titulo 1</h1><h2>Este é o tamanho de titulo 2</h2><h3>Este é o tamanho de titulo 3</h3><h4>Este é o tamanho de titulo 4</h4><h5>Este é o tamanho de titulo 5</h5><h6>Este é o tamanho de titulo 6</h6>
O tag para parágrafo é o <p> (não é preciso fechar)
Exemplo:
Parágrafos
<h1><P>Isto é um exemplo de parágrafo. Aprendermos HTML porque virá a dar muito jeito no nosso futuro como informáticos e pessoas.<P>Isto é outro parágrafo para as aulas.</h1>
O tag para quebra de linha é <br>Exemplo:
Quebras de Linha
<h1><br>Isto é um exemplo de quebra para as aulas. Aprendermos HTML porque virá a dar muito jeito no nosso futuro como informáticos e pessoas.<br><P>Isto é um exemplo quebra para as aulas. Aprendermos HTML porque virá a dar muito jeito no nosso futuro como informáticos e pessoas.</h1>
Para criar uma linha separadora horizontal usa-se o tag <hr>.
Exemplo:
Separadores
<h1>Página do (o seu nome)</h1> <hr> <h2>Biografia</h2> <hr><h2>PortFolio</h2> <h3>Contatos</h3> <Galeria</h3> <hr> <h2>Links</h2> <hr>
Para criar um bloco pre-formatado, usa-se o tag <pre>.
Exemplo:
Blocos de TextoPre-formatado
<pre><blockquote>”The overwhelming triumph of the international multimediaconglomerate has resulted in less diversitywithin the field and has made it much harderfor newer writers not only to break in,but to make any kind of a living while doing so.(Alan Dean Foster )”</blockquote></pre>
Para criar marcas, usa-se o tag <ul> e para criar numeração usa-se o tag <ol>. Para escrever linhas dentro de marcas usa-se a tag <li>
Marcas e numeração
Exemplo de marcas:
Marcas e numeração
<p>Os meus trabalhos são divididos nas seguintes categorias:<ul> <li>Área do Design:<ul> <li>Photoshop<li>Área da Programação<li>HTML</ul><li>Media:<ul> <li>Televisão e Cinema<li>Publicidade e Imprensa<li>Fotografia e Vídeo</ul></ul>
Exemplo de numeração:
Marcas e numeração
<p>Um técnico consegue:<ol> <li>Vídeo, Imagem e Som:<ol> <li>Aplicar técnicas avançadas de captação<li>Edição avançada</ol><li>Produção de Software específico:<ol> <li>Sites<li>Software Interactivo (jogos e simulações)<li>Animações 2D e 3D</ol></ol>
Para formatar caracteres usamos: <b> Negrito <big> Texto Grande <em> Texto enfatisado <i> Itálico <small> Texto Pequeno <strong> Texto Grosso <sub> Texto em superior à linha <sup> Texto inferior à linha
Formatação de Caracteres
Para criar uma tabela, usa-se o tag <TABLE>. Para criar linhas numa tabela usa-se o tag
<TR> (Table Row)Para criar uma legenda de uma tabela usa-se
o tag <CAPTIONPara criar colunas usa-se o tag <TD> (Table
Data)Para o cabeçalho de cada coluna usa-se o tag
<TH> (Table Header).
Tabelas
Todas as linhas devem ter o mesmo número de células de dados (a não ser que se usem atributos).
Exemplo:
Tabelas
<table border=3> <tr> <td> 1,1 </td> <td> 1,2 </td> <td> 1,3 </td> </tr> <tr> <td> 2,1 </td> <td> 2,2 </td> <td> 2,3 </td> </tr> <tr> <td> 3,1 </td> <td> 3,2 </td> <td> 3,3 </td> </tr></table>
Para inserir uma célula em branco usa-se o atributo (non-breaking space – espaço sem quebra de linha)
Exemplo:
Tabelas
<table border="1"><tr><td>linha 1, célula 1</td><td>linha 2, célula 2</td></tr><tr><td>linha 2, célula 1</td><td> </td></tr></table>
Para juntar colunas usa-se o atributo colspan que deve ser igualado ao número de colunas a juntar.
Exemplo:
Tabelas
<HTML> <BODY> <TABLE BORDER=“7” WIDTH=1000 BGCOLOR=“Silver”><TR> <TD>Esta é uma célula lalala</TD><TD COLSPAN="2">Esta célula está muito unida para podermos ver como
funciona lalala</TD> </TR> <TH ALIGN="LEFT">Este texto está alinhado à esquerda lalala</TH> <TH ALIGN="CENTER"> Este texto está centrado lalala</TH> <TH ALIGN="right"> Este texto está alinhado à direita lalala</TH> </TR><TR><TD><PRE> </PRE></TD> <TH>Mais uma célula lalala</TH> <TH >E outra lalala</TH> </TR></TABLE> </BODY> </HTML>
Para juntar linhas usa-se o atributo rowspan que deve ser igualado ao número de colunas a juntar.
Exemplo:
Tabelas
<HTML> <BODY> <TABLE WIDTH=1000 BORDER="7" BGCOLOR=" skyblue"><TR><TD ROWSPAN=2>linhas juntinhas</TD><TD>primeira linha separada</TD></TR><TR><TD>segunda linha separada</TD></TABLE></BODY> </HTML>
Para fazer uma ligação a uma outra página usa-se o tag <a> que deve ter, neste caso o atributo href.
Exemplo:
Ligações de hipertexto remotas
<a href=http://www.youtube.com/><B>IúTuBi</B></a>
Para fazer uma ligação numa mesma página usa-se o tag <a> , o atributo href e ainda o atributo name. Depois o nome é chamado através do uso do #.
Ligações de hipertexto locais
Exemplo:
Ligações de hipertexto locais
<HTML> <BODY> <ul><li><a href="#Primeiro">Primeiro texto</a><li><a href="#Segundo">Segundo texto</a><li><a href="#Terceiro">Terceiro texto</a></ul><hr><h2><a name="Primeiro"></a>Primeiro texto</h2><pre> (dar espaço)</pre><hr><h2><a name="Segundo"></a>Segundo texto</h2><pre> (dar espaço)</pre> <hr><h2><a name="Terceiro"></a>Terceiro texto</h2><pre> (dar espaço)</pre> </BODY> </HTML>
Para inserir imagens usa-se o tag <IMG> com o argumento obrigatório: SRC="URL da imagem”.
Exemplo:
Imagens Internas
<center><img src=“fotominha.jpg"><br> <h1>Eu</h1></center> <hr>
Usa-se o mesmo tag e atributo, mas o URL é igual.
Exemplo:
Imagens Externas
<img src="http://www.fc.ul.pt/sites/minors/img/design_multimedia.jpg">
Usadas para enviar dados para o servidorTêm os seguintes elementos:
Input – para receber dados do utilizador;Submit – para submeter os dados.
Forms
Text Field – para inserção de texto.
Password Field – para inserção de texto em formato de pass.
Forms – Elementos de INPUT
<form>First name: <input type="text" name="firstname" /><br />Last name: <input type="text" name="lastname" /></form>
<form>Password: <input type="password" name="pwd" /></form>
Radio Buttons - para seleção através de botões – só dá para escolher um.
Check Bos– para seleção através de caixas – podem ser escolhidas as desejadas.
Forms – Elementos de INPUT
<form><input type="radio" name="sex" value="male" /> Masculino<br /><input type="radio" name="sex" value="female" /> Feminino</form>
<form><input type="checkbox" name="vehicle" value=“Pe" /> Vou a pé<br /><input type="checkbox" name="vehicle" value=“Andar" /> Vou a andar </form>
Serve para enviar os dados para o servidor.Exemplo:
Forms - Submit
<form action="MAILTO:[email protected]" method="post" enctype="text/plain">Nome:<br /><input type="text" name=“nome" value=“o teu nome" /><br />E-mail:<br /><input type="text" name="mail" value=“o teu email" /><br />Comment:<br /><input type="text" name=“obs" value=“observação" size="50" /><br /><br /><input type="submit" value="Send"><input type="reset" value="Reset"></form>