Uma introdução às tecnologias e conceitos básicos do desenvolvimento web, incluindo a estrutura html, a utilização de tags, a definição de títulos, parágrafos e listas, bem como a integração de css para estilização. O documento aborda tópicos como a declaração da estrutura html, a definição de títulos e parágrafos, a criação de listas ordenadas e não ordenadas, a inserção de imagens e a aplicação de estilos css, tanto inline quanto em arquivos externos. Essa introdução fornece uma base sólida para o aprendizado de programação web, abordando os elementos fundamentais necessários para a construção de páginas web.
Baixe Aulas de Programação Web e outras Esquemas em PDF para Programação em C, somente na Docsity!
LARSEN MENDONÇACont: 844802318/
Aula 1
1.1.A ESTRUTURA DOS ARQUIVOS DE UM PROJETO
Como todo tipo de projeto de software, existem algumas recomendações quanto à organização dos arquivos de um site. Não há nenhum rigor técnico quanto a essa organização e, na maioria das vezes, você vai adaptar as recomendações da maneira que for melhor para o seu projeto.
Como um site é um conjunto de páginas Web sobre um assunto, empresa, produto ou qualquer outra coisa, é comum todos os arquivos de um site estarem dentro de uma só pasta e, assim como um livro, é recomendado que exista uma "capa", uma página inicial que possa indicar para o visitante quais são as outras páginas que fazem parte desse projeto e como ele pode acessá-las, como se fosse o índice do site.
Ter esse índice, não por coincidência, é uma convenção adotada pelos servidores de páginas Web. Se desejamos que uma determinada pasta seja servida como um site e dentro dessa pasta existe um arquivo chamado index.html, e sse arquivo será a página inicial, ou seja o índice, a menos que alguma configuração determine outra página para esse fim.
Dentro da pasta do site, no mesmo nível que o index.html , é recomendado que sejam criadas mais algumas pastas para manter separados os arquivos de imagens, as folhas de estilo e os scripts. Para iniciar um projeto, teríamos uma estrutura de pastas como a demonstrada na imagem a seguir:
LARSEN MENDONÇACont: 844802318/
1.2 EDITORES E IDES
Os editores de texto são programas de computador leves e ideais para escrever e editar as páginas de um site, como Visual Studio Code (https://code.visualstudio.com/), Sublimetext (https://www.sublimetext.com/), Atom (https://atom.io/) e Notepad++ (https://notepad-plus- plus.org), que possuem realce de sintaxe e outras ferramentas para facilitar o desenvolvimento de páginas.
Aula 2
INTRODUÇÃO AO HTML
O HTML (Hypertext Markup Language) ou linguagem de marcação de hipertexto foi desenvolvido para suprir a necessidade exibição de documentos científicos fornecidos por uma rede de Internet.
SINTAXE DO HTML
O HTML é um conjunto de tags responsáveis pela marcação do conteúdo de uma página no navegador.
Tag é uma especie de marcacao, e é com elas que definimos todo arquivo HTML, como por exemplo: (tabelas, imagens, textos, etc.).
Uma tag possue atributos , atributos é o que desejamos fazer com o que esta sendo colocado, isto é, a formatacao que vai ser feita no que esta sendo colocado na tag.
Exemplo:
Unitec
.
Note a sintaxe. Uma tag é definida com caracteres < e >, e seu nome ( h1 no caso). Muitas tags possuem conteúdo, como o texto do título ("Unitec"). Nesse caso, para determinar onde o conteúdo acaba, usamos uma tag de fechamento com a barra antes do nome: .
Algumas tags podem receber algum tipo de informação extra dentro de sua definição chamada de atributo. São parâmetros usando a sintaxe de atributo="valor". Para definir uma imagem, por exemplo, usamos a tag e, para indicar o caminho que está essa imagem, usamos o atributo src: <img src=”o caminho da imagem”>
LARSEN MENDONÇACont: 844802318/
Outra configuração muito importante, principalmente em documentos HTML cujo conteúdo é escrito em um idioma como o português, que contém caracteres "especiais" (acentos e cedilha), é a codificação/conjunto de caracteres, chamada de encoding ou charset. Podemos configurar qual codificação queremos utilizar em nosso documento por meio da configuração de charset na tag . Um dos valores mais comuns usados hoje em dia é o UTF-8 , também chamado de Unicode. Há outras possibilidades, como o latin1, muito usado antigamente.
O UTF-8 é a recomendação atual para encoding na Web por ser amplamente suportada em navegadores e editores de código, além de ser compatível com praticamente todos os idiomas do mundo. É o que usaremos no curso. Exemplo:
escreva o titolo <meta charset=” UTF-8”/>
A TAG
A tag contém o corpo de um documento HTML, que é exibido pelo navegador em sua janela, ou seja, todo o conteúdo visível do site. É necessário que o tenha ao menos um elemento "filho", ou seja, uma ou mais tags HTML dentro dele. Exemple:
escreva o titolo < meta charset=” UTF-8”/>
LARSEN MENDONÇACont: 844802318/
A tag h1 e todo as outros tags dentro do h1, sao desegnadas tags filhas do body.
A INSTRUÇÃO DOCTYPE O DOCTYPE não é uma tag HTML, mas uma instrução especial. Ela indica para o navegador qual versão do HTML deve ser utilizada para exibir a página. Quando não colocamos essa instrução a página é exibida numa espécie de "modo de compatibilidade" na qual algumas tags e estilizações não funcionam 100% corretamente. Principalmente as tags e estilizações mais atuais (lançadas na versão 5 do HTML). Inclusive é possível ver a diferença na folha de estilos padrão que o navegador usa quando não colocamos essa instrução.
. . escreva o titolo < meta charset=” UTF-8”/>
A tag h1 e todo as outros tags dentro do h1, sao desegnadas tags filhas do body.
EXERCICIOS TEORICOS.
LARSEN MENDONÇACont: 844802318/
. link href=”call.png” rel=” icon”/> < meta charset=” UTF-8”/>
MARCAÇÕES DE ÊNFASE
Quando queremos dar uma ênfase diferente a um trecho de texto, podemos utilizar as marcações de ênfase. Podemos deixar um texto "mais forte" com a tag ou deixar o texto com uma "ênfase acentuada" com a tag . Do mesmo jeito que a tagdeixa a tag "mais forte", temos também a tag, que diminui o "peso" do texto.
Por padrão, os navegadores exibem o texto dentro da tagem negrito e o texto dentro da tag <em>em itálico. Existem ainda as tagse, que atingem o mesmo resultado visualmente, mas as tagsesão mais indicadas por definirem nossa intenção de significado ao conteúdo, mais do que uma simples indicação visual. Vamos discutir melhor a questão do significado das tags mais adiante.
Exemplo:
. Lista dos Contactos
LARSEN MENDONÇACont: 844802318/
<link href=”call.png” rel=” icon”/> < meta charset=” UTF-8”/>
Aprenda de um jeito rápido e barato na **** Unitec **** **EXIBINDO TITOLOS, PARAGRAFOS E QUEBRA DE LINHAS EM HTML.**
Títulos
Quando queremos indicar que um texto é um título em nossa página, utilizamos as tags de heading em sua marcação.
As tags de heading são para exibir conteúdo de texto e contém 6 níveis, ou seja de
à
, seguindo uma ordem de importância, sendo que
o título principal, o mais importante, e
, o título de menor importância.
Utilizamos, por exemplo, a tag
, para o nome, título principal da página, e a tag
como subtítulo ou como título de seções dentro do documento.
Exemplo:
Objectivos
Objectivo Geral
Aprender a usar as tecnologias do desenvolvimento web
Objectivos Especificos
Parágrafos
Quando exibimos qualquer texto em nossa página, é recomendado que ele seja sempre conteúdo de alguma tag filha da tag
, A marcação mais indicada para textos comuns é a tag de parágrafo:
Aprender a usar as tecnologias do desenvolvimento web
Se você tiver vários parágrafos de texto, use várias dessas tags
, para separá-los:
LARSEN MENDONÇACont: 844802318/
Difinir desenvolvimento Web
Tecnologias usadas para o desenvolvimento web
Difinicao do HTML
Sintaxe do HTML
Definicao do CSS
LISTAS ORDENADAS As listas ordenadas (ordered list) também podem ter sua estrutura composta por outras listas ordenadas como no exemplo que temos para as listas não-ordenadas. Também é possível ter listas ordenadas aninhadas em um item de uma lista não-ordenada e vice-versa. Exemplo:
Difinir desenvolvimento Web
Tecnologias usadas para o desenvolvimento web
Difinicao do HTML
Sintaxe do HTML
Definicao do CSS
CORRA O SEGUNTE CODIGO.
. Lista dos Contactos <link href=”call.png” rel=” icon”/> < meta charset=” UTF-8”/>
LARSEN MENDONÇACont: 844802318/
**Listas** não **ordenadas**
Difinir desenvolvimento Web
Tecnologias usadas para o desenvolvimento web
Difinicao do HTML
Sintaxe do HTML
Definicao do CSS
Listas ordenadas
Difinir desenvolvimento Web
Tecnologias usadas para o desenvolvimento web
Difinicao do HTML
Sintaxe do HTML
Definicao do CSS
LISTAS DE DEFINIÇÃO
Existe um terceiro tipo de lista que devemos utilizar para demarcar um glossário, quando listamos termos e seus significados. Essa lista é a lista de definição (definition list).
Exemplo:
HTML
HTML é a linguagem de marcação de textos utilizada para exibir textos como páginas na Internet.
Navegador
Navegador é o software que requisita um documento HTML através do protocolo HTTP e exibe seu conteúdo em uma janela.
LARSEN MENDONÇACont: 844802318/
com uma das companhias aéreas mais seguras do mundo. Dê uma vista de olhos à nossa infografia para ver todas as medidas que implementámos para o manter seguro e protegido quando viajar connosco.
Menu principal
Contactos
Plano de voo
Estadias
Sobre
CSS Interno
O CSS interno ou incorporado requer o uso da tag style na seccao do head do se u documento html.
CSS inline
O CSS inline consiste no uso do atributo style dentro da tag que se pretende estil izar
CSS externo
o CSS externo consiste e um documento fora do documento HTML, com a inste nçao .css
ESTILIZANDO COM CSS
CSS (Cascading Style Sheet ou folha de estilos em cascata), que é uma outra linguagem, separada do HTML, com objetivo único de cuidar da estilização da página. A vantagem é que o CSS é bem mais robusto que o HTML para estilização, como veremos. Mas, principalmente, escrever formatação visual misturado com conteúdo de texto no HTML se mostrou algo
LARSEN MENDONÇACont: 844802318/
impraticável. O CSS resolve isso separando as coisas; regras de estilo não aparecem mais no HTML, apenas no CSS.
SINTAXE E INCLUSÃO DE CSS
A sintaxe do CSS tem estrutura simples: é uma declaração de propriedades e valores separados por um sinal de dois pontos ":", e cada propriedade é separada por um sinal de ponto e vírgula ";" da seguinte maneira:
color: blue;
background-color: yellow;
O elemento que receber essas propriedades será exibido com o texto na cor azul e com o fundo amarelo. Essas propriedades podem ser declaradas de três maneiras diferentes.
Atributo style (CSS INLINE)
A primeira delas é com o atributo style no próprio elemento:
O conteúdo desta tag será exibido em azul com fundo amarelo no navegador!
A tag style A outra maneira de se utilizar o CSS é declarando suas propriedades dentro de uma tag **Exemplo mais generico**
LARSEN MENDONÇACont: 844802318/
No exemplo abaixo, em ambos os casos, trabalhamos com a propriedade text , que estiliza a aparência do texto do seletor informado. Podemos especificar quais propriedades específicas do texto queremos modificar, no caso text-align o alinhamento do texto, e com text- decoration colocamos o efeito de sublinhado. p { text-align: center; text-decoration: underline; } Exemplo mais generico
Contactos
O conteúdo desta tag será exibido em azul com fundo amarelo!
Também será exibido em azul co m fundo amarelo!
Arquivo externo (CSS externo)
A terceira maneira de declararmos os estilos do nosso documento é com um arquivo externo com a extensão .css. Para que seja possível declarar nosso CSS em um arquivo à parte, precisamos indicar em nosso documento HTML uma ligação entre ele e a folha de estilo (arquivo com a extensão .css ).
LARSEN MENDONÇACont: 844802318/
Além da melhor organização do projeto, a folha de estilo externa traz ainda as vantagens de manter nosso HTML mais limpo e do reaproveitamento de uma mesma folha de estilos para diversos documentos. A indicação de uso de uma folha de estilos externa deve ser feita dentro da tag
de um documento HTML:
Contactos
O conteúdo desta tag será exibido em azul com fundo amarelo!
Também será exibido em azul com fundo amarelo!
E dentro do arquivo estilos.css colocamos apenas o conteúdo do CSS:
p { color: blue; background-color: yellow; } p { text-align: center; text-decoration: underline; }
EXERCICIOS PRATICOS 3
LARSEN MENDONÇACont: 844802318/
Da mesma maneira que alteramos cores, podemos alterar o texto. Podemos definir fontes com o uso da propriedade font-family. A propriedade font-family pode receber seu valor com ou sem aspas dependendo da sua composição, por exemplo, quando uma fonte tem o nome separado por espaço.
Por padrão, os navegadores mais conhecidos exibem texto em um tipo que conhecemos como "serif". As fontes mais conhecidas (e comumente utilizadas como padrão) são "Times" e "Times New Roman", dependendo do sistema operacional. Elas são chamadas de fontes serifadas pelos pequenos ornamentos em suas terminações.
Podemos alterar a família de fontes que queremos utilizar em nosso documento para a família "sansserif" (sem serifas), que contém, por exemplo, as fontes "Arial" e "Helvetica". Podemos também declarar que queremos utilizar uma família de fontes "monospace" como, por exemplo, a fonte "Courier". Obs: Fontes monospace podem ser tanto com serifa ou sem serifa. Monospace quer dizer apenas que todas as letras possuem o mesmo tamanho.
No caso abaixo, o navegador verificará se a fonte "Helvetica" está disponível e a utilizará para exibir os textos de todos os elementos do nosso documento que, por cascata, herdarão essa propriedade do elemento body. Caso a fonte "Helvetica" não esteja disponível, o navegador verificará a disponibilidade da próxima fonte declarada, no nosso exemplo a "Lucida Grande". Caso o navegador não encontre também essa fonte, ele solicita qualquer fonte que pertença à família "sans-serif", declarada logo a seguir, e a utiliza para exibir o texto, não importa qual seja ela. body { font-family: "Helvetica", "Lucida Grande", sans-serif;
LARSEN MENDONÇACont: 844802318/
Temos outras propriedades para manipular a fonte, como a propriedade font-style , que define o estilo da fonte que pode ser: normal (normal na vertical), italic (inclinada) e oblique (oblíqua).
ALINHAMENTO E DECORAÇÃO DE TEXTO
Já vimos uma série de propriedades e subpropriedades que determinam o tipo e estilo da fonte. Vamos conhecer algumas maneiras de alterarmos as disposições dos textos. No exemplo a seguir vamos mudar o alinhamento do texto com a propriedade text-align.
p { text-align: right; } O exemplo determina que todos os parágrafos da nossa página tenham o texto alinhado para a direita. Também é possível determinar que um elemento tenha seu conteúdo alinhado ao centro ao definirmos o valor center para a propriedade text-align , ou então definir que o texto deve ocupar toda a largura do elemento aumentando o espaçamento entre as palavras com o valor justify. Por padrão o texto é alinhado à esquerda, com o valor left , porém é importante lembrar que essa propriedade propaga-se em cascata.
É possível configurar também uma série de espaçamentos de texto com o CSS:
p { line-height: 3px; /* tamanho da altura de cada linha / letter-spacing: 3px; / tamanho do espaço entre cada letra / word-spacing: 5px; / tamanho do espaço entre cada palavra / text-indent: 30px; / tamanho da margem da primeira linha do texto */ }
IMAGEM DE FUNDO
A propriedade background-image permite indicar um arquivo de imagem para ser exibido ao fundo do elemento. Por exemplo:
h1 { background-image: url(o caminho da imagens/localizacao da foto); }
