Neste primeiro tópico o professor Diogo Mainardes se apresenta, fala sobre como será o curso, faz um resumo de como foram os primeiros computadores, como surgiu a internet e nomes importantes responsáveis por pavimentar a área.
Neste tópico é abordado o conceito de Client e seu funcionamento, o que são e como funcionam os navegadores (browsers), o que são aplicações web e dispositivos móveis.
Neste terceiro tópico o professor Diogo conceitua o que são servers, como funcionam o hardware e software nos servidores, quais são os tipos de servidores, e finaliza falando sobre hospedagem de sites, o seu funcionaento e sua importância.
Neste quarto e último tópico é explicado o que é uma linguagem de programação, como ela funciona do lado client (Client-side) e do lado server (Server-side), e finaliza explicando sobre o que é o HTML (linguagem de marcação), tema do curso.
Neste segundo curso do módulo o professor inicia apresentando como será o curso, explica sobre as ferramentas utilizadas para praticarmos o HTML, o Visual Studio Code, como utilizá-lo, e como funciona a ferramenta "Inspetor de Elementos" utilizada nos navagadores.
Após o preparo do VS Code iniciamos o aprendizado sobre:
<html></html> – Esta tag é o elemento básico da estrutura do HTML. Assim sendo, ela conterá todos os elementos do seu documento. Todo documento HTML deve iniciar e finalizar com essa tag;
<head></head> – Essa tag delimita o cabeçalho do documento. Não possui nenhum valor visível, porém é capaz de transmitir ao navegador diversas informações muito úteis e essenciais a uma boa apresentação do seu documento HTML;
<title></title> – Essa tag define o título da sua página, o nome que aparecerá na sua aba, janela ou guia.
<body></body> – Tag que representa o corpo do documento. Em síntese, é nessa tag que todos os elementos visíveis do seu site devem ser inseridos.
As tags são usadas para informar ao navegador a estrutura do site. Ou seja: quando se escreve um código em HTML, as tags serão interpretadas pelo navegador, produzindo assim a estrutura e o conteúdo visual da página.Exemplos:
<i></i> – Transforma o conteúdo em itálico;
<strong></Strong> – Transforma o conteúdo em negrito;
Exemplo de tags sem fechamento
<input type=”text”> – Define um campo que receberá qualquer caractere;
<img> - utilizada para inserção de imagem;
Atributos são propriedades das tags, alguns exemplos:
-
id=”…“– Atribui um id ao elemento (um id deve ser único, ou seja atribuído a um único elemento); -
style=”…”– Permite incluir elementos CSS (estilos) dentro da tag; -
class=”…“– Atribui uma classe ao elemento (uma classe pode ser utilizada para um ou mais elementos); -
<input type=”text”>– Define um campo que receberá qualquer caractere; -
<input type=”number”>- Define um campo que receberá apenas valor numérico; -
<input type=”color”>- Define um campo que receberá uma cor; -
<img src="...">- A partir dessa tag, utilizamos o atributo src=”” onde deve ser digitado o local em que a imagem se encontra. -
<img width="..." src="...">– Define uma largura para a imagem; -
<img height="..." src="...">– Define uma altura para a imagem.
Tags que definem o tamanho do título, sendo <h1> a maior e <h6> a menor:
<h1></h1>-<h2></h2>-<h3></h3>-<h4></h4>-<h5></h5>-<h6></h6>-
-
<blockquote></blockquote>- tag utilizada para citação em um texto; -
<mark></mark>- tag que define o texto que deve ser marcado ou destacado. -
<hr>- tag define uma quebra temática em uma página HTML (por exemplo, uma mudança de tópico). -
<sub></sub>- tag define o texto subscrito. O texto subscrito aparece meio caractere abaixo da linha normal e, às vezes, é renderizado em uma fonte menor. O texto subscrito pode ser usado para fórmulas químicas, como H2O. -
<sup></sup>- tag define o texto sobrescrito. O texto sobrescrito aparece meio caractere acima da linha normal e, às vezes, é renderizado em uma fonte menor. O texto sobrescrito pode ser usado para notas de rodapé, como WWW[1]. -
<small></small>- tag define um texto menor (como direitos autorais e outros comentários laterais).
-
<ol></ol>- define uma lista ordenada -
<ul></ul>- define uma lista não-ordenada -
<li></li>- define um item de lista
-
<nav></nav>– Essa tag define um conteúdo de navegação. Portanto, é muito utilizado em conjunto com listas e na criação de menus; -
<a href="url">Exemplo</a>- No HTML, os links são definidos pela tag . Dentro dessa tag incluímos o atributo href (Hypertext Reference), que é o endereço de destino do link. Dentro do conteúdo da tag , incluímos então o texto ou elemento que servirá como redirecionador, ou seja, que ao ser clicado, executará a função de redirecionar para o endereço dentro do atributo href.
Atributo Target
Assim como o href, também podemos incluir o atributo target dentro da tag ,que informa ao navegador como o redirecionamento deverá ocorrer, abrindo a página na mesma janela/aba do navegador ou abrindo uma nova janela/aba.
_blank- abre a página em uma nova janela/aba;_self- abre a página na mesma janela;
-
<font>- define o tamanho da fonte e a cor do texto; -
<del></del>- define o texto que foi excluído de um documento. Os navegadores geralmente traçam uma linha através do texto excluído; -
<p></p>- define um parágrafo; -
<abbr></abbr>- tag define uma abreviação ou um acrônimo.