1. Estrutura da interface em código de um Documento Html 2. Semantica Documento e seus componentes: Documento - arquivo texto contendo tags de marcação que informa ao browser como exibir apágina. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Elemento - estrutura semantica do documento Atributo - define uma propriedade de um elemento Valor - do atributo Tag - são elementos entre sinais < > . ex: <elemento> . Significa um código (ou instrução) em Html. APIs - ex: Element.tagName, nodeName, Document.createElement(), Element.setAttribute(),....) Interações com XPath e XSLT Inserções de marcações dinamicas (document.open(), document.close(),document.write(), document.write(), innerHTML, outerHTML, insertAdjacentHTML() ) http://dev.w3.org/html5/spec/Overview.html#semantics-0 3. SintaxeBNF de documento documentoHtml = tag_abertura tag_fechamento tag_abertura = "<" elemento [(atributo "=" valor)+] ">" tag_fechamento= "<\\" elemento ">" Diagrama sintático gerador do gráfico http://www-cgi.uni-regensburg.de/~brf09510/syntax.html sintaxe da BNF http://www-cgi.uni-regensburg.de/~brf09510/backus_naur_wirth.html 4. Pagina de SaidaUsando HTML4 + CSS + (javascript + xml) ver código clicar na figura para ver página 5. Lista de Conjuntos de Elementos de uma pagina raiz (html) meta dado do documento (head, title, base, link, meta, style ) scripting (script, noscript) seção (body, section, nav, artigo, aside, h1...h6, hgroup,header, footer, address) conteudo (p, hr,br, pre, blockquote, ul, li, dl, dt, dd, figure, figcaption, div) texto (a, em, strong, small,cite,q,dfn,abbr,time,code,var,samp,kbd,sub, sup, i, b, mark, ruby, rt, rp,bdo, span,br,wbr ) edição (ins, del) conteudo embutido (img, iframe, embed, object, param, video, audio, source, canvas, map, area) dados (table, caption, colgroup,col, tbody,thead, tfoot, tr, td, th) formulario (form, legend, label, input, type, button, select, datalist, optgroup, textarea, keygen, output, progress, meter) interativo (details, summary, command, menu) links (alternate, aechives, author, bookmark, external, help, icon, license, nofollw, noreferrer, pingback, prefectch, search, stylesheet, sidebar, tag, index, up, first,last, next, prev) 6. Pagina de EntradaUsando HTML4 ver código clicar na figura para ver formulário Entrada para editar: Conteudo Tópico - titulo, nome, lead, rodapé (link, origem, referencia) Elemento - nome e desrição Página Cabeçalho e contato 7. Categorias de elementos Html5 * Metadata content ( base, command, link, meta, noscript, script, style, title ) * Flow content ( a, abbr, address, area (if it is a descendant of a map element), article, aside, audio, b, bd, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, ...........) * Sectioning content ( article, aside, nav, ,section * Heading content ( h1, h2, h3, h4. h5, h6, hgroup) * Phrasing content (a, abbr, area, .....) * Embedded content ( audio, canvas, embed, iframe, img, math, object, svg, video) * Interactive content (a,audio, buttonn, details, embed, iframe,input, keygen, menu, object, select, textarea, video) clique na figura para mais detalhes Elementos de estrutura: section represents a generic document or application section. section representa um documento genérico ou seção de aplicação. It can be used together with the h1 , h2 , h3 , h4 , h5 , and h6 elements to indicate the document structure. Pode ser usado em conjunto com o h1 , h2 , h3 , h4 , h5 e h6 elementos para indicar a estrutura do documento. article represents an independent piece of content of a document, such as a blog entry or newspaper article. article representa uma peça independente do conteúdo de um documento, como um blog ou artigo de jornal. aside represents a piece of content that is only slightly related to the rest of the page. aside representa uma parte do conteúdo que é apenas um pouco relacionado com o resto da página. hgroup represents the header of a section. hgroup representa o cabeçalho de uma seção. header represents a group of introductory or navigational aids. header representa um grupo de auxiliares de navegação ou introdutório. footer represents a footer for a section and can contain information about the author, copyright information, et cetera. footer representa um rodapé de uma seção e pode conter informações sobre o autor, informações sobre direitos autorais, et cetera. nav represents a section of the document intended for navigation. nav representa uma seção do documento destinado para a navegação. Elementos de conteudo: &nbs 8. Pagina Htm5
