Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Universidade Buscapé Company

Curso Online ao Vivo - Primeiros

Passos na Web com HTML e CSS -

Aprenda Boas Práticas

PROFº GUSTAVO ROMA

PROFº GUSTAVO ROMA

Estrutura básica do HTML

O que é HTML?

HTML (abreviação para a expressão inglesa

HyperText Markup Language, que significa

Linguagem de Marcação de Hipertexto) é uma

linguagem de marcação utilizada para produzir

páginas na Web. Documentos HTML podem ser

interpretados por navegadores. Exemplo: Mozilla

Firefox, Google Chrome etc.

PROFº GUSTAVO ROMA


VERSÕES

A primeira linha do documento HTML, deve ser a declaração do

Doctype. Ele é responsável por informar ao navegador, qual a versão

do HTML utilizado.

Apesar da versão mais recente ser o HTML5, a mais utilizada,

continua sendo a HTML4.0.1, pois os navegadores antigos (ex:

internet explorer 8 ou inferior), não renderizam as novas tags do

HTML5.

Exemplo do doctype HTML4.0.1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Exemplo do doctype HTML5

<!DOCTYPE html>

http://www.w3.org/TR/html4/loose.dtd

PROFº GUSTAVO ROMA


EDITOR

Editor HTML ou editor Web é um software para a criação de páginas web

utilizando a linguagem de marcação HTML. Embora a edição em linguagem

HTML de uma página web possa ser feita com qualquer editor de texto, editores

HTML específicos oferecem vários recursos extras para auxiliar na criação de

páginas, além disso, acrescentam outras funcionalidades, e muitos dão a opção

de visualização do projeto, tanto em linhas de código HTML quanto o resultado

delas no design da página. Editores são ótimas ferramentas para

desenvolvedores e demais profissionais de sistemas para internet, visto que

lhes poupam trabalhos pequenos, mas que consomem muito tempo, e assim

permitem que o foco seja desviado para detalhes mais importantes.

Editor aconselhado: Sublime Text

http://www.sublimetext.com

PROFº GUSTAVO ROMA


VERSÕES

A primeira linha do documento HTML, deve ser a declaração do

Doctype. Ele é responsável por informar ao navegador, qual a versão

do HTML utilizado.

Apesar da versão mais recente ser o HTML5, a mais utilizada,

continua sendo a HTML4.0.1, pois os navegadores antigos (ex:

internet explorer 8 ou inferior), não renderizam as novas tags do

HTML5.

Exemplo do doctype HTML4.0.1



Exemplo do doctype HTML5

<!DOCTYPE html>

http://www.w3.org/TR/html4/loose.dtd

PROFº GUSTAVO ROMA


TAGS

Tags são rótulos usados para informar ao navegador como deve ser

apresentado o website.

Todas as tags têm o mesmo formato: começam com um sinal de

menor "<" e acabam com um sinal de maior ">".

Exemplo:

<title>Este texto é o título da página</title>

<strong>Este texto deve ser em negrito.</strong>

<em>Este texto deve ser em itálico.</em>

<p>Este texto é um parágrafo.</p>

<h1>Este é um título</h1>

<h2>Este é um sub título</h2>

PROFº GUSTAVO ROMA


Exemplo básico HTML5

<!DOCTYPE html>

<html lang="pt-br">

<head>

<meta charset="UTF-8">

<title>Título da Página</title>

</head>

<body>



<p>Aqui o texto de um parágrafo</p>

</body>

</html>

PROFº GUSTAVO ROMA


Exemplo básico HTML4.0.1



<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-

8">

<title>Título da Página</title>

</head>

<body>



<p>Aqui o texto de um parágrafo</p>

</body>

</html>

PROFº GUSTAVO ROMA


Metatag Charset

No nosso exemplo há uma metatag responsável por chavear qual

tabela de caractéres a página está utilizando.

No HTML5:

<meta charset="utf-8">

Nas versões anteriores ao HTML5, essa tag era escrita da forma

abaixo:

<meta http-equiv="Content-Type" content="text/html; charset=utf-

8">

Essa forma antiga será também suportada no HTML5. Contudo, é

melhor que você utilize a nova forma.

PROFº GUSTAVO ROMA


Inserindo uma imagem

A tag utilizada para se inserir imagens é a tag <img />, que pode ser

aberta e fechada no mesmo bloco da tag. Também precisamos

informar o endereço da imagem ao navegador então para isso

utilizaremos o comando src.

Exemplo:

<img src="link_da_imagem"/>

É importante observarmos que o link da imagem deve sempre terminar

com o nome da imagem, ponto (.) a extensão do tipo da imagem. E se

a imagem está em uma pasta no mesmo diretório do documento

HTML, devemos colocar o nome da pasta seguido de barra (/), antes

do nome da imagem.

Exemplo:

<img src="minha_pasta/minha_imagem.png"/>

PROFº GUSTAVO ROMA


Lista não ordenada

Uma lista não ordenada é muito utilizada para construir menu de um

site.

Para criar uma lista não ordenada usa-se a tag <ul>. Dentro desse

elemento os vários itens são criados com outra tag <li>.

Esta é a codificação:

<ul>

<li>Menu 1</li>

<li>Menu 2</li>

</ul>

É importante notar que dentro de uma lista não ordenada podemos

colocar parágrafos, quebras de linha, imagens, outras listas, etc...

PROFº GUSTAVO ROMA


O que é <div>

Os elementos div e span foram criados com o HTML 4

com a finalidade de fornecer um mecanismo genérico

para agrupar e prover estrutura aos documentos. O

elemento div é um container nível de bloco e span é um

elemento inline. Uma id e/ou class é em geral usada para

fornecer uma identidade a uma div ou span com o

propósito de fornecer uma referência para estilização por

CSS ou captura por um script.

Exemplo:

<div id=”header” class=”textopadrao”>...</div>

PROFº GUSTAVO ROMA


O que é CSS?

CSS é a abreviatura para Cascading Style Sheets - Folha de

Estilos em Cascata

CSS é uma linguagem para estilos que define o layout de documentos

HTML. Por exemplo, CSS controla fontes, cores, margens, linhas,

alturas, larguras, imagens de fundo, posicionamentos e muito mais.

HTML é usado para definir a estrutura do website. Contudo, o CSS

proporciona mais opções e é mais preciso e sofisticado. CSS é

suportado por todos os navegadores atuais.

Conclusão: HTML é usado para estruturar conteúdos. CSS é usado

para formatar conteúdos estruturados.

PROFº GUSTAVO ROMA


Dica:

Não caia na armadilha de construir todo o layout e depois testar, pois você poderá

constatar uma quebra de layout difícil de detectar devido a grande quantidade de

código. Construa em passos pequenos e teste cada passo em diferentes

navegadores. Assim fazendo você irá detectar eventuais problemas com o layout

tão logo eles apareçam, tornando a correção mais fácil.

Valide com freqüência seu HTML e CSS. Muitos problemas com layouts podem ser

corrigidos com auxílio dos relatórios do validador.

W3C - World Wide Web Consortium é o órgão superior de codificação web.

Como padrão da vida, tudo tem regras, certo? Pois é, a web também. Fazer sites

não é somente desenhar e codificar, tem uma serie de padrões a serem seguidos.

Padrões estes que são organizado pela W3C.

Validador W3C: http://validator.w3.org/

PROFº GUSTAVO ROMA


COMENTÁRIO

Os comentários em HTML são muito fáceis de inserir. É como uma etiqueta que tem

um início e um fim. Todo o texto que colocar dentro está comentado, ou seja, não

aparecerá na página. Dentro de um comentário pode colocar o texto ou código

HTML, como etiquetas.

O comentário começa por  Tudo o que colocar entre essas

etiquetas está comentado.

Exemplo:

<div id="header">

<ul class="menu">

<li class="item">Menu</li>

<li class="item">Menu</li>

</ul>

</div><!-- fim header →

Comentário é muito importante para organização do código.

PROFº GUSTAVO ROMA


O que é CSS?

CSS é a abreviatura para Cascading Style Sheets - Folha de

Estilos em Cascata

CSS é uma linguagem para estilos que define o layout de documentos

HTML. Por exemplo, CSS controla fontes, cores, margens, linhas,

alturas, larguras, imagens de fundo, posicionamentos e muito mais.

HTML é usado para definir a estrutura do website. Contudo, o CSS

proporciona mais opções e é mais preciso e sofisticado. CSS é

suportado por todos os navegadores atuais.

Conclusão: HTML é usado para estruturar conteúdos. CSS é usado

para formatar conteúdos estruturados.

PROFº GUSTAVO ROMA


Definindo o CSS:

Os containers do layout devem ser posicionados com uso dos métodos

CSS de posicionamento. Para isso vamos definir regras de estilo no

CSS.

<style type=”text/css”>

body{

...

}

#container{

...

}

#header{

...

}

#footer{

...

}

</style>

PROFº GUSTAVO ROMA


Definindo o atributos no CSS:

Vamos definir uma fonte, tamanho, cor e background na tag body:

body{

font-family: Arial, Verdana;

font-color: #000;

font-size: 12px;

background-color: #f2f2f2;

}

Atributo font-family, define a família de fontes utilizadas.

Atributo font-color, define a cor da fonte.

Atributo font-size, define o tamanho da fonte.

Atributo background-color, define a cor do plano de fundo do site.

PROFº GUSTAVO ROMA


Definindo o atributos no CSS:

Vamos definir uma largura,altura e uma borda em uma <div>

#header{

width: 980px;

height: 200px;

border: 1px solid #ccc;

}

Atributo width, define a largura da <div> com id header

Atributo height, define a altura da <div> com id header

Atributo border, define a borda com espessura de 1 pixel sólida com cor

cinza claro da <div> com id header

PROFº GUSTAVO ROMA


Definindo link tag <a> e <link>: Há dois tipos de links no HTML: a tag <a>, que são links que levam o usuário para outros

documentos e a tag <link>, que são links para fontes externas que serão usadas no documento.

Exemplo link tag <a>:

<a>Link</link>

Exemplo link tag <a> com atributo href:

<a href=”http://www.google.com”>Link</a>

Exemplo link tag <a> com atributo target_blank, o mesmo ao clicar, vai abrir outra janela do

navegador:

<a href=”http://www.google.com” target=”_blank”>Link</a>

Exemplo arquivo tag <link>:

<link rel="stylesheet" type="text/css" href="css/style.css" />

O atributo rel="stylesheet" indica que aquele link é relativo a importação de um arquivo referente a

folhas de estilo css.

http://www.google.com/

http://www.google.com/

PROFº GUSTAVO ROMA


Definindo link mailto tag <a> Mailto é uma forma de inserir no HTML um link para algum endereço de email. Desta forma, o

usuário tem a possibilidade de enviar uma mensagem para este email apenas clicando no link

gerado. Veja no exemplo abaixo:

<a href=”mailto:[email protected]”>[email protected]</a>

Quando o usuário clica sobre o link de um endereço de email, automaticamente abre-se uma

janela de seu aplicativo de email padrão para criação de uma nova mensagem, que já estará

com o campo do destinatário preenchido com aquele endereço.

É possível também adicionar um parâmetro ao valor do mailto no HTML que irá sugerir um

Subject para a nova mensagem aberta. Assim, na janela de criação da nova mensagem, o

usuário poderá ver que o Subject também já estará preenchido.

<a

href=”mailto:[email protected]?subject=AssuntoEmail”>[email protected]

</a>

mailto:[email protected]

mailto:[email protected]?subject=Assunto

OBRIGADO!

CONTATOS PROFITE

SP: (11) 2503-1012

WWW.PROFITE.COM.BR

PROFESSOR GUSTAVO ROMA

RIO: (21) 2522-0121

[email protected]

COORDENADOR CLAUDIO MACEDO

RIO: (21) 2522-0121

[email protected]

Education

Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Universidade Buscapé Company