O QUE É O HTML E COMO FUNCIONA O HTML E AS CSS?

HTML (HyperText Markup Language) é um conjunto estruturado de instruções,

conhecidas por etiquetas ou tags (em inglês), que dizem a um browser como publicar
uma página web, ou seja, o browser interpreta essas etiquetas e desenha a página no
ecrã.

Talvez você já tenha ouvido alguém falar a frase acima. Geralmente ela é dita por
pessoas iniciantes ou então aqueles que se baseiam apenas na capa de um único livro da
série Head First (use a cabeça), que estampa na capa “programação em HTML5”.
Acontece que a própria sigla já entrega seu objetivo: Hypertext Markup Language
traduzido para o Português significa Linguagem de Marcação Hipertexto. Você vai
notar daqui a pouco que ela não funciona com instruções, como toda linguagem de
programação. A HTML é baseada em marcações chamadas tags, e elas comandam tudo.
Além disso, o termo “programação” envolve estruturas especializadas que dependem do
uso de variáveis simples e compostas, condições, laços e até coisas mais complexas
como objetos. Nada disso existe na HTML. Por outro lado, todas essas características
estão presentes na linguagem Javascript. Essa sim é uma Linguagem de Programação.
HTML trabalha fundamentada apenas nas marcas ou etiquetas (do Inglês tag). Você vai
entender mais sobre isso mais pra frente. Sendo assim, em breve você terá a base
suficiente para conseguir dizer com certeza que HTML não é uma linguagem de
programação.

PARA QUE SERVE HTML, CSS E JS?

Uma das coisas mais importantes para quem está começando o desenvolvimento de sites
é compreender para que serve esse trio de tecnologias, que geralmente são estudados em
conjunto. Basicamente, de forma resumida, temos um panorama simples:

HTML Conteúdo

CSS Estilo

JAVASCRIPT Interatividade

Guarde bem a tabela anterior sempre que você precisar decidir qual linguagem vai
utilizar em cada situação. Abra aí o seu site de notícias favorito. Ao abrir uma
determinada notícia, você vai ver o texto, as imagens, os vídeos e todo aquele conteúdo
que compõe a notícia em si. Isso tudo foi criado em HTML. Ela é focada em conteúdo.
Agora preste atenção nas cores, na posição dos componentes e organização visual do
conteúdo em colunas, blocos visuais e tudo mais. Tudo foi definido em CSS. Ela é
focada no design/estilo. Finalmente, provavelmente existe o menu do site. Quando você
clica nele, acontece uma animação. Ao mover o mouse sobre as sessões, é possível que
aconteçam algumas interações interessantes. Isso foi desenvolvido com ajuda de
Javascript. Ela é uma linguagem focada nas interações.

ELEMENTOS

Todas as páginas de HTML são compostas por elementos. Um elemento pode ser visto

com um contentor em que é colocada uma secção de uma página web. Tudo o que

estiver dentro desse contentor fica com as características desse mesmo elemento. Se, por

exemplo, se quiser fazer uma tabela toda a informação referente a essa tabela terá que

estar colocada no interior do elemento <table></table>.

TAGS ou ETIQUETAS EM HTML

Como eu já disse anteriormente, a HTML funciona baseada em marcações específicas

chamadas tags. Uma tag é um conjunto de palavras entre sinais de colchete angular,
conforme representado a seguir.

Consegue perceber o uso da tag para a criação de um parágrafo simples. A maioria das
tags possuem uma abertura e um fechamento, e você identifica isso pela presença da
barra no fechamento da tag. Além disso, as tags também podem ter atributos e valores,
que vão configurar seu comportamento:
Uma mesma tag pode ter vários parâmetros, cada um com seu valor. Entretanto,
algumas tags não possuem a necessidade de conteúdo interno e por isso não possuem
fechamento.
 ATRIBUTOS E VALORES OS ATRIBUTOS

São outro elemento importante da linguagem HTML. Um atributo é utilizado para

definir as características de um elemento e é colocado no interior da tag de abertura do
elemento Por exemplo, para fazer referência a uma outra página palavra utiliza-se o
elemento A em conjunto com o atributo HREF:< a href=” ”> O sinal de igual e as
aspas são fundamentais pois atribuem um valor a um atributo.

ANINHAMENTO (NESTING)

Numa página web existem quase sempre múltiplos elementos que nunca se devem
sobrepor. Os elementos devidamente aninhados são sempre independentes uns dos
outros. Veja-se o seguinte exemplo em que tudo está arrumado ou aninhado:

<a>
<b>
<c>
</c>
</b>
</a>
Agora uma situação em que há sobreposição, uma falta de aninhamento:
<a>
<b>
</a>
<c>
</b>
</c>
 ESTRUTURA BÁSICA DE UM DOCUMENTO HTML
Ao criar um novo documento HTML, devemos sempre escrever a estrutura básica de
um documento desse formato. Vamos analisar cada uma das linhas que compõem esse
documento base.
 <html> </html> Definem o início e o fim do programa.
 <head> </head> É o cabeçalho do programa e, normalmente, não aparece na
janela web.
 </title> </title> > Este elemento está aninhado no HEAD e escreve o título da
página na barra de título na cima da janela do browser.
 <body> </body> Contém o conteúdo principal da página web.
Então, o documento mais simples em HTML, também conhecido como documento
mínimo, terá a seguinte estrutura:
<html>
<head>
<title> >Este é nome da página</title>
</head>
<body>
O body contém todo o texto e todas as imagens que constituem a página
</body>
</html
A ordem de abertura e fecho das tags, como se pode ver, não é arbitrária e tem uma
sequência hierárquica. Quando se está a escrever um programa muitas vezes sente-se a
necessidade de fazer alguns comentários a uma parte específica do código, para tal
utilizam-se as tags, os comentários não têm qualquer saída (output).
 QUE EDITOR UTILIZAR?
A forma mais simples, e básica, de fazer programas em HTML será a utilização de
simples editores de texto como é o caso, por exemplo, do Notepad ++. No entanto, os
utilizadores mais experientes utilizam diversos tipos de aplicações, mais ou menos
sofisticadas, para desenvolverem as partes fundamentais de uma página em HTML.
Algumas dessas aplicações permitem que numa primeira fase o desenvolvedor faça um
desenho gráfico daquilo que pretende e que posteriormente seja gerado, de uma forma
automática, o código HTML correspondente. Como exemplo: Visual Studio Code, o
Atom, o Sublime text, o Brackets. Todos são optimos editores, cada um com suas
vantagens e desvantagens. Para criarmos as nossas páginas em HTML usaremos o
sublime text criado e distribuído gratuitamente e funciona no Windows, Linux e Mac.
Apesar de se poder usar um processador de texto como, por exemplo, o Microsoft Word
para criar documentos em HTML, o mais fácil é começar por um simples editor de texto
como é o caso do Notepad do Windows. Para construir uma primeira página seguiam-se
estes pontos: