Códigos básicos html #1 - Tutorial
Oi gente! tudo bom?!
Estava olhando aqui e percebi que nunca postei nada sobre códigos html e nenhum tutorial... resolvi então fazer uma "mini série" de posts sobre isso. É bem básico mesmo o que vou explicar, mas é útil... Vamos lá! :D
Os códigos html é como se fosse um guia para que o sistema leia de maneira correta e também mostre todas as informações de modo mais organizado e fácil de entender.
Cada "peça" do nosso arquivo se chama tag, existem inúmeras e é muito difícil você decorar todas; o bom é conhecer e decorar as básicas e quando precisar de alguma basta você pesquisar ou usar programas para agilizar esse processo. Um desses programas é o Adobe Dreamweaver, onde ele monta todo o arquivo e você pode personaliza-lo, porém é necessário ter alguns conhecimentos básicos.
As tags mais básicas são:
!DOCTYPE ~> que é necessária para arquivos html 3.2 para identificar o documento ao browser, e mostrá-lo de maneira certa;
HTML ~> serve para definir o tipo de arquivo, permitindo que seja identificado por outras aplicações na internet;
HEAD e BODY ~> contém informação sobre a URL de sua página como também o
relacionamento da mesma com outras páginas do seu site. O único elemento
visível ao usuário na seção HEAD será o título da página;
TITLE ~> permite a adição de um título para a página;
H1 ~> adiciona um
cabeçalho da qual pode alterar esse número de 1 a 6, sendo que quanto maior o
número, menor a letra.
Vamos montar uma então para entender como funciona cada uma delas:
<HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HEAD>
<TITLE> Estou aprendendo códigos html</TITLE>
</HEAD>
<BODY>
Meu primeiro documento em HTML, treinando com o blog Garota Neon.
</BODY>
</HTML>
Com esse arquivo temos a seguinte visualização no browser:
Obs.: nós sempre "abrimos' uma tag (com este caractere: <) e "fechamos" logo depois (com este caractere: >). E sempre terminamos uma "parte" da página (como cabeçalho, local para posts, etc) com os caracteres: /<
Perceba que a primeira linha é a tag hmtl. Quando pesquisarmos uma página na web, o brower (navegador) poderá identificar que tipo de código está sendo usado nesta página e poderá ler certinho e mostrar tudo sem erros, nesse caso é um html. Essa tag (html) está seguida da tag !doctype e as especificações dela.
Na terceira linha vem a tag head, identificando que ali começa o cabeçalho, que é a "cabeça" mesmo da página, perceba que depois dela a gente já coloca a tag title, ou seja, o meu cabeçalho terá um título. Depois de 'abrirmos' e 'fecharmos' a tag title, na frente dela, colocamos o título que quisermos; observe muito bem que quando eu acabo de colocar o meu título, eu termino com </ (dessa forma: </TITLE> )
Obs.: Bom, eu nunca tentei fazer com letras minúsculas, sei que desse jeito funciona e você pode usar o bloco de notas do seu computador para copiá-los e testá-los. Para salvar o bloco de notas como hmtl, basta colocar o nome do arquivo como ".html" sim, tem um ponto antes de hmtl
Depois nós terminamos o cabeçalho com </, 'abrimos' o corpo da nossa página. Nele vai ter o que queremos que a página tenha escrita, seja um texto, um poema, uma letra de música, enfim...assim que terminar de escrever, termine com </.
Desse modo já temos uma página com componentes mais básicos, com o título e corpo. Para definir tamanho das letras, use a tag <H1>, desse jeito:
<HTML>
<!DOCTYPE HMTL PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HEAD>
<TITLE> Estou aprendendo códigos html</TITLE>
</HEAD>
<BODY>
<H1>Meu primeiro documento em HTML, treinando com o blog Garota Neon.</H1>
Eu vou estar apto a desenvolver e personalizar layout"s.
</BODY>
</HTML>
Agora além de um título para página, podemos colocar títulos no corpo também! Apenas usando a tag H1, é muito importante lembrar que vai de 1 a 6, e que quanto maior o número, menor a letra.
Por hoje é só!
Enquanto o próximo fica pronto, aproveite para testar e "brincar" com estes códigos.
Ao final de todos, disponibilizarei uma pasta com TODOS os arquivos com códigos, inclusive alguns mais difíceis que podem ser úteis na criação de layout's.
Espero que gostem!
Até próximo post, e qualquer dúvida ou erros, comentem!!!
*Para compartilhar essas imagens e informações no seu site ou blog não esqueça de colocar os créditos ao blog!
Compartilhe o post e ajude o blog a crescer!
Comente!
Seu comentário é muito importante para o crescimento do blog e geração de melhores conteúdos!
Comentários com insultos serão removidos!
Lembre-se: Críticas são diferentes de ofensas!