95
TÉCNICAS DE PROGRAMAÇÃO PARA INTERNET PROF. VALÉRIA HELENA P. GERBELLI

Apostila HTML

Embed Size (px)

DESCRIPTION

Elementos HTML não obsoletos, estrutura basica, etc.

Citation preview

TCNICAS DE PROGRAMAOPARA INTERNET PROF. VALRIA HELENA P. GERBELLI H.T.M.L HYPERTEXT MARK-UP LANGUAGE O QUE UM BROWSER Procure por BROWSE emseu dicionrio.O resultado serFOLHEAR. BROWSER o folheador da Internet. Permite navegar entre as pginas. O QUE UM BROWSER Podemos fazer no Bloco de Notas, ou usar softwares que agilizam seu desenvolvimento como Web Expression da Microsoft, Alleycode HTML Editor, Visual Studio na parte de HTML, DreamWeaver, etc. O importante saber que todo arquivo deve ter sua extenso .htm ou .html e deve ser texto puro (caractere ASCII), nunca use e formate suas pgina no word ou outros software. COMODESENVOLVERUMSI TE?ASCII American Stardard Code for Information Interchange Cdigo Americano Padro para Troca de Informaes. uma tabela de cdigos que tem como objetivo padronizar os caracteres alfa-numricos, para que todos os computadores de diferentes fabricantes, possam entender os cdigos. Portanto um arquivo ASCII no tem formataes. COMODESENVOLVERUMSI TE?Todo arquivo que gravado no computador tem um tipo. Um arquivo do Word tem a extenso .DOCX, um arquivo do Paint tem o tipo .BMP, assim por diante.Cada um, dependendo do seu tipo ter o seu cone de acordo com o Sofware do qual ele foi criado. Uma pgina reconhecida pelo seu Navegador Padro instalado em sua mquina, ele s precisa ter a extenso .HTM ou .HTML. COMOUMAPGI NA RECONHECI DAPEL OBROWS ER?O W3C liderado por Tim Berners-Lee, o inventor da World Wide Web, e por Dr. Jeffrey Jaffe, diretor executivo do W3C. Eles so apoiados por uma equipe de tcnicos que ajudam a coordenar o desenvolvimento de tecnologia e gerenciar as operaes do Consrcio, auxiliados tambm pelos escritrios locais, como o W3C Brasil, hospedado peloCGI.br e NIC.br Os membros filiados ao W3C e especialistas convidados proveem energia para os grupos de trabalho que desenvolvem os padres W3C para a Web. A grande comunidade da Web tambm desempenha um papel importante ao revisar e opinar sobre as especificaes, h muitas maneiras de participar do W3C, mesmo individualmente. W3 C WORL DWI DEWEB CONS ORTI UN O W3C liderado por Tim Berners-Lee, o inventor da World Wide Web, e por Dr. Jeffrey Jaffe, diretor executivo do W3C. Eles so apoiados por uma equipe de tcnicos que ajudam a coordenar o desenvolvimento de tecnologia e gerenciar as operaes do Consrcio, auxiliados tambm pelos escritrios locais, como o W3C Brasil, hospedado peloCGI.br e NIC.br Os membros filiados ao W3C e especialistas convidados proveem energia para os grupos de trabalho que desenvolvem os padres W3C para a Web. A grande comunidade da Web tambm desempenha um papel importante ao revisar e opinar sobre as especificaes, h muitas maneiras de participar do W3C, mesmo individualmente. Fonte : http://www.w3c.br/Sobre/ConhecendoW3C W3 C WORL DWI DEWEB CONS ORTI UN HyperText Markup Language Linguagem de Marcao de Hipertexto - Hipertexto so os links. HTML uma linguagem de formatao, esttica que permite formatar apenas os textos. Seus comando veem dentro de tags (sinais de maior e menor).Quando falamos em formatar textos, tambm podemos dizer que um texto formatado como link, se transforma em link, um nome de arquivo de imagem, dentro de um comando, carrega essa imagem para a tela, uma tag com funo de inserir um linha horizontal para criar um layout bonito, tambm permitido com esta linguagem de formatao. Quase todas as tags tm a sua correspondente de fechamento : texto formado . H. T. M. L.A estrutura de uma pgina HTML, significa que temos um padro para iniciar e terminar uma pgina. O que deve mudar o meio, onde digitado e formatado o corpo da pgina.Para digitar os comandos tanto faz ser maiscula ou minscula, pois HTML no Case Sensitive. Vejamos a estrutura da Linguagem :

TITULO DA PGINA - BARRA DE TTULO Aqui vai o seu texto, sua tabela, sons, figuras, listas, tudo o que voc quiser H. T. M. L. ESTRUTURABSI CA > - Indica ao Browser que sua pgina est formatada em HTML. O Atributo language indica a linguagem principal do documento. - Do Ingls Cabea Aqui significa Cabealho Fica a parte inteligente da pgina. Aqui inserimos os Metadados que so informaes sobre a pgina. - importa um arquivo de configurao externo - Do Ingls Ttulo Ttulo da Pgina - Indica que terminamos de colocar o ttulo ENTENDENDOAES TRUTURA BS I CA - Indica que terminamos de colocar o cabealho - Do Ingls Corpo inicio do corpo da pgina, aqui dever ser inserido tudo o que desejamos como : tabelas imagens links listas - etc - Indica trmino do corpo da pgina - Indica trmino da pgina Preste ateno !! Caso voc no tenha todas suas pginas iniciadas e terminadas desta maneira, voc est fora do Padro W3C !!! ENTENDENDOAES TRUTURA BS I CA O doctype a maneira de voc dizer para qualquer navegador como ele deve agir ao ler seu cdigo HTML. Deve estar logo no comeo da pgina. A tag DOCTYPE no tem um finalizador; No diferencia maiscula de minscula; Use validate do W3C para verificar que voc escreveu um documento HTML vlido. DOCTYPE Esta declarao contm todos os elementos HTML, mas no inclui elementos de apresentao obsoleta (como fonte). Frameset no so permitidos DECLARAOSTRI CT Esta declarao contm todos os elementos HTML, inclui elementos obsoletos (como fonte). Frameset no so permitidos DECL ARAOTRANSI TI ONAL Esta declarao igual ao Transitional, mas permite o uso de contedo de quadros. DECLARAOFRAMESET umcomandoimplementadonocdigodapginaweb,dentro da seo para passar instrues a programas externos ou aesmaissimples,comoporexemplo,informarqualapessoa responsvel pelo desenvolvimento da pgina. Outras so utilizadas para passar aos sites de busca, instrues sobre o ttulo da pgina e uma breve descrio a ser exibidas nos resultados de busca, etc. META A tag meta suportado em todos os principais navegadores. IE Mozila Firefox pera Chrome Netscape META Metadados so dados (informaes sobre os dados) A tag meta fornece metadados sobre o documento HTML. Metaelementossotipicamenteusadosparaespecificar descriodapgina,palavras-chave,autordodocumento, data da ltima modificao, e outros. META Tags meta sempre vai dentro da seo ; So sempre passados como pares nome / valor; Oatributodecontedodeveserdefinidoseonomeouo atributohttp-equiv estdefinida. Se nenhum sodestesso definidos, no se pode atribuir o atributo de contedo. META estatagmetaquegeralmentedefineadescrioexibidados resultados do Google. Descreve o contedo do site de uma forma aestimularointeressedaspessoasemconhecermaissobreo contedo de uma pgina, para aumentar a visitao do seu site. METADESCRI PTI ON Antigamenteossitesdebuscas,tinhamdificuldadeeminterpretara relevnciadesitesparadeterminadaspalavras-chaveeutilizavao contedo da Meta Keyword para ajud-los a interpretar o contedo da pgina. Os webmasters perceberam que bastava incluir uma afinidade de palavras nessa tag para aparecer nas buscas, mesmo palavras no relacionadasaocontedodapgina.Aexperinciadousurioera comprometidaeaoserdirecionadaaumapaginaquenofinaldas contas no possua o contedo buscado. METAKEYWORD Os sites de busca evoluram e hoje desconsideram a meta keyword, uma vez que ela no exibida ao usurio, seja nos resultados de busca, no contedo do site, os buscadores no consideram como um fator de relevncia. METAKEYWORD A TAG BODY responsvel por configurar o corpo da pgina, ou seja, tudo o que voc tem no site, fica dentro do corpo da pgina. Existe apenas um na pgina. Se voc tiver alguma coisa a mais para colocar referente ao corpo da pgina, altere a TAG e no insira outra TAG. TYPE=TEL Insere um objeto para insero de data. Data de Nascimento TYPE=DATE Insere um objeto para insero de horas. Hora do Nascimento TYPE=TI ME Insere uma lista de opes. Estado TYPE=SELECT Insere as opes da lista de opes. RS SC PR SP TYPE=SELECT Insere um objeto para insero de texto de pesquisa. Pesquisa TYPE=SEARCH Insere uma rea de texto para insero de pequenos textos. Sugesto/Crtica/Dvidas Cols define o numero de colunas Rows define o nmero de linhas TYPE=TEXTAREA Insere um boto que ter como fundo uma figura. TYPE=I MAGE Insere um boto que encarregado de executar a ao do formulrio. Assim que clicamos neste boto, ele verifica a ao do form (action) e executa. TYPE=SUBMI T Insere um boto que limpar todos os valores dos objetos. TYPE=RESET Insere um boto, muito usado para ativar um Script. TYPE=BUTTON Crie um formulrio de cadastro de alunos. Este formulrio deve ter seus dados agrupados pelo Fieldset. Use os objetos de acordo com o valor que ir abrigar. D nome todos os objetos e valores nos que necessitam. O formulrio deve conter os seguintes dados : EXERC CI O Nome Data de Nascimento Hora do Nascimento Idade Sexo (feminino / masculino) Curso (Informtica/Administrao / Redes / Mecatrnica) Senha de Cadastro E-Mail Telefone Site (se houver) Grau de Satisfao com Escola Cor Preferida EXERC CI O