Estudo ♥: HTML!



Bonitas e bonitos, se têm uma coisa que tô super ansiosa pra aprender na faculdade, é sobre HTML. Eu sempre gostei de ficar fuçando naqueles códigos que, na maioria das vezes, parece mais uma bagunça de letras. Pra fazer todo o layout do blog, cabeçalho, gadgets e afins, eu sempre dou meu jeito pra fazer e crio alguma coisa. 

Desde o começo do Blog nunca deixei ninguém mexer no html ou configuração daqui, sabe como é né?! :( Além de ser super caro pra fazer um Layout, eu gosto de criar do meu jeitinho, as cores, desenhos, formatos e fontes. 

Enfim, o post de hoje é especialmente sobre HTML <3 Espero que tire não só as minhas dúvidas, mas também, as dúvidas de vocês sobre essa genial linguagem! Vamos logo porque tô ansiosa. Hehe!

** No final do post deixo o link da fonte de info!

O HTML é uma linguagem de programação utilizada para desenvolvimento de sites. Esta linguagem surgiu junto com o HTTP, ambos possibilitaram a internet ser popularizada.

História:


O HTML foi criado em 1991, por Tim Berners-Lee, no CERN (European Council for Nuclear Research) na suíça. Inicialmente o HTML foi projetado para interligar instituições de pesquisa próximas, e compartilhar documentos com facilidade. Em 1992, foi liberada a biblioteca de desenvolvimento WWW ( World Wide Web), uma rede de alcance mundial, que junto com o HTML proporcionou o uso em escala mundial da WEB.

Como funciona:


O HTML é uma linguagem de programação. Estas linguagens são constituídas de códigos que formam algum programa ou executam uma ação. O HTML tem códigos para criar paginas na web. Estes códigos que definem o tipo de letra, qual o tamanho, cor, espaçamento, e vários outros aspectos do site. No início era muito complicado aprender HTML, pois eram muitos comandos para fazer algo simples. A cada nova versão, o HTML fica mais fácil de utilizar, e adquire mais funções. Atualmente qualquer pessoa pode acessar a internet a aprender a construir um site básico em questão de horas, seguindo os passos de tutoriais e aprendendo as funções de cada código.

O HTML foi a primeira linguagem de nível mundial, porem não é a única. Existem muitas outras linguagens destinadas á criação de paginas da web, porém o HTML ainda prevalece. Atualmente já é possível integrar varias linguagens na mesma pagina da Web, sendo possível usar duas ou mais linguagens no mesmo site.

Para criar e editar códigos em HTML é necessário qualquer editor de texto comum, como bloco de notas. Para testar os códigos, basta salvar o arquivo em formato .HTML e executar. Para o teste é necessário ter um navegador configurado como padrão. Não é necessária internet, pois o arquivo com os códigos esta na maquina onde esta sendo executado.
Alguns códigos em HTML e suas funções:
  • <title> Define o titulo da pagina.

  • <script> Permite adicionar funções em paginas com script, podendo assim adicionar códigos em Javascript (Este código permite que alguns sites em HTML tenham joguinhos ou animações, verificações de formulários antes do envio para o servidor, entre outras funcionalidades)

  • <style> Define formatação em CSS.
A maioria dos códigos em HTML precisam ter um código de inicialização e um de finalização – são as chamadas Tag’s (tag de abertura e tag de fechamento). Por exemplo, para definir o titulo da pagina, é necessário escrever:

<title>Título da minha Página</title>

O </title> serve para “avisar” que ali acaba o titulo, caso não seja posto, todos os códigos definidos depois serão considerados parte do titulo.
Um código HTML para uma pagina onde apareça “infoescola” escrito em vermelho, em um fundo preto:

<HTML>
<Head>
<Title>Título</title>
</head>

<body bgcolor=”black” text=”red”>
Infoescola
</body>
</HTML>

Basta copiar o código para um editor de texto, salvar em .HTML e abrir no navegador.

Existem programas profissionais para criação de páginas em html automaticamente, como o Adobe Dreamweaver, entretanto, com o tempo o desenvolvedor precisará criar páginas complexas demais, sendo necessário ele mesmo digitar alguns códigos html.

Estrutura básica de um documento:

A estrutura básica de um documento HTML (Hyper Text Markup Language - Linguagem de Marcação de Hypertexto), apresenta as seguintes marcações:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="description" content="a descrição do seu site em no máximo 90 caracteres">
        <meta name="keywords" content="escreva palavras-chaves curtas, máximo 150 caracteres">
        <title>Título do Documento</title>
    </head>
    <body>
    <!-- Aqui fica a página que será visível para todos, onde pode-se inserir
    textos, imagens, links para outras páginas, etc, geralmente usa-se: -->
 
    <div>Tag para criar-se uma 'caixa', um bloco, mais utilizada com "Cascading Style Sheets
         (Folhas de Estilo em Cascata)</div>
 
    <span>Tag para modificação de uma parte do texto da página</span>
 
    <img src="endereço_de_uma_imagem.jpg" />
 
    <a href="http://www.wikipedia.org">Wikipedia, A Enciclopédia Livre</a>
    </body>
</html>
As etiquetas HTML não são sensíveis à caixa, portanto tanto faz escrever <HTML><Html><html> ou <HtMl>.
As etiquetas básicas de HTML, cuja presença é altamente recomendada nas páginas são:
  • <html>: define o início de um documento HTML e indica ao navegador que todo conteúdo posterior deve ser tratado como uma série de códigos HTML
  • <head>: define o cabeçalho de um documento HTML, que traz informações sobre o documento que está sendo aberto
  • <body>: define o conteúdo principal, o corpo do documento. Esta é a parte do documento HTML que é exibida no navegador. No corpo podem-se definir atributos comuns a toda a página, como cor de fundo, margens, e outras formatações.

Cabeçalho:



Dentro do cabeçalho, os elementos:


  • <title>: define o título da página, que é exibido na barra de título dos navegadores
  • <style type="text/css">: define formatação em CSS
  • <script type="text/javascript">: define programação de certas funções em página com scripts, podendo adicionar funções de JavaScript
  • <link>: define ligações da página com outros arquivos como feedsCSSscripts, etc
  • <meta>: define propriedades da página, como codificação de caracteres, descrição da página, autor, etc
São meta informações sobre documento. Tais campos são muitos usados por mecanismos de busca (como o GoogleYahooBing) para obterem mais informações sobre o documento, a fim de classificá-lo melhor. Por exemplo, pode-se adicionar o código <meta name="description" content="descrição da sua página" /> no documento HTML para indicar ao motor de busca que texto de descrição apresentar junto com a ligação para o documento. Para o motor de busca Google, por exemplo, elementos meta como keywords não são utilizadas para indexar páginas. Apenas <title> e a meta <description> são usadas para descrever a página indexada.
Obs: as etiquetas <style> e <script> servem tanto para delimitar os espaços usados pelos códigos na página quanto para invocar códigos existentes em outros arquivos externos.

Corpo:

Dentro do corpo podemos encontrar outras várias etiquetas que irão moldar a página, como por exemplo:
  • <h1><h2>, ... <h6>: cabeçalhos e títulos no documento em diversos tamanhos.
  • <p>: novo parágrafo.
  • <br />: quebra de linha.
  • <table>: cria uma tabela (linhas são criadas com <TR> e novas células com <TD>, já os cabeçalhos das colunas são criados com as etiquetas <THead><TH> e os rodapés com<TFooter><TR><TD>).
  • <div>: determina uma divisão na página a qual pode possuir variadas formatações.
  • <b><i><u> e <s>: negrito, itálico, sublinhado e riscado, respectivamente.
  • <img />: imagem.
  • <a>: hiper-ligação para um outro local, seja uma página, um e-mail ou outro serviço.
  • <textarea>: caixa de texto (com mais de uma linha); estas caixas de texto são muito usadas em blogs, elas podem ser auto selecionáveis e conter outros códigos a serem distribuídos.
  • <abbr>: abreviação (sigla simplesmente abreviada).
  • <cite>: citação.
  • <address>: endereço. <address>: endereço.

Cores:

As cores devem ser declaradas com o atributo style, que funciona em diversos elementos, como por exemplo:
<span style="color:COR">Texto</span>
Onde COR pode ser o nome da cor em inglês, em decimalhexadecimalRGBRGBA ou HSLA.

Hiperligações:

Uma possibilidade importante dos documentos HTML é a de fazer hiperligações. Para isso usa-se a etiqueta <a> (do inglês, anchor). Esta tem os atributos: href que define o alvo da hiperligação (que pode ser uma página de Internet, uma parte da mesma página ou um endereço de email) ou name que define um alvo nessa página (a onde se pode fazer uma hiperligação usando a etiqueta a com o atributo href). Exemplos:
  • <a href="ht­tp://pt.wikipedia.org/">Clique aqui para aceder à página principal da Wikipédia em português.</a>
  • <a name="nome">texto</a>
Em que nome e texto podem ser substituídos por o que se desejar. Depois usa-se <a href="#nome"> </a> para hiperligar a este "anchor".
Diferença entre target="_blank" e target="_new"
target="_blank" é usado para abrir links em várias janelas e target="_new" é usado para abrir vários links em uma janela.[7]
Exemplos
  • <a href="URL DO LINK" target="_blank">Título</a>
  • <a href="URL DO LINK" target="_new">Título</a>
Página em branco é usado about:blank na url do link.
Exemplos:
  • <a href="about:blank" target="_blank">Página em branco</a>
  • <a href="about:blank" target="_new">Página em branco</a>

Caracteres especiais e símbolos:

Os caracteres especiais definem-se usando comandos que começam com & e terminam com um ;. Alguns exemplos incluem &aacute; (á), &agrave; (à), &atilde; (ã), &acirc; (â),&auml; (ä) e &ccedil; (ç). Qualquer outra vogal pode ser substituída pelo a destes exemplos, incluindo maiúsculas

Editores HTML:





Share this:

JOIN CONVERSATION

    Blogger Comment

0 Comentários:

Postar um comentário