2 - Conceitos Básicos, Listas e Alinhamento - Encontro 1

Resumo
Introdução
Os vídeos 1, 2 e 3 tiveram como temas abordados a estrutura básica do HTML5; a
criação de listas ordenadas e não ordenadas; por fim, a apresentação de algumas tags
para manipular os parágrafos da página. Antes de começar a explicar as etapas do que
fora ensinado, vale ressaltar que a Linguagem de Marcação de Hipertexto (HTML) foi
criada para suprir a necessidade de comunicação por diferentes meios – sendo eles
textos, áudios, imagens, vídeos ou documentos. Com o surgimento do navegador tal
linguagem ganhou forma e atualmente está na versão 5, adquirindo a nomenclatura
HTML5. É importante estudá-la pois tudo que colocamos na web é em html, sendo a
maioria na última versão, na qual será estudada a seguir.
Vídeo 01
Nesta aula fora apresentada a estrutura básica de um site em HTML5. A princípio, foi
indicado o uso do aplicativo Bloco de Notas para o desenvolvimento do código, tendo em
vista que se trata de algo simples.
Para iniciar o código é necessário conter a tag <!doctype html>, esta indica ao browser
que ele deverá interpretar a versão HTML5. Em seguida, para uma melhor organização,
é sugerido que pule algumas linhas e encerre o comando acrescentando uma “/” na frente
do nome do mesmo, assim: </html>.
Dentro do comando citado anteriormente deve ser inserido todo o conteúdo do site.
Primeiramente, definindo o idioma acrescentando a tag <html lang=“pt-br”>, nesse caso, a
língua selecionada foi o português do Brasil, se o idioma fosse o espanhol ele seria
escrito dessa forma <html lang="es"> e em chinês assim <html lang="zh">.
Na criação do cabeçalho adiciona-se <head> para poder definir algumas configurações da
página, como por exemplo, o título da página <title> que aparecerá na aba superior do
navegador. É sempre importante lembrar de fechar as tags para não provocar desordem.
Posteriormente, faz-se a escolha do tipo de grafia, como o idioma selecionado foi o
português a grafia deve ser a UTF-8, por permitir representar qualquer caractere de
qualquer idioma, incluindo a acentuação das palavras. Posto isto, o resultado é <meta
charset=“UTF-8”>. O encerramento do cabeçalho é feito com </head>.
Para escrever o corpo do texto utiliza-se <body>, tudo que for escrito dentro dele estará
visível para o usuário de modo compreensível, ou seja, sem as tags ou qualquer outra
função não familiar. Além disso, para que o desenvolvedor não fique perdido, existe a
opção de comentário, sendo escrita assim . Esta função não é
visível para o usufrutuário.
Ao salvar deve-se inserir o título e acrescentar “index.html” para indicar que essa será a
página principal; sucessivamente, fora recomendado colocar o arquivo em uma pasta
especial juntamente aos demais códigos e imagens referentes ao site que está sendo
criado e, para que tudo ocorra corretamente, selecionar as alternativas “todos os
arquivos” e a grafia “UTF-8”.
Vídeo 02
Neste vídeo fora explicado como criar listas ordenadas (que apresentam uma ordem
lógica, também chamadas de listas numéricas ou lista numeradas) e não ordenadas (que
não apresentam uma ordem lógica).
A lista numerada pode ser organizada por números, letras ou algarismos romanos. Para
iniciá-la é preciso conter a tag <ol> e ao digitar o item é necessário o uso da tag <li>,
dessa maneira, a enumeração começará do número 1 e em algarismos arábicos, que é a
forma padrão. A fim de mudar o tipo de organização utiliza-se <ol type=“a”> para uma lista
alfabética minúscula e <ol type=“A”> para letras maiúsculas. Quando se pretende colocar
algarismos romanos usa-se <ol type=“I”>, assim, será estruturado no modelo maiúsculo e
<ol type=“i”> em minúsculo. Se quiser começar em um certo número emprega-se <ol
type=“tipo desejado” start=“número opcional”>, assim, a lista não começará a contagem
necessariamente no número 1.
Já a lista não ordenada aplica discos, círculos, quadrados ou nenhum tipo de marcação
ao citar os seus itens. Para inseri-la emprega-se <ul> e lista-se o item com <li>, assim,
resultará a forma default disco, que também pode ser escrita como <ul type=“disk”>. Os
círculos são formados a partir da tag <ul type=“circle”>, os quadrados com <ul
type=“square”> e para deixar sem marcação utiliza-se <ul type=“none”>.
Vídeo 03
Esta aula transcorreu com a finalidade de manusear o alinhamento dos parágrafos, títulos
importantes e menos importantes, assim como a quebra de linha.
Para colocar parágrafo usa-se a tag <p>, desse modo, uma linha será saltada e o texto se
alinhará à esquerda, que também pode ser escrito como <p align=“left”>. O alinhamento à
direita é escrito como <p align=“right”>; o centralizado <p align=“center”>; e o justificado
<p align=“justify”>.
Os títulos podem ter diferentes tamanhos de acordo com a sua importância, o <h1>
recebe uma prioridade maior pois os buscadores de conteúdo procuram por ele,
consequentemente, o mesmo só pode ser usado uma vez, tanto que normalmente as
empresas colocam a sua logomarca nele para indicar que este é o assunto principal
daquele site. Os demais vão perdendo a sua importância a medida que o seu número
decresce até atingir o algarismo 6, sendo eles o <h2>, <h3>, <h4>,<h5> e <h6>.
Ao realizar a quebra de linha adiciona-se o <br>, que significa break, ou seja, quebrar.

2 - Conceitos Básicos, Listas e Alinhamento - Encontro 1

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

2 - Conceitos Básicos, Listas e Alinhamento - Encontro 1

Enviado por

Direitos autorais:

Formatos disponíveis

Resumo

Você também pode gostar