Curso de HTML - Aula 1


Curso de HTML, aula 1

Olá pessoal, hoje teremos aqui no nosso blog a primeira postagem do curso de html, como eu disse antes eu irei escrever no blog, mas sempre que possível eu estarei colocando dentro da postagem uma videoaula, respectiva a aula que explique o que eu passei em escrito.
Você deve aprender html se pretende ser um webdesigner ou se simplesmente quer ter o seu blog de sucesso, como eu disse em uma postagem anterior, você deve aprender um pouco de tudo para que tudo saia bem, não se contente com pouco, aprenda cada vez mais!
Nessa aula eu irei passar umas coisinhas bem fáceis e que se você não sabe de nada de HTML, já vai ser de muito bom proveito, se você já sabe o básico não terá muita serventia, nesse blog as coisas irão por partes, ou seja, a coisa só vai ficar mais avançada num futuro próximo.

O que vamos aprender?


Hoje nós iremos aprender o que é uma tag, para que ela serve e como utilizá-la, e também vamos saber de algumas muito importantes e que não podem faltar em um documento de html.

O que eu preciso para fazer um documento HTML?

Um documento básico de HTML precisa apenas de um bloco de notas, então nada a mais que isso e você já pode fazer a sua página básica para a internet, mas daqui algumas aulas eu irei passar uns programas extremamente bons e que são excelente para facilitar o trabalho de um webdesigner!

Mão na massa!

A primeira coisa da qual você precisa saber é a seguinte:
Tag são os códigos que você vai utilizar para definir o que quer, toda tag tem uma entrada e uma saída, tente ver da seguinte forma, você esta vendo uma casa, essa casa é extremamente bonita, mas ela só é dessa forma, pois as portas de entrada e de saída da casa são mágicas! Então a porta de entrada e de saída juntas fazem uma bela casa, mas se não tiver umas das portas com certeza essa casa nunca seria tão bela.
Não dê risada do meu modo de ensino, é importante pensar em coisas estranhas para se lembrar delas ok?
Toda tag está entre o sinal de "<" e o sinal de ">", então todas as vezes que abrir um documento de html e ver alguma palavra em inglês entre isso <> saiba que é uma tag. Lembrando, tag são as portas mágicas da casa!

Então vamos escrever o nosso primeiro documento em HTML? Assim, mesmo que você não tenha entendido o que leu, a prática ira refrescar as suas idéias...

Tag <html> e <head>:
Todo documento em html começa com a tag <html>, já que todo documento em html tem uma entrada e uma saida vamos escrever assim:

<html>

</html>

Então a entrada é <html> e a saída é </html>.Tudo que estiver entre <html>(entrada) e </html>(saída) será a sua página completa da internet.
Dentro de tag html temos outras, essas outras são as pequenas coisas que vão fazer a diferença de uma página em branco e uma verdadeira página de html, ou seja, as outras tags são os móveis da casa, as paredes e por ai vai! Vamos utilizar agora duas novas tags, a <head> e a <body>.

A tag <head> é todo o seu cabeçalho da página, coisas como META TAGs e Titulo da página vão vir dentro de head, então temos aqui a nossa tag <head>:

<html>
<head>
</head>
<html>

Lembra da nossa casinha la no começo da aula? Já temos uma casinha e estamos levantando as paredes, daqui a pouco teremos um bairro de casinhas que tem porta de entrada e de saída, não são todos que tem esse luxo...
Digo isso, pois nem todas as tags tem entrada e saída, mais para frente veremos quais não tem.

Tag <title>:
Então agora temos o nosso documento de html, com a tag <html> e a tag <head>, dentro dessa tag head teremos que colocar alguma coisa da aula de hoje, não podemos simplismente deixar uma aula em branco, daqui a pouco vamos escrever uma frase.

Dentro da casinha, quer dizer, tag <head> podemos colocar todo o cabeçalho da nossa página não é mesmo? Já que estamos no básico, vamos fazer isso, o primeiro móvel dessa casa será a tag <title>, nessa tag nós podemos escrever o que aparecerá lá em cima da nossa página, como a imagem abaixo sugere:


Então vamos continuar com o nosso documento?

Continue:

<html>
<head>
           <title> </title>
</head>
</html>

Perfeito, mas o que vamos escrever no nosso titulo de página? Já que é a nossa primeira aula, vamos escrever o que é apropriado, vamos escrever: Aula 1 HTML, Superpoint!

Então escreva:

<html>
<head>
          <title>Aula 1 HTML, Superpoint!</title>
</head>
</html>

Agora, só para você ter uma noção do que está fazendo, salve o seu documento.
Para salvar, não é simplesmente ir salvando não! Calma e vamos por etapa, na hora de salvar o seu documento escreva o que quiser, mas para ficar organizado, vamos escrever, "aula1.html" e salvar.
Nunca coloque letras maiúsculas e muito menos espaços na hora de salvar seu documento de html, faça tudo o mais simples possível para não ter problemas futuros ok?
Vá para onde você salvou, veja que ficou como um arquivo de internet, clique nele e veja como está ficando...

Curso de HTML, Title



Não tem nada além do nosso titulo, representado pela tag <title>.

Tag <body>:
Tudo bem escrevemos o nosso titulo de página, mas cadê a página pelo amor de Deus!?
Vamos ter que escrever alguma coisa na página para que tudo dê certo não é mesmo, caso contrário que vai querer nos achar na internet? Então vamos fazer o nosso corpo do site, ou seja, o site MESMO:

Para fazer o corpo do site, nós temos que usar uma tag como qualquer outra coisa em html, então nada melhor do que a tag <body>, body significa corpo, ela é simplesmente todo o corpo da nossa página, se você souber inglês as coisas ficaram muita mais fáceis em html, pois tudo aqui é representado por palavras em Inglês ou simplesmente por diminuição delas.

Então se o corpo da página é body, vamos escrever esse, body será as paredes da nossa casa e dentro dele poderemos colocar a nossa decoração também, mas a decoração da nossa casa, ou melhor, da nossa página, será feita depois...

Então vamos colocar um corpo na nossa página? Vamos continuar escrevendo a nossa página:

<html>
<head>
<title>Aula 1 HTML, Superpoint!</title>
</head>
<body>


</body>
</html>

Tag <p>:
Agora temos um corpo, porém não temos nada nele, para colocar alguma coisa na nossa página vamos escrever alguma coisa, assim você ficara mais aconchegado e terá mais coragem de prosseguir, então tá, vamos escrever um texto.
Para se escrever um texto, devemos usar uma tag também, a palavra tag tem que invadir a sua mente durante uma semana, você tem que comer tags para poder aprender html, então para tudo precisa de tags, certo? Para um texto também! Vamos escrever um, então vamos lá!

Para se escrever texto a tag usada é <p> de Paragraph, como quase todas as tags, ela tem abertura e fechamento, então o texto vai estar entre <p> e </p>

Vamos escrever:

<html>
<head>
<title>Aula 1 HTML, Superpoint</title>
</head>
<body>
<p>


</p>
</body>
</html>

Ótimo, agora escreva um texto grande, ou melhor pegue esse texto que eu criei e que está no blog, já que as aulas vão ser de etapas em etapas e nós iremos fazer tudo baseado em apenas uma página é importante que seja um texto grande, afinal de contas depois você vai aprender a formatar um texto e para isso é melhor que seja um texto grande.

Coloque o texto dessa página.

Agora cole este texto dentro da tag <p>, vai faicar resumidamente assim:


<html>
<head>
<title>Aula 1 HTML, Superpoint</title>
</head>
<body>
<p>

Você ja deve ter reparado que aqui, eu falo mais de como se ter sucesso com um blog, mas essa é a verdade, esse ganhar dinheiro na internet nós iremos fazendo por partes, ou seja, a primeira parte é a criação e boa administração de um blog, caso contrário, como você vai ganhar?
Hoje vamos abordar uma coisa muito importante na internet e para se ter sucesso com ela. Qual o tamanho da importância que você deve dar aos seus leitores?
Muitas pessoas fazem blogs, alguns blogs tem um conteúdo maravilhoso, mas simplismente se esquecem o porque de que eles escrevem na internet. A resposta para a pergunta acima é a seguinte: TODA E COMPLETA ATENÇÃO! O seu blog precisa de pessoas que comentem que participem diariamente do seu blog, seu blog precisa de um espaço grande para os seus leitores.
Para dar a devida atenção a eles existem pequenas coisas que você deve fazer e que dão toda a diferença na hora de blogar..."
</p>
</body>
</html>

Agora salve o seu documento e veja como está ficando...

curso de html, aula1 body


Só mais uma coisinha, quando você for fazer os seus documentos, não é necessário dar espaço ou alt para que os códigos funcionem, apenas faça da maneira que achar melhor...


Caso você não tenha entendido muito bem, veja esse vídeo do site Guanabara.info, nesse caso publicado no youtube:



Se você fez exatamente da maneira que eu passei com certeza deverá estar uma grande MERDA!
É isso mesmo, deve estar uma merda, mas sabe porque está assim? Está assim, pois nós não utilizamos nenhuma tag para formatar o texto e deixá-lo bonito, isso nós vamos aprender na próxima aula, espero você na próxima e até!

Espero ter ajudado, o que você achou da primeira aula de html do superpoint? Se achou horrível, pode falar, pois eu vou fazer de tudo para melhorar, até mais!

6 comentários:

Anônimo disse...

Nossa, fiz tudo direitinho, e funcionou, só me confundi na hora de salvar, porque esqueci de salvar no formato html e ficou no formato de texto (.txt). Obrigado vou continuar acompanhando as aulas!

Unknown disse...

Obrigada pelo comentário!
É verdade, na hora de salvar tem que colocar o "oquequiser.html" tem que ser em .html se não não funciona, boa observação.
Vou postar mais aulas, é que eu quero fazer videoaulas, mas é um pouco complicado aqui em casa...
Boa sorte para nós! Até a próxima.

Jessica Kaubatz disse...

Está otimo!!
seguindo o passo a passo fica facil! :D

Aguardando os próximos post

Unknown disse...

Obrigada pelo comentário Jéssica!
Que bom que está fácil de entender, estou projetando as novas aulas aos poucos, pois estou com uns probleminhas pessoais...

Abner disse...

otimo como outro disse seguindo passa a passo fica bom

Unknown disse...

Obrigada pena que eu não levei tudo em frente, quem sabe no futuro eu não faça minhas próprias aulas não é mesmo?

Muito obrigada pelo comentário, volte sempre.

Postar um comentário

Leia antes de fazer seu comentário:
- Os comentários do blog são moderados e serão liberados após constatação de que estão de acordo com o assunto do post.
- Palavras ofensivas serão removidas.
- Os comentários não refletem a opinião do autor.

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Sweet Tomatoes Printable Coupons