-
Notifications
You must be signed in to change notification settings - Fork 4
Home
Lógico que conceitos de Design também são primordiais, porém a questão que levanto é em relação aos construtores de sites automáticos, plataformas online e ferramentas onde você clica e arrasta e nada se aprende.
Talvez você saiba o que é HTML, porém quem começa hoje a pesquisar sobre criação de sites é a primeira vez que ouve falar. Isso ocorreu comigo quando comecei acredito que com muita gente. Então vamos lá! HTML é um acrônimo para HyperText Mark-up Language, que em português quer dizer linguagem de marcação de hipertexto. É a linguagem que usamos para publicarmos conteúdo (texto, imagem, vídeo, áudio e etc) na Web. E foi inventada na década de 1990 por um cientista chamado Tim Berners-Lee.
Porque é a linguagem básica e outras linguagens para construção de sites resultará em códigos HTML, como o PHP, ASP, por exemplo, ou são “embutidas” como no caso do Javascript e o CSS. Ou seja, para mexer com essas linguagens é bom dominar o HTML.
Que eu não precisava de pré-conhecimento e ferramentas avançadas para iniciar meus estudos com o HTML
Fiquei impressionado quando descobri que poderia criar um site apenas com bloco de notas. No começo nem me passava pela cabeça que algo tão simples tinha este poder. Lógico que você descobrirá outros programas mais potentes que cheios de recursos que agilizam suas tarefas. A escolha é sua. Entretanto um programa simples como este te forçará a digitar os códigos consequentemente você fixará na memória mais rapidamente. Depois que você estiver habilitado pode aderir a outros editores. Quanto aos conhecimentos prévios, em relação à informática, saber mexer, criar diretórios e pastas no Windows já é suficiente.
É importante também que você seja, ou passe a ser um observador de elementos que organizam informações em sites, revistas, livros e jornais. Como títulos, subtítulos, parágrafos, listas, imagens, citações, seções entre outros. Observe a hierarquia entre eles, o ordenamento e posicionamento.
Muitos códigos HTML tem valor semântico até para construir os elementos citados. Da mesma forma que você organiza um texto você deve também pensar como colocar em ordem os códigos e atribuindo seus significados. Nesse sentido o HTML como linguagem se assemelha a Língua que falamos e, apesar de não linear, também se assemelha as composições que vemos nas mídias impressas.
Que ao contrário da facilidade tão propagada na web aprender HTML pode ser difícil para muitos. Podemos mudar isso
Basta você digitar no Google “HTML é fácil” que ele apresentará cerca de 127.000.000 de resultados. Então deve ser fácil mesmo. Só que se esqueceram de considerar as pessoas que desistem no caminho, que querem aprender de verdade e tem dificuldades.
Muitos, com a certeza de que o mundo inteiro aprende facilmente HTML, gastam energia e tempo tentando uma, duas, três e mais algumas vezes sem sucesso e se desmotivam. Daí deixam os estudos de lado, arrumam uma desculpa que facilita a desistência, do tipo: não tenho tempo para praticar! E com isso mito que aprender HTML é fácil se fortalece.
Eu não tive muitas dificuldades para aprender HTML. Posso afirmar que achei fácil. E tenho muito a agradecer a comunidade web.
Então por que relacionei como uma alguma coisa que gostaria que tivessem me contado? Porque um dia me propus a ensinar o que aprendi e enxerguei que nem todo mundo está preparado para assimilar o conteúdo do jeito que eu aprendi.
Além dos cursos de Web Design que ministrei vi pessoas com dificuldades de aprender, no dia a dia, nas empresas que trabalhei, com colegas do Curso técnico e da Faculdade, no feedback do público do Chief através de pesquisas, e-mails e mensagens.
E foi nesta hora que enxergue que o HTML, até então muito fácil para alguns, era bem difícil para outros.
Eu não quero te desanimar não. Muito pelo contrário.
Saiba que aprendi que ele pode se tornar fácil se nos preocuparmos também com os métodos para transmitir o conteúdo para quem tem dificuldade. Mas isso é assunto para outro momento…
Galuchos, realmente é assustador olhar um código-fonte quando estamos começando. Se você não sabe o que é, clique com o botão direito em cima desta página, ou de outra qualquer e vá em “exibir código fonte”(ou dependendo do navegador pode ser crtl+u).
Veja quanta coisa! Porém, você não deve temer tanta informação junta. Você, com empenho, será capaz de criar e interpretar grande parte dos códigos ali existentes. Para isso uma dica simples: Não enxergue ele como um todo e sim por partes. Um trecho de código de cada vez. Linha por linha. Ficará muito mais fácil e o monstro se dissipará.
Muita gente pensa que para construir site é preciso programar em HTML. Pois bem. HTML não é uma linguagem de programação e sim de marcação.
Como tudo na vida ela exige raciocínio. Mas em comparação com as linguagens de programação é seguramente uma linguagem menos complexa para aprendizado.
Para efetuar a marcação em um documento precisamos determinar qual elemento HTML iremos usar e delimita-lo de acordo com sintaxe para construção de tags.
Por falar em tags, vamos ao próximo tópico.
Elemento HTML? Tags? Socorro!
Quando comecei era comum errar na montagem de tags. E não é porque é complexo não, e sim porque exige atenção. A falta de um caractere pode ser fatal.
Opa! Não sabe o que é elemento HTML? Segue aqui uma definição bacana do Mozila Developer Network:
“Elementos são entidades que especificam como documentos HTML devem ser construídos e que tipo de conteúdo deve ser colocado em determinada parte de um documento HTML”. Ou seja, se você quer colocar um parágrafo em uma parte de um documento você precisará de um elemento específico para isso que, no caso, é o elemento P.
E para marcá-lo você precisará de tags. Tags delimitam o nome do elemento entre sinais de menor que “<” e maior que “>”. Agora veja como montar corretamente.
Para constituir o elemento HTML precisamos de dois tipos de tags e o conteúdo. Os dois tipos de tags são:
A tag de abertura que marca o início do elemento: . E a tag de fechamento que marca o fim do elemento: .
E entre as tags você coloca o conteúdo que quer apresentar.
Veja na imagem abaixo o exemplo de marcação para um parágrafo:
O “p” é o nome do elemento do parágrafo que fica entre os sinais. O conteúdo do parágrafo fica entre as tags de abertura e fechamento.
A tag de fechamento difere da abertura pelo uso da barra “/” antes do nome do elemento HTML. E vira e mexe os iniciantes esquecem-se de coloca-la.
Isso sem contar quando esquecem até da tag de fechamento. E isso pode gera vários problemas de renderização.
Tag abriu, tem que fechar!
Existem também casos de elementos que usam somente uma tag. São tags de auto-fechamento.
No HTML5 este tipo de tag não precisa da barra. Veja o elemento chamado BR que serve para quebra de linhas:
E em outros tipos de HTML pode ser necessário o uso da barra. Veja: