Html+css Progressivo

De Francisco J M De Matos

Maior e mais completo material de HTML e CSS do Brasil. Aprenda, do mais absoluto básico, a criar sites profissionais e bem estruturados com este livro sobre HTML e CSS

• Idioma: Português
• Editora: Clube de Autores
• Data de lançamento: 7 de out. de 2019

Pré-visualização do livro

1

Índice

Introdução ao estudo do HTML.........................................................................................................14

O que é HTML ? Como criar um site?..........................................................................................15

HTML: Como criar um site......................................................................................................15

Para que serve HTML?.............................................................................................................16

Então, o que é HTML ?.............................................................................................................17

O que é uma linguagem de marcação?......................................................................................17

HTML e XHTML: Qual a diferença ?...........................................................................................18

Mudanças na internet e no HTML............................................................................................19

HTML ainda é importante? É bom estudar HTML?.................................................................20

Que programa se usa para criar sites ?...........................................................................................21

Editores Visuais de HTML........................................................................................................22

Editores de HTML de código....................................................................................................23

Editores de HTML de modo visual e modo code......................................................................24

Qual editor usar para fazer sites.....................................................................................................26

Use editor de HTML no modo código......................................................................................26

Indicação de editores HTML: Bluefish e KompoZer...............................................................27

Outros editores de HTML - Onde baixar..................................................................................28

HTML e CSS – Separando conteúdo da exibição.........................................................................30

Como funciona a dupla HTML e CSS......................................................................................30

CSS: dando estilo ao seu HTML...............................................................................................32

Especificações em HTML e Document Types...............................................................................34

As especificações do HTML.....................................................................................................34

Document Type: ...............................................................................................35

Conceitos Básicos...............................................................................................................................37

Como criar o primeiro site em HTML...........................................................................................38

Como criar o primeiro site em HTML......................................................................................38

Comandos em HTML: quebra de linha
............................................................................39

Exercício: Criando um site em HTML......................................................................................40

O que são tags em HTML - < > e < / >..........................................................................................41

O que é uma tag em HTML......................................................................................................41

Definição das tags em HTML: < > e .................................................................................42

Criando uma linguagem de marcação para explicar Tags.........................................................42

A tag ..............................................................................................................................45

o início de tudo.............................................................................................................45

As tags e o case sensitive..........................................................................................................46

Efeito em HTML, < marquee >: Fazendo um texto rolar na tela..................................................48

Como fazer um texto rolar na tela: .............................................................................48

Atributos de tags............................................................................................................................49

Atributos em tags de HTML.....................................................................................................49

Atributos do efeito ................................................................................................49

Usando mais de um atributo em tags de HTML.......................................................................50

Tags aninhadas e indentação de código HTML.............................................................................52

Tags aninhadas em HTML........................................................................................................52

Indentação de códigos HTML...................................................................................................53

Tags de HTML de mesma hierarquia........................................................................................55

Exercícios de HTML:................................................................................................................55

: a tag cabeça de um site em HTML..................................................................................56

A tag head: o que é e para que serve.........................................................................................56

2

Como usar a tag ..........................................................................................................57

A tag

< title > - O que é um título ?....................................................................................................59

Como criar um bom título para as páginas de seu site..............................................................60

Como usar a tag

As tags description e keywords - Informações sobre seu site..........................................63

As meta tags - Fornecendo informações de seu site.................................................................63

A tag description - Descrevendo o conteúdo do seu site.............................................64

A tag keyword - Definindo as palavras-chaves de seu site..........................................65

A importância das meta-tags para o Google.............................................................................66

< meta > tag refresh - Como redirecionar ou recarregar um site em HTML.................................68

O redirecionamento de sites em HTML....................................................................................68

Como redirecionar usando a meta tag refresh...........................................................................68

Exemplo de redirecionamento em HTML:...............................................................................69

tag - O que é, para que serve e como usar........................................................................71

A tag body - O corpo de um site...............................................................................................71

Como usar e onde colocar a tag ...................................................................................72

Exercício de HTML:.................................................................................................................73

Quais as funções da tag body ?.................................................................................................73

bgcolor - Como mudar a cor de fundo de um site - A tabela de cores...........................................74

As cores em HTML...................................................................................................................74

O atributo bgcolor - Como mudar a cor do plano de fundo (background) de um site..............75

Alterando a cor de fundo usando o nome das cores..................................................................77

Exercício de HTML..................................................................................................................77

Desafio de HTML.....................................................................................................................77

Como criar um Link em HTML: A tag ...................................................................................78

O que é um link em linguagem HTML.....................................................................................78

Para que serve um link..............................................................................................................78

A tag âncora - Como criar um link em HTML..........................................................79

Exemplo de código HTML:......................................................................................................79

Exercício sobre links em HTML:..............................................................................................81

Links internos e Páginas em um mesmo diretório.........................................................................82

Links são endereços, não só de sites da internet.......................................................................82

Páginas HTML em um mesmo diretório...................................................................................82

Exemplos de sites em HTML....................................................................................................83

Ping.html...................................................................................................................................83

Pong.html..................................................................................................................................84

Exercício sobre páginas de um mesmo diretório:.....................................................................84

Exercício 2 de HTML:..............................................................................................................84

Textos em HTML...............................................................................................................................85

Formatação de informações e Webdesign em HTML...................................................................86

A importância do Webdesign para o HTML.............................................................................86

Os segredos de como fazer um site: bom senso e simplicidade................................................87

e

- Quebra de linha e Parágrafos em HTML...............................................................92

Um site não é um editor de texto..............................................................................................92

Quebras de linha em HTML -
........................................................................................95

Parágrafos em HTML -

e

..........................................................................................97

Exercício de HTML..................................................................................................................99

, e - Como escrever em itálico, negrito e sublinhado em HTML............................100

A tag , como deixar um texto em negrito no HTML........................................................100

3

A tag - Como deixar um texto em itálico.........................................................................101

A tag - Como deixar um texto sublinhado (com underline)............................................102

Exercícios de HTML...............................................................................................................102

Headings tags - Os cabeçalhos h1, h2, h3, h4, h5 e h6................................................................103

A estrutura de um documento HTML.....................................................................................103

Como usar as tags headings (cabeçalho) em HTML..............................................................104

Exercícios de HTML...............................................................................................................106

Questão 1:...........................................................................................................................106

Questão 2:...........................................................................................................................107

Listas Simples e Listas Ordenadas em HTML............................................................................108

Qual a utilidade das listas para um site ?................................................................................108

A tag

- Itens e listas.........................................................................................................109

A tag

- Lista de itens não ordenados...............................................................................110

A tag

- Lista de itens ordenados por número..................................................................111

Exercícios de HTML:..............................................................................................................113

Questão 1:...........................................................................................................................113

Questão 2:...........................................................................................................................113

Questão 3:...........................................................................................................................113

Listas alfabéticas, aninhadas e com outros símbolos...................................................................114

Como criar listas em ordem alfabética em HTML - O atributo style=list-style..................114

Como alterar o marcador das listas com list-style-type..........................................................115

Como aninhar listas em HTML...............................................................................................117

Exercício de HTML................................................................................................................120

Questão 1:...............................................................................................................................120

Questão 2:...............................................................................................................................120

A < font > tag e seus atributos - Como alterar a fonte, tamanho e cor de textos em um site HTML

.....................................................................................................................................................121

Formatação de texto em HTML e CSS...................................................................................121

A tag - Manipulando as fontes....................................................................................122

O atributo face da tag - Alterando o tipo de fonte de um texto em HTML.................123

O atributo color da tag - Como mudar a cor de um texto em HTML.........................125

O atributo size da tag - Como alterar o tamanho de uma fonte em HTML................126

Exercício de HTML................................................................................................................127

charset meta tag - Caracteres especiais em HTML - Como escrever com acento agudo, til,

circunflexo, outros símbolos e acentuação..................................................................................128

Acentuação errada em HTML.................................................................................................128

Caracteres e Símbolos especiais em HTML...........................................................................130

Códigos especiais de acentos e símbolos................................................................................131

charset tag: O que é, para que serve e como usar......................................................132

Tabela de códigos especiais e mais fontes de estudo..............................................................134

Imagens em HTML..........................................................................................................................135

HTML, Web 2.0 e Imagens..........................................................................................................136

Como era a internet e os sites antigamente.............................................................................136

Web 2.0 - Um novo jeito de ver a internet..............................................................................137

Blogs e Redes Sociais.............................................................................................................139

Mídias e HTML......................................................................................................................140

Imagens em HTML - JPG, JPEG, GIF e PNG............................................................................142

O que é uma imagem..............................................................................................................142

Compressão de imagens: Importante para criação de sites.....................................................143

Tipos de imagem: jpg, jpeg, gif e png.....................................................................................144

4

JPG ou JPEG...........................................................................................................................144

GIF..........................................................................................................................................145

PNG.........................................................................................................................................146

tag - Inserindo uma imagem em um site - O atributo src.................................................149

A tag - O que é e para que serve..................................................................................149

Como funciona a e os endereços de imagem..............................................................150

Como usar a tag para exibir imagens e o atributo src.................................................151

Organizando as imagens em uma pasta/diretório....................................................................153

Inserindo uma imagem da internet..........................................................................................154

Exigindo duas ou mais figuras com a ..........................................................................155

Exercícios sobre a tag ..................................................................................................157

Os atributos height e width da tag < img > : Como mudar a altura e largura de uma imagem...158

height e width - Por que mudar a altura e largura de uma imagem ?......................................158

Como usar os atributos height e width....................................................................................159

Exercício com imagens em HTML.........................................................................................160

Cuidados com height e width..................................................................................................161

Definindo o tamanho de uma imagem através de porcentagem.............................................162

Exercício sobre tamanhos de imagem em porcentagem.........................................................163

Como alinhar imagens e textos com o atributo align...................................................................164

Alinhando, dividindo e organizado o conteúdo de seu site em HTML..................................164

O atributo align da tag < img >...............................................................................................165

Exemplo - Alinhando uma imagem na esquerda.....................................................................165

Mais sobre o atributo align......................................................................................................167

Exercício resolvido de HTML................................................................................................168

Exercício proposto de HTML.................................................................................................171

Atributos title e alt - Passando informações da sua imagem.......................................................172

Imagens em HTML e SEO ( Search Engine Optimization).....................................................172

Atributo TITLE - Informando ao usuário o conteúdo da imagem...........................................173

Atributo ALT - Informando ao Google o conteúdo da imagem..............................................174

Exemplo de código HTML usando os atributos ALT e TITLE...............................................175

Como usar imagens em sites HTML de maneira correta.............................................................177

Descreva sua imagem: nome do arquivo, title e alt................................................................177

Onde conseguir imagens - Direitos de imagem......................................................................179

HTML 4.01, HTML 5, CSS e XHTML..................................................................................180

Tabelas em HTML............................................................................................................................181

Tabelas.........................................................................................................................................182

O que é uma Tabela.................................................................................................................182

Exemplos de tabela.................................................................................................................182

Tabelas para cálculo................................................................................................................183

Tabelas para gráficos e comparação de dados.........................................................................183

Tabela do tipo Histograma......................................................................................................184

Tabelas em HTML: Para que servem......................................................................................185

Tabelas como layout................................................................................................................185

Tabelas como alinhamento......................................................................................................186

Tabelas são alinhas por natureza.............................................................................................187

Como criar tabelas < table >, linhas < tr > e colunas < td > em HTML......................................188

: Como criar uma tabela em HTML...........................................................................188

Espessura da borda de uma tabela - O atributo border...........................................................188

- Como criar linhas de uma tabela em HTML................................................................189

- Como criar linhas de uma tabela em HTML................................................................191

5

Células em branco em uma tabela...........................................................................................193

Tabelas sem borda e alinhamento...........................................................................................194

Tabela - Título < caption >, Corpo < tbody>, Cabeçalhos < thead >, Rodapé < tfoot > e células

cabeçalho < th >...........................................................................................................................197

- Títulos em tabelas................................................................................................197

- Cabeçalho de uma tabela.....................................................................................198

- O corpo de uma tabela............................................................................................199

- O rodapé de uma tabela...........................................................................................200

- Células de cabeçalho no corpo.....................................................................................202

Atributos colspan e rowspan para expandir o tamanho de células através de linhas e colunas...205

Os atributos colspan e rowspan - Expandindo células............................................................205

colspan em HTML..................................................................................................................205

rowspan em HTML.................................................................................................................208

Tamanho (width), espaçamento (cellspacing e cellpadding) e alinhamento (align) em tabelas de

um site..........................................................................................................................................212

Tamanho de uma tabela...........................................................................................................212

Tamanho de uma tabela em pixels..........................................................................................214

Tamanho de uma tabela em porcentagem...............................................................................214

Atributo cellspacing - Espaçamento entre as células..............................................................215

Atributo cellpadding - Espaçamento interno das células........................................................217

Atributo align - Alinhando elementos das células de uma tabela...........................................218

Cor e imagens em Tabelas - Tabelas dentro de Tabelas (nested tables).......................................219

Como alterar a cor de fundo de tabelas em HTML.................................................................219

Como usar as cores em linhas, colunas e células....................................................................221

Como usar uma imagem como plano de fundo de uma tabela...............................................223

Tabelas aninhadas - Tabelas dentro de tabelas: Criando um tabuleiro de Sudoku em HTML....224

Criando um site usando tabelas no layout - Como comentar códigos HTML.............................233

Como comentar códigos em HTML.......................................................................................233

Como criar um site com tabelas em HTML............................................................................234

Criando o cabeçalho do site....................................................................................................235

Criando o corpo e menu de um site.........................................................................................236

Criando o rodapé do site.........................................................................................................239

Site completo usando tabelas como layout.............................................................................240

Exercício de HTML................................................................................................................243

Frames..............................................................................................................................................244

Frames em HTML - O que são e para que servem......................................................................245

O que é um frame ?.................................................................................................................245

Como funciona um frame em um site ?..................................................................................246

Para que servem frames ?........................................................................................................247

Ainda se usa frame ?...............................................................................................................248

As tags < frameset > e < frame > - Como funcionam os frames em HTML...............................249

Como criar frames em sites HTML........................................................................................249

As tags e - Configurando um site com frames....................................250

Código HTML de um site com frames....................................................................................251

Exemplo de um site com frames.............................................................................................252

Exercício de HTML................................................................................................................253

Como criar um site com frames em HTML.................................................................................253

Criando as páginas de um site com frames.............................................................................253

- Definindo o layout de nossa index...................................................................255

Tamanho dos frames - Os atributos cols e rows......................................................................255

6

- Definindo as características de cada frame...........................................................256

O atributo src...........................................................................................................................256

Criando o site com frames......................................................................................................257

Exercício de HTML................................................................................................................258

Controlando frames: Os atributos name e target - Bordas (borders) e barra de rolagem (scroll bar)

.....................................................................................................................................................260

Direcionando links - Atributos name e target.........................................................................260

Dando nome aos bois...e aos frames.......................................................................................261

Avisando o frame de destino...................................................................................................262

Bordas de um frame - O atributo frameborder.......................................................................262

Barra de rolagem (scroll bar) - O atributo scrolling................................................................263

Alterando o tamanho de um frame - O atributo resize............................................................263

Frame dentro de Frame (aninhados) - Como criar um site com cabeçalho, menu e rodapé........264

Criando cabeçalho e rodapé do site.........................................................................................264

Frames aninhados - Frames dentro de Frames........................................................................266

Formulários.......................................................................................................................................269

A tag < form >, Formulários em HTML - O que são e para que servem.....................................270

Um pouco de história do HTML e da criação de sites............................................................270

Formulário - Interação do HTML com o Leitor......................................................................271

A tag

- Os atributos action e method..........................................................................272

O atributo action.....................................................................................................................273

O atributo method....................................................................................................................273

Formulários do tipo Caixas de Texto (text) em HTML...............................................................274

Tag - Formulário de Caixa de Texto ( Text Input Box)...............................................275

Exercício com caixas de texto.................................................................................................275

Atributo maxlength - Tamanho máximo da caixa de texto.....................................................276

Exercício usando o atributo maxlength da tag ...........................................................277

O atributo value - Valor inicial nas caixas de texto.................................................................277

Exercício do atributo value da tag .............................................................................278

Caixas de password - Como criar formulário de senha em HTML.............................................279

Para que servem as caixas de senha em HTML......................................................................279

Como usar o formulário de Campo de Password: type=password......................................280

Os atributos size e maxlength - Definido o tamanho da caixa de password...........................281

O atributo value - Colocando um valor inicial no campo de password..................................282

Exercício de caixas de senha em formulários de HTML........................................................283

Campos de Seleção: Radio Button (Botão do tipo Rádio) e Checkbox (Caixa de verificação). .284

Usando formulários para fazer escolher - Radio Buttons e Checkbox...................................284

Botões de Rádio ( radio button) - Escolhendo uma opção......................................................285

Para que serve um Radio Button.............................................................................................285

Como usar o Radio Button: type=radio ..............................................................................286

Caixas de checagem ( checkbox) - Fazendo escolhas..............................................................287

Para que serve uma checkbox..................................................................................................287

Como usar uma checkbox: type=checkbox.........................................................................288

Menu Drop Down e de Caixa de Lista em Formulários HTML: As tags < select > , < option > e <

optgroup >....................................................................................................................................289

O que é um menu drop down..................................................................................................290

Como criar um menu drop down em formulários HTML: e ....................290

Os atributos name e value.......................................................................................................291

Agrupando opções: a tag e o atributo label........................................................292

O atributo size: o tamanho visível do menu - Caixa de Lista.................................................293

7

O atributo multiple: Escolhendo mais de uma opção no menu drop down.............................294

Exercício sobre menus drop down em HTML........................................................................295

Grandes Caixas de Texto - A tag < textarea >..............................................................................297

A tag : Caixa para Grande Área de Texto.............................................................297

Os atributos cols, rows e maxlength: Definindo o tamanho da ............................298

Os atributos disabled e readonly: Caixa de Texto só para leitura...........................................299

Como criar botões em HTML, de Reset (limpar) e Submit (enviar) em Formulários................300

Botões em sites HTML...........................................................................................................300

Como criar Botões HTML: type=button .............................................................................301

O que faz um Botão ? O atributo onclick................................................................................302

O botão de submeter (enviar): type=submit........................................................................303

O botão de limpar (resetar): type=reset...............................................................................303

As tags < label >, < legend > e < fieldset >: Nomeando e agrupando campos de um Formulário

.....................................................................................................................................................305

O campo : Como criar rótulos e etiquetas para os formulários.................................306

Sintaxe da tag : O atributo for.....................................................................................306

As tags

e

- Agrupando e Organizando campos de um Formulário........307

Como criar um Formulário completo em HTML........................................................................310

Tutorial: Como criar um formulário HTML para um site com a tag

.........................310

Campos de Dados Pessoais.....................................................................................................311

Campos de Dados do Endereço...............................................................................................312

Campos de Dados de Login....................................................................................................312

Código HTML de nosso Tutorial sobre Formulários...................................................................313

Resultado do código HTML do Tutorial sobre Formulários.......................................................319

CSS: Básico......................................................................................................................................319

CSS - O que é e para que serve....................................................................................................320

De onde veio o CSS................................................................................................................321

CSS - O que é um estilo..........................................................................................................322

Como funciona o CSS.............................................................................................................322

Qual a utilidade do CSS..........................................................................................................323

Iniciando e criando um arquivo CSS - A tag < style > e o atributo type.....................................325

Usando style como atributo.....................................................................................................325

A tag e o atributo type em CSS..................................................................................326

A sintaxe das propriedades em CSS........................................................................................327

A tag Como criar um arquivo externo CSS................................................................328

O Efeito Cascata (Cascade) do CSS............................................................................................330

Prioridades no CSS - Quem manda mais?..............................................................................330

Exemplo 1: Vários estilos na mesma tag................................................................................330

Exemplo 2: Repetindo a tag, mas aplicando estilos diferentes...............................................331

As regras no CSS....................................................................................................................331

O efeito cascata do CSS..........................................................................................................332

Exemplo do Efeito cascata: Atributo x Tag.............................................................................332

Exemplo de Efeito cascata - Atributo x Tag x Folha de estilo................................................334

Seletores em CSS: Como definir onde o CSS vai atuar..............................................................335

O que é um seletor em CSS....................................................................................................335

Por que estudar selectors em CSS ?........................................................................................336

Seletor para um só elemento...................................................................................................336

Seletor para vários elementos..................................................................................................337

Seletor de atributo...................................................................................................................337

Seletor universal em CSS: *....................................................................................................338

8

Class selector - Criando seu próprio seletor de classe em CSS...................................................339

O problema com os seletores de tag em CSS..........................................................................339

class - O que é e como usar o seletor de classe em CSS.........................................................340

Exemplos de uso do seletor de Classe em CSS.......................................................................342

ID selector em CSS- Seletor do tipo ID e sua diferença com o CLASS.....................................343

ID selector - O seletor de identificação em CSS.....................................................................344

Qual a diferença entre CLASS e ID ?.....................................................................................345

ID e JavaScript........................................................................................................................345

ID é única, CLASS pode não ser............................................................................................346

ID e Links âncora (links para saltos na mesma página)..........................................................346

Em CSS, o seletor ID se sobressai ao seletor CLASS.............................................................347

Tag < div > - Criando divisões lógicas e Estruturais em seu site com HTML e CSS.................349

Porque usar

...................................................................................................................349

- O que é para que serve...............................................................................................350

Como usar a tag

em HTML e CSS...............................................................................351

Tag < span > - Como agrupar elementos inline em HTML e CSS com a SPAN.........................354

- Destacando Elementos Inline no HTML &.............................................................354

Como usar a tag em HTML e CSS.............................................................................355

Exemplo de uso da tag ...............................................................................................355

Seletores descendentes em CSS – Tutorial..................................................................................359

Tags descendentes em HTML.................................................................................................359

Seletores Descendentes em CSS.............................................................................................360

Exemplo de uso de Seletores Descendentes em CSS..............................................................361

CSS: Textos......................................................................................................................................363

Formatação de Textos..................................................................................................................363

CSS , Textos e A Nova Web....................................................................................................363

CSS em Textos........................................................................................................................364

Tutorial de CSS sobre Formatação de Textos.........................................................................365

Fonte em Itálico, Oblíqua e Normal - A propriedade font-style (italic, normal e oblique) -

Tutorial de CSS............................................................................................................................366

A propriedade font-style - Estilizando Fontes com CSS.........................................................367

Fonte em Itálico no CSS: font-style: italic..............................................................................367

Fonte oblíqua em CSS: font-style: oblique.............................................................................368

Fonte Normal em CSS - font-style: normal............................................................................369

Exercício de CSS com a font-style.........................................................................................370

Negrito em CSS - A propriedade font-weight (bold, bolder, lighter, normal e 100-900)............371

Como usar o negrito em CSS: font-weight.............................................................................371

Como deixar a fonte em negrito em CSS: font-weight: bold..................................................372

Deixando o texto ainda mais em negrito em CSS: font-weight: bolder..................................373

Deixando a fonte normal em relação ao negrito: font-weight: normal...................................374

Como definir o grau de negrito em CSS: 100, 200, 300, 400, 500, 600, 700, 800 e 900.......374

Sublinhado (underline) em CSS, Sobrelinhado (overline), Riscado (line-through) e Piscando

(blink) - A propriedade text-decoration.......................................................................................376

Texto Sublinhado em CSS - text-decoration: underline.........................................................376

Fonte sobrelinhada em CSS - text-decoration: overline.........................................................377

Fonte Riscada em CSS - text-decoration: line-through..........................................................378

Como fazer o texto piscar em CSS: text-decoration: blink.....................................................379

Sem efeitos de sublinhado, sobrelinhado e riscado - text-decoration: none...........................379

Fontes em CSS: A propriedade font-family.................................................................................380

Fontes em CSS - A propriedade font-family............................................................................380

9

Como usar uma fonte em CSS: font-family............................................................................381

Esta fonte é do tipo Arial.........................................................................................................382

Lista de fontes em CSS com a font-family..............................................................................382

Famílias de Fontes e Fontes Genéricas: Sans-Serif, Serif e Monospace................................383

Família de fontes.....................................................................................................................383

Fontes Sans-serif - font-family: sans-serif..............................................................................384

Fontes Serif - font-family: serif...............................................................................................385

Fontes monoespaçadas - font-family: monospace...................................................................385

Afinal, que fonte usar em CSS ? - Fontes Seguras.................................................................386

Lista de Fontes para usar em CSS e HTML............................................................................388

Tamanho da Fonte em CSS - font-size: pixel, em, % e keyword Tutorial...................................391

Tamanho de Fonte em pixels: font-size: px............................................................................391

Tamanho da Fonte com keywords - font-size: small, medium, large......................................392

Tamanho de Fonte em Porcentagem - font-size: %................................................................393

Tamanho de fonte usando em - font-size: em..........................................................................394

Cores em CSS - A propriedade color (RGB, Hexadecimal e por nome da cor)..........................395

Como usar cor em CSS...........................................................................................................395

Nomes de cores em CSS - color: nome-da-cor......................................................................396

Sistema de Cores RGB - color: rgb(255,255,255) rgb(100%, 100%,100%).........................397

Sistema RGB em valores de 0 a 255 - rgb( x, x, x).................................................................398

Sistema de cor em RGB usando porcentagem - rgb(%, %, %)...............................................399

Cores em CSS usando Hexadecimal - color: #FFFFFF........................................................399

Fonte maiúscula e minúscula em CSS - text-transform: uppercase, lowercase e capitalize.......401

Maiúsculo, Minúsculo e Capitalizado - O atributo text-transform.........................................401

Fonte Maiúscula em CSS - text-transform: uppercase...........................................................402

Fonte Minúscula em CSS - text-transform: lowercase; ..........................................................403

Fonte Capitalizada em CSS - text-transform: capitalize; .......................................................403

Espaçamento entre letras, palavras e linhas - letter-spacing, word-spacing e line-height Tutorial

.....................................................................................................................................................404

Espaçamento entre letras em CSS - letter-spacing: px; ..........................................................405

Espaçamento entre palavras em CSS - word-spacing: px; .....................................................406

Espaçamento entre Linhas em CSS - line-height: %..............................................................407

Como alinhar um texto em CSS - A propriedade text-align: left, right, center e justify.............407

Alinhando um texto em CSS - text-align................................................................................408

Alinhar pela esquerda em CSS - text-align: left; ....................................................................408

Alinhar pela direita em CSS - text-align: right; ......................................................................409

Centralizar um texto em CSS - text-align: center; ..................................................................409

Como justificar textos em CSS - text-align: justify; ...............................................................410

Como Indentar (Espaçar) a Primeira Linha em CSS - A Propridade text-indent........................412

Indentação, Espaçamento e Organização em HTML & CSS..................................................412

Como Indentar a Linha - text-indent: px, em, pt.....................................................................413

Margens (espaços) entre parágrafos em CSS - Os atributos margin-top e margin-bottom.........415

Margens em CSS - margin......................................................................................................415

Margem Entre Parágrafos - margin-top e margin-bottom.......................................................416

Margem Superior em CSS- margin-top: valor.......................................................................416

Margem Inferior em CSS - margin-bottom: valor..................................................................417

Estilos CSS em Listas: As Propriedades list-style-type e list-style-position...............................418

CSS em Listas: A propriedade list-style-type..........................................................................418

Lista não-ordenada:

........................................................................................................419

Lista ordenada:

...............................................................................................................419

10

Posição da Lista em CSS: A propriedade list-style-position...................................................420

CSS: Layout de um site (Box Model)..............................................................................................422

Box Model (Modelo de Caixas) em CSS - Margin, Padder e Border..........................................422

Box Model em CSS - O Modelo de Caixas.............................................................................422

Elementos do Box Model - De que é feito o Modelo de Caixas.............................................423

Padding, Border e Margin: top, bottom, left e right................................................................424

Espaços no Site - Tutorial de CSS Sobre a Propriedade padding................................................425

A propriedade padding do CSS - Espaçamento ao redor do conteúdo...................................426

padding-top : Espaçamento Acima do Conteúdo em CSS......................................................426

padding-bottom : Espaçamento Abaixo do Conteúdo em CSS...............................................427

padding-left : Espaçamento na Esquerda do Conteúdo em CSS.............................................428

padding-right : Espaçamento na Direita do Conteúdo em CSS..............................................428

padding : A propriedade de Espaçamento no CSS..................................................................429

Bordas - Tutorial de CSS sobre a propriedade border.................................................................430

Como adicionar as bordas em CSS - A propriedade border...................................................430

Tipos e Estilos de border em CSS - A propridade border-style..............................................431

Espessura da Borda em CSS - A Propriedade border-width...................................................432

Cores nas Bordas em CSS - A Propriedade border-color........................................................433

Usando somente a propriedade border em CSS......................................................................433

A propriedade margin do CSS - Tutorial sobre como usar margens............................................434

Margem em CSS - A Propriedade margin...............................................................................434

A diferença de padding e margin............................................................................................435

Exemplo de código CSS com padding e margin.....................................................................435

margin-left, margin-right, margin-top, margin-bottom e margin............................................437

Maneiras de uso da propriedade margin.................................................................................437

A Propriedade display em CSS: Elementos inline e block..........................................................439

Propriedade CSS display - Como os elementos são exibidos.................................................439

O que são elementos em bloco (block) e em linha (inline) no CSS........................................440

As Propriedades CSS display: inline e display: block............................................................441

Como usar a propriedade CSS display: inline........................................................................441

Como usar a propriedade CSS display: block.........................................................................442

Mais propriedades CSS display..............................................................................................443

A Propriedade CSS display: none, inline-block, list-item e table................................................443

A Propriedade CSS - display...................................................................................................443

A propriedade CSS display: none...........................................................................................444

Propriedade CSS display: inline-block...................................................................................445

Propriedade CSS display: list-item.........................................................................................446

Propriedade CSS display: table...............................................................................................446

Propriedade CSS display com elementos de tabela................................................................447

As Propriedades width e height - Como Definir Altura e Largura (Tutorial de CSS).................447

Largura (width) e Altura (height) em CSS - Criando Layouts................................................447

Como Usar As Propriedades width e height em CSS.............................................................448

Altura (height) e Largura (width) no Box Model no Layout de um Site................................449

O Problema em Controlar a Altura (height) em CSS..............................................................451

Propriedade float - Como Posicionar Elementos na Esquerda ou Direita...................................453

float em CSS - O que é e Para que serve.................................................................................454

Como usar float: left e float: right em CSS............................................................................454

Criando um site com a propriedade float................................................................................455

Como usar a float em CSS - Criando Três Colunas................................................................457

Como usar a float - Colunas Dentro De Uma Coluna.............................................................460

11

CSS: Imagens e Figuras....................................................................................................................464

Tutorial de CSS sobre Imagens e Figuras....................................................................................464

Imagens em CSS: O Que É Possível Fazer ?..........................................................................464

Imagens, CSS e Direitos Autorais...........................................................................................466

Imagens em CSS - Borda, Margem, Espaçamento, < img >, Alinhamento e Formatação..........467

Tutorial de Imagens em CSS...................................................................................................467

Imagens em CSS - A tag ..............................................................................................468

Usando div em HTML............................................................................................................469

Background em CSS - Como Alterar Plano de Fundo (Tutorial de CSS: background-image,

color, repeat, position e attachment)............................................................................................471

Cor no Plano de Fundo: background-color em CSS...............................................................471

Plano de Fundo em < div > e Elementos HTML....................................................................472

Como colocar uma imagem no background em CSS: background-image e url()..................473

Imagens Repetidas no Plano de Fundo em CSS: background-repeat.....................................474

Como Posicionar e Alinhar uma Imagem no Plano de Fundo com CSS: background-position

.................................................................................................................................................476

Fixando uma Imagem no Plano de Fundo em CSS: background-attachment........................478

CSS: Links........................................................................................................................................479

Links em CSS - As propriedades link, visited, hover e active.....................................................479

CSS em Links - Por que estilizar ?.........................................................................................480

A propriedade link do CSS......................................................................................................481

A propriedade hover do CSS...................................................................................................481

A propriedade visited do CSS.................................................................................................481

A propriedade active do CSS..................................................................................................482

CSS em Links: Colocar e tirar sublinhado, mudar cor, colocar plano de fundo e bordas...........483

Sublinhado em Links: CSS text-decoration............................................................................483

Mudando a cor de Links com CSS: color...............................................................................484

Plano de Fundo em Links usando CSS: background-color....................................................485

Bordas em Links com CSS: border.........................................................................................485

Criando botões usando CSS em Links....................................................................................486

HTML5.............................................................................................................................................488

HTML e HTML5 - Qual a diferença ? O que muda ?.................................................................489

HTML5 - Por que e Para que foi criado ?...............................................................................489

HTML5 - O que mudou? O que ele faz?.................................................................................491

HTML5 - Multimídia..............................................................................................................491

HTML5 - Multi-plataforma e Dispositivo..............................................................................491

HTML5 - Programação Gráfica e de Jogos............................................................................492

HTML5 - Simples, Direto e Robusto......................................................................................493

HTML5 - Padronização e Acolhimento..................................................................................494

Como criar um site em HTML5 - Doctype, charset meta tag......................................................495

Doctype em HTML5...............................................................................................................495

Estrutura básica de um site em HTML5 - As tags , e .......................496

Língua do Site em HTML5 - O atributo lang (pt-br)..............................................................497

Tutorial de HTML5 - Novas Tags e Elementos Semânticos.......................................................498

Novas Tags no HTML5...........................................................................................................499

Elemento

do HTML5 - Navegando Pelo Site..............................................................499

Elemento

do HTML5 - O conteúdo.........................................................................499

Elemento

do HTML5 - A tag cabeça......................................................................500

Elemento

do HTML5 - Rodapé...............................................................................500

Elemento

do HTML5 - Seccionando, Dividindo e Estruturando Sites..................500

12

Elemento

do HTML5 - Elementos à parte................................................................501

Elemento do HTML5 - Referenciando e Marcando..................................................501

Elemento do HTML5 - Data e Hora...........................................................................501

Outros elementos do HTML5.................................................................................................501

Negrito e Itálico em HTML5 - As tags e ...........................................................503

Negrito em HTML5 - A tag .....................................................................................503

Diferença entre e ..............................................................................................503

Itálico em HTML5 - A tag ............................................................................................504

A tag < hgroup > - Agrupando Tags de Cabeçalho H1, H2, H3, H4, H5 e H6............................505

O que é a Tag

em HTML5......................................................................................505

Quando usar a tag

em HTML5...............................................................................505

Estrutura de um site em HTML5 - As tags < header >, < footer > e < article >..........................507

O problema com as

.......................................................................................................507

Site em HTML5 - As Tags

,

e

....................................................508

A tag

do HTML5.....................................................................................................508

A tag

do HTML5......................................................................................................509

A tag

do HTML5.....................................................................................................509

CSS no HTML5......................................................................................................................510

Tutorial de HTML5 - Imagens e Figuras: < figure > e < figcaption >........................................512

Imagens em HTML5 - O que mudou ?...................................................................................512

Como Inserir Figuras em HTML5:

..........................................................................513

Legenda em Figuras no HTML5 -

.....................................................................514

SEO...................................................................................................................................................515

A importância do Google para um site........................................................................................516

A importância do Google........................................................................................................517

A importância das buscas do Google......................................................................................517

Como o Google seleciona os sites nos resultados de busca.........................................................518

O sistema de buscas do Google...............................................................................................519

Analisando os resultados de busca do Google........................................................................519

Fator 1: tanto de conteúdo.......................................................................................................520

Fator 2: tempo de existência...................................................................................................520

Fator 3: importância da marca.................................................................................................520

História e evolução do Google: os links e as farmlinks...............................................................521

O Google e os problemas com os links...................................................................................522

Burlando o sistema de buscas do Google................................................................................522

História e Evolução do Google – As meta tags...........................................................................525

Meta tags e sua relação com o Google....................................................................................525

Burlando as meta tags.............................................................................................................527

A importância atual das meta tags para o SEO.......................................................................527

SEO nos dias de hoje - O que o Google não gosta nos sites........................................................529

SEO nos dias de hoje - O que o Google e os usuários não gostam.........................................529

Novo foco para o SEO – A experiência do usuário.................................................................530

Dica de SEO............................................................................................................................532

Como criar bons títulos para seu site...........................................................................................533

Por que os títulos são importantes para um site?....................................................................533

Título - a capa da página de seu site.......................................................................................534

1 - Resuma o que o usuário vai encontrar na sua página........................................................534

2 - Escreva títulos completos, mas concisos...........................................................................535

3 - Crie títulos únicos e originais............................................................................................536

4 - Entre na mente do leitor e ofereça o que ele quer..............................................................537

13

5 - Use os sinônimos de palavras-chave mais famosos...........................................................537

6 - Variar nas palavras-chave de seu título..............................................................................538

7 - Use as palavras-chave primeiro em seu título...................................................................539

8 - Faça seu marketing, venda seu peixe.................................................................................539

9 - Não minta no título............................................................................................................540

10 - Não tente super-otimizar..................................................................................................540

URL amigável - Otimizando endereços para SEO......................................................................540

O que são URLs amigáveis ?..................................................................................................541

URLs amigáveis em resultados de busca................................................................................543

Endereços amigáveis e o Google............................................................................................544

URLs amigáveis e Títulos de seu site.....................................................................................544

Diminuindo o índice de rejeição - Fazendo o usuário passar mais tempo em seu site................546

O que é o Índice de Rejeição...................................................................................................546

Links internos - Mostrando mais do seu site...........................................................................547

Retire os Arquivos e coloque seu Top posts.....................................................................548

Leiam também, Leia mais, Leia o artigo.......................................................................549

Aumente o tempo de permanência em seu site.......................................................................550

Artigos com textos longos e bem divididos............................................................................550

Use imagens, animações e vídeos...........................................................................................551

Converse com seus leitores.....................................................................................................552

Use sua criatividade................................................................................................................553

Atributos title e alt - Passando informações da sua imagem.......................................................554

Imagens em HTML e SEO ( Search Engine Optimization).....................................................554

Atributo TITLE - Informando ao usuário o conteúdo da imagem...........................................555

Atributo ALT - Informando ao Google o conteúdo da imagem..............................................556

Exemplo de código HTML usando os atributos ALT e TITLE...............................................557

14

Introdução ao estudo do HTML

Bem vindo ao curso HTML Progressivo, uma apostila de HTML online e

completa.

Primeiramente, parabéns pelo seu interesse e força de vontade em querer

estudar de forma auto-didata, e sem obrigação. Afinal, você está aqui por

vontade própria, o que é um ótimo começo.

O segundo parabéns é pela curiosidade em querer saber como funciona a

Internet, como é criado e como criar um site. A maioria das pessoas sequer

percebem que páginas são criadas e, obviamente, alguém precisa criá-las.

Essa curiosidade inicial é a base de todo avanço científico e tecnológico.

Nessa seção inicial de nosso curso sobre como criar sites, vamos falar um

pouco sobre a importância das páginas da internet, a história dos Websites,

o que é HTML, como surgiu, para quê serve, bem suas variações, evoluções

e especificações.

PS: Essa apostila foi desenvolvida em um site. Por isso, muitas vezes você

vai encontrar: Veja o resultado e não tem nada. Isso porque este livro era

um PDF e não um site. Mas basta você rodar o código e abrir num

navegador para o efeito citado.

15

O que é HTML ? Como criar um site?

▪ HTML: Como criar um site

É quase impossível, nos dias de hoje, alguém não saber o que é um site.

Até mesmo sua avó, embora nunca tenha usado um computador, já deve ter

visto na televisão alguém dando o endereço de algum site: r7.com ,

globo.com, redes sociais etc.

Esse meio de informação, que é a Internet, é hoje o mais utilizado no mundo.

Há diversas formas de trocarmos informações pela internet, mas uma das

maneiras mais comuns é através de páginas na internet, como esta que você

está lendo.

A maioria das pessoas não vai notar e certamente vão passar batidos pelas

seguintes perguntas:

"Quem faz os websites da Internet? Como é feita uma rede social, como o

Facebook? "

Se você já se fez essa pergunta, parabéns. Você não é daqueles que

simplesmente aceitam as coisas. Ter curiosidade é uma virtude na vida.

Mas sobre a pergunta, ‘como são feitas as páginas da internet’, a resposta é:

de várias maneiras, mas a principal e mais usada, sem dúvidas, é com

HTML.

HTML é uma coisa chamada Linguagem de Marcação, embora não seja uma

linguagem de programação propriamente dita, podemos dizer que é algo

parecido.

Parece complicado, mas vamos tentar explicar com exemplos o que é HTML,

para que serve, o que é possível fazer etc.

▪ Para que serve HTML?

O HTML serve para criarmos uma página de internet.

Embora pareça simples, existem zilhões de páginas diferentes.

E por página da web, não entenda o somente o conteúdo, o texto ou as

figuras.

16

Na verdade o HTML vai servir para exibir esses conteúdos.

Por exemplo, com HTML você faz o menu, coloca ele em cima ou na lateral.

Com HTML, você coloca o logotipo de sua empresa em lugar do site, faz

com que as pessoas sejam levadas a outra página, caso cliquem em alguma

foto ou link.

Sabe aqueles campos de texto onde você escreve algo, ou aqueles botões

para marcar opção?

Também são feitos com HTML.

E os títulos? Umas letras maiores, outras menores? HTML.

Aquelas janelas pop-ups que se abrem sem você pedir? HTML também.

E uma rede social? Tem quer saber HTML também.

▪ Então, o que é HTML ?

HTML significa HyperText Markup Language, que significa Linguagem de

Marcação de Hipertexto.

Como dissemos, o HTML não cria coisas que citamos no tópico passado, ele

só diz onde e como elas devem aparecer, onde e como se comportar.

E como o HTML ‘diz’ isso? Por meio de uma linguagem, a linguagem do

HTML, de códigos.

E pra quem o HTML ‘diz’ isso? Para seu navegador (Mozil a Firefox, Google

Chrome, Internet Explorer etc).

Vamos explicar o que é uma linguagem de marcação e você entenderá

melhor o que é o HTML.

Vamos explicar isso no mundo real.

▪ O que é uma linguagem de marcação?

Imagine que você escreveu um livro, o texto inteiro.

Com uma caneta e todo escrito a mão.

Isso seria o conteúdo de seu site, as informações que vemos nas páginas da

web.

17

Porém, você não iria lançar seu livro assim, você precisa fazer uns ajustes,

realces, marcar as coisas de maneiras diferentes. Vamos formatar seu livro,

ou seja, colocar num formato agradável pro leitor.

Primeiro de tudo, ninguém faz mais livros a mão. A primeira coisa que se faz

é digitar.

Segundo, você precisa de uma capa, um título pro livro.

Já viu livro em que a capa é igual as páginas? Claro que não, é diferente, é

mais bonita, tem que chamar atenção.

Temos também que colocar figuras, definir o tamanho do rodapé, colocar a

numeração das páginas, colocar figuras, alinhas o texto, ter cuidado pras

letras não saírem em cima das figuras e milhares de outros detalhes.

Agora me diga, as pessoas leriam livros se fossem todos iguais?

E se eles fossem feito sem figuras, sem formatação, sem esses ajustes?

Muito difícil não é?

Pois bem, com o HTML é a mesma coisa. Só o texto não basta.

Tem que organizar, deixar agradável, ajustar as fotos, larguras, parágrafos e

tudo mais.

Com o HTML vamos dizer ao navegador todas essas alterações.

E como vamos dizer isso? Ué, utilizando uma linguagem para se comunicar.

Que linguagem? Português, Inglês? Não, vamos conversar com o navegador

usando a linguagem HTML.

E quem são os responsáveis por criar? São os webmasters, ou mestres da

Web.

Quer se tornar um mestre da Internet? Então continue estudando pelo curso

HTML Progressivo.

18

HTML e XHTML: Qual a diferença ?

No artigo passado explicamos a função principal do HTML: a criação de

sites.

Para entender a diferença entre HTML e XHTML, é necessário que leia com

atenção este artigo anterior.

Agora você já sabe que HTML é a base de tudo que se refere a websites

E isso não é de agora, HTML já tem sua idade e experiência mais que

comprovada e garantida.

▪ Mudanças na internet e no HTML

Porém as coisas vêm mudando. Se você usa Internet desde a década de 90

ou do começo da década passada, sabe como as coisas estão diferentes.

Na época em que o HTML surgiu, a internet era