Curso Online de Dominando HTML e CSS

DOMINANDO HTML & CSS Com Exemplos Práticos

Autor Joaquim B. de Souza

Introdução

Segundo os autores Roberto Caribé e Carlos Caribé, em seu livro Introdução à Computação, da editora FTD, 1996, “A história da civilização já passou por vários estágios, que para serem alcançados foram precedidos do que chamamos de ‘revolução’”, (Prefácio).
Os autores não deixam de ter razão. Atualmente é muito fácil adentrar numa loja e pedir por algo pronto, como computador, Iphone, tablet, sem se dar conta dos longos caminhos para chegar a essa tecnologia, embora sofisticada, está compilada num “aparelhinho”.

As linguagens de programação não nasceram da noite para o dia. Longos anos e muitas pesquisas foram desenvolvidas para seus avanços. Linguagens como Assembler, Fortan, Cobol, Basic, C, deram os primeiros passos para o que temos hoje, inclusive com o advento da Web, as linguagens dinâmicas como HTML, CSS, etc. que passaram a dominar o mercado quando o assunto é a criação de página para Internet, seja através de blogs ou homepages.

Mini dicionário:

HTML – HyperText Markup Language;
CSS – Cascading Style Sheets;
Blogs são espaços na web para o registo cotidiano de suas opiniões, emoções, ou seja, um mural pessoal.
Homepages são páginas inicial de um site da internet.

Introdução

Mas o foco deste livro vai estar na linguagem HTML – HyperText Markup Language, em português, Linguagem de Marcação de Hipertexto. E, CSS - Cascading Style Sheets, em português, Folha de Estilo em Cascata. Iremos estudar cada uma destas linguagens com exemplos práticos, passo a passo.

Portanto, este livro trará no bojo de seus exercícios conceitos de programação à medida que ensina a criar formulários HTML e aplicar formatação comum em diversas páginas através do estilo CSS.

Desta forma, teste cada exercício. Refaça cada exercício criando o seu próprio estilo ou característica. Com isso, demonstrar que dominou corretamente as técnicas de criação de páginas Web.

Boa leitura! Bons estudos!

Introdução

CAPÍTULO I Criando o Local de Hospedagem

Vamos criar uma Pasta na Unidade C: denominada LIVROHTML. Nesta pasta você irá guardar todos os itens que serão utilizados em seus exercícios, arquivos HTML, arquivo CSS, suas imagens e vídeos.
Execute o Windows Explorer.
Selecione a Unidade C:
Clique com o botão direito do mouse numa área livre no painel à direita, em seguida, aponte para Novo e, por último, clique em Pasta. Em Nova Pasta, digite LIVROHTML e, tecle Enter. Pronto!

Agora eu sugiro que dentro da pasta LIVROHTML você crie mais duas pastas, uma de IMAGENS e outra de SOM. Isso vai facilitar na separação e manuseio de seus arquivos.

Outro detalhe importante. Você pode utilizar qualquer editor de texto para trabalhar com essas linguagens, entretanto, inicialmente, iremos utilizar o Bloco de Notas. E, todas as páginas, iremos testá-las no Internet Explorer, mas você poderá fazer em outros navegadores como Mozilla ou Google Chrome.

Caso tenha alguma dificuldade em criar essa pasta (diretório), entre em contato conosco solicitando dicas, ou ainda se preferir, acesse o curso online Windows 8 neste link: https://www.buzzero.com/cursos-online-de-informatica-e-internet/curso-online-microsoft-windows-8---sistema-operacional_52212?a=joaquim-souza&keep=true

Criando o Local de Hospedagem

CAPÍTULO II Iniciação ao Código HTML

Inicialmente, vamos conhecer os códigos de marcação da linguagem HTML. Estas marcações são elementos que definem a estrutura da página, pois a representação “tag” que jamais poderá ter erro e é determinada pelos caracteres “”.

Você abre a tag com o sinal de “menor” e fecha com o sinal de “maior”.

Por exemplo, para criar um título da página você deve proceder Assim:

Meu Primeiro Exemplo .

OBS. Importante frisar: os buscadores, como Google, utilize o título da página como fonte de pesquisa.

Iniciação ao Código HTML

Mas onde devo digitar esse código? No momento não se preocupe.

Embora, posso adiantar que você irá inserir esse código dentro da tag e , somente mais adiante durante alguns exercícios práticos vamos entrar nesses detalhes.

Você percebeu a marcação da tag inicial é a mesma final, mas a final está precedida da “/” barra. Portanto, você finaliza a marcação utilizando o símbolo barra.

Há casos em que não será necessário finalizar com a “/”, mas disso falaremos depois quando for o momento oportuno.

Isso será estudado detalhadamente em cada codificação. Como também você irá aprender que se abre o parágrafo com

e termina com

É com os parágrafos que você vai determinar se o texto será justificado, centralizado, alinhado à esquerda ou à direita. A própria página você abre com e conclui com .

Os elementos de uma tag podem conter propriedades associadas a ela que denominamos como atributos que modificam muito o resultado. Mas isso veremos mais adiante. Veja no slide seguinte esta estrutura, simples, mas suficiente o bastante para a exibição de uma página Web.

Iniciação ao Código HTML

Iniciação ao Código HTML

Obs.: Digite esta estrutura no Bloco de Notas e arquive em seu computador na pasta LIVROHTML.

Todo o documento HTML, bom que se diga, é delimitado pelo próprio elemento HTML, ou seja, compõe a tag inicial e final da página web, conteúdo da página . Lembrando que você pode construir suas páginas usando o Bloco de Notas, e foi exatamente isso que fizemos neste exemplo.

Se você abrir esta página pelo navegador Internet Explorer, você verá uma página em branco. Pois, criou-se uma estrutura, mas ainda não foi inserida nenhuma informação. Informação esta que deverá ser inserido dentro da tag e .

CAPÍTULO III Estrutura Básica do HTML