HTML

HTML

Conceitos1 - Web: Abreviao de World Wide Web, um sistema de documentos em hipermdia (hypertextos, vdeos, sons, imagens, etc.) que so interligados.2 - Site: Conjunto de pginas web que representam uma pessoa, empresa ou instituio na web.3 - Browser: Tambm denominado de navegador, software utilizado para ler e interpretar as pginas web, possibilitando que os usurios interajam com as mesmas.

Conceitos4 - URL: Uniform Resource Locator Localizador Uniforme de Recursos uma sequncia de caracteres que define o endereo de um site ou recurso da web.5 - HTTP: O Hypertext Transfer Protocol, Protocolo de Transferncia de Hipertexto um protocolo de comunicao (presente na camada de aplicao, segundo o Modelo de Referncia OSI) muito utilizado na internet.

Introduo ao HTMLHTML significa Hyper Text Markup Language e a linguagem de marcao de hipertexto.

Princpios bsicos da Web:HTTP (Hiper Text Transfer Protocol)HTML (Hiper Text Markup Language).

Introduo ao HTMLRequisitos para o desenvolvimento de uma pgina WEB: Conhecer a linguagem HTML para escrever o cdigo fonte de sua pgina; Um editor de texto para gerar o seu cdigo fonte (Bloco de notas, Front Page, Dremweaver, entre outros); Um navegador de internet (browser) para visualizar as suas pginas (Internet Explorer, Netscape, etc).

Sintaxe da HTMLOs comandos HTML so chamados de TAGs (etiquetas);Os comandos tm uma sintaxe prpria, e seguem algumas regras: As TAGs aparecem sempre entre sinais de menor que (); Geralmente so utilizadas aos pares, sendo que a TAG de finalizao de um comando qualquer finalizada com a precedncia de uma barra (/).

Documento HTML.....

TAGs bsicas ...

...

...

...

AtributosBgcolor

Background

Text

Link

Comentrios no HTML e Tag meta

Caracteres especiais

Caracteres especiais

Cabealhos .

cabealho nvel 1 cabealho nvel 2 cabealho nvel 3 cabealho nvel 4 cabealho nvel 5 cabealho nvel 6

Pargrafos . ...

...

...

...

Quebra de linha

Quebra de linha
Quebra de linha

Fonte

A fonte do meu texto vai ficar arial, cor azul e tamanho 10.

Negrito, Itlico, sublinhado e riscado S a palavra aqui em negrito aqui S a palavra aqui em itlico aqui S a palavra aqui sublinhada aqui S a palavra aqui riscada aqui Inserindo linhas Uma linha vermelha acima e uma azul abaixo Listas de definio. dl dt dd Listas de Definicao em HTML 1 Termo que ser definido Aqui definimos o termo acima
2 Termo que ser definido Aqui definimos o termo acimaListas no numeradas. Listas nao-numeradas em HTML item da lista item da lista item da lista Listas numeradas Listas numeradas em HTML 1o item da lista 2o item da lista 3o item da lista Inserindo imagens: Tag Atributos da tag 1.Alt;2.Width;3.Height;4.Border;Atributos da tag 5.Align: Align=left Align=right Align=top Align=bottom Align=middle Inserindo udio e vdeo : Tag Atributos da tag BgsoundWidthHeightAutostartFalseTrueTag texto ou imagem Atributos:Target;Name.Atributo name.Aqui e um ponto para desvios...Desvia para o ponto AQUILayoutLayout: distribuio do espao de nossa pgina web, ou seja, o layout definir como nossa pgina web ser dividida, qual espao cada elemento (texto, imagem, animaes, etc.) ocupar.Tags:FrameTableDivTag FramesetCols;Rows.FrameSrcNoframeTag TableTrTdThCapitionAtributos tag tableBorder: tamanho da borda da tabela.Bordercolor: cor da borda da tabela.Cellspacing: distncia entre a borda da tabela e a borda das clulas.Cellpadding: distncia entre a borda interior da clula e o elemento dentro da mesma (texto, imagem, etc.)Colspan: mesclar colunas.Atributos tag tableRowspan: mesclar linhas.Bgcolor: definir uma cor para a clula (tambm vale para o atributo td)Tag colgroupEspecifica um grupo de uma ou mais colunas de uma tabela para a formatao.Atributos de colgroup.AlignValignWidthDivises Tag Style:Border: definir as bordas da div;Background-color:definir uma cor ou imagem de fundo na div;Width: definir a largura da div;Height: definir altura da div.Margin: forma genrica de definir as quatro margens de uma s vez;Subatributos de style.Margin-left: utilizado para definir a margem entre o extremo esquerdo do navegador e a div;Margin-right: utilizado para definir a margem entre o extremo direito do navegador e a div; Margin-top: utilizado para definir a margem entre o elemento acima da div e a prpria div;Margin-bottom: utilizado para definir a margem entre o elemento abaixo da div e a prpria div.Subatributos de style.Position: utilizado para definir o tipo de posicionamento da div:Zindex: utilizado para definir qual div ficar sobreposta (caso uma div invada o espao de outra div), a div que possuir o maior valor ficar sobreposta a qualquer outra.Float: A propriedade float especifica se ou no uma caixa (um elemento) deve flutuar. Os elementos posicionados absolutamente ignoram a propriedade float.Tag Tudo do formulrio fica dentro da tag form.Atributos:name: serve para identificar o determinado formulrio; method: define como as informaes do formulrio sero enviadas:get: Os dados inseridos fazem parte do URL associado consulta, enviado para o servidor e suporta at 128 caracteres.Tag post: os dados inseridos fazem parte do corpo da mensagem enviada para o servidor e transfere grande quantidade de dados.Tag Especifica uma variedade de campos editveis dentro de um formulrio.Atributos:name: associa o valor da entrada algum elemento que far o processamento dos dados;type: determina o tipo de campo de entrada de dados;Tag Value: define um valor padro para um determinado campo.Elementos de type: passwordServe para fazer um campo de senhas. Quando a pessoa digitar, aparecer o carcter * ou : O atributo maxlength foi utilizado para limitar o tamanho da senha, neste caso, a senha poder ter no mximo 6 caracteres.Elementos de type: radioQuando o usurio deve escolher uma resposta em uma nica alternativa, de um conjunto de alternativas.Elementos de type: radiosim
Elementos de type: checkboxProv outros botes atravs dos quais mais de uma alternativa pode ser escolhida.DOCTYPE TransitionalEste tipo de DOCTYPE inclui tanto os elementos estruturais como os elementos de apresentao (desaconselhados porque misturam estilo com contedos).DOCTYPE FramesetEste tipo de DOCTYPE consiste basicamente no DOCTYPE transitional com suporte a utilizao de frame (quadros).DOCTYPE em HTML 5Com o HTML5, a referncia por qual DTD(Document Type Definition) utilizar responsabilidade do browser.Metatag CHARSETVerses Anteriores:HTML 5:Tag LinkAtributo rel:Categorias em HTML 5Cada elemento pode ser classificado de acordo com suas caractersticas, desse modo, podemos categorizar elementos que possuem caractersticas simulares, em HTML 5 temos algumas categorias.Metadata Content (Contedo de metadados)So responsveis por criar uma relao entre um documento e seu contedo com outros documentos que distribuem informao por outros meios:Metadata Content (Contedo de metadados)basecommandlinkmetanoscriptscriptstyletitleFlow Content ( Fluxo de contedo)So a maioria dos elementos inseridos na tag body:Sectioning Content (Seccionamento de contedo)So os elementos responsveis por definir cabealhos, rodaps, sees, etc:articleaside nav section footerHeading Content (Contedo em rubrica)So os elementos que definem uma seo de cabealhos, esto contidos na categoria Sectioning:h1 h2 h3 h4 h5 h6 hgroupPhrasing Content (Contedo da frase)Fazem parte desta categoria elementos que marcam o texto do documento, bem como os elementos que marcam este texto dentro do elemento de pargrafo:Embedded Content (Contedo incorporado)Nessa categoria esto os elementos que importam outra fonte de informao para o documento html.Interactive Content (Contedo interativo)So os elementos que fazem a interao do usurio com a pgina web:Menus e ToolbarsO elemento menu usado para definir menus e barras de ferramenta.Submenus:ElementosComandos.Definindo comandos.1. Um link, um elemento a com atributo href;2. Um boto, um elemento button;3. Um boto, um elemento input com o atributo type contendo button, submit, etc;4. Um radiobutton, um elemento input com o atributo type contendo radio;5. Um checkbox, um elemento input com o atributo type contendo checkbox;6. Um elemento select, contendo um ou mais options, define um grupo de comandos;7. Um elemento qualquer com o atributo accesskey;8. Um elemento command.Tipos de comandosExistem trs tipos de comandos, so eles: commandUma ao comum; checkboxUma ao que pode estar no status de ligada ou desligada e alterna entre esses dois status quando clicada;radioUma ao que pode estar no status de ligada ou desligada, e quando clicada vai para o status de ligada, desligando todas as aes com o mesmo valor no atributo radiogroup.Novos Elementos EstruturaisSECTION: A tag section define uma nova seo genrica no documento. Por exemplo, a pgina inicial de um website pode ser dividida em diversas sees;NAV: O elemento nav representa uma seo da pgina que contm links para outras partes do website. Nem todos os grupos de links devem ser elementos nav, apenas aqueles grupos que contm links importantes;Novos Elementos EstruturaisARTICLE: O elemento article representa uma parte da pgina que poder ser distribudo e reutilizvel em FEEDs;ASIDE: O elemento aside representa um bloco de contedo que referencia o contedo secundrio de um website;HEADER: representa um grupo de introduo ou elementos de navegao, podendo ser utilizado para agrupar ndices de contedos, campos de busca ou at mesmo logos e/ou banners.Novos Elementos EstruturaisFOOTER: representa literalmente o rodap da pgina.Novos tipos de Campos para FormulriosDATE: Com esse novo campo podemos inserir em nossa pgina HTML um calendrio que possua todas as datas entre uma data mnima e uma data mxima: Novos tipos de Campos para FormulriosNUMBER: Neste novo campo somos capazes de criar uma caixa (box) que captura valores numricos inseridos manualmente ou utilizando um incrementador/decrementador existente.Novos tipos de Campos para FormulriosRANGE: O campo range tem exatamente a mesma funo do campo number (e os mesmos atributos), a grande diferena est no modo de visualizao do mesmo. Enquanto no number temos um box, no range temos uma interface de controle deslizante.Novos tipos de Campos para FormulriosCOLOR: Com o campo color somos capazes de capturarmos uma determinada cor escolhida pelo usurio, para isso esse campo cria uma paleta de cores, utilizamos o atributo value para definir uma cor padro (a que ser mostrada inicialmente).Tornando um campo de formulrio obrigatrioO Elemento CanvasSua utilizao permite criar desenhos diretamente no browser, ou seja, as animaes so renderizadas no prprio navegador.O Elemento CanvasDepois que a rea onde os desenhos sero renderizados definida, utilizamos JavaScript para desenhar:context=document.getElementById('canvas1').getContext('2d')Compatibilidade dos Browsers com HTML5Dentre os principais motores de renderizao temos: Webkit motor de renderizao do Safari e Google Chrome; Gecko motor de renderizao do Firefox, Mozilla e Camino; Trident motor de renderizao do Internet Explorer 4 ao 9; Presto motor de renderizao do Opera 7 ao 10;