Amostra. Clique aqui para o exemplar completo.
1ª Edição - Março 2014 Nenhuma parte deste livro pode ser u lizada ou reproduzida sob quaisquer meios existentes sem autorização por escrita do autor.
Marco Aurélio Lang - Todos os Direitos Reservados ©2014
Sobre o autor Marco Aurélio Lang é publicitário, apaixonado por internet, Bacharel em Comunicação Social e MBA em Marke ng e Administração. Professor de web design no CNEC e de desenvolvimento Web na Universidade do Site.
Amostra. Clique aqui para o exemplar completo. Sumário
Introdução
4
Conhecendo o Web design
5
Que diabos é HTML?
7
Tags HTML
10
Estrutura básica do HTML
12
Criando uma página
14
Marcações textuais
17
Hyperlinks
24
Comentários em HTML
31
Linhas horizontais
32
Listas em HTML
33
Imagens em HTML
36
Tabelas em HTML
40
Formulários em HTML
42
Elementos bloco e inline
44
Conclusão
47
Amostra. Clique aqui para o exemplar completo. Introdução Decidi escrever este livro sobre HTML depois de procurar pela Internet por um material em lingua portuguesa de qualidade sobre o assunto para indicar aos alunos da Universidade do Site. O que encontrei foi muita informação desconexa, desatualizada e escrita em linguagem complexa demais. A única alterna va que me restou foi dedicar dois meses escrevendo um material que compila todas as principais marcações (tags) HTML necessárias para dominar a linguagem. Como tenho mais de 10 anos de experiência em web design, para escrever um livro como este ve que me colocar no lugar dos estudantes de desenvolvimento de sites e criar algo acessível e rápido de assimilar, porém ao mesmo tempo completo. Escrito totalmente em conformidade com as recomendações da W3C para HTML5, apresento este material para todos estudantes de web design, e me orgulho em dizer que é o livro que melhor ensina HTML no menor tempo. Bons estudos... Marco Aurélio Lang
Amostra. Clique aqui para o exemplar completo.
1
Conhecendo o Web design O Web design é uma extensão da prá ca do design aplicada ao desenvolvimento de sites e demais peças para a Internet. O profissional que trabalha com esse po de design é conhecido como web designer, e precisa dominar diversas disciplinas como a arquitetura da informação, programação, ergonomia, usabilidade, acessibilidade entre outros. O webdesigner pode trabalhar como empregado em qualquer empresa que tenha uma área de web, em uma agência digital, ou ainda como freelancer, oferecendo seus serviços como profissional autônomo. A maioria do trabalho do webdesigner é desenvolvido em HTML (estrutura), CSS (formatação es lís ca) e SCRIPTS (comportamento). Existem normas técnicas de padronização para cada um deles que são recomendadas pelo W3C, orgão esse responsável pelos padrões de desenvolvimento para a internet. Para criar sites o webdesigner precisa de um simples editor de texto e algum programa para ilustrações, apesar de exis rem bons so wares que auxiliam o desenvolvimento para web, como o Dreamweaver, WYSIWYG Web Builder, Notepad++, etc. Como você pode ver, a pessoa precisa dominar diversas competências para se tornar um Webdesigner profissional e cumprir com o principal obje vo do Web Design, que é tornar a experiência do usuário do site a mais agradável e intui va possível.
5
Pílula HTML
Amostra. Clique aqui para o exemplar completo. 1. Conhecendo o Web design
Web Design x Webdesigner É comum ver as pessoas confundindo o nome da profissão Webdesigner com o nome da técnica Web Design. Se você é - ou deseja ser - um profissional da internet jamais pode cometer o pecado de confundir esses dois termos. Web Design: área do design que desenvolve sites e demais
peças/aplicações para a Internet; Webdesigner: profissional que "faz" web design.
6
Pílula HTML
Amostra. Clique aqui para o exemplar completo.
2
Que diabos é HTML? O termo HTML é usado para abreviar a expressão HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto, ou seja, é a “matéria prima” que cons tui os sites na internet. São as marcações HTML que dizem ao browser como exibir o documento ao internauta. Essa linguagem pode ser interpretada pelos navegadores (browsers) de formas diferentes, onde uma marcação não reconhecida por determinado so ware simplesmente é ignorada, resultando em diferenças na apresentação da página ao internauta. Por esse mo vo que existe a necessidade de sempre que desenvolvermos algo em HTML testarmos em diferentes navegadores. A World Wide Web Consor um (W3C) é uma organização criada para manter as especificações do H T M L. Ela faz recomendações tanto para web designers quanto para desenvolvedores de so wares na tenta va de padronizar a linguagem. Até o ano de 2006 a organização trabalhou em uma nova linguagem que foi chamada de XHTML, que posteriormente foi subs tuída pelo chamado HTML5, linguagem essa que tem como principal caracterís ca uma sintaxe mais rigorosa e menos ambígua para tornar o HTML mais simples de ser processado e extendido. “ Se quiser conhecer mais sobre a história do HTML, assista o vídeo: h ps://www.youtube.com/watch?v=NSmapCNcSyI”
7
Pílula HTML
Amostra. Clique aqui para o exemplar completo. 2. Que diabos é HTML?
Diferentes versões do HTML A tabela a seguir mostra as diferentes versões do HTML lançadas até hoje. Versão do HTML
Ano
HTML
1991
HTML+
1993
HTML 2.0
1995
HTML 3.2
1997
HTML 4.1
1999
XHTML
2000
HTML5
2012
Características do HTML Documentos HTML podem ser criados em qualquer editor
de texto (notepad, edit, etc...); Os documentos HTML não são compilados, seu código
sempre é visível e editável; Existem editores e conversores que automa zam grande
parte da escrita HTML; HTML não faz diferença entre maiúsculas e minúsculas, ou
seja, a notação <body> é equivalente a <BODY> ou <bODy>. Porém segundo recomendações da W3C devemos sempre usar as marcações em letras minúsculas.
8
Pílula HTML
Amostra. Clique aqui para o exemplar completo. 2. Que diabos é HTML?
Glossário básico A seguir alguns termos básicos do HTML que o webdesigner precisa conhecer: Documento: é a unidade mínima da informação do
HTML, a página. : é a unidade mínima da informação do HTML, a página. Elementos: são as diferentes partes do documento HTML,
por exemplo tulos, parágrafos, imagens, etc. Marcações: são as e quetas (tags) usadas geralmente em
duplas que formam os diferentes elementos. Ex: <p>; Tags: o mesmo que marcações; Atributos: configuram as tags com determinados valores.
Ex: <a href=”pagina2.html>, nesse caso href é o atributo. Browser: é o navegador usado pelos internautas para
renderizar os arquivos HTML. Por exemplo Google Chrome, Internet Explorer, Firefox, Safari.
9
Pílula HTML
Amostra. Clique aqui para o exemplar completo.
3
Tags HTML O HTML tem como principal caracterís ca o uso de tags (ou e quetas) para marcação dos elementos no documento. Uma tag sempre começa com o símbolo “<”, seguida do nome da marcação, e fechada com “>”. De modo geral as tags sempre são usadas em pares para formar um elemento, sendo uma para iniciar a marcação e outra para finalizá-la, esta úl ma caracterizada pelo uso de uma barra “/” logo após sua abertura. Um exemplo é a tag que inicia todo documento “<html>” e a que o finaliza “</html>”. As tags podem ainda conter outras informações referentes a atributos e valores do elemento, sempre com a finalidade de modificar os resultados padrões que os elementos geram quando renderizados pelo browser. Outra caracterís ca das tags é que elas podem ser aninhadas (podemos abrir tags dentro de tags). Inclusive a própria lógica de um documento HTML consiste em um aninhamento de tags (elementos).
10 Pílula HTML
Amostra. Clique aqui para o exemplar completo. 3. Tags HTML
Exemplo de elemento simples O exemplo a seguir mostra um parágrafo com o texto exemplo na formatação mais básica do elemento <p>. <p>Exemplo de parágrafo simples.</p>
Exemplo de elementos aninhados O exemplo a seguir mostra o mesmo texto, porém com uma das palavras em negrito, demonstrando um dos possíveis aninhamento que podem ser feitos em HTML. <p>Exemplo de <strong>parágrafo</strong> simples.</p>
11 Pílula HTML
Amostra. Clique aqui para o exemplar completo.
4
Estrutura básica do HTML A estrutura básica do HTML é o mínimo que um documento deve ter para que o servidor e o browser consigam “entregar” o conteúdo ao visitante. Ela consiste nas seguintes tags: <html>: inicia o documento HTML e indica ao browser que
todo conteúdo que vier depois dela deve ser tratado como uma série de códigos HTML. <head>: define o cabeçalho de um documento HTML,
trazendo informações sobre o mesmo como tulo, ligações de folhas de es lo, scripts, entre outros. <body>: onde são colocados os demais elementos que vão
compor a página, ou seja, é a área que ficará visível aos visitantes da mesma. Apesar de muitos browsers conseguirem renderizar páginas sem essa estrutura básica, a presença dessas três tags é altamente recomendada em qualquer documento HTML, jamais deixe de u lizá-las.
12 Pílula HTML
Amostra. Clique aqui para o exemplar completo. 4. Estrutura básica do HTML
Exemplo de estrutura básica do HTML O exemplo a seguir mostra a estrutura básica que você precisa usar para criar um documento HTML. <html> <head> <title>Minha página</title> </head> <body> <p>Exemplo de texto.</p> </body> </html>
Hora de praticar! 1. Abra o seu editor de texto (ex. Bloco de Notas do Windows); 2. Copie o código da estrutura básica do HTML nele; 3. Salve esse arquivo como index.html; 4. Localize o arquivo e abra-o no browser de sua preferência; 5. Pronto! Você acaba de criar sua primeira página em HTML.
13 Pílula HTML
Gostou? Clique aqui para adquirir o restante deste e-book.