Conceitos e Introdução:
(1.0) HTML:
HTML ou (Hyper Text Markup Language) , primeiramente não é uma linguagem de programação e sim uma linguagem de marcação de texto , como o próprio nome já sugere. Neste tópico abordaremos princípios para construção de páginas segundo as normas de boas práticas estabelecidas pela W3C. A princípio uma página na internet é interpretada por um navegador , e esta página é escrita em códigos próximos a linguagem humana e são convertidos para gerar páginas da internet.
(1.1) Elemento root: HTML
O elemento HTML representa uma raiz de um documento HTML. Devemos sempre utilizar um atributo "lang" no elemento html para especificar o idioma de origem da página que está sendo desenvolvida , para que diversas ferramentas de busca e sínteses de voz reconheçam o idioma e pronunciem de forma correta , como exemplo as ferramentas de tradução.
Todo comando para página deve estar dentro de uma "tag" , exemplo: <p> Olá </p> , neste caso o comando dado foi um parágrafo contendo o conteúdo "Olá".
Para começar a desenvolver páginas na Web você deve estar com um editor de texto aberto em seu computador. Ex: Bloco de notas , CodeBlocks , ou qualquer que seja.
Mostrarei agora a simples composição de uma página na estrutura do HTML5 junto ao resultado do código e em seguida explicarei cada comando.
O código visualizado em um navegador:
__________________________________________________________________________________________
(1.2) Metadados:
Armazenam diferentes tipos de informações. São vistos dentro do cabeçalho da página e são utilizados com a tag <meta>. Neste momento descreverei alguns comandos e suas semelhantes funções e em seguida mostrarei uma página contendo ambos.
Comandos:
<!DOCTYPE> = usado para informar qual versão do HTML está sendo usado.
<html lang="pt-br"> = identifica o país de origem desta página.
<head> </head> = Define o cabeçalho da página.
<meta> = Descreve o conteúdo do site (codificação) ou os conteúdos a serem exibidos.
<style> = Define o estilo de um conteúdo
<link> = Faz interligação de um conteúdo para outro. Resumidamente faz um chamado de um arquivo a ser exibido.
<title> </title> = Define o título da página.
<p> </p> = Define um parágrafo.
</html> = Linha final e fechamento do código digitado.
<head> </head> = Define o cabeçalho da página.
<meta> = Descreve o conteúdo do site (codificação) ou os conteúdos a serem exibidos.
<style> = Define o estilo de um conteúdo
<link> = Faz interligação de um conteúdo para outro. Resumidamente faz um chamado de um arquivo a ser exibido.
<title> </title> = Define o título da página.
<p> </p> = Define um parágrafo.
</html> = Linha final e fechamento do código digitado.
Você ter notado que alguns comandos são abertos e fechados , esses comandos são desta forma para não misturar diversos objetos da página , outros como <!DOCTYPE> são comandos padronizados e apenas lidos pelo navegador por isso não necessitam serem fechados. Neste momento peço que você digite todos esses comandos abaixo e ao final salve o arquivo na área de trabalho como "exemplo_02.html" e na codificação selecione a opção "UTF-8" , se você salvar este arquivo como arquivo de texto (".txt") , ele será inválido , ao salvar com uma extensão (".html") e se você salvar com outra codificação todos os sinais de acentuação das palavras do seu código não apareceram na página.
O código no bloco de notas:
Vá para sua área de trabalho e observe um link de página na Web com o nome "exemplo_02.html" , com a imagem do seu navegador padrão. Clique nele e verá a seguinte página:
O código visualizado em um navegador:
Se o resultado não foi exatamente este acima , reveja o código , você pode observar outro detalhe , mesmo sem estar conectado a internet você consegue visualizar esta página porque ela encontra-se disponível apenas em sua máquina.
(1.3) Sessões: Como o próprio nome já sugere , uma sessão é um padrão de organização que carrega informações separadas , em um site diversos conteúdos são separados por sessões , para melhorar o entendimento e organização do código , como já vimos o elemento <head> : cabeçalho , agora veremos outros elementos que encaixam-se dentro do corpo da página e são vistos como sessões.
Comandos:
<body> </body> = Define o corpo do documento HTML.
<article> </article> = Define um conteúdo dentro da página ou de uma seção.
<section> </section> = Define uma seção de conteúdo.
<nav> </nav> = Define um conjunto de links que formam a navegação da página.
<aside> </aside> = Define um conteúdo relacionado ao artigo.
<h1> </h1> = Define um cabeçalho na página de nível 1.
<h2> </h2> = Define um cabeçalho na página de nível 2.
<h3> </h3> = Define um cabeçalho na página de nível 3.
<h4> </h4> = Define um cabeçalho na página de nível 4.
<h5> </h5> = Define um cabeçalho na página de nível 5.
<h6> </h6> = Define um cabeçalho na página de nível 6.
<hgroup> </hgroup> = Usado para definir títulos superiores.
<header> </header> = Define um cabeçalho de um documento ou seção.
<footer> </footer> = Define um rodapé.
<address> </address> = Define endereços.
O código no bloco de notas:
O código visualizado em um navegador:
(1.4) Comentários:
Os comentários são usados para marcar o código desenvolvido sem que apareçam na página , ou seja eles são vistos apenas pelos desenvolvedores do código , servem para organizar os comandos usados no código para que todos os desenvolvedores que o abrirem entendam de forma organizada os comandos utilizados.
Comando:
O código visualizado em um navegador:
(1.5) Elementos de agrupamento:
Como o próprio nome sugere , são métodos de agrupamento que organizam uma determinada sequência de caracteres sejam eles em forma de tabela , ordenados , ou separados por parágrafos. Com os elementos de agrupamento a página fica com um padrão organizacional junto a boas práticas.
*OBS: Se quiser abrir mais um item na primeira lista , insira apenas outra tag <ul> junto a seu respectivo "<li> Nome </li>" e feche a </ul> acima do código do item "1. Primeiro tópico".
(1.6) Elementos de textos semânticos:
Conjunto de elementos que enfatizam diversas partes de um texto , para chamar atenção em determinados aspectos.
Comandos:
<a> </a> = Define um Hiperlink que leva a exibição de algum elemento.
<abbr> </abbr> = Processa uma abreviação.
<span> </span> = Define a coloração de uma parte de um texto / agrupa elementos em linha de documento.
<strong> </strong> = Define uma forte ênfase.
<em> </em> = Define uma ênfase.
<br> = Define uma quebra de linha.
"href" = Usado para especificar o destino a ser exibido , podendo ser uma outra página HTML ou uma URL. No exemplo a baixo estou dando exemplo de uma URL , mais se quiser criar outra página e colocar dentro do "href" , você deve apenas colocar o nome da página e sua extensão. Ex: "nome_da_página.html".
O código no bloco de notas:
O código visualizado em um navegador:
Ao clicar em "Link do Blog" você será redirecionado a uma página , neste caso a página "www.rafaelfatec.blogspot.com.br".
Agora abra novamente o código e insira dentro do comando <a>:
<p> <a href="exemplo_05.html" target="_blank"> Ex 5 </a> </p>
<p> <a href="exemplo_02.html" target="_parent"> Ex 2 </a> </p>
As páginas "exemplo_05" e "exemplo_02" são páginas que já foram vistas em tópicos anteriores. Ao clicar no navegador desta nova página , você pode ver que a página "exemplo_05.html" foi aberta em outra guia , já a página "exemplo_02.html" foi aberta na mesma guia , isto ocorre devido o "_blank" e o "_parent".
(1.7) Conteúdo embutido:
Conjunto de comandos que colocam um endereço no código para abrir um conteúdo que localiza-se na máquina do usuário ou mesmo na internet.
Comando:
O código visualizado em um navegador:
Se o resultado não foi exatamente este acima , reveja o código , você pode observar outro detalhe , mesmo sem estar conectado a internet você consegue visualizar esta página porque ela encontra-se disponível apenas em sua máquina.
__________________________________________________________________________________________
(1.3) Sessões: Como o próprio nome já sugere , uma sessão é um padrão de organização que carrega informações separadas , em um site diversos conteúdos são separados por sessões , para melhorar o entendimento e organização do código , como já vimos o elemento <head> : cabeçalho , agora veremos outros elementos que encaixam-se dentro do corpo da página e são vistos como sessões.
Comandos:
<body> </body> = Define o corpo do documento HTML.
<article> </article> = Define um conteúdo dentro da página ou de uma seção.
<section> </section> = Define uma seção de conteúdo.
<nav> </nav> = Define um conjunto de links que formam a navegação da página.
<aside> </aside> = Define um conteúdo relacionado ao artigo.
<h1> </h1> = Define um cabeçalho na página de nível 1.
<h2> </h2> = Define um cabeçalho na página de nível 2.
<h3> </h3> = Define um cabeçalho na página de nível 3.
<h4> </h4> = Define um cabeçalho na página de nível 4.
<h5> </h5> = Define um cabeçalho na página de nível 5.
<h6> </h6> = Define um cabeçalho na página de nível 6.
<hgroup> </hgroup> = Usado para definir títulos superiores.
<header> </header> = Define um cabeçalho de um documento ou seção.
<footer> </footer> = Define um rodapé.
<address> </address> = Define endereços.
O código no bloco de notas:
O código visualizado em um navegador:
__________________________________________________________________________________________
(1.4) Comentários:
Os comentários são usados para marcar o código desenvolvido sem que apareçam na página , ou seja eles são vistos apenas pelos desenvolvedores do código , servem para organizar os comandos usados no código para que todos os desenvolvedores que o abrirem entendam de forma organizada os comandos utilizados.
Comando:
<!-- Comentários --> = Tag usada para abrir e fechar um comentário.
O código no bloco de notas:
O código visualizado em um navegador:
__________________________________________________________________________________________
(1.5) Elementos de agrupamento:
Como o próprio nome sugere , são métodos de agrupamento que organizam uma determinada sequência de caracteres sejam eles em forma de tabela , ordenados , ou separados por parágrafos. Com os elementos de agrupamento a página fica com um padrão organizacional junto a boas práticas.
Comandos:
<p> </p> = Já visto , define um parágrafo.
<hr> = Insere na página uma linha horizontal que divide o conteúdo.
<blockquote> </blockquote> = Mencionado no HTML para fazer citações.
<ol> </ol> = Insere uma lista ordenada
<ul> </ul> = Insere uma listão não-ordenada.
<li> </li> = Insere um item na lista.
<dl> </dl> = Define uma sessão em um documento.
<dt> </dt> = Define um termo.
<dd> </dd> = Define uma descrição.
<div> </div> = Define uma divisão ou secção no documento HTML.
O código no bloco de notas:
O código visualizado em um navegador:
<hr> = Insere na página uma linha horizontal que divide o conteúdo.
<blockquote> </blockquote> = Mencionado no HTML para fazer citações.
<ol> </ol> = Insere uma lista ordenada
<ul> </ul> = Insere uma listão não-ordenada.
<li> </li> = Insere um item na lista.
<dl> </dl> = Define uma sessão em um documento.
<dt> </dt> = Define um termo.
<dd> </dd> = Define uma descrição.
<div> </div> = Define uma divisão ou secção no documento HTML.
O código no bloco de notas:
O código visualizado em um navegador:
__________________________________________________________________________________________
(1.6) Elementos de textos semânticos:
Conjunto de elementos que enfatizam diversas partes de um texto , para chamar atenção em determinados aspectos.
Comandos:
<a> </a> = Define um Hiperlink que leva a exibição de algum elemento.
<abbr> </abbr> = Processa uma abreviação.
<span> </span> = Define a coloração de uma parte de um texto / agrupa elementos em linha de documento.
<strong> </strong> = Define uma forte ênfase.
<em> </em> = Define uma ênfase.
<br> = Define uma quebra de linha.
"href" = Usado para especificar o destino a ser exibido , podendo ser uma outra página HTML ou uma URL. No exemplo a baixo estou dando exemplo de uma URL , mais se quiser criar outra página e colocar dentro do "href" , você deve apenas colocar o nome da página e sua extensão. Ex: "nome_da_página.html".
O código no bloco de notas:
O código visualizado em um navegador:
Agora abra novamente o código e insira dentro do comando <a>:
<p> <a href="exemplo_05.html" target="_blank"> Ex 5 </a> </p>
<p> <a href="exemplo_02.html" target="_parent"> Ex 2 </a> </p>
As páginas "exemplo_05" e "exemplo_02" são páginas que já foram vistas em tópicos anteriores. Ao clicar no navegador desta nova página , você pode ver que a página "exemplo_05.html" foi aberta em outra guia , já a página "exemplo_02.html" foi aberta na mesma guia , isto ocorre devido o "_blank" e o "_parent".
__________________________________________________________________________________________
(1.7) Conteúdo embutido:
Conjunto de comandos que colocam um endereço no código para abrir um conteúdo que localiza-se na máquina do usuário ou mesmo na internet.
Comando:
<img src="local_do_arquivo_ou_URL"> = Esse comando é usado para inserir imagens na página , como você pode observar dentre as aspas deve se colocar o nome do arquivo e seu tipo , exemplo: " .JPG , .PNG , .BMP " e esse arquivo deve estar na máquina.
Exemplo de código: <img src="foto1.jpg"> esse mesmo arquivo localiza-se na área de trabalho. O comando "SRC" especifica a URL da imagem.
<alt> = Texto alternativo para a imagem exibida.
Width = Largura (em PX) para exibição da imagem.
Height = Altura (em PX) para exibição da imagem.
O código no bloco de notas:
O código visualizado em um navegador:
Espero que tenha aprendido, estou a disposição para solucionar qualquer dúvida.
*OBS: Para quem quiser praticar e estar preparado para os próximos posts, fica de exercício desenvolver uma única página envolvendo todos os comandos e regras vistas nesse post.
Exemplo de código: <img src="foto1.jpg"> esse mesmo arquivo localiza-se na área de trabalho. O comando "SRC" especifica a URL da imagem.
<alt> = Texto alternativo para a imagem exibida.
Width = Largura (em PX) para exibição da imagem.
Height = Altura (em PX) para exibição da imagem.
O código no bloco de notas:
*OBS: Para quem quiser praticar e estar preparado para os próximos posts, fica de exercício desenvolver uma única página envolvendo todos os comandos e regras vistas nesse post.
__________________________________________________________________________________________
Nenhum comentário:
Postar um comentário