Oi! O meu nome é Danielly, tenho anos e atualmente moro em Portugal.
Estou desenvolvendo esse projeto de acordo com as aulas do curso, e esta é a página principal focada em HTML.
Se precisar quebrar uma linha, como esta quebra,
basta usar br no código onde queira quebrar a linha.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos voluptatum, deleniti corporis dolores iusto molestias sunt facere consequatur quisquam praesentium nihil amet itaque ipsum? Temporibus fugiat sed earum deleniti aspernatur!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur nostrum expedita quod eaque, cumque id nesciunt laudantium repellendus facilis repellat minima optio deserunt at ipsam cum excepturi iste odio harum!
Nesta frase, tem um termo em negrito usando a tag b.
Existe outra forma também em destacar uma palavra ou frase, usando a tag STRONG.
Nesta frase, temos um termo em Itálico usando a tag i.
Nesta frase, temos um termo em enfase usando a tag EM.
Nesta frase, temos um termo marcado usando um marcador de texto com a tag mark.
Nesta frase, temos um termo marcado usando um marcador de texto com a tag mark, porém alterando a cor do marcador para verde usando CSS.
Podemos marcar um texto excluído para indicar que ele deve ser lido, mas não considerado, usando a tag del.
Também podemos marcar um texto inserido para dar uma enfase e indicar que ele foi selecionado depois, usando a tag ins.
Além do inserido, ainda existe o texto sublinhado, porém a tag u já é considerada não semantica pelo HTML.
Para inserir coisas do tipo x ao quadrado, podemos usar a tag sup, deixando uma fórmula de matemática visivelmente melhor, como x 2+ 2.
Agora, para fórmulas como H2O (água), devemos usar a tag sub para deixar o elemento que queremos na parte inferior da palavra, resultando em H 2O.
"O comando document.getElementById('teste') é escrito em linguagem JavaScript".
Pode-se perceber nesta frase que o comando está um pouco confuso de ser lido porque a fonte atual não é mono espaçada, ela não reserva o mesmo espaço para todas as letras. Se quisermos consertar isso, uma das maneiras é usando a tag code:
Não Mono Espaçada: document.getElementById('teste')
Mono Espaçada: document.getElementById('teste')
Se eu quisermos ter quebras de linhas em um texto ou até mesmo mostrar um comando de programação, devemos usar a tag PRE.
Sem tag PRE:
num = int(input('Digite um número')) if num % 2 == 0: print(f'O número {num} é PAR') else: print(f'O número é IMPAR') print('Fim do programa')
O código acima é um comando de linguagem Python escrito no VS Code, porém no HTML não mostra as quebras de linhas como um código de programação bem formatado.
Com tag PRE + CODE:
num = int(input('Digite um número'))
if num % 2 == 0:
print(f'O número {num} é PAR')
else:
print(f'O número é IMPAR')
print('Fim do programa')
Como podemos ver acima, o código está limpo, pois foi usada a tag code para dar o mesmo espaço para todas as letras e ser mais fácil de ser lido, além da tag pre, que deixou a formatação exatamente igual como foi digitado no VS Code.
Como diria o meu pai: o computador é um burro muito rápido!
Aqui estamos usando a tag Q de quote, que significa citação. Ela cria as aspas no texto escrito entre a tag. Mas por que não usar apenas as aspas do teclado? Usar a tag Q é uma boa maneira de dar sentido à frase que foi dita por outra pessoa. Isso pode servir, futuramente, para formatarmos essa frase pelo CSS, por exemplo, dando classe a ela.
Há uma outra forma de usarmos uma citação pelo HTML, a tag blockquote. Ela dará automaticamente um espaço, como se fosse um paragráfo para mostrar que é um texto diferente. E ainda podemos usar dentro da tag, um parametro chamado CITE, onde podemos colocar o link da fonte que tiramos essa citação. Isso apenas serve para que os mecanismos de busca da internet saibam que você usou um texto de referência à essa fonte. Exemplo:
Aqui estou usando a tag blockquote com o parametro cite para colocar o link do site onde eu assistito as minhas aulas de HTML. Visivelmente, isso não mudará nada, mas dentro do código, o link estará aqui.
Estou estudando HTML e CSS. Como você pode ver, ao passar o mouse em cima do HTML e CSS, verá o que a abreviação significa. Isso acontece porque nas abreviações HTML e CSS, usei a tag chamada ABBR. Dentro da tag existe o parametro title, onde podemos escrever o significado delas.
Sabia que também podemos inverter os textos? Pois é. Legal, né
A tag BDO não tem muita utilidade, mas é sempre bom ter em mente que é possível. Dentro da tag, no parametro dir, podemos escolher se o texto vai ser invertido da direita para a esquerda ou ao contrário, escrevendo entre os parenteses, RTL ou LTR, que significa RTL right to left, e LTR left to right. E caso você use o parametro LTR, o texto continuará igual, pois da esquerda para a direito já é a forma normal que escrevemos.
Podemos criar listas apenas usando tags no HTML. Ao invés de inumerá-las manualmente, podemos usar a tag OL, que significa Order List, e dentro dessa tag podemos usar uma outra tag chamada LI, de listas.
O código dela ficará desta forma no VS Code:
< ol >
< li >Acordar< /li>
< li >Tomar café< /li>
< li >Tomar banho< /li>
< li >Escovar os dentes< /li>
< /ol>
Caso seja preciso, posteriormente, colocar uma tarefa no meio desta lista, basta colocar mais uma tag li na posição que deseja, e automaticamente, o HTML corrigirá a numeração da lista.
Importante: O fechamento da LI, no caso o /li>, deixou de ser obrigatório. Então podemos editar a lista, sem precisar fechar a tag em cada tarefa, como foi feito acima. Neste caso, o código ficaria assim:
< ol >
< li >Acordar
< li >Tomar café
< li >Tomar banho
< li >Escovar os dentes
< /ol>
Bem mais limpo, né?
Agora, se você não quiser usar numeração na lista, basta usar um parametro chamado type, dentro da tag OL. Entre aspas, você pode escolher se quer a lista 1, A, a, I, i. O 1 é a lista numérica, A para lista alfabética com letras maiúsculas, I para lista com números romanos com letras maiúsculas, e a/i para letras minúsculas.
Para listas não ordenadas, devemos usar a tag UL. Dentro da tag, podemos também usar o type para dizer que estilo queremos para a marcação da lista, como DISC (bolinha) que é o padrão, CIRCLE (bolinha vazia) ou SQUARE (quadrado).
Se quisermos usar um tipo de lista dentro de outro tipo de lista, basta usarmos um código dentro de outro código. Exemplo:
Neste caso, temos 3 tags: DL (definition list), DT (definition term), e DD (describe definition). O texto vai se comportar como um dicionário, onde a tag DL iremos usar para definir a lista, sendo a tag maior, e dentro dela iremos usar DT e DD. Exemplo:
< dl>
< dt> Termo < /dt>
< dd> Descrição < /dd>
< /dl>
Na prática:
Existem duas formas de colocar um link no HTML. Uma é simples, usando a tag a, e o usuário ao clicar no link vai ser redirecionado para a página do link. Exemplo:
Você pode acessar o meu repositório público no GitHub!
A outra forma, também se trata da tag a, porém dentro da tag iremos utilizar dois parametros chamados TARGET, e ao usar a tag target, também é bom usar a tag REL external, em seguida. Ao invés do usuário ser redirecionado para outra página, e página do link abrirá em uma nova aba do navegador. Exemplo:
Você também pode acessar o meu perfil no LinkedIn!
Links internos são para abrir páginas dentro do próprio site. Basta usar a tag a, e na referência colocar o nome do arquivo HTML, onde se encontra essa segunda página. Porém, para funcionar, a segunda página deve estar na mesma pasta que o arquivo index.html, senão, não funciona.
Também é bom usar o parametro REL como next, neste caso em que estamos querendo avançar para uma próxima página.
Como por exemplo, acesse aqui, a segunda página.
E na segunda página, podemos colocar um link para voltar para esta, usando REL como prev.
Para download de arquivos, devemos adicionar os arquivos aqui no VS Code, de preferência, em uma pasta separada, e disponibilizar o link no código usando a tag A com o parametro type"application/pdf ou /zip", e selecionando o arquivo.
Para baixar meu currículo: Arquivo ZIP ou Aquivo PDF