Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

uninerds

Playlist de como programar em HTML5 e CSS

Recommended Posts

Olá pessoal, estamos criando algumas vídeo aulas de programação em HTML5 e CSS e gostaríamos que vocês dessem críticas e sugestões do que podemos estar fazendo para melhorar
Segue o link da playlist com 22 vídeos de HTML5
https://www.youtube.com/playlist?list=PLi3qhjm7dbeeC5h0NDfUiRqEvE0v08Pdd

 

1 - O que é HTML, CSS e JavaScript?
É explicado o que é HTML, CSS e JavaScript e porque é necessário conhecer estas 3 linguagens para programar para Web

 

2 - Programas Necessários
É mostrado os programas necessários para começar a programar (estamos fazendo as vídeo aulas no sistema operacional Xubuntu)

 

3 - Primeiro HTML5
Começamos a mostrar de fato como começar a programar em HTML e como fazer para validar o código

 

4 - Hierarquia de títulos e linha horizontal
Como fazer hierarquia de títulos e colocar linha horizontal
Tags: h1 até h6 e hr

 

5 - Parágrafo, quebra de linha e texto pré-formatado
Como fazer parágrafo, quebra de linha e texto pré-formatado
Tags: p, br e pre

 

6 - Formatação de texto
Como fazer formatação de texto
Tags: b, strong, i, em, mark, small, sub, sup, ins e del
Atributos: cite e datetime das tags ins e del

 

7 - Citações
Como fazer citações
Tags: q, blockquote, cite, address, abbr e bdo
Atributos: title da tag abbr, dir da tag bdo e cite das tags q e blockquote

 

8 - Comentários e comentários condicionais
Como fazer comentário e para que serve

 

9 - Arquivo Externo
Como fazer referência de arquivo externo no HTML

 

10 - Links | Parte 1
Como fazer links para abrir outros HTML, enviar e-mail, executar JavaScript e direcionar para um local específico
Tag: a
Atributos: href, hreflang e type

 

11 - Links | Parte 2
Como criar links para download, diferentes formas de abrir no navegador e vulnerabilidade do target="_blank"
Tag: a
Atributos: download e target
Valores para o target: _self, _blank, _top e _parent

 

12 - Links | Parte 3
Como resolver vulnerabilidade do target="_blank" e o atributo rel
Tag: a
Atributo: rel
Valores para o rel: alternate, author, bookmark, prev, next, external, help, license, search, tag, nofollow, noreferrer, noopener

 

13 - Bloco e Linha
O conceito de tag de bloco e de linha
Tags: div e span

 

14 - Imagem | Parte 1
Como colocar imagem no HTML
Tag: img
Atributos: src, alt, width, height, crossorigin, ismap e longdesc
Valores para o crossorigin: anonymous e use-credentials

 

15 - Imagem | Parte 2
Como fazer mapeamento de imagem para colocar link dentro dela
Tags: img, map e area
Atributo da img: usemap
Atributo da map: name
Atributos da area: shape, coords e alt
Valores para o shape: circle, rect e poly

 

16 - Imagem | Parte 3
Como definir imagens diferentes para dispositivos com características de tela diferentes
Tags: img, picture e source
Atributos da img: srcset e sizes
Atributos da source: srcset, sizes, media e type

 

17 - Tabela | Parte 1
Como criar tabela em HTML
Tags: table, caption, tr, th e td
Atributos da th: abbr, sorted e scope
Atributos da th e da td: colspan, rowspan e headers
Valores para o scope: col, colgroup, row e rowgroup

 

18 - Tabela | Parte 2
Como altarar estilo de uma coluna inteira e definir cabeçalho, corpo e rodapé da tabela
Tags: colgroup, col, thead, tbody e tfoot
Atributo da colgroup e col: span

 

19 - Lista
Como criar lista não-ordenada, ordenada e de descrição
Tags: ul, li, ol, dl, dt e dd
Atributos da ol: type, reversed e start
Atributos da li quando estiver na ol: value
Valores para o type: 1, a, A, i e I

 

20 - Iframe
Como colocar uma página dentro de outra em HTML
Tag: iframe
Atributos: src, srcdoc, width, height, name e sandbox
Valores para o sandbox: allow-pointer-lock, allow-scripts, allow-forms, allow-top-navigation, allow-same-origin e allow-popups

 

21 - Atributo Class
Qual a importância do atributo class e como utilizar ele em CSS e JavaScript

 

22 - Atributo Id
Qual a importância do atributo id e como utilizar ele em CSS e JavaScript

 

Segue o link da playlist com 17 vídeos de CSS
https://www.youtube.com/playlist?list=PLi3qhjm7dbedkcSwqOrGYHD_E_0H7Nopj

 

1 - O que é HTML, CSS e JavaScript?
É explicado o que é HTML, CSS e JavaScript e porque é necessário conhecer estas 3 linguagens para programar para Web

 

2 - Programas Necessários
É mostrado os programas necessários para começar a programar (estamos fazendo as vídeo aulas no sistema operacional Xubuntu)

 

3 - Primeiro CSS
Como fazer a integração entre HTML e CSS

 

4 - Cores
Como definir cor por nome, hexadecimal, RGB, HSL, RGBA e HSLA

 

5 - Initial e Inherit
Como utilizar os valores initial e inherit para propriedades em CSS

 

6 - Consulta de mídia
Como definir estilos diferentes para tipos de dispositivos diferentes e mesmo tipo de dispositivo com características diferentes

 

7 - Borda | Parte 1
Como fazer bordas em CSS
Propriedades: border, border-color, border-radius, border-style e border-width
Valor para border-color: transparent
Valores para border-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset e outset
Valores para border-width: medium, thin e thick

 

8 - Borda | Parte 2
Como alterar as propriedades da borda em cada lado
Propriedades: border-bottom, border-bottom-color, border-bottom-style, border-bottom-width, border-left, border-left-color, border-left-style, border-left-width, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-right, border-right-color, border-right-style, border-right-width, border-top, border-top-color, border-top-style e border-top-width

 

9 - Largura e Altura
Como definir largura e altura em CSS e também valor mínimo e máximo para cada uma
Propriedades: width, height, min-width, max-width, min-height e max-height

 

10 - Margem
Como colocar margem em CSS, centralizar conteúdo e um cuidado que deve ter ao utilizar margem
Propriedades: margin, margin-top, margin-right, margin-bottom e margin-left

 

11 - Preenchimento
Como colocar preenchimento em CSS
Propriedades: padding, padding-top, padding-right, padding-bottom e padding-left

 

12 - Excesso
O que fazer quando o conteúdo de uma tag é maior que a largura e/ou altura
Propriedades: overflow, overflow-x e overflow-y
Valores para as propriedades: visible, hidden, scroll e auto

 

13 - Modelo de Caixa
Qual é o conceito de modelo de caixa e porque é importante conhecer ele para montar o layout de uma página

 

14 - Fundo
Como alterar a cor de fundo, colocar imagem como fundo e definir a posição da mesma
Propriedades: background, background-color, background-image, background-repeat, background-attachment e background-position
Valores para background-repeat: repeat, repeat-x, repeat-y, no-repeat, space e round
Valores para background-attachment: scroll, fixed e local
Valores para background-position: left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom

 

15 - Contorno
Como colocar contorno no conteúdo utilizando CSS
Propriedades: outline, outline-color, outline-style, outline-width e outline-offset
Valor para outline-color: invert
Valores para outline-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset e outset
Valores para outline-width: medium, thin e thick

 

16 - Formatação de Texto | Parte 1
Como fazer formatação de texto utilizando CSS
Propriedades: color, direction, unicode-bidi, letter-spacing, line-height, text-align, text-indent, text-transform, word-spacing e text-shadow
Valores para direction: ltr e rtl
Valores para unicode-bidi: normal, embed, bidi-override, isolate, isolate-override e plaintext
Valor para line-height: normal
Valores para text-align: left, right, center e justify
Valores para text-transform: none, capitalize, uppercase e lowercase
Valor para word-spacing: normal

 

17 - Formatação de Texto | Parte 2
Como fazer formatação de texto utilizando CSS
Propriedades: text-decoration-line, text-decoration-color, text-decoration-style, text-decoration, white-space, vertical-align e text-overflow
Valores para text-decoration-line: none, underline, overline e line-through
Valores para text-decoration-style: solid, double, dotted, dashed e wavy
Valores para white-space: normal, nowrap, pre, pre-line e pre-wrap
Valores para vertical-align: baseline, sub, super, top, text-top, middle, bottom e text-bottom
Valores para text-overflow: clip e ellipsis

 

PS:
- Como temos nossos serviços seculares que é como conseguimos o sustento não teremos como responder todos os comentários de imediato, mas de qualquer forma agradecemos desde já a ajuda

- Sempre que tiver vídeo novo atualizaremos este tópico

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por juliosonic
      Boa noite..
      Estou desenvolvendo um site de https://www.maithunatantra.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica em Curitiba
      Tantra Curitiba
      Massagem Tântrica
      Tantra
      Julio Darshan

      Obrigado
      Att
      Julio Cezar
       
       
       
    • Por Felipe Medeiros
      Bom, criei um tema filho e o que aprendi é que para alterar qualquer coisa do tema filho eu preciso copiar o arquivo do tema pai o colocar dentro da pasta do tema filho.
       
      No meu caso, estou usando o tema "Astra" bem famosinho. O arquivo css que quero modificar não está dentro da pasta do tema pai, está em "wp-content/uploads/uag-plugin/assets/0/uag-css-10.css" sendo que o diretorio do tema pai é "wp-content/themes/Astra"
       
      O problema é o seguinte, preciso modificar a barra de pesquisa da pagina inicial, porem o inspetor de elementos do chrome ta acusando que esse arquivo é o responsavel por estilizar a barra de pesquisa. Será que isso tem a ver com "Cache de objetos", eu sei que o plugin liteSpeed Cache, AMP, Rank Math, todos eles tem essas paradas de criar arquivos css e js para tornar o site mais rapido.
    • Por joeythai
      Boa tarde pessoal,
       
      Eu criei um formulário em que tenho 3 interações: evento click, change e uma chamada ajax. No evento on change ("select#removal_table_from" )eu faço uma chamada ajax onde eu passo como parametro o id do item selecionado e construo uma tabela dinamica com o próprio javascript, após isto, tenho um input em que o usuario coloca um valor de percentual para que eu possa preencher em 3 colunas da tabela que foi criada dinamicamente: moto_atualizado, carro_atualizado e caminhao_atualizado, até aí tudo bem, o codigo está fazendo isso, porém, como a tabela é criada dinamicamente eu preciso de alguma forma enviar o arrayData para meu backend mas quando faço o calculo dentro do loop apos resposta do meu ajax, os valores desses 3 campos chegam como null, não sei se é possível fazer o que pretendo ou se é ainda não sei como faz
       
      <code>
           $(document).ready(function (event) {   let arrayData = []; let percentage; let removal_vehicle; let removal_motorcycle; let removal_tuck; let apply_removal = $('#apply_removal');   // apply_removal.on('click', function () { // percentage = $('#percentage').val();   // $('.table-body tr').each(function () {   // let veiculo = $(this).find('.veiculo').text(); // let moto = $(this).find('.moto').text(); // let caminhao = $(this).find('.caminhao').text();   // let removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; // let removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; // let removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   // arrayData.push({ // removal_vehicle, // removal_motorcycle, // removal_tuck // })   // $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); // $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); // $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2)); // }); // });   apply_removal.on('click', function () { percentage = $('#percentage').val();   $('.table-body tr').each(function () {   let veiculo = $(this).find('.veiculo').text(); let moto = $(this).find('.moto').text(); let caminhao = $(this).find('.caminhao').text();   removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   arrayData.push({ removal_vehicle, removal_motorcycle, removal_tuck })   $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2));     console.log('Removal Vehicle:', removal_vehicle); console.log('Removal Motorcycle:', removal_motorcycle); console.log('Removal Truck:', removal_tuck); }); });   $('select#removal_table_from').on('change', function (e) { let table_id = $(this).val(); let action = route('removal.removal-values.show', table_id);   $.ajax({ type: "GET", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },   success: function (data) { $('.table-body').empty();   for (let i = 0; i < data.length; i++) { let carro = parseFloat(data[i].CARRO); let moto = parseFloat(data[i].MOTO); let caminhao = parseFloat(data[i].CAMINHAO); let distancia = data[i].DISTANCIA; let origem = data[i].ORIGEM; let destino = data[i].DESTINO; let localidadeOrigem = data[i].LocalidadeOrigem_ID; let localidadeDestino = data[i].LocalidadeDestino_ID;   let newRow = '<tr class="removal-row">' + '<td class="align-middle">' + '<div class="row">' + '<div class="col-1">' + '<span class="font-weight-bold">Origem</span><br>' + '<span class="origem">' + origem + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Destino</span><br>' + '<span class="destino">' + destino + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">KM</span><br>' + '<span class="km">' + distancia + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Veículo</span><br>' + '<span class="veiculo">' + carro + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Veículo Atualizado</span><br>' + '<input type="text" class="veiculo_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Moto</span><br>' + '<span class="moto">' + moto + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Moto Atualizado</span><br>' + '<input type="text" class="moto_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Caminhão</span><br>' + '<span class="caminhao">' + caminhao + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Caminhão Atualizado</span><br>' + '<input type="text" class="caminhao_atualizado">' + '</div>' + '</div>' + '</div>' + '</td>' + '</tr>';   $('.table-body').append(newRow); //let row = $('.removal-row:last');   // Calcula o valor atualizado e define nos campos diretamente // let veiculo_atualizado = carro + (carro * percentage) / 100; // let moto_atualizado = moto + (moto * percentage) / 100; // let caminhao_atualizado = caminhao + (caminhao * percentage) / 100; // console.log('PORCENTS: ', percentage); //console.log('Veiculo Atualizado:', veiculo_atualizado, 'Moto Atualizado:', moto_atualizado, 'Caminhao Atualizado:', caminhao_atualizado);   // Define os valores diretamente nos campos da nova linha // row.find('.veiculo_atualizado').val(veiculo_atualizado.toFixed(2)); // row.find('.moto_atualizado').val(moto_atualizado.toFixed(2)); // row.find('.caminhao_atualizado').val(caminhao_atualizado.toFixed(2));   arrayData.push({ carro, moto, caminhao, distancia, origem, destino, localidadeOrigem, localidadeDestino, removal_vehicle, removal_motorcycle, removal_tuck }); }   $('#copy_data_table').val(JSON.stringify(arrayData)); }   }); });   //javascript para o formulario de cadastro // $(document).ready(function (event) { $('#uf').change(function () { let code_city = $(this).val(); let deposit = localStorage.getItem('selected_deposit_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city').empty(); $('#deposit').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '<option>'); }   if (data.deposits.length > 0) { for (let i = 0; i < data.deposits.length; i++) { $('#deposit').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '<option>'); } } else { // $('#deposit').prop('disabled', true); // $('#city').prop('disabled', false); }   $('#city').trigger('change'); } });   });   $('#deposit').on('change', function () { depositId = $(this).val(); localStorage.setItem('selected_deposit_id', depositId); });   $('#uf_destiny').change(function () { let code_city = $(this).val(); let depositDestiny = localStorage.getItem('selected_deposit_destiny_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city_destiny').empty(); $('#deposit_destiny').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city_destiny').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '</option>'); }   if (data.deposits.length > 0) { // $('#deposit_destiny').prop('disabled', false); //$('#city_destiny').empty(); // $('#city_destiny').prop('disabled', true); for (let i = 0; i < data.deposits.length; i++) { $('#deposit_destiny').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '</option>'); } } else { // $('#deposit_destiny').prop('disabled', true); // $('#city_destiny').prop('disabled', false); }   $('#city_destiny').trigger('change'); } }); });   $('#deposit_destiny').on('change', function () { let depositDestinyId = $(this).val(); localStorage.setItem('selected_deposit_destiny_id', depositDestinyId); });   }); </code>
    • Por babylon
      Olá galera tudo bem?
      Deixa eu perguntar, estava mexendo no meu site e queria adicionar em html essa tabela porem esta dando erro pois fica assim:
       

      Porem gostaria que ficasse assim:

      Segue o código da tabela:
      <center><table border="0">
          <tr>
      <td bgcolor="#0092df" width="24%"><a href="/categorias?ename=smartphones"><span style="font-size: 20px; color: #ffffff;"><b> <font color="#0092df">..</font>Bicicleta<br> <font color="#0092df">..</font>Track Bikes<br> <font color="#0092df">..</font>Aro 29 TKS</b></a></span><br><br><font size="5"><center><span style="background-color: #A1CD44">DE:</span></font> <br><font size="5"><s>R$ 1.999,99</center></font></s> </td><td><p><a href="/categorias?ename=smartphones"><img src="/static/img/itembicicleta.jpg"><br><font size="5"><center><span style="background-color: #A1CD44">COM - 60%:</span></font> <br><font size="5">1.199,99</font></center></a></td>
             <td><font color="#ffffff">....</font></td>
              <td bgcolor="#0092df" width="24%"><a href="/categorias?ename=smartphones"><span style="font-size: 20px; color: #ffffff;"><b> <font color="#0092df">..</font>Monitor 24"<br> <font color="#0092df">..</font>Samsung<font color="#0092df">aa.aa</font><br> <font color="#0092df">..</font>1ms 144hz</b></a></span></center></td><td><p><a href="/categorias?ename=smartphones"><img src="/static/img/itemmonitor.jpg"></a></td>
          </tr>
          </table></center>
      O que estaria errado, pois não sei como colocar nessa tabela outro fundo de outra cor, veja que usei td bgcolor="#0092df" para o azul escuro mas não sei como usaria pro "#e4f1fb" para o fundo ficar de azul claro em baixo bem como não ficou correto em altura o "DE:" com o "COM - 60%:".
      Bom é isso, obg.


×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.