Guia Completo de HTML, Resumos de Informática

Baixe Guia Completo de HTML e outras Resumos em PDF para Informática, somente na Docsity!

Guia Completo

Descubra o

Poder do HTML

Por Alisson Suassuna

ISENÇÃO DE RESPONSABILIDADE Todas as informações contidas neste guia são provenientes de minhas experiências pessoais ao longo de vários anos. Embora eu tenha me esforçado ao máximo para garantir a precisão e a mais alta qualidade dessas informações e acredite que todas as técnicas e métodos aqui ensinados sejam altamente efetivos, eu não me responsabilizo por erros ou omissões. Sua situação e/ou condição particular pode não se adequar perfeitamente aos métodos e técnicas ensinados neste guia. Assim, você deverá utilizar e ajustar as informações deste guia de acordo com sua situação e necessidades. Todos os nomes de marcas, produtos e serviços mencionados neste guia são propriedades de seus respectivos donos e são usados somente como referência. Este DE RESPONSABILIDADE DIREITOS AUTORAIS Este guia está protegido por leis de direitos autorais. Todos os direitos sobre o guia são reservados. Você não tem permissão para vender este guia nem para copiar/reproduzir o conteúdo do guia em sites, blogs, jornais ou quaisquer outros veículos de distribuição e mídia. Qualquer tipo de violação dos direitos autorais estará sujeita a ações legais.

Conheça o Passo A Passo para se Torna um Desenvolvedor FullStack

_____________________________________________________________________________

Conheça Aqui

Sumário

• Um Pouco Sobre Meu Trabalho..................................................................................................................... _____________________________________________________________________________
• Olá Tudo Bem?...................................................................................................................................................
  • Porque Se torna um Desenvolvedor....................................................................................................
  • Calma, Calma... Você Consegue...........................................................................................................
  • Existe Sim Um Caminho.........................................................................................................................
• Capitulo 02 - Introdução ao HTML...............................................................................................................
  • Hello World (Olá Mundo).......................................................................................................................
• Capitulo 03 - DocTypes .................................................................................................................................. - Adicionando o DocType 5.....................................................................................................................
• Capítulo 04 - Cabeçalhos............................................................................................................................... - Usando Títulos........................................................................................................................................ - Definindo um Cabeçalho..................................................................................................................... - A estrutura correta é importante..................................................................................................... - Exemplo de Documentos.....................................................................................................................
• Capítulo 05 - Parágrafo................................................................................................................................... - Parágrafo HTML.................................................................................................................................... - Exibição (Display)........................................................................................................................
• Capítulo 06 - Formatação de Texto............................................................................................................. - Destacando Texto............................................................................................................................... - Negrito, Italic e Sublinhado............................................................................................................. - Texto em Negrito com HTML........................................................................................................... - Texto em Itálico................................................................................................................................... - Texto....................................................................................................................................................... - Sublinhado............................................................................................................................................ - Abreviação............................................................................................................................................ - Inserido, excluído ou detalhar.............................................................................................. - Subescrito e Subscrito...........................................................................................................
• Capítulo 07 - Ãncoras e HiperLinks.............................................................................................................. - Link para outro site........................................................................................................................... - Link para uma Âncora ()............................................................................................................ - Link para uma Página do mesmo site.......................................................................................... - Link para Números............................................................................................................................ - Link para abrir em uma nova página........................................................................................... - Link que executa via JavaScript.................................................................................................... - Link para abrir cliente de e-mail..................................................................................................
• Capítulo 08 - Elemento Lista (List).............................................................................................................. - Lista Ordenada.................................................................................................................................... - Lista não Ordenada........................................................................................................................... - Linha Aninhada................................................................................................................................... - Linha de Descrição............................................................................................................................
• Capítulo 09 - Tabelas....................................................................................................................................... - Tabela Simples................................................................................................................................... - Grupo de Colunas............................................................................................................................. - Tabelas com Cabeçalho, corpo, rodapé e descrição............................................................... - Escopo de Cabeçalho......................................................................................................................
• Capítulo 10 - Comentários.............................................................................................................................
  • Criando comentários................................................................................................................... _____________________________________________________________________________
• Capítulo 11 - Classes e IDS............................................................................................................................
  • Atribuindo classe a um elemento HTML.................................................................................
  • Atribuindo ID a um elemento HTML........................................................................................
  • Valores Aceitáveis........................................................................................................................
• Capítulo 12: Atributos de Dados................................................................................................................... - Suporte a Navegadores mais Antigos.................................................................................... - Uso dos Atributos de Dados..................................................................................................... - Uso dos Atributos de Dados.....................................................................................................
• Capítulo 13: Vinculando Recursos................................................................................................................ - JavaScript..................................................................................................................................... - CSS Externo.................................................................................................................................. - FavIcon........................................................................................................................................... - Alternativa.................................................................................................................................... - Dicas de Recursos: DNS-prefetch, prerender.................................................................... - Atributo media............................................................................................................................ - Prev e Next...................................................................................................................................
• Capítulo 14: Incluindo JavaScript no HTML............................................................................................... - Manipulação de JavaScript Desativado............................................................................... - Vinculando a um Arquivo JavaScript.................................................................................... - Vinculando Arquivo Diretamente........................................................................................... - Vinculando Arquivo JavaScript em execução Assíncrona...............................................
• Capítulo 15: Usando HTML com CSS........................................................................................................... - Usando CSS externo................................................................................................................. - CSS Interno................................................................................................................................. - CSS Inline..................................................................................................................................... - Múltiplas chamadas CSS.........................................................................................................
• Capítulo 16: Imagens........................................................................................................................................ - Criando Imagem........................................................................................................................ - Texto Alternativo....................................................................................................................... - Imagens responsivas usando o atributo srcset................................................................ - Imagem responsiva com o elemento picture....................................................................
• Capítulo 17 - Mapas de Imagens................................................................................................................... - Introdução a mapa de imagem............................................................................................
• Capítulo 18 - Elementos de controle de Entrada...................................................................................... - Texto (Text)................................................................................................................................ - Botões com atributos Checkbox e Radio.......................................................................... - Entradas Validadas (Input).................................................................................................... - Cores........................................................................................................................................... - Senha........................................................................................................................................... - Arquivos (File)........................................................................................................................... - Botões......................................................................................................................................... - Enviar (Submit)......................................................................................................................... - Redefinir (Reset)...................................................................................................................... - Entrada Oculta (Hidden)........................................................................................................ - Telefone (Tel)............................................................................................................................ - Email............................................................................................................................................
  • Números (Number)................................................................................................................. _____________________________________________________________________________
  • Intervalo (Range).....................................................................................................................
  • Pesquisar (Search).................................................................................................................
  • Imagem......................................................................................................................................
  • Dia da semana (Week)..........................................................................................................
  • Url...............................................................................................................................................
  • DateTime-Local.......................................................................................................................
  • Mês (Month).............................................................................................................................
  • Tempo (Time)...........................................................................................................................
  • Data e horas (DateTime [Global]))....................................................................................
  • Data (Date)...............................................................................................................................
• Capítulo 19 - Formulários HTML....................................................................................................................
  • Enviando (Submitting.............................................................................................................
  • Atributo target da tag .............................................................................................
  • Enviando arquivo (Uploading Files)....................................................................................
  • Agrupando campos de entradas.........................................................................................
• Capítulo 20 - Elemento .........................................................................................................................
  • Uso básico.................................................................................................................................
  • Aninhamento ( Nesting ).......................................................................................................
• Capítulo 21 - Elementos de Divisão..............................................................................................................
  • Elemento ........................................................................................................................
  • Elemento ..................................................................................................................
  • Elemento .....................................................................................................................
  • Elemento .................................................................................................................
  • Elemento ..................................................................................................................
  • Elemento ................................................................................................................
• Capítulo 22 - Navegação .....................................................................................................................
  • Navegação .....................................................................................................................
• Capítulo 23 - Elemento ....................................................................................................................
  • Sobre o elemento .....................................................................................................
  • Uso básico.................................................................................................................................
• Capítulo 24 - Elemento ....................................................................................................................
  • Elemento de saída usando atributos For e Form...........................................................
• Capítulo 25 - Elemento .......................................................................................................................
  • Elemento vazio (void).............................................................................................................
• Capítulo 26 - Elemento ....................................................................................................................
  • Áudio (Audio)...........................................................................................................................
  • Vídeo (video)............................................................................................................................
  • Elemento e para exibir conteúdo de áudio / vídeo........................
  • Cabeçalho ou plano de fundo usando a tag .....................................................
• Capítulo 27 - Elemento ...............................................................................................................
  • Progress.....................................................................................................................................
  • Alterando a cor de uma barra de progresso...................................................................
  • HTML Fallback.........................................................................................................................
• Capítulo 28 - Elemento ............................................................................................................
  • Select Menu............................................................................................................................
  • Options.....................................................................................................................................
  • Grupo de Opções (Options Groups).................................................................................. - Detalist....................................................................................................................................... _____________________________________________________________________________
• Capítulo 29 - Elemento .................................................................................................................. - Uso básico.................................................................................................................................. - Definindo o Tipo MINE............................................................................................................
• Capítulo 30 - Elemento ................................................................................................................ - Noções básicas do elemento IFrame.................................................................................. - Sandboxing................................................................................................................................. - Tamanhos................................................................................................................................... - Usando o atributo srcdoc...................................................................................................... - Usando âncoras com IFrames..............................................................................................
• Capítulo 31 - Idioma do Conteúdo............................................................................................................... - Base do idioma conteúdo....................................................................................................... - Elemento de idioma................................................................................................................. - Elemento com vários idiomas...............................................................................................
• Capítulo 32 - SVG........................................................................................................................................... - SVG interno............................................................................................................................... - Incorporando arquivos SVG externos em HTML............................................................. - Incorporando SVG usando CSS.............................................................................................
  • Capítulo 33 - Canvas....................................................................................................................................
    • Exemplos básicos......................................................................................................................
    • Desenhando dois retângulos em .........................................................................
• Capítulo 34 - Informações ............................................................................................................. - Informações da página............................................................................................................ - Codificação de Caracteres..................................................................................................... - Robots........................................................................................................................................... - Social Media............................................................................................................................... - Responsividade de Layout Mobile......................................................................................... - Refresh Automatico.................................................................................................................. - Reconhecimento de número de telefone............................................................................ - Redirect Automatico................................................................................................................ - Web App.......................................................................................................................................
• Capítulo 35 - Citações.................................................................................................................................... - Em linha com elemento <’q>.................................................................................................... - Em blocos com elemento ...............................................................................
• Capítulo 36 - Elemento ............................................................................................................ - Adicionar um elemento á ordem de tabulação................................................................. - Removendo elemento da tabulação...................................................................................... - Defina uma ordem de tabulação personalizada................................................................
• Capítulo 37 - Atributos Globais................................................................................................................... - Atributo Editável por Conteúdo............................................................................................
• Capítulo 38 - HTML5 Cache......................................................................................................................... - Exemplos básicos de cache..................................................................................................
• Capítulo 39 - HTML Atributos de Eventos................................................................................................ - Formulários de Eventos......................................................................................................... - Eventos de Teclados...............................................................................................................
• Capítulo 40- HTML Caracteres HTML........................................................................................................ - Símbolos de Caracteres......................................................................................................... - Caracteres Especiais Comuns..............................................................................................

Porque Se torna um Desenvolvedo(a)r

_____________________________________________________________________________

Hoje eu trabalho dentro da minha casa ... essa profissão ela pode ser realizada 100% dentro do conforto do seu lá, basta você ter um computador ou notebook com acesso a internet. Então, pare por um minuto e imagine : levantar pela manhã, fazer o que tiver que fazer, dar uns 8 passos e chegar no seu escritório... Sem ninguém ao seu lado te perturbando, te enchendo... oi ainda sem transito, ônibus, chuva... Para mim isso é o máximo! Esse é um dos poderes de ser tornar um bom desenvolvedor. (Claro que existem aqueles que preferem trabalhar em uma empresa formal e não há nada de errado com isso) Além disso, como se não bastasse é totalmente indiferente, eu estar aqui em casa ou em qualquer lugar do mundo, tendo uma conexão com internet, pronto , posso trabalhar. ... é ótimo! Área dinâmica e Interativa Significa que a programação é uma área onde você tem oportunidade de ter contato e interagir com diversas áreas. Ou seja você não precisa só ficar sentado na frente do computador fazendo a mesma coisa sempre. Pois o desenvolvimento é algo que pode ser aplicado a praticamente todas as áreas e você como desenvolvedor precisará entender da ao menos um pouco da área que irá desenvolver para realizar seu trabalho.

_____________________________________________________________________________

Atualmente não é segredo que a tecnologia e a programação se encontram em praticamente todos os lugares. Podendo ser no restaurante Japonês que onde você pede pelo tablet, no terminal que te mostra o tempo até o próximo ônibus chegar, nos aparelhos eletrônicos, etc. Meu ponto é que por essa observação rápida podemos avaliar que a demanda de desenvolvedores é crescente e além do mercado necessitar desses profissionais, caso você entre como desenvolvedor em uma empresa o salário pode ser bem interessante (dependendo do cargo). Necessidade de Mercado Crie seu Próprio Negócio Exatamente, você sabendo um pouco de desenvolvimento é mais do que capaz de criar sua própria empresa mesmo sozinho inicialmente. Você já ouviu falar de startups , onde a partir da sua ideia é possível adquirir patrocinadores, parceiros foi dessa forma que nasceu empresas como Microsoft, Apple, Facebook. Você não precisa de muito para começar sua empresa nessa área, somente com seu computador e uma ideia suas possibilidades são ilimitadas. Liberdade Esse é absolutamente meu favorito, a liberdade, você ter opções capacidade de escolha, de administrar e trabalhar da maneira que você quiser. Em muitos trabalhos relacionados a programação, você pode realizar a distância, trabalhar de qualquer local, muitas empresas já permitem o trabalho em casa ou possuem um “FlexTime” (Horário de Trabalho Flexível). Também existe a possibilidade de trabalhar como Freelancer e você fazer sua rotina, você decidir seu horário de acordar, sua hora trabalho, de almoço, de ir embora, você é seu chefe.

_____________________________________________________________________________

Já que as únicas coisas que você precisa para trabalhar são um computador e conexão com a internet, não é necessário ir para o escritório para fazer a mesma coisa que você pode fazer da sua casa. O home-office ainda não é tão comum, mas tem se popularizado, pois as empresas perceberam que podem diminuir custos, e os programadores não querem perder uma hora ou mais no trânsito sem um bom motivo. Trabalhar de casa também permite trabalhar para qualquer empresa do mundo e não apenas da sua região. Pode Trabalhar em Casa Faz Novas Amizades Programador não é antissocial. A maioria tende a gostar de uma ou mais coisas do universo nerd como games, quadrinhos, animes, etc., e sendo assim, trabalhar com essas pessoas é também uma possibilidade de fazer novos amigos, e não apenas colegas de trabalho, que compartilham dos mesmos gostos que você. Sobe na Carreira Rapidamente Por ser uma área técnica, os profissionais que sabem usar seu conhecimento para resolver problemas rapidamente e de maneira efetiva conseguem subir de cargo (e salário) rapidamente. Ao contrário de profissões onde o crescimento é lento e depende mais de tempo e politicagem, a área de programação valoriza um bom profissional, pois se não fizer isso é muito fácil trocar de emprego para uma que valorize.

_____________________________________________________________________________

“Ah mas isso é muito difícil..., isso não é pra mim..., eu não tenho experiência..., eu não sei por onde começar... eu não tenho como investir...” Bom, eu escuto isso quase todos os dias, e todos os dias provo totalmente o contrário : Você não precisa de experiência para se tornar um programador fullstack: Pode parecer complicado, porém é muito simples. Tem muitos por aí que tentam complicar, ou tentam fazer a coisa complicada (e falam isso para as pessoas) apenas para parecerem mais inteligentes... mas na verdade é muito simples. O investimento para começar é quase nulo... ... veja no meu caso, eu comecei só com minha força de vontade... não tinha nenhum dinheiro. Por esse motivo criei o TipsCode onde busco lhe ensinar de maneira muito simples. Da uma olhada no que alguns escreveram para mim: Calma, Calma... Você Consegue!!

_____________________________________________________________________________

Eu vim de uma família muito humilde… nunca me faltou nada, mas era complicado… E eu não quero entrar em detalhes desse ponto da história agora, mas eu perdi meu pais na minha pré-adolescência, e fale o que quiser, não importa o quão bom são as pessoas ao seu redor, pai é pai e ponto… Bom, esse acontecimento mexeu muito comigo, mas chegou um ponto que comecei meus estudos muito fortes, tive alguns empregos, várias tentativas de pequenos negócios, nunca parei de estudar, mas sempre me virei, com a graça de Deus... Eu sou natural do Rio Grande Do Norte, e lá no inverno é frio, mas frio mesmo…

Conheci a Ana Paula que hoje é minha esposa, vim mora no Ceará e aqui foi onde tiver a oportunidade de conhece bem a área da programação, Deus me deu a oportunidade de cursar o curso superior de Bacharelado em Sistemas de Informação, onde tive várias oportunidades de empregos, estágios. Fui Monitor da disciplina de Tecnologias web por 2 anos, conhecia muito programadores bons, empresarios, fiz algumas viagens para congressos como por exemplo a Campus Patty. Eu e mais dois colegas desenvolvemos um projeto onde criamos um Sistema Computacional de Baixo Custo para comunidades carentes, onde esse projeto foi muito premiado em algumas feiras de ciências e com esse projeto participei da (ESI) Expo-Sciences International 2017

_____________________________________________________________________________

A hora Da Virada..

colchetes (

). A tag de fechamento é idêntica à tag de abertura com a adição de uma barra (/) entre o colchete de abertura e o nome do elemento (< /p >). O conteúdo pode ir entre essas duas tags: < p > Este é um parágrafo simples. < /p >. Criando uma página simples O exemplo de HTML a seguir cria uma página da Web simples "Hello World". Arquivos HTML podem ser criados usando qualquer editor de texto. Os arquivos devem ser salvos com uma extensão. html ou. htm para serem reconhecidos como arquivos HTML. Uma vez criado, esse arquivo pode ser aberto em qualquer navegador da web.

_____________________________________________________________________________

Vamos Passo A Passo. Estas são as tags usadas no exemplo acima: Tag <! DOCTYPE > Define a versão do HTML usada no documento. Nesse caso, é HTML. < html > Abre a página. Nenhuma marcação deve ocorrer após a tag de fechamento (). O atributo lang declara o idioma principal da página. < head > Abre a seção principal, que não aparece na janela principal do navegador, mas contém principalmente informações sobre o documento HTML , chamado metadados. Também pode conter importações de folhas de estilo (CSS) e scripts externos. A tag de fechamento é . < meta > Fornece ao navegador alguns metadados sobre o documento. O atributo charset declara a codificação de caracteres. Documentos HTML modernos sempre devem usar UTF-8 , mesmo que isso não seja um requisito. Em HTML, a tag < meta > não requer uma tag de fechamento. < title > O título da página. O texto escrito entre esta abertura e a tag de fechamento () será exibido na guia da página ou na barra de título do navegador.

Conheça o Passo A Passo para se Torna um Desenvolvedor FullStack

### _____________________________________________________________________________

< body > Abre a parte do documento exibida aos usuários, ou seja, todo o conteúdo visível ou audível de uma página. Nenhum conteúdo deve ser adicionado após a tag de fechamento . < h1 > Um cabeçalho de nível 1 para a página. Veja os títulos para mais informações. < p > Representa um parágrafo comum do texto.