HTML 5-CSS 3

HTML 5 -HTML uma linguagem de marcao -As definies do HTML so publicadas pela W3C -Normal Elements - Estes elementos
s so abertos com uma tag e fechadas com outra Ex.:<p> Este um paragrafo</p> -Void Elements - Estes elementos no possuem contedo Ex.:<br/> -O uso do caractere "/" obrigatrio. Elementos: -area, base, br, col, embed, hr, img, input, keygen, lin k, meta, param, source, track, wbr -Elemento <!DOCTYPE> -Informa ao navegador o tipo de documento Ex <!DOCTYPE html> -Comentrios -So feitos com as tags:  -Block-level Elements -Ocupam todo o espao horizontal da pgina -Inline-level Elements -ocupam horizontalmente somente o espao nescessrio. -Character Entity -Cdigo de caracteres no html, utilizado para insero de determinados caracteres no comuns. -Tag <code></code> -inline -utilizado para colocar cdigo de programao -utiliza fonte mono espaada -Tag <sub></sub> -Definir textos subscrito -inline -Tag <sup></sup> -Definir textos sobrescrito -inline -Tag <blockquote></blockquote> -Defini citaes longas -Possui o atributo cite que serve para indicar a fonte da citao -block -Tag <q></q> -Defini citaes curtas -Possui o atributo cite que serve para indicar a fonte da citao -inline -Tag <abbr></abbr> -Difinir Abreviaes -inline Ex.:<abbr title="Universidade de So Paulo">USP</abbr> -Tag <ins></ins> -inline -Mostra que o texto sofreu alteraes e o texto entre estas tags foi inserido. -Tag <del></del> -inline -Mostra que o texto sofreu alteraes e o texto entre estas tags foi retirado do texto. -Tag <s></s> -inline -Mostra que o texto sofreu alteraes e o texto entre estas tags dei xou de ser correto. -Tag <time></time>
-inline -Permite que datas e horrios sejam definidos em documentos HTML Ex.:<time>1984-10-30</time> Listas -Lista de descries -So listas so formadas por nomes e suas descries -Ficam entre as tags <dl></dl> -Os termos so definidos com as tags<dt></dt> -As descries ficam nas tags<dd></dd> -Esses elementos so block-level Ex.:<dl> <dt>K01-Lgica de Programao</dt> <dd>Conhecimentos em Lgica de Programao o p r - requisito fundamental13 para que uma pessoa consiga aprender qualquer Linguag em de Programao ...</dd> <dt> K02 - Desenvolvimento Web com HTML , CSS e JavaScript </dt> <dd>Atualmente , praticamente todos os s istemas corporativos possuem interfaces web . Para quem deseja atuar no mercado de desenvolvimento ... </dd> </dl> -Lista com ordem -Ficam entre as tags <ol></ol> -Os itens da lista so definidos com as tags<li></li> -block-level Ex.:<ol> <li> Ferver 600 ml de gua em uma panela . </li> <li> Retirar o macarro do pacote . </li> <li> Colocar o macarro na panela no fogo baixo . </li> <li> Cozinhar o macarro por 3 min . </li> <li> Temperar a gosto.</li> </ol> -Lista sem ordem -Ficam entre as tags <ul></ul> -Os itens da lista so definidos com as tags<li></li> -block-level Ex.:<ul> <li> Conhecimento de algum sistema opera cional ( Windows / Linux / MacOS X ) </li> <li> Lgica de programao </li> </ul> -Tag <iframe> -Adiciona um documento HTML dentro de outro -inline Ex.:<iframe src="http://www.k19.com.br"> Esse navegador no suporta o elemento<i>iframe</i> . </iframe> -Tag <a> -Para criar links -inline -o parametro href determina o caminho
-o parametro target determina aonde o destino do link sera abert o -_blank - abre em uma nova janela ou aba -_self - abre na mesma janela -_parent - abre o link na janela ou no frame onde est con tido o frame que exibe o documento que contm o link. -_top - abre na janela que ancestral do frame Ex.:<a href="pagina1.html" target="_blank"> Abre em outra janela ou aba </a> -Tag <img> -Insere imagens -inline Ex.:<img src="http://www.k19.com.br/css/img/k01-logo-large.png" alt="K01" /> -Tabelas -Ficam entre as tags <table></table> -As linhas so definidas pela tags <tr></tr> -As clulas do titulo so definidas com as tags <th></th> -As clulas de dados so definidas com as tags <th></th> -os elementos so block-level Cabealho, corpo e rodap -Podemos usar tbm as tags: <thead> para definir cabealho, <tfoot> para definir rodap e <tbody> para definir o corpo da tabela. -Rtulos -Insere atravs das <label>. -Caixa de entradas especificas -Caixa de busca Ex.:<input type="search"> -Caixa de nmeros: Number -oferece um mecanismo preciso para o usurio selec ionar um valor desejado Ex.:<input type="number"> Range Ex.:<input type="range"> -Caixa de e-mail Ex.:<input type="email"> -Caixa de telefone Ex.:<input type="tel"> -Caixa de Url Ex.:<input type="url"> -Caixa de datas e horas -Date: Utilizado para coletar data(dia, ms e ano) sem fuso horrio Ex.:<input type="date"> -DateTime: Utilizado para coletar data(dia, ms e ano) e hora(hora , minuto, segundo e frao de segundo) com fuso horrio em UTC. Ex.:<input type="datetime"> -DateTime-local:Utilizado para coletar data(dia, ms e ano) e hora (hora, minuto, segundo e frao de segundo) sem fuso horrio Ex.:<input type="datetime-local"> -Month: Utilizado para coletar data composta por ms e ano sem fus o horrio Ex.:<input type="month"> -Time: Utilizado para coletar hora(hora, minuto, segundo, frao de segundo) sem fuso horrio.
Ex.:<input type="time"> -Week: utilizado para coletar data composta por semana e ano sem fuso horrio Ex.:<input type="week"> -FieldSet -Agrupa logicamente componente em um formulrio. -block-level -utiliza as tags <legend></legend> para definir a legenda Ex.:<fieldset> <legend>Dados Pessoais</legend> <label for="nome_id">Nome:</label> <input id="nome_id" type="text" name="nome"> </fieldset> -Validao -As caixas de e-mail e url fazer validaes automticas de e-mail e ur l vlidos -Podemos utilizar o atributo required nos campos obrigatrios Ex.:<input id="nome_id" name="nome" type="text" required > -Se determinado campo requerer uma validao atraves de expresso regu lar, utilizamos o parametro pattern Ex.:<input id="placa_id" name="placa" type="text" patter n="[A-Z]{3} [0-9]{4}" title="As placas so formadas por 3 letras ou 4 nmeros"> -Se um determinado campo numrico deve estar em um inteverva-lo, u tilizamos os parametros min e max Ex.:<input id="idade_id" name="idade" type="number" min= "18" max="60" title="A idade minma 18 e a mxima 60"> -Partes de um documento HTML -Tag<Header> - utilizado para definir um cabealho de um documento HTML ou de uma seo de um documento HTML. -Tag<footer> - utilizado para definir um rodap para o documento HTML ou para seo do HTML. -Tag<nav> -Utilizado para definir um bloco com os principais links de um documento HTML. -Tag<article> - utilizado para definir uma composio independente em um do cumento HTML -Tag<aside> - utilizado para definir algum contedo que esteja relacion ado ao contedo principal. Normalmente, esse elemento exibido em um coluna lateral . -Tag<section> - utilizado para definir uma seo genrica de um documento. Um agrupamento de elementos. Normalmente as sees possuem cabealho e rodaps. -Agrupando Elementos -Tag<div> -block-level -Tag<span> -inline CSS 3 -Padroniza a forma como as pginas web so exibidas em diferentes navegadore
s Box Model -Todo elemento HTML est contido em um box -O box de um elemento HTML composto de: contedo(content), margem interna(padding), borda(border) e margem externa(margin). Aplicando CSS ao HTML -Trs Maneiras -Inline Style -Aplica-se atravs do atributo style do elemento h tml Ex.:<p style="color:red"> -Internal style sheet -As regras CSS podem ser definidas dentro do ele mento style, este elemento deve ficar dentro de head. Ex.:<head> <style> p{ color:red; } </style> -External style sheet -A regras CSS ficam em um arquivo separado e dep ois assocciado ao HTML atravs de: Ex.:<link rel="stylesheet" type="text/css" href= "estilo.css"> Unidades de medidas -Unidades absolutas -cm(centimetro), mm(milimetro), in(polegada),pt( ponto = 1/72in), pc(pica = 12pt), px(pixel) -Unidades relativas -em,ex, ch, rem ,vw, vh, vmin, vmax Background -Definimos a formatao de background atravs das sequintes pr opriedades CSS: -Background-color: define a cor do fundo dos ele mentos Ex.:background-color:yellow; -Background-image: define a imagem de fundo Ex.:background-image:url('bg-image.png'); -Background-repeat: Caso a imagem de fundo seja menor que o elemento, vc pode utilizar esta propriedade para replicar a imagem. -Background-attachment:define a o comportamento da imagem de fundo em relao a rolagem do contedo. Valores:scroll(o background acompanha a rolagem) ou fixed(o background no acompanha a rolagem) -Background-position:determina a posio da imagem u tilizada como background -Background-clip: determina qual a rea do box dev e ser afetado pela pela propriedade background-color. Valores:border-box(at as bordas), padding-box(at a s margens internas), content-box(somente o contedo) -Background-origin:determina aonde ficar o ponto de origem para o posicionamento das imagens. -Background-size:define o tamanho da imagem de b ackground
Textos -color:podemos definir a cor do texto Ex.:p{ color:blue; } -text-align: definimos o alinhamento do texto. Valores:left, right, center, justify, inherit(herda do e lemento pai) -text-decoration: define a decorao do texto. Valores:underline,overline, line-throught,inherit. -text-transform: define a capitalizao do texto. Valores:capitalize(a primeira letra de cada palavra ser m aiscula), uppercase(todas as letras maisculas), lowercase(todas as letras minsculas ), inherit. -text-indent:define o comprimento da indentao. -letter-spacing:define o espaamento entre as letras. -word-spacing: define o espaamento entre as palavras. -word-wrap: define como as palavras so dividas em uma que bra de linha. -line-height:define a altura das linhas. -text-shadow:adiciona sombra em um texto Fontes -font-family:define a fonte a ser utilizado no texto. -font-size: define o tamanho da fonte do texto -font-style:define o estilo da fonte Valores:normal,italic,oblique, inherit font-weight:define a grossura dos caracteres. Listas -list-style-type:define o simbolo utilizado nos itens de uma determinada lista. -list-style-image:pode-se definir uma imagem personaliza da nos itens da lista Ex.:list-style-image:url('estrela.png'); Bordas -border-style:define o estilo das bordas de um elemento HTML Valores:dotted,dashed, solid, double,groove, ridge, inse t,outset -boder-width:define a grossura das bordas Valores:thin(borda fina),medium(borda mdia),thick(borda g rossa),medida(medida definida),inherit -border-color:define a cor da borda -border-radius: define arrendondamento das bordas. Sombras -box-shadow: permite adicionar sombras internas e extern as nos boxes dos elementos HTML. Margens -margin-*:o tamanho das margens externas do box HTML pod em ser definidos individualmente com as propriedades: -margin-left, margin-top, margin-right, margin-b otton -padding-*:o tamanho das margens internas do box HTML po dem ser definidos individualmente com as propriedades: -padding-left, padding-top, padding-right, paddi ng-bottom
Altura e Largura -height:Define a altura dos boxes de elementos HTML -width:Define a largura dos boxes de elementos HTML Display e Visibilidade -display:define a forma de exibio dos elementos HTML Valores: -inline:No gera quebra de linha;o boxes inline em purram os boxes vizinhos horrizontalmente; -block:gera quebra de linha;ocupa todo o espao ho rizontamente. -none:no so exibidos e nem ocupam espao. -visibility:determina se o elemento deve ser exibido ou no. Valores:visible, hidden, inherit. Opacidade -opacity:Define a opacidade dos elementos HTML Posicionamento -position:define o posicionamento dos boxes dos elemento s HTML Valores: -static:o box colocado na sua posio natural -relative:o box colocado em uma posio relativa a s ua posio natural; as propriedades left, top, right, bottom so usadas para determina r o deslocamento em relao a posio natural -fixed:o box colocado em uma posio relativa pgina e acompanha a rolagem de contedo;as propriedades left, top, right, bottom so usadas para determinar o deslocamento em relao a pgina. -absolute: o box colocado em uma posio relativa po sio do elemento ancestral; as propriedades left, top, right, bottom so usadas para determinar o deslocamento em relao ao ponto de referncia. -float:podemos fazer que um box flutue ao redor dos dema is elementos. Valores:left,right, none, inherit -clear:os boxes de elementos HTML prximos de um box com p ropriedade float diferente de none so empurrados horizontamente esquerda ou direi ta. Podemos definir que ao invs deles serem empurados, eles sejam exibidos em uma nova linha atraves da propriedade clear. Valores: -left: no permite elementos flutuando esquerda. -right: no permite elementos flutuando direita. -both: no permite elementos flutuando nem esquerd a nem direita. -none:permite elementos flutuandos esquerda ou d ireita. -inherit- assume o valor do elemento HTML pai. z-index:define a sobreposio do box. Seletores Bsicos -*:Seleciona todos os elementos -p:Seleciona todos os elementos p -.erro: seleciona todo elemento da classe erro -#conteudo: Seleciona o elemento com id conteudo -p a: Seleciona todo elemento a descendente de um elemen
to p -p > a: Seleciona todo elemento a filho de um elemento p -h1 + p:Seleciona todo elemento p imediatamente precedid o de um elemento h1 -h1 ~ p:Seleciona todo elemento p precedido de um elemen to h1 Seletores de atributos -[min]: Seleciona todos os elementos que tenham o atribu to min definidos -[min='10']: Seleciona todos os elementos que tenham o a tributo min igual a 10 -[title~='k19']: Seleciona todos os elementos que possue m a palavra 'k19' no valor do atributo title -[href^='https']: Seleciona todos os elementos que tenha m valor do atributo href inicializados com 'https' -[href$='.css']: Seleciona todos os elementos que tenham valor do atributo terminados com '.css' -[title*='k19']: Seleciona todos os elementos que possua m a string 'k19' no valor do atributo title -[href|='https']: Seleciona todo elemento que tenham o a tributo href iniciado com 'https' Pseudo-classes -:root: Seleciona o elemento raiz do documento -:ntd-child(3): Seleciona todo terceiro elemento contido em algum outro elemento. -:ntd-last-child(3): Seleciona todo terceiro elemento de trs para frente contido em algum outro elemento. -a:nth-of-type(3): Seleciona todo elemento a que terceir o elemento contido dentro de outro elemento. -a:nth-last-of-type(3): Seleciona todo elemento a que te rceiro elemento de trs para frente contido em algum outro elemento. -:first-child: Seleciona o primeiro elemento contido em algum outro elemento. -:last-child: Seleciona o ltimo elemento contido em algum outro elemento. -a:first-child: Seleciona o primeiro elemento a contido em algum outro elemento. -a:last-child: Seleciona o ltimo elemento contido em algu m outro elemento. JavaScript -Permite a criao de pginas dinmicas e interativa. Aplicando o JavaScript ao HTML -JavaScript interno -o cdigo javascript definido dentro de um documento HTML no corpo do elemento <script> Ex.:<script> alert("K19"); </script> -JavaScript Externo -o cdigo JavaScript definido em arquivo separado e depois associado ao documento HTML atravs do elemento script. Ex.:<script src="script.js"></script> Objetos Prottipo
-Podemos criar um objeto baseado em outro existente, atr avs da propriedade especial __proto__ Ex.:var curso = { sigla: "K11", nome: "orientao a objeto" }; var novo_curso; novo_curso.__proto__ = curso; Removendo uma propriedade Ex.:var curso = { sigla: "K11", nome: "Orientao a objeto" }; //deleta a propriedade sigla do objeto curso delete curso.sigla; Verificando a exitncia de uma propriedade Ex.:var curso = { sigla: "K11", nome: "Orientao a objeto" }; //Verifica se a propriedade sigla existe em curs o console.log('sigla' in curso); Atribuindo funes em objetos Ex.:var deposita = function(valor){ this.sal do += valor; }; var conta = { saldo:0 }; //vincula temporariamente o metodo deposita no o bjeto conta deposita.apply(conta,[200]); DOM(Document Object Model) Recuperando elemento -getElementByID -Busca elemento HTML por ID Ex.:var elemento = document.getElementByID("cont eudo"); -getElementByName -Busca elemento atravs do valor do atributo name. -Retorna um array de objetos Ex.:var array = document.getElementByName("categ oria"); -getElementByTagName -Busca elementos HTML de um determinado tipo. -Retorna um array de objetos Ex.:var array = document.getElementByTagName("p" ); -getElementByClassName -Busca elementos HTML pelo valor do atributo cla ss.
-Retorna um array de objetos Ex.:var array = document.getElementByClassName(" confirmado"); Recuperando elementos HTML atravs de seletores CSS -querySelector -Devolve somente o primeiro elemento HTML compat ivel com o seletor CSS utilizado. -querySelectorAll -Devolve um array com todos os elementos compatve is com seletor CSS utilizado. Ex.:var array = document.querySelectorAll('div.a provado'); Acessando atributos de elementos HTML -getAttribute -Retorna o valor do atributo ou null se o atribu to no existe. Ex.:var valor = elemento.getAttribute("type"); -innerHTML -Acessa o contedo de um elemento HTML Ex.:var conteudo = elemento.innerHTML; -setAttribute -Podemos modificar os atributos de um elemento H TML Ex.:elemento.setAttribute("type","text"); -style -Podemos alterar o estilo(CSS) de um elemento HT ML. Ex.:elemento.style.boderColor = "red"; -remove -Podemos remover um elemento HTML Ex.:var elemento = document.getElementById("cont eudo"); elemento.remove(); -createElement e appendChild -Podemos criar elementos HTML e adiciona-los em um documento HTML. Ex.:var titulo = document.createElement("h1"); titulo.innerHTML = "K19 Treinamentos"; var elemento = document.getElementById(" conteudo"); elemento.appendChild(titulo);

HTML 5-CSS 3

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML 5-CSS 3

Загружено:

Авторское право:

Доступные форматы

HTML 5 -HTML uma linguagem de marcao -As definies do HTML so publicadas pela W3C -Normal Elements - Estes elementos

Вам также может понравиться