O que é html

O que HTML?
(Hypertext Markup Language- Linguagem de Marcação de
Hipertexto) é
A linguagem que são modificadas as paginas da web.
O funcionamento da web tem com base:
A linguagem HTML- que codifica a estrutura de base das paginas
da web;
O protocolo HTTP - que assegura a transferência dessa pagina
através da internet.
A HTML não é uma linguagem de programação propriamente dita.
É uma linguagem de estrutura e formatação de documentos
(Markup Language) . como tal a HTML não possui os recursos
típicos das linguagens de programações, tais co: variáveis
operadores, funções, estruturas de controlo. Etc.
A utilização de HTML simples apenas produz paginas web estáticas
e sem interactividades como o utilizador. Para introduzir essas
características nas paginas web torna-se necessário combinar HTML
com outras linguagens de scripting, como; PHP;JSP;ASP etc,
A linguagem HTML utiliza tags, marcas ou etiquetas de marcação
para definir a estrutura e a formatação das paginas web.


 Regras básicas que é necessário compreender antes de se começar com a criação de
paginas

 Todos os ‗tags‘ são inseridos entre sinais de menos ou maior:
 <tag>


 Tirando aqueles que represnetão a posição de um objecto (a inserção de uma imagem
,por exemplo),todos os ‗tags‘ de formatação devem ser abertos e fechados (ultilizando o
carater‘/‘):
 <tag> </tag>


 Todos os ‗tags‘ obedecem a uma hiererquia, como no seguinte exemplo:
 <a> <b> <c> </c> </b> </a>
 O primeiro a abrir é o ultimo a fechar, e vice-versa.
 <a> <b> <c> </a> </b> </c> errado

 É indiferente utilizar maiúsculas ou minúsculas nos tags
 <tag> é igual a <TAG> E A <Tag>
 Nota: No HTML actual, as teclas devem ser escritas em minúsculas.

 Estrutura basicasde um HTML
 Um documento HTML começa com o tag de abertura <html> e termina com o tag de
fecho </html>

 Exemplo:
 <HTML>
 .
 .
 .


</HTML>

 As duas partes principais que constiue um documento:
 O cabeçalho (head)-que fica compreendido entre as tags <head></head>;
 O corpo do documento (body)-que fica entre as tags <body></body>
 Exemplo
 <HTML>
 <HEAD>
 .
 .
 </HEAD>
 <BODY>
 .
 .
 </BODY>
 </HTML>

 O principal elemento que é incluído no cabeçalho É o
titulo da pagina – que surge entre as tags <title> e
</title>.(este titulo aparece na barra de titulo do

browser em que a pagina for aberta.)
 No corpo do documento(entre tags <body> e </body>
é insirida toda a informação apresentar na pagina –
texto, imagem, etc.

 Criando de paginas HTML
 Para criarmos a nossa primeira pagina em HTML basta um
simples editor de texto, como o Notped ou Bloco de Notas
podemos momeçar por inserir o seguinte:
<HTML>
 <HEAD>


 <HEAD>
 <TITLE>A minha primeira pagina</TITLE>
 </HEAD>
 <BODY>
 </BODY>
 </HTML>
 NOTA: Guardar o ficheiro com a extensão .html
(exemplos:index.html


 Convem então esclarecer algo: em HTL os espaçamentos e
mudanças ..
 <HTML>
 <HEAD>

 <HEAD>

 <TITLE>A minha primeira pagina</TITLE>
 </HEAD>
 <BODY>
 OI sou o Leonardo
 <br>
 Miguel
 <br>
 sou gordinho :p
 </BODY>
 </HTML>


Visão geral sobre os principais tipos de tags HTML
Estrututas e contoudo do documentos HTML


Exemplos de tags que Exemplo de tags que assinalam
define a estrutura do conteúdos (texto;imagen;etc.)
documento
<html> <h1>Titulo</h1>
<head> …
.., …
</head> <p>Titulo</p>
…
<Body> …
… <img src=‖imagens‖>
</body> (etc.)
</html>

Elementos de apresentação
Tags de estruturação de um documento

Fontes tipográficas ; estilos; formatação, alinhamento;etc.

<font>


Face size color
<b>---</b>
<i>---</i>
<u>---</u>
<style>
(Etc.)

<html>---</html>inicio e fim do documento
<head>---</head>inicio e fim do cabeçalho
<title>---</title>titulo da pagina do browser
<body>---</body> corpo do documento

Tags de títulos e parágrafos de texto
Alguns tags de formatação de texto

<font>---</font> definição da fonte tipografica
<b>---</b>definição de texto em bold ou negro


<i>---</i>definição de testo italico
<u>---</u>definição de texto sublinhado
<sub>---</sub>texto de superescrito
<sup>---</sup>texto de destaque
<strong>---</strong>texto de destaque.

<h1>---</h1>titulo de maior grandeza;
<h2>---</h2> titulo de segunda grandeza;
…
<h6>---</h6>
<p>---</p>paragrafo de texto;
<br/> quebra de linha.

Atributos descrição
Tags que define listas de elementos

<ol>---</ol> define uma lista numerada;
Define uma lista não numerada ;


<ul>---</ul> item ou linha dentro de uma lista;
<li>---</li> define uma lista de definições
<dl>---</dl>indica um titulo a definição
<dt>---</dt> indica um titulo a definir.
<dd>---</dd>descreve o item definir

Align – atributo usados com as tags <p> ou <hr> para definir
alinhamentos
Width- atributo usado com a tag <hr> para definir largura da
linha horizontal;
Face- atributo usado com a tag<font>para definir a fonte
tipográfica
Size- para definir o tamanho da fonte
Color- para definir a cor da fonte.

Tags que definem tabelas
Tag que permite inserir imagens
Tag que define um link (ligação)

<a href=”endereço”>..</a>- define uma ligação para endereço web ou um


outro documento.

<table>---</table> define o inicio e o fim de uma tabela
<th>---</th>define o cabeçalho de uma tabela
<tr>---</tr>define o inicio e o fim de uma fila ou linha dentro de uma
tabela
<tb>---</tb>define o conteúdo de cada célula.

<img src=”ficheiro imagem”>.

Exemplo de tags e atributos que permite criar formulários:
<form>---</form> define o inicio e o fim de um formulario
< input type =”texto”....>define uma caixa de texto para input;
< input type =”password”…>define uma caixa de texto para input de um password
< input type =”radio”>define um botão de opção


< input type =”checkbox”…>define uma caixa de selecção
< input type =”button”…>define um botão de comando
< input type =”submit”…>define um botão de comando para envio de dados para um
formulário.
< input type =”reset”…> define um botão de comando para restabelecer (apagar) os
dados.


 Tabelas em HTML
 Na tag <table> o atributo border permite definir as espessura da
linha ;por exemplo, border=1
 A tabela é construída linha a linha . cada nova linha é definida

com um tag <tr>. Em cada linha (apos casa tag<tr>) inserem-se
as tags que define células de tabela (<th> ou <td>).
 O mais usado e ultiliza-se tag<td> para definir cada selula a
definir na linha . A tag <th> costuma ser ultilizadas nas primeiras
linhas da tabela : apenas defere da tag <tag<td> no seguinte ; o
conteúdo de uma célula definida como <th> é destacada a negro.
 ´com as tags <th>e <td> podemos usar o atributo width para
definir a largura das células; por exemplo;
 <td width = 90> uma célula </td> (define uma célula com a
largura de 90 pixéis )

 O atributo colspan permite indicar o numero de colunas que uma
célula ocupa. Por exemplo:<th colspan=2>ou :<td colspan=2> faz
com a célula ocupa duas colunas.

 <html>
 <head>

 <title> Tabelas </title>



</head>

<body>

 <h2 align="center"> Tabela </h2>
 <table align="center"border=2 cellpadding=3>

 <tr> <th colspan=2> Catálogo de Preços
 <tr> <th> Artigos <th> Preços
 <tr> <td> Alicate <td align="right">10
 <tr> <td> Marcelo <td align="right">15

 </table>
 </body>
 </html>


 LINKS OU LIGAÇOES
 <a href=‖…‖>…</a>
 Qualquer tipo de ligação (link)

 É feita sempre com base na tag
 <a>…</a> também chamada Anchor tag.
 O principal atributo da tag <a> é o atributo hrtf (de
Hypertext referencie). É este atributo que define o local
(endereço URL, local de novo documento, etc.) para
onde se pretende efectuar a ligação.


 Ligaçao externa (um URL externo)
 <a href=http://www.google.com>Google</a>
 O atributo HREF é igualdado ao endereço URL que temos em vista


para a ligação externa. Entre as tags <a> </a> colocamos o texto que
queremos que apareça na pagina..
 Ligação interna para outro documento no meso computador.
 <a href=‖doc2.htm‖> mais informação</a>
 Nesta caso, atributo HRER é igualdado ao nome do documento HTML
para onde queremos remeter o leitor quando ele crica sobre o texto é
apresentado na pagina. Esse documento pode ser outra pagina HTMl
ou outro tipo de documento se encontrar numa outra pasta ou
diretoria é necessário ter isso em conta na indicação do nome.
 Ligação pa um endereço de e-mail
 <a hraf=edu_gtnho@hotmail.com> Enviar mail para nome aluno </a>
 Neste exemplo, o link o criado permite accionar a aplicação de e-mail
que estiver configurada no computador para enviar uma mensagens
de correio electrónico para edu_gtnho@hotmail.com.


 Links para coisas
 <html>
 <head>



<title> Links </title>
</head>


 <body>
 <h2> Exemplificação de links</h2>
 <p> segue-se um link para o Goolgle </p>

 <a href="http://www.google.com"> google </a>
 <p> o link seguinte é para uma pagina local </p>
 <a href="o que HTML.docx"> mais informaçoes </a>
 </body>
 </html>


 Inserção de imagens
 <img src=‖globo.gif‖>
 A inseção de imagens em documentos html é feita através
de tag<img> (que não tem tag de feicho). A indicação do
local e nome do ficheiro da imagem é feita no atributo src
(de source__ que em inglês significa fonte).
 No caso da imagem que pretendemos inserir na pagina se
emcontra numa pasta diferente da corrente, teremos de
indicar a sua localização . por exemplo:
 <img src=‖imagens/global.gif‖>



 Atributos relativos a uma imagem
 O atributo align permite definir a forma de alinhamento
da imagem. Os valores possíveis são :
 Left; rigt; middle; bottom e top.
 O atributo border permite definer uma linha retamgular
de contorno na imagem. Deve ser indicado um valor
numérico para espessura da linha .exemplo :<img
src=‖pirata.gif‖ border=‖2‖>
 O atributo height permite definir a altura da imagem.
 O atributo windht permite definir a largura da imagem.
 Frames
 Para definir frames, utiliza-se o o tag <FRAMESET>

 Como não se trata propriamente do corpo da pagina , este ‗tag‘
define uma área apos a área <HEAD>, mas não contido dentro do
tag <BODY>. Ao utilizar parâmetros COLS, divide a pagina em
colunas neste caso definidas por ―160,*‖. Isto significa que são
criadas duas, uma com 160 pixéis de largura e outra que ocupa o


resto do espeço disponível no ecrã. As mediadas das frames
podem ser fornecidas em pixéis, em percentagem do espaço
disponível ou por um asteristico , que significa ‘o resto‘. Estas
colunas são definidas de esquerda para a direita. Temos também
BORDER e FRAMESPACING, que define a borda e o
espaçamento entre frames.
 O ‗tag0‘ >FRAME>. Que se reefre a primeira coluna (de 160
pixeis). SRC define qual o ficheiro html a ser exibido nessa frame,
NAME, para que os links possam la recais.
 NORESIZE indica que a frame não pode ser redimensionado com
o rato, e FRAMEBORDER, o bordo da frame.
 Ultiliza-se FRAME FRAMEBORDER> e FRAMESET BORDER>
por uma questão de compatibilidade entre o internet Explorer e o
Netscape Navegador. SCROLLING pode ser definido com ―YES‖
OU ―NO‖ para obrigar a barra de scroll a estar sempre visível ou
escondida.

 Aplicações
 <input type="checkbox" name="d3"
 <html>
 <head>
value="t">
 <title> Exemplo de formulário </title> tecnologias <p>


 </head> Seleccione uma linguagem da

 <body>
seguinte lista:
 <form> <select name="lista">
 nome: <option> Pascal </option>
 <input type="text" name="nome"> <br>
 Sexo: <option> VBasic </option>
 <input type="radio" name="sexo" <option> C++ </option>
value="M">
 Masculino <option> Java </option>
 <input type="radio" name="sexo" </select> <br> <br>
value="F">
 Feminino <P> <input type="submit"
 Disciplinas de informática de que gosta: value="Confirmar">
<br>
 <input type="checkbox" name="d1" <input type="reset"
value="p"> value="Limpar">
 Programação
 <input type="checkbox" name="d2" </form>
value="a"> </body>
</html>


 <input type =‖text‖ name =‖name‖>
 Este é um exemplo de um zinput> do tipo text. Ou seja uma caixa de
texto . neste tag de input, temos dos atributos:


 A expressão type = ―texto‖ indica que o atributo type (tipo « de
elemento) que se pretende é ―text‖ ou seja uma caixa de texto;
 A expressão name _‖name‖ indica que o atributo name(nome do
elemento) será ―name‖; ou seja , este esta caixa de testo passa a ser
identificada pela palavra ―name‖.
 Outros atributos que podemos usar com as caxas de texto;
 Value=‖…‖- o atributo value permite indicar um valor indicado para
uma caixa de texto por outro lado captar o dado escrito pelo utilizador;
 Seze= n – tamanho da caixa de texto, em que n indica o número de
caracteres de sua largura;
 Maxlength= n – numero máximo (n) de caracteres permitidos.
 Outros elementos de imput – ―radio
 <input type=”radio” name =”sexo” name =”sexo” value=”M”
 No exemplo anterios temos 3 atributos mais usados type;name value.
Reparea-se que a expreção value=‖M‖ é um atributo que podemos usar
como os botões

;
 Checked[=”true|false”] – o atributo checked permite colocar
um botao em estado de assinalado ;neste caso , a parte que

inclue o sinal de igual é o valore (true ou false) é opcional ; se
esse valor não for indicado, é assumido true; para retirar a
marca de assinalado , escreve-se checked=‖false‖.
 Esse atributo também pode ser usado com os elementos do
tipo checkbox—caixa de selecção.

 Checkbox
 <input tupe=‖checkbox‖ name=‖d1‖ value=‖P‖>
 A Caixa Chexkbox Fica Indentificado Como O Nome ―D1‖ e o
seu value é codificado com ―P‖. a disciplina que se refere é
indicada entre texto normal fora da tag; programação.

 <html>
 <head>
 <title> Exemplo de Formulário
</title>
 </head>
 <body>
 <form>
 <fieldset>
 <fieldset>
<legend align="left">
Botões de comando
 <legend align="left"> Dados do
utilizador </legend>
 </legend> <input type="submit"
 User Name: value="confirmar">
 <input type="text" name="nome">
<input type="reset"
 <br>
 password: value="limpar">
 <input type="password" </fieldset>
name="pass"> </form>
 <br> </body>
 </fieldset>
 <p>
</html>
 <textarea cols=40 rows=5> Área
de texto...
 </textarea>



 <textarea cols=40 rowa=5>
 O atributo cols=40 define que a caixa de texto terá a
largura de 30 colunas de caracteres
 O atriburo rowa =5 define que a caixa de texto terá
de 5 linhas ou filas de caractreres.



 <html>
 <head>
 <title> Exemplo de Formulário </title>
 </head>
 <body>
 <h2> Identificação </h2>



<form>
<table border=0>
<tr>

 <td> Primeiro nome: </td>
 <td> <input type="text" name="nome1">
 <tr>
 <td> Segundo Nome: </td>
 <td> <input type="text" name="nome2">
 <tr>
 <td> Nome composto: </td>
 <td> <input type="text" name="nomec" readonly>
 </table>
 <p>
 <input type="button" name="btnnomes"
 value="Clique para juntar os nomes"
 onclick="nomec.value
 =nome1.value + ' ' + nome2.value">
 </form>
 </body>
 </html>

 <table border = 0>
 Com o atributo border igual a zero, a tabela não apresentaras linhas de controles.

O que é html

Recommended

More Related Content

What's hot

What's hot (17)

Viewers also liked

Viewers also liked (6)

Similar to O que é html

Similar to O que é html (20)

O que é html