apostila html

TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNET

I200 HTML COMPLETO

HTML Completo

Um curso Infnet utilizando a metodologia NETLEARN.

INSTITUTO INFNET - 1


I200 HTML COMPLETO

ndiceUA1: O HTML 1.1 O formato do HTML, pg. 11 1.2 Os tags bsicos I (estrutura, formato, texto) , pg. 22 1.3 Os tags bsicos II (fontes, comentrios, linhas) , pg. 41 1.4 Formatando Listas , pg. 58 UA2: Conceitos para edio do HTML 2.1 Navegabilidade , pg. 73 2.2 Imagens , pg. 86 2.3 Cores em hexadecimal , pg. 98 2.4 Atributos do tag , pg. 101 2.5 Os tags , pg. 109 UA3: Tabelas e Frames 3.1 Estruturando a Tabela, pg. 116 3.2 Frames , pg. 135 UA4: Formulrios 4.1 Os elementos do formulrio , pg. 155 4.2 O uso do JavaScript e das CSS , pg. 170 Adendo - Achando imagens na web, pg. 176 - Interpretando Mapas Sensitivos, pg. 177 - Insero de som, pg. 178 - Soluo dos exerccios, pg. 179 - Referncias para consulta , pg. 180 - ndice de tags , pg. 186 - Tabela de caracteres especiais , pg. 213 - Tabela de Cores em Hexadecimal, pg. 214



I200 HTML COMPLETO

Sobre o Instituto Infnet Histrico Parcerias Treinamento aberto Treinamento fechado Contato

3

NETLEARN - INTRODUO

Histrico: Fundado em outubro de 1994, o Infnet hoje a empresa lder em treinamento de Tecnologia da Informao (TI) e Design Digital. Alm de servir como referncia no aperfeioamento e reciclagem de profissionais de informtica, o Instituto Infnet capacita funcionrios para dezenas de empresas, como Embratel, Furnas, Telerj, BNDES, Fleischmann Royal, Origin, FGV, Xerox, De Pl, Ponto Frio etc. Parcerias: O Instituto Infnet parceiro educacional da Adobe, Macromedia, Microsoft, RealNetworks e RNP, sendo tambm parceiro do portal TI Master (www.timaster.com.br), que dirigido ao desenvolvimento profissional na rea de TI. Educao e treinamento: O Instituto oferece formaes completas em TI e Design Digital, que podem ser amplamente conhecidas em nosso site, www.infnet.com.br. Os cursos so oferecidos tanto em turmas abertas, nas salas de aula do Instituto, ou em empresas. O Instituto tambm tem um longo e bem sucedido histrico de cursos personalizados para empresas, voltados para atender a necessidades especficas. Para entrar em contato com o Infnet, utilize nossa Central de Atendimento, pelo (21) 21228800, ou envie e-mail para [email protected].



I200 HTML COMPLETO

NETLEARN ONEUA

MDULO DE INTRODUO

1a UNIDADE DE APRENDIZADO

REFERNCIAS ESTUDO DE CASOS

PROJETO JNIOR

BCA

BCA

INTRODUO DA UADESCRIO CONCEITOS BSICOS

BLOCO DE CONSTRUO DO APRENDIZADOTEORIA EXEMPLO LAB

BLOCO DE CONSTRUO DO APRENDIZADOTEORIA EXEMPLO LAB

EXERCCIOS APRESENTAO

EXERCCIOS APRESENTAO

4

NETLEARN - INTRODUO

NETLEARN ONE : O mtodo NETLEARN ONE foi desenvolvido pelo Infnet para que os alunos obtivessem um grau de entendimento e reteno das tecnologias ensinadas muito superior aos cursos tradicionais. Sua criao teve por base uma longa experincia no ensino de TI (Tecnologia da Informao) e um profundo estudo das necessidades e dificuldades dos alunos em sala. O mtodo no somente permite uma melhor compreenso das aulas, mas um aproveitamento superior dos conhecimentos adquiridos quando aplicados em ambientes reais de produo. Seguindo a risca as instrues de seus professores, profissionais dos mais competentes, voc vai tirar proveito total do mais eficaz mtodo de ensinoaprendizagem de tecnologias intranet/Internet disponvel hoje. O mtodo NETLEARN patenteado pelo Infnet e sua utilizao sem autorizao escrita e explcita do Infnet constitui crime previsto em lei.



I200 HTML COMPLETO

Observao Importante: O mtodo NETLEARN visa trazer o melhor para os alunos. E ns sabemos que para se ter o melhor preciso que se tenha flexibilidade. Cada assunto tem suas caractersticas especficas. Cada curso tem suas necessidades. Por isso, nem sempre todos os mdulos do NETLEARN estaro presentes em todos os cursos.5NETLEARN - INTRODUO

NETLEARN: O objetivo primordial do Infnet que voc efetivamente aprenda. A utilizao da metodologia NETLEARN facilita o processo de aprendizado e aumenta a reteno do conhecimento. Entretanto, nem todas as etapas da metodologia so benficas para todos os tipos de cursos ou assuntos. A generalizao excessiva no traz benefcios para os alunos. Por isso, o Infnet no vai deixar de oferecer o melhor para voc por falta de flexibilidade.



I200 HTML COMPLETO

A apostila Sua apostila dividida em 2 partes: os slides, na parte de cima de cada pgina as anotaes, na parte de baixo

Slides: So os slides que o professor vai utilizar durante o curso.

Anotaes: Informaes complementares, zoom no cdigo de programas e espao para voc escrever6NETLEARN - INTRODUO

Slides: Os slides de sua apostila so os mesmos usados pelo professor durante o curso. Voc poder acompanhar todas as aulas atravs deles e estudar a matria posteriormente com este material. Anotaes: Abaixo dos slides, h um espao chamado de anotaes. Ele tem vrios propsitos: Conter informaes complementares ao contedo do slide, muitas vezes evitando que voc precise anotar tudo o que o professor diz em aula. Servir de referncia em tpicos mais extensos, permitindo que voc se aprofunde na matria aps o trmino do curso. Repetir o cdigo de programas, imagens e telas capturadas que ficaram muito pequeninas no slide, facilitando sua leitura e o acompanhamento das aulas. Ser um espao para voc escrever suas prprias observaes e perguntas.



I200 HTML COMPLETO

Apresentaes Professor Nome E-mail Experincia

Alunos Nome Empresa onde trabalha e cargo Expectativas7NETLEARN - INTRODUO



I200 HTML COMPLETO

Logstica Horrios Computadores e Rede Banheiros Cigarro Telefone

8

NETLEARN - INTRODUO



I200 HTML COMPLETO

Objetivos do curso Posicionar a tecnologia de construo de pginas HTML no contexto do desenvolvimento Web Ensinar a sintaxe da linguagem HTML atravs de teoria e exemplos prticos Ensinar as questes fundamentais de criao de pginas web Preparar para o entendimento das demais tecnologias de desenvolvimento de websites dependentes do HTML9NETLEARN - INTRODUO



I200 HTML COMPLETO

Pblico alvo Desenvolvedores que pretendem usar o HTML para construir pginas para sites em Internet e Intranet Desenvolvedores que precisam do HTML para construir a interface de suas aplicaes Gerentes de projetos Web que precisam conhecer o potencial do HTML Designers que pretendem investir na criao de sites Web10NETLEARN - INTRODUO



I200 HTML COMPLETO

Pr-requisitos Conhecimento bsico em Internet (navegao)

11

NETLEARN - INTRODUO



I200 HTML COMPLETO

Tempo aproximado: Tempo aproximado: X horas, X Minutos X horas, X Minutos

1- O HTMLUnidade de Aprendizado



I200 HTML COMPLETO

Tempo aproximado: Tempo aproximado: X horas, X Minutos X horas, X Minutos

1.1 O Formato do HTMLBloco de Construo do Aprendizado



I200 HTML COMPLETO

O Formato do HTMLVoc aprender : O que HTML, sua estrutura e sintaxe bsica Por que existe e por quem documentado Suas caractersticas e comportamentos gerais14UA O HTML



I200 HTML COMPLETO

O que HTML? HyperText Markup Language Sua especificao desenvolvida pelo Quando trabalha com o JavaScript, torna-se um HTML dinmico (DHTML) www.w3.org

15

UA O HTML

HTML a sigla usada para HyperText Markup Language (Linguagem de Marcao de Hipertexto). Utilizamos esta linguagem na criao de pginas para Web. simples e fcil de entender, pois no uma linguagem de programao, mas uma linguagem de formatao de textos. A especificao original do HTML foi desenvolvida por Tim Berners-Lee, atual presidente do World Wide Web Consortium W3C, organizao hoje responsvel pela sua padronizao. As pginas HTML podem ser usadas para interagir com tecnologias como DHTML (com JavaScript), ASP, ColdFusion, Livewire, Perl, etc, que permitem consultas a bancos de dados, estabelecendo uma interao maior com o usurio.



I200 HTML COMPLETO

tags do HTML tags so os comandos do HTML, e tm a seguinte construo: ...

A maioria dos tags HTML possuem um tag que indica o seu fechamento16UA O HTML

Podem ser escritas tanto em letras minsculas quanto em maisculas, mas a W3C recomenda que o cdigo sempre seja escrito em letras minsculas. A maioria das tags HTML possui uma tag que indica o seu fechamento.



I200 HTML COMPLETO

A rea de influncia Tags podem ser usados dentro de outros tags Exemplo:Conhea tudo sobre Internet

LIFO (Last In First Out)

17

UA O HTML

Os tags HTML podem ser usados dentro de outros tags, ou seja, podemos aninhar tags para causar um efeito desejado. Por exemplo, se desejamos colocar tambm em itlico uma palavra que est dentro de uma frase j em negrito:Conhea tudo sobre Internet

Devemos sempre lembrar de fechar primeiros os ltimos tags abertos e depois ir fechando os demais. Esta ordem de fechamento importante. chamada de ordem LIFO (Last In First Out) No exemplo anterior, o primeiro tag que foi fechado foi o ltimo a ser aberto. Fechamos primeiro o e depois o



I200 HTML COMPLETO

Os atributos So normalmente usados para mudar o comportamento padro do tag, por exemplo:bgcolor="red" width=400 align="left

Se o valor de um atributo for uma frase, ou texto que contenha espaos, ele deve estar entre aspas Os tags de fechamento no possuem atributos18UA O HTML

Nem todos os tags possuem atributos. Eles so normalmente usados para mudar o comportamento padro do tag, como indicar uma cor, por exemplo. bgcolor="red" width=400 align="left Se o valor de um atributo for uma frase ou texto que contenha espaos, o mesmo deve estar entre aspas. Cada tag tem o seu conjunto especfico de atributos. Os tags de fechamento no possuem atributos.



I200 HTML COMPLETO

A Aparncia de um tag Alguns exemplos de tags: Link para a Infnet Curso de HTML Infnet 2002 Internet19UA O HTML

O tag uma tag que define um bloco dentro do documento. O atributo chamado align recebe como valor o alinhamento que eventualmente desejemos dar ao seu contedo. O tag coloca o texto que est entre a abertura do tag e o fechamento em negrito. Ento o resultado seria: Curso de HTML O tag usado para colocar um texto em itlico, ou seja, o texto ou frase que estiver entre o incio e o fim do tag e ficaro em itlico. O resultado seria : Infnet - 2002 Podemos observar que os tags e no possuem atributos, enquanto o tag possui um atributo que pode modificar o seu comportamento.INSTITUTO INFNET - 19TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNETI200 HTML COMPLETOEdio do HTML O texto em HTML se comporta de forma diferente dos editores comuns. So ignoradas quebras de linha Somente um espao em branco contado entre cada palavra Necessitam, assim de tags especficas
20UA O HTMLOs textos exibidos em uma pgina HTML no se comportam como os textos de um editor de textos. Por exemplo: so ignoradas quebras de linha; somente um espao em branco contado entre cada palavra. Para resolver essas situaes, so usados tags que veremos mais adiante. Quando desejarmos inserir quebras de linhas em textos de nossas pginas HTML, necessrio indicar estas quebras de linha para que sejam interpretadas pelo browser no momento em que o texto for exibido. Usamos o tag
para inserir quebras de linha. Quando um texto for colocado em uma pgina HTML sem a indicao de quebra de linha (sem o tag
), ele ser exibido em uma s linha, como se no houvesse quebra de linha. Isso ocorre pois para o HTML quebras de linhas somente existem quando indicadas pelo tag
.INSTITUTO INFNET - 20TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNETI200 HTML COMPLETOAlguns comportamentos do HTML Tags incorretos Tag escrito errado: ignorado pelo browser (texto posterior apresentado normalmente) No h mensagens de erro Colapso do cdigo Mais de um espao em branco no cdigo = um espao em branco Um ou mais comandos de enter no cdigo = um espao em branco21UA O HTMLCaso seja escrito um tag de forma errada, ou mesmo inventada pelo usurio, o browser ignora-o e o texto que estiver aps esse tag ser apresentado normalmente. No h mensagens de erro para tags incorretos. Quando se est trabalhando no cdigo-fonte de um arquivo HTML e nele inserido um ou mais espaos em branco, dizemos que o browser faz o colapso do cdigo, isto , exibe o contedo com somente um espao em branco naquele local. O mesmo ocorre quando teclamos enter uma ou mais vezes no cdigo-fonte: ele(s) ser(o) interpretado(s) como um espao em branco. Caso queira-se inserir mais de um espao em branco, ter que se trabalhar com a codificao de caracteres especiais, objeto de ensinamento mais frente, neste curso.INSTITUTO INFNET - 21TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNETI200 HTML COMPLETOExerccio terico Resolva o questionrio abaixo.22UA O HTMLExerccios:1) Quais os tags esto corretos e quais os incorretos ? (Justifique) a) b) Texto c) Texto d) 2) Leia atentamente as afirmativas abaixo:i) Qualquer tag HTML pode ser escrita com letras minsculas, mas o W3C World Wide Web Consortium recomenda que sejam escritas com letras maisculas. ii) O World Wide Web Consortium o rgo que inventou a Internet e, por isso tem como seu presidente Tim Berners-Lee. iii) Os tags HTML podem ser usados dentro de outros tags, ou seja, podemos aninhar tags para causar um efeito desejado. iv) LIFO (Last In First Out) a representao do processo de se fechar primeiramente a ltima tag inserida no cdigo-fonte, caso ele tenha essa tag. v) LIFO (Last In First Out) a representao do processo de se fechar primeiramente a ltima tag inserida no cdigo-fonte, mesmo que ela no tenha fechamento.Responda: a) Somente a alternativa iv verdadeira b) Somente a alternativa iv falsa c) As alternativas ii, iii e iv esto corretas d) As alternativas iii e iv esto corretas e) As alternativas iii e v esto corretasINSTITUTO INFNET - 22TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNETI200 HTML COMPLETOO que j aprendemos?UA 1: O HTML BCA 1.1: O formato do HTML23UA O HTMLJ aprendemos: que o HTML uma linguagem de marcao de texto utilizada para demarcar a estrutura da visualizao das pginas web que o W3C a organizao que padroniza o HTML que as pginas web so visualizadas em navegadores (ou browsers) que os navegadores podem exibir as pginas de formas nem sempre idnticas o que so tags, reas de influncia e atributosINSTITUTO INFNET - 23TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNETI200 HTML COMPLETOTempo aproximado: Tempo aproximado: X horas, X Minutos X horas, X Minutos1.2 Os tags bsicos IBloco de Construo do AprendizadoINSTITUTO INFNET - 24TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNETI200 HTML COMPLETOOs tags bsicos IVoc aprender: A estrutura de uma pgina HTML tags de Cabealho e Corpo tags bsicos de formatao de texto25UA O HTMLINSTITUTO INFNET - 25TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNETI200 HTML COMPLETOCabealho e corpo O cdigo da pgina HTML inserido na rea de influncia de e O cdigo dividido em duas partes: Cabealho: ... Corpo: ... 26UA O HTMLOs tags e como foi explicado, tm como objetivo indicar o incio e o final de sua pgina HTML. Entre estes tags esto os tags que iro indicar o cabealho e o corpo de nossa pgina HTML. O cabealho est contido na rea de influncia de e , onde estaro relacionadas tags que tero finalidades especficas, tais como a de levar informaes para o servidor (na Internet), para o navegador e outras. O contedo visvel da pgina HTML aquele que estar contido na rea de influncia de e .INSTITUTO INFNET - 26TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNETI200 HTML COMPLETOCabealho O uma rea de configurao da pgina Scripts Metas (informao sobre o documento) Podemos inserir o ttulo da pgina que aparece na barra de ttulo do navegador. ... * O ttulo no o nome do arquivo O nome do arquivo deve ter a extenso .htm ou .html27 Ttulo Ttulo ... ... UA O HTML na rea de cabealho que definido o ttulo de nossa pgina, usando o tag . O ttulo no apresentado na tela do browser. deve conter uma breve descrio do contedo da pgina, e o tag mais importante do cabealho, no devendo ser omitido. Geralmente usamos o cabealho para incluir os tags de ttulo da pgina e . muito importante darmos nomes s nossas pginas, e isso deve tornarse um hbito. comum vermos pginas com nomes iguais, sem nomes ou com nomes que no dizem nada. Quando marcamos uma pgina (usando a opo de Bookmark ou Favoritos) o browser guarda, alm do endereo, o nome da mesma (o nome que est entre os tags e ). Caso esse nome no identifique corretamente o contedo da pgina, com certeza os usurios ficaro perdidos ao procurar esta pgina posteriormente em seus bookmarks ou Favoritos. Algumas pessoas confundem ttulo com nome de arquivo. Observa-se, no entanto, que o nome do arquivo aquele que adicionamos a extenso .htm ou .html para identific-lo fisicamente.INSTITUTO INFNET - 27TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNETI200 HTML COMPLETOCorpo Os tags e definem a rea do corpo de uma pgina na rea de influncia este tag que escreveremos todo cdigo de nossa pgina. Ttulo Ttulo ...cdigo da pgina... ...cdigo da pgina... 28UA O HTMLO e seu fechamento so os tags que definem o corpo da pgina, ou seja, entre estes tags que iremos desenvolver a criao de nossa pgina HTML. Todos os links, tabelas e demais formataes estaro dentro da rea de influncia de < body> e INSTITUTO INFNET - 28TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNETI200 HTML COMPLETOInserindo contedo de texto Contedo deve ser inserido na rea de influncia do par de tags e Cuidado com acentos e caracteres especiais das lnguas latinas29UA O HTMLO contedo de sua pgina HTML deve ser inserido na rea de influncia do par de tags ... e tudo o que nele estiver contido ser visualizado na janela do navegador. Deve-se observar que sistemas operacionais em lnguas no latinas no exibem acentos e caracteres especiais da lngua latina. Portanto, nestes casos, deve-se utilizar a codificao dos caracteres especiais do HTML, conforme prximo slide.INSTITUTO INFNET - 29TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNETI200 HTML COMPLETOCaracteres especiais Representao do caracter (copyright) - ISO Latin-1 - Entidade do HTML Caracteres em branco Infnet Infnet Acentuao acentuao Automatizao30UA O HTMLExistem caracteres que no podem ser obtidos atravs do teclado. Esses caracteres podem ser inseridos na pgina atravs de uma codificao especial que o browser capaz de interpretar. Podemos usar a entidade do HTML e/ou a ISO-Latin1 A ISO-Latin-1 usa um cdigo composto pelo caracter & seguido do smbolo # mais uma combinao de nmeros. O HTML usa o caracter & seguido de uma combinao de letras. Representao do - Entidade do caracter (copyright): - ISO Latin-1 e HTML. Podemos usar esses caracteres especiais para representar os tags em nossa pgina sem que eles sejam interpretados: - < representa o caracter ". Ento teremos exibido pelo browser o seguinte resultado : O caracter especial indica que deve ser inserido um espao em branco naquela posio. permitido o uso de vrios destes caracteres seguidos para inserir dois ou mais espaos em branco em um texto. Quando o browser interpreta um texto que contm vrios espaos em branco (sem a utilizao do caracter especial ), estes espaos so substitudos por um nico espao em branco.INSTITUTO INFNET - 30TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNETI200 HTML COMPLETOO HTML entende e respeita um nico espao em branco, como separador de palavras em um texto. Caso seja necessrio inserir mais de um espao em branco entre palavras, devemos usar o caracter especial - Infnet Infnet. Acentuao: A Web global e alguns pases no possuem acentos em seus alfabetos. Digitar os acentos diretamente em nossas pginas pode causar transtornos aos usurios que no possuem suporte nossa lngua. Por esse motivo, usamos definies especiais para representar esses caracteres. Por exemplo a palavra, acentuao deve ser escrita desse forma no browser: acentuao Automatizao: Os as entidades HTML () e () garantem que nossa acentuao ser vista por qualquer browser em qualquer parte do mundo. Algumas ferramentas de desenvolvimento de pginas HTML ajudam no processo de criao dos cdigos. Algumas ferramentas WYSIWYG traduzem os caracteres acentuados para os respectivos cdigos. Ferramentas como o HomeSite possuem uma ajuda para converter esses cdigos automaticamente. Exemplo do HomeSiteTabela de caracteres especiaisFormatao automticaINSTITUTO INFNET - 31TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNETI200 HTML COMPLETOTags de heading Cabealhos de texto no so cabealhos de pgina Cabealhos de texto: ... ... Entitulagem ... ... ... ... UA O HTML32Existem seis tags usados para exibir frases como Headings (cabealhos de texto) em pginas HTML. A diferena entre eles o tamanho. O primeiro nvel o que exibe o cabealho em maior tamanho e o ltimo nvel exibe no menor. Todos possuem tag de fechamento. No confundir os tags de cabealhos de texto (Headings) que servem para exibir um texto qualquer no corpo de sua pgina HTML, com o tag que serve para definir uma rea de cabealho lgico para o documento HTML. no exibe nenhuma informao na pgina, s define uma rea onde ficaro algumas informaes para o browser.INSTITUTO INFNET - 32TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNETI200 HTML COMPLETOTags de HeadingHeadings na pgina Cdigo da pgina HTML33UA O HTMLOs tags de Heading provocam 3 efeitos: Alteram o tamanho da fonte (para maior ou menor que a fonte padro); Colocam o texto em negrito; Do o efeito de pargrafo, isto , inserem uma quebra de linha. Os tags de heading so muito usados em conjunto com a linguagem CSS. Com os estilos podemos melhorar a aparncia dos estilos.INSTITUTO INFNET - 33TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNETI200 HTML COMPLETOEstrutura de linhas e pargrafos Inserir simples quebra de linha:
Impedir a quebra da linha: Inserir um pargrafo: ... Inserir um bloco de texto:...Nota: Em DHTML inserimos camadas (layers) com ... 34UA O HTMLO HTML necessita de um tag que indique a quebra de linha quando necessrio. O tag
tem essa funo. No existe um tag de fechamento para o
. Pode-se usar quantos tags
seguidos forem necessrios para colocar linhas em branco na pgina. O HTML tem a caracterstica de moldar-se rea til do navegador e, para isso, ele insere naturalmente quebras de linha quando a mesma j preencheu todo o espao da tela. Se quiser-se impedir essa quebra natural da linha, deve-se fazer uso do tag . Quando necessita-se inserir uma quebra de linha com inteno de se mudar de pargrafo, o tag apropriado o . Muitos cdigos no utilizam o fechamento para pargrafos e pode funcionar bem. No entanto ser necessrio utiliz-lo porque isso influenciar no uso da codificao de estilos chamada CSS Cascading Style Sheets, conforme ser estudado mais tarde. A quebra de linha do tag insere mais uma linha horizontal vazia, proporcionando um maior espacejamento entrelinhas. Diferentemente do tag anterior, pode-se utilizar os tags e para o efeito de pargrafo. No entanto, neste caso no ser adicionada uma linha horizontal vazia. Este tag utilizado em DHTML para dividir a visualizao em camadas, mas no se trata de assunto para este curso.INSTITUTO INFNET - 34TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNETI200 HTML COMPLETOAlternativas para alinhamento de texto... ... ... ... ... ... ... ... ... ... ... ... ... ...35UA O HTMLOs tags e possuem o atributo align para alinhar o texto ao centro, esquerda, direita ou justificado (center, left, right ou justify). Esse mesmo atributo align tambm pode ser utilizado nas tags de heading para alinh-las.INSTITUTO INFNET - 35TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNETI200 HTML COMPLETOFormatando o Texto Texto em negrito: ... Opo XHTML => ... Texto em itlico: ... Opo XHTML => ... 36Texto sublinhado: ... Texto cortado: ... Texto subescrito: ... Texto sobrescrito: ... UA O HTMLPodemos colocar um texto ou frase em negrito ou itlico usando os tags HTML e . Todo o texto entre o inicio e o fechamento do tag ser exibido em negrito ou itlico dependendo do tag usado. Negrito = Negrito Itlico = Itlico O HTML possui tags para formatar texto em modo sublinhado, sobrescrito, subscrito e com uma linha horizontal cortando as palavras (strike through). Esses tags devem ser usados para melhorar a leitura do texto na pgina HTML, e no para confundir o usurio. Todos possuem tags de fechamento. Para sublinhar (underline) um texto ou parte dele, usamos o tag e . Texto sublinhado Para colocar um texto em modo subscrito usamos o tag e . LOG10 8 Para colocar um texto em modo sobrescrito usamos o tag e . Para colocar uma linha cortando o texto usamos o tag e .INSTITUTO INFNET - 36TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNETI200 HTML COMPLETOExerccio terico Resolva o questionrio abaixo.37UA O HTMLExerccios:3) Assinale a alternativa correta: a) Todas os cdigos-fonte de pginas HTML esto contidos na rea de influncia de e b) Uma pgina marcada em Favoritos do navegador tem seu endereo e seu ttulo marcado pelo browser. O ttulo fica contido em e c) As fontes do cabealho da pgina tm sua exibio controlada pelas tags de heading e isso influencia quando o ttulo exibido no navegador d) Todas as alternativas acima so verdadeiras e) As alternativas a e b so verdadeiras 4) Assinale a alternativa em que todas os tags formatam somente o texto: a) , , , , b) , , , , c) , , , , d) , , , , e) , ,
, , 5) Assinale a alternativa em que todas os tags formatam somente pargrafos: a) , , b) , c) , d) , e) Todas as alternativas esto corretasINSTITUTO INFNET - 37TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNETI200 HTML COMPLETOLab 1 Observe a pgina abaixo e monte um cdigo-fonte para ela38UA O HTMLINSTITUTO INFNET - 38TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNETI200 HTML COMPLETOSoluo do Lab 1 Laboratrio 1 Este ttulo est escrito com a tag H1 Este ttulo est escrito com a tag H2 Este ttulo est escrito com a tag H3 Este ttulo est escrito com a tag H4 Este ttulo est escrito com a tag H5 Este ttulo est escrito com a tag H6 Agora existe um texto alinhado ao centro com o tag P. Mas este texto est alinhado direita com o tag DIV Agora continua-se com um novo texto alinhado esquerda com o tag DIV Mais outro texto alinhado esquerda com o tag DIV Com mais este texto alinhado esquerda com o tag P, perguntamos: O que se percebe quanto ao espaamento? Viu como interessante o alinhamento das tags de heading com o atributo ALIGN? INSTITUTO INFNET - 39TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNETI200 HTML COMPLETOLab 2 Codifique os textos a seguir em HTML:LOG108 uma representao de log de 8 na base 10 A = X3 + 8 uma equao matemtica Liquidao: de R$ 10,00 por R$ 8,75!40UA O HTMLINSTITUTO INFNET - 40TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNETI200 HTML COMPLETOSoluo do Lab 2 Lab 2 LOG108 uma representao de log de 8 na base 10
A=X3 + 8 uma equao matemtica
Liquidao: de R$ 10,00 por R$ 8,75! Outra soluo: Lab 2 LOG108 uma representao de log de 8 na base 10
A=X3 + 8 uma equao matemtica
Liquidao: de R$ 10,00 por R$ 8,75! INSTITUTO INFNET - 41TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNETI200 HTML COMPLETOO que j aprendemos?UA 1: O HTML BCA 1.1: O formato do HTML BCA 1.2: Os tags bsicos I (estrutura, formato, texto)42UA O HTMLAprendemos neste BCA: que o HTML dividido em cabealho e corpo, sendo que o ttulo fica no cabealho e o contedo da pgina no corpo que um cabealho de pgina se codifica com e o cabealho de texto (ttulo) se codifica com as tags de heading que o texto pode ser organizado em pargrafos e blocos de texto, ambos sendo alinhados com o atributo ALIGN que a formatao do texto em HTML deve ser feita com tags especficas que delimitam o incio e o fim do trecho formatadoINSTITUTO INFNET - 42TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNETI200 HTML COMPLETOTempo aproximado: Tempo aproximado: X horas, X Minutos X horas, X Minutos1.3 Os tags bsicos IIBloco de Construo do AprendizadoINSTITUTO INFNET - 43TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNETI200 HTML COMPLETOOs tags bsicos IIVoc aprender: Como controlar fontes em HTML A inserir comentrios A inserir uma rgua horizontal44UA O HTMLINSTITUTO INFNET - 44TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNETI200 HTML COMPLETOO tag Os atributos do so: size : determina o tamanho da fonte Valores de 1 a 7 face : Tipo da fonte. Arial, Courier New, Helvetica, Verdana, etc. color : Nome ou valor do RGB que determina uma cor. Aparncia do tag: Este texto est azul com fonte Courier New tamanho 2
Este texto est marrom com fonte Verdana tamanho 5

apostila html

Documents