HTML5 - Como escrever uma boa sintaxe Público

HTML5 - Como escrever uma boa sintaxe

Gustavo Silva
Curso por Gustavo Silva, atualizado more than 1 year ago Colaboradores

Descrição

Um curso básico a respeito de HTML5, a linguagem usada para desenvolvimento de páginas web. Neste curso você vai aprender: o que é o HTML, o que é sintaxe, estrutura inicial do HTML e sua sintaxe, como escrever uma boa página HTML, o que aprender para melhorar sua página.

Informações do módulo

Sem etiquetas
O que é o HTML? Para você que está toda hora navegando com o Chrome, Firefox, usando as redes sociais e acessando diversas páginas se perguntando como elas são feitas? Aqui você vai aprender sobre isso, como é que acontece e como é a melhor forma de fazer sua própria página da internet. Para não ficar um conteúdo muito extenso, serão abordados apenas os assuntos sobre a estruturação, como fazer para colocar seu conteúdo na internet de uma forma nua e crua, infelizmente sem muita estilização ou qualquer animação.   Para começar de fato o conteúdo do curso, vamos entender o que é o HTML. Essa sigla significa "Hypertext Markup Language", onde dá para traduzir por "Linguagem de Marcação de Hipertexto". E como a internet se popularizou por causa das universidades, a linguagem que permitiria esse compartilhamento de informações não poderia ser diferente, assim Tim Berners-Lee criou essa linguagem para fazer trabalhos com seus colegas, e por ter como objetivo ser de fácil entendimento, se popularizou.   Esse fácil entendimento não é a toa, pois ela atende bem seus dois únicos públicos alvos, computadores e pessoas. Estruturada com marcadores chamados de "tags", elas determinam o começo e o fim de cada linha de código (mesmo não sendo somente uma linha), e como cada tag é usada para uma função especifica, não só o computador entende o que está escrito como também as pessoas.
Mostrar menos
Sem etiquetas
O que é sintaxe? Assim como na língua portuguesa ou qualquer outra língua, sintaxe é a "parte da gramática que estuda as palavras enquanto elementos de uma frase, as suas relações de concordância, de subordinação e de ordem", como visto no Google se você pesquisar apenas por sintaxe.   E no HTML não é diferente, sendo que quando se usa as tags de forma correta, toda a estrutura de sua página apresenta uma ordem e relação de concordância.   Vamos descobrir quais são as tags e como as usar? Para começar, as tags são compostas por "<>" e uma palavra (normalmente em inglês) entre eles, isso para determinar o inicio da tag, desta forma: . De forma semelhante, para fechar a tag, apenas adiciona o sinal "/", desta forma: .  Obs.: Algumas tags não são necessárias aplicar a tag de fechamento, pois, todas as informações necessárias ficam dentro da tag de abertura, assim economiza tempo e escrita, dessa forma: .   Compreendendo isso, podemos dar uma olhada e conhecer a estrutura básica de uma página, e seus componentes mais importantes, segue os códigos abaixo:                                                                                      |                                                                                                               |                                                                                                          |                                                                                  |              Titulo que aparece na aba do navegador                 |         Uma página um pouco mais completa                                                                                                        |                                                                                                             |                                                                                                            |                                                                                                                   |            Vai até o h6                                                                                                                          |            Um paragrafo                                                                                                                          |                                                                                                                                 |                                                                                                                                 |           Um titulo que é colocado para acompanhar o conteúdo                                                                                                                        |                                                                                                                                     |                                                                                                                                     |                                                                                                                                     |               É normalmente usado para fazer um "menu" lateral de navegação da página.                                                                                                                          |                                                                                                                                     |                                                                                                                                 |                                                                                                                            |    Vamos agora entender o que significa cada tag usada tanto na estrutura mais simples (a da esquerda) quanto na mais completa (a da direita). Uma tag usada nos dois casos é a "DOCTYPE! HTML", que determina a versão do html em questão, sendo a que estamos aprendendo a versão 5. A tag "html", como o nome já fala, declara o inicio e fim do html. A tag "head", segue justamente o seu nome, cabeça em inglês, onde são carregados os arquivos referenciados na página e outras informações, para que a página não fique com um carregamento mais devagar. A tag "meta charset" define os caracteres que serão usados, pois como os teclados não são iguais em todos os lugares, você tem que definir qual está usando. A tag "title" já foi explicada sua função dentro da própria tag. A tag "body" é o corpo da página, onde todo o conteúdo da página vai ficar localizado e organizado. Então daqui passamos para parte mais completa onde é usado algumas outas tags. A primeira é a "div", que podemos definir como um recipiente para organizar conteúdo. A "hx" é utilizado para titulos e subtitulos, e esse "x" é substituido de 1 a 6, onde o 1 é o titulo maior e o 6 é o menor, e o "p" já é informado na própria tag. A tag "section", é uma seção de conteúdo, ou seja, tendo uma função semelhante com a div, mas sua diferença é a situação de uso, pois a section é usada para segmentar a informação em seções, já a div engloba essas seções em um "recipiente vazio". A "header" seria como um titulo para determinado conteúdo, normalmente em uma seção ou dentro de uma div. A "article" seria o conteúdo propriamente dito. E finalmente mas não menos importante, o "aside" é explicado no paragrafo, porém para ser realmente um menu de navegação, precisa ter um vinculo com o CSS, a linguagem para estilização de sites.
Mostrar menos
Sem etiquetas

Flashcards

Um questionário a respeito de paginas web, mais precisamente a sintaxe por trás da página web.
Mostrar menos
Sem etiquetas