1-HTML E SEUS CONCEITOS
O HTML-(Hyper Text Markup Language) é uma linguagem tecnológica usada para a criação de sites na Web. Para criar uma pagina de internet, seguimos alguns passos importantes. Você pode abrir o wordpad ou o notepad ou bloco de notas, desenvolver um código com uma sequencia de comandos html e depois você deve salvar com a forma .html. Após isso é so abrir no navegador google chrome que é um dos mais
indicados para as interpretações.
1.1 Elemento Root: Html.
O elemento root como o próprio nome já diz representa a raiz do html. Nesse contexto entra em cena a especificação do idioma da pagina html através do atributo lang. Esse atributo facilita os reconhecimentos dos elementos da página adaptados ao idioma do usuário. ele deve ser colocado na tag html.
EXEMPLO:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Base de Estrutura de uma página com formato HTML</title>
<meta charset="utf-8">
</head>
<body>
<p>Devemos especificar o idioma da pagina através do atributo lang.</p>
</body>
</html>
Uma página html possui algumas tags importantes para a leitura no navegador, mostramos a seguir
alguns exemplos:
<html> é a principal tag, útil em todos os elementos ;
<head> cabeçalho da página;
<title> título da página;
<body> conteúdo da página;
1.2 Metadados: head, title, link, meta, style.
Os metadados são estruturas de dados incorporadas ao código XHTML. Estas estruturas armazenam diferentes tipos de informações, como descrição do conteúdo da página, autor, data de criação, linguagem, entre muitas outras coisas.
Os metadados são criados com a tag <meta> que devem ser adicionadas ao cabeçalho da página, entre as tags<head> e </head>.
<head> define a seção de cabeçalho, pode conter uma variedade de outras tags, mas a única que é exigida e obrigatória é a tag <title>;
<title> que especifica o título da página a ser exibido na barra de título do navegador;
<meta> a tag meta pode receber diversas variáveis que descrevem o conteúdo do seu site. O – charse=”utf-8″ – indica a codificação de caracteres, isto é, faz com que os caracteres especiais, como: á, é e outros sejam exibidos corretamente.
<style> Define o estilo de informação para um documento.
Exemplo 2:
Código: metados.html
Exemplo:
Os metadados sao dados estruturados que identificam os dados de determinado documento e dessa
forma fornecem informações relacionadas com descrição de páginas, palavras especificas e etc.
Observamos a seguir alguns exemplos de metadados:
<head> é a tag que indicará o que será escrito no cabeçalho da página;
<title> essa é a tag que ajuda a darmos título a página;
<link> define a relação entre um documento e um recurso externo;
<meta> é a tag dos metadados
<style> é usada para definir o estilo;
Imagens com head, title, link, meta, style:
1.3 Sessões: body, article, section, nav, aside, h1, h2, h3, h4, h5, h6, hgroup, header, footer, address.
<body> tag responsável pelo o que irá aparecer no corpo do navegado.
<article> o elemento article representa a seção de conteúdo do site.
<nav> serve para ser utilizado em um conjunto de link de navegadores.
<section> seções de um documento, como capitulos cabeçalhos, rodapes etc.
<anside> esta relacionado ao agrupamento de informações do conteúdo principal, como menus laterais, bloco de navegação etc...
<h1> exibe cabeçalho de nível1
<h2> exibe cabeçalho de nível 2
<h3> exibe cabeçalho de nível 3
<h4> exibe cabeçalho de nível 4
<h5> exibe cabeçalho de nível 5
<h6> exibe cabeçalho de nível 6
<hgroup> representa o titulo de uma sessão (obs: este elemento foi removido a partir da especificação do html5>>> w3c.
<header> representa cabeçalho e também logo, sessões de cabeçalho formulário de pesquisa etc...
<footer> representa um rodapé.
<address> esta tag geralmente e usado por autores para fornecer informaçoes de contato.
Código:
<!DOCTYPE>
<html>
<head>
<title>Paginas de HTML</title>
</head>
<body>
<h1>Cabeçalho de nível primeiro na página</h1>
<h2>Cabeçalho de nível segundo na página</h2>
<h3>Cabeçalho de nível terceiro na página</h3>
<h4>Cabeçalho de nível quarto na página</h4>
<h5>Cabeçalho de nível quinto na página</h5>
<h6>Cabeçalho de nível sexto na página</h6>
<p>Cabeçalho da página</p>
</header>
<p>Barra de navegação com links do Site</p>
</nav>
<p>Conteúdo da Seção 1</p>
</article>
<p>Conteúdo da Seção 2</p>
</article>
<p>Conteúdo da Seção 3</p>
</article>
</section>
<p>Rodapé da Página</p>
</footer>
<hgroup>
<h1>Exemplo H1</h1>
<h2>Exemplo H2</h2>
</hgroup>
</body>
</html>
Exemplo
Código: Sessões.html
Exemplo:
exemplo simples
1.4 Comentário.
Comentário no HTML sao informacoes de acrescimo nas paginas. Tambem é um trecho ou um texto que você coloca no seu código HTML para, no futuro entender como ele foi organizado, facilitando assim a manutenção do seu código-fonte.
Fazer um comentário em HTML é bem simples e através dele podemos escrever uma linha ou até mesmo um bloco explicativo, veja exemplos de comentário HTML:<!-- comentário de uma linha -->
<!--
Comentário de várias linhas,
pois as vezes é necessário uma explicação um pouco maior
-->
</div> <!--Comentário no final do HTML -->
A principio deve parecer simples identificar o inicio e o fim de cada elemento, porém, conforme nosso código for crescendo, será cada vez mais difícil saber qual </div> esta fechando o <div id=”conteudo”> por exemplo. Para facilitar esta identificação faremos da seguinte maneira:<div id="main">
<div id="cabecalho">
</div> <!-- FIM cabeçalho -->
<div id="content">
</div> <!-- FIM content -->
<div id="rodape">
</div> <!-- FIM rodape -->
</div> <!-- FIM Main -->
A tag “comentários” é interessante pois ela ajuda á outras pessoas a localizar o conteúdo e organizar o código do seu site, depois que ele estiver terminado, para uma futura atualização. É importante que todo site tenha um comentário para você se achar no código e principalmente se a atualização será feita por terceiros.
Os comentários não são exibidos nos navegadores e serve somente para explicar e organizar o código html. Esta tag não sofreu alteração entre o HTML4.1 e 5.l
Para inserir comentário em nosso código usamos a tag: <!– –>
Exemplo:
E importante dizer que os comentários não aparecem na página do navegador.
A tag “comentários” é interessante pois ela ajuda á outras pessoas a localizar o conteúdo e organizar o código do seu site, depois que ele estiver terminado, para uma futura atualização. É importante que todo site tenha um comentário para você se achar no código e principalmente se a atualização será feita por terceiros.
Os comentários não são exibidos nos navegadores e serve somente para explicar e organizar o código html. Esta tag não sofreu alteração entre o HTML4.1 e 5.l
Para inserir comentário em nosso código usamos a tag: <!– –>
Exemplo:
E importante dizer que os comentários não aparecem na página do navegador.
1.5 Elementos de agrupamento: p, hr, blockquote, ol, ul, li, dl, dt, dd, div.
: : Elementos de Agrupamento:
Os elementos de Agrupamento são:
<p> define que o que estiver definido dentro da tag é um paragrafo;
<hr> insere uma linha horizontal;
<blockquote> usado para fazer citações;
<ol> Define uma lista ordenada;
<ul> Define Uma lista não-ordenada;
<li> Define um item de lista;
<di> Define uma seção em um documento;
<dt> Define um termo / nome em uma lista de descrição;
<dd> Define uma descrição / valor de um termo em uma lista de descrição;
<div> Usada para mudar o estilo em certas partes e posicionar os objetos na página.
Exemplo
Código: elementosdeagrupamento.html
Exemplo:
: : Elementos de Texto Semânticos:
<a> Define um hiperlink;
<abbr> Define uma abreviação;
<span> Um elemento usado para colorir uma parte de um texto;
<strong> Formata texto em um documento;
<em> Define texto enfatizado;
<br> Define uma única quebra de linha;
Exemplo
Código: elementostextosemanticos.html
Exemplo:
Os elementos de Agrupamento são:
<p> define que o que estiver definido dentro da tag é um paragrafo;
<hr> insere uma linha horizontal;
<blockquote> usado para fazer citações;
<ol> Define uma lista ordenada;
<ul> Define Uma lista não-ordenada;
<li> Define um item de lista;
<di> Define uma seção em um documento;
<dt> Define um termo / nome em uma lista de descrição;
<dd> Define uma descrição / valor de um termo em uma lista de descrição;
<div> Usada para mudar o estilo em certas partes e posicionar os objetos na página.
Exemplo
Código: elementosdeagrupamento.html
Exemplo:
1.6 Elementos de texto semânticos: a, abbr, span, strong, em, br
: : Elementos de Texto Semânticos:
<a> Define um hiperlink;
<abbr> Define uma abreviação;
<span> Um elemento usado para colorir uma parte de um texto;
<strong> Formata texto em um documento;
<em> Define texto enfatizado;
<br> Define uma única quebra de linha;
Exemplo
Código: elementostextosemanticos.html
Exemplo:
1.7 Conteúdo embutido: img
: : Conteúdo Embutido:
<img> Define uma imagem.
Insere imagens na página, bastante parecido com a tag <a>, é obrigatório especificar onde a imagem se encontra – <img src= “nome_ou_URL_do_arquivo”>
O ALT exibe o texto quando o cursor passa pela imagem ou quando o navegador não a encontra – <a alt=”Texto”>
Exemplo
Código: conteudoembutido.html
Código:
<!DOCTYPE>
<html>
<head>
<title>web sistemas </title>
</head>
<body>
<img src="quadros e imagens.jpg">
</body>
</html>
Tabelas HTML:
As tabelas podem conter dados como, listas, parágrafos, formulários, e também tabelas.As tabelas se definem com a tag <table>. Elas são classificadas por linhas (tag <tr>) com linhas repartidas em celulas <td>).<!DOCTYPE>
<html>
<head>
<title>Tabelas</title>
</head>
<body>
<table border=1>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</body>
</html>
Table/Caption/Thead/Tfoot/Tbody/Tr/Td/Th
TABLEcriar uma tabela na linguagem de marcação HTML;
CAPTION
título na tabela;
THEAD
cabeçalho da tabela;
TFOOT
rodapé da tabela;
TBODY
corpo da tabela;
TR
linhas da tabela;
TD
células das linhas da tabela;
TH
células das linhas com o texto fique destacado.
Representacao em codigo
<!DOCTYPE>
<head>
<title>Tabelas</title>
</head>
<body>
<table border=1>
<theader>
<tr>
<td>CABEÇALHO DA TABELA</td>
<td>A</td>
<td>B</td>
</tr>
</theader>
</t>
<tbody>
<tr>
<th>TAG DE DESTAQUE</th>
<th>C</th>
<th>D</th>
</tr>
<tr>
<td>E</td>
<td>F</td>
<td>G</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>RODAPÉ DA TABELA</td>
<td>H</td>
<td>I</td>
</tr>
</tfoot>
</table>
</body>
</html>
Nenhum comentário:
Postar um comentário