HTML e CSS: Criação de Páginas Web

Este documento descreve como manipular as linguagens HTML e CSS para criar páginas web. Ele explica as principais tags HTML e como estruturar o conteúdo de uma página. O documento, em seguida, descreve a linguagem CSS e como usá-la para formatar o conteúdo. Por fim, apresenta as etapas para criar sua própria página web.

Traduzido por

ScribdTranslations

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

4 visualizações6 páginas

HTML e CSS: Criação de Páginas Web

Traduzido por

ScribdTranslations

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Manipular as linguagens HTML e CSS SNT Segunda

1 Linguagem HTML
As linguagens HTML e CSS permitem, respectivamente, gerenciar o fundo e a forma das páginas web. Os
navegadores web são encarregados de interpretar essas linguagens para exibir os resultados das páginas web tais como
nós os conhecemos. Esses idiomas são normalizados peloW3C(Consórcio World Wide Web)
A linguagem HTML (HyperText Markup Language) utiliza etiquetas para estruturar o conteúdo de uma
página web.

É necessário respeitar certas regras de sintaxe para usar bem essas tags. Na prática, os navegadores são
relativamente flexíveis e toleram alguns erros.

Regra Exemplo

Uma tag de abertura = uma tag de fechamento <h1> ... </h1>

Certas tags têm atributos para especificar

sua ação <imgsrc=[Link]"/>

As tags podem se aninhar umas nas outras. É <ul>

recomendado indentar as tags "filho" para garantir <li> ... </li>
dar a estrutura visualmente </ul>

Uma etiqueta especial permite adicionar comentários

tarefas que não serão exibidas pelo navegador 
Aqui está uma tabela das principais tags HTML e as renderizações associadas do navegador:
2 Linguagem CSS
A linguagem CSS permite garantir a formatação dos dados estruturados pela linguagem HTML.
[Link]ê uma boa visão geral de uma página web HTML sozinha e da mesma página com
uma formatação CSS :

Uma folha de estilo CSS é composta por um conjunto de declarações e pode assumir a seguinte forma:

Os estilos são declarados de acordo com a sintaxe abaixo:

O seletor permite direcionar onde o estilo será aplicado

• A propriedade permite escolher qual propriedade de estilo será modificada
•O valor permite escolher um novo valor para a propriedade
Várias métodos são possíveis para ligar HTML e CSS, mas a separação em 2 arquivos é a mais
reconhecida pois permite separar bem o fundo da forma. A tag<linkpermite, então, fazer a ligação
entre os 2 arquivos.
Podemos ver o efeito de uma mudança de estilo sobre a renderização de uma página da web:

3 Criar sua própria página Web

Nesta atividade, você vai se tornar 'webmaster' e criar uma página da web sobre o tema de sua escolha.
(hobby, paixão, personalidade, filme,. . .). Nós procederemos em várias etapas :
1. Bases do site a partir de um esqueleto HTML
2. Adição de título, texto, lista, tabela, imagens, hiperlinks, vídeo . . . em HTML
3. Formatação com CSS
4. Validation
O site[Link] será um excelente companheiro para a linguagem HTML assim
que o site[Link] le CSS.
Todo o trabalho de entrada será realizado no site Capytale acessível através do ENT (pedir o código de atividade)
ao professor
3.1 Esqueleto HTML
1. O código HTML básico é o seguinte :

Código da página HTML :

<!DOCTYPE html>
<htmllang=fr
<cabeça>
<metacharset=utf-8"/>
<titleAqui o títulotitle>
</cabeça>
<corpo>
Aqui está o corpo da página
</corpo>
</html>

2. A renderização da sua página é visível sob a console de entrada (ajuste possível).

3.2 Remplissage HTML

Usando as tags vistas anteriormente, adicione conteúdo à sua página da web que deverá conter ao
menos
•parágrafos aninhados com títulos de níveis diferentes<h1>, <h2>;
•textos com as etiquetas<p>;
•uma lista de itens com as etiquetas<ul>, <li>;
•uma imagem com a tag<img>;
•um hyperlink com as tags<a>
•uma tabela com as etiquetas<mesa>, <tr>, <td>;
•um vídeo integrado com a tag<iframe>

3.3 Formatação CSS

Sua página da web parece estar bem avançada em termos de conteúdo, você agora irá modificar sua formatação.
em forma usando uma folha de estilo CSS.
1. Crie um arquivo mon_style.css na pasta mon_super_site_web. Edite este arquivo com o Notepad++.
(ou outro editor de texto como o bloco de notas).
2. Usando as noções abordadas anteriormente, faça a ligação entre o arquivo HTML e o arquivo CSS
com a tag <link>, acrescentando no cabeçalho do seu arquivo [Link]:
<linkrel="folha de estilo"tipo="text/css"href="mon_style.css">
3. Por fim, modifique a formatação da sua página de acordo com seus gostos. Aqui estão algumas sugestões possíveis...
•Modifique a cor de fundo do site: propriedadecor de fundoda tag<corpo>
•Modiﬁez la couleur des titres : propriétécorda tag<h1>
•Modifique o alinhamento dos títulos: propriedadealinhamento de textoda etiqueta<h1>
•Modifique a fonte dos parágrafos de texto: propriedadefamília de fontesda tag<p>
•Modifique os marcadores das listas: propriedadetipo-de-estilo-da-lista da tag<ul>
•Modifique a espessura das linhas da tabela: propriedadeborder-width de etiquetas<tabela> <tr>
<td>
3.4 Validação
OW3C(World Wide Web Consortium) disponibiliza para todos os desenvolvedores web uma ferramenta em
linha que permite verificar se o código HTML e CSS está bem escrito e em conformidade com as regras.
Baixe sua página da web e teste-a usando a aba "Validar por upload de arquivo":https:
//[Link]/e ao carregar seu arquivo [Link]: