HTML E CSS iniciantes - Jupyter Notebook

Prévia do material em texto

04/02/2023 08:41 HTML E CSS iniciantes - Jupyter Notebook
localhost:8888/notebooks/HTML E CSS iniciantes .ipynb 1/6
HTML é a sigla para HyperText Markup Language, que é uma linguagem de marcação utilizada na web para criar páginas e
aplicações da web. É composto por elementos HTML e atributos, que são usados para descrever o conteúdo e a
aparência de uma página da web. O HTML permite adicionar texto, imagens, vídeos, links e outros elementos para criar
páginas da web interativas.
CSS é a sigla para Cascading Style Sheets, que é uma linguagem de estilo utilizada para definir a apresentação de
documentos HTML na web. É responsável por controlar o layout, cor, fonte, espaçamento, etc. de elementos HTML na
página da web. O CSS permite separar o conteúdo HTML da formatação, tornando a manutenção e atualização do site
mais fácil e eficiente. Além disso, o uso de folhas de estilo CSS permite a aplicação de estilos consistentes em várias
páginas da web, aumentando a acessibilidade e a usabilidade do site.
Fabiana Besse
você pode desenvolver HTML e CSS em qualquer editor de texto ou ambiente de desenvolvimento integrado (IDE) que suporte o uso de arquivos de texto
simples. Algumas opções populares incluem:
Bloco de notas (Windows) ou TextEdit (Mac): Estes são editores de texto simples que você pode usar para criar arquivos HTML e CSS.
Sublime Text, Notepad++, Visual Studio Code: São editores de texto avançados que oferecem recursos adicionais como destaque de sintaxe, autocompletar e plugins.
Adobe Dreamweaver: É uma ferramenta de desenvolvimento visual que permite criar e editar HTML, CSS e outros arquivos da web de forma intuitiva.
Visual Studio, Eclipse, NetBeans: São IDEs de desenvolvimento completas que oferecem recursos adicionais como depuração, integração com versão e gestão de
projetos.
Lembre-se de que a escolha de um ambiente de desenvolvimento depende de suas necessidades e preferências pessoais. Escolha o que você se sente mais
confortável e produtivo.
Com referência à mão, você pode garantir que está seguindo as boas práticas e as diretrizes corretas ao desenvolver sua página HTML e CSS. Algumas referências
úteis incluem:
Especificação oficial do HTML: https://www.w3.org/TR/html/ (https://www.w3.org/TR/html/)
Guia de estilo do CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference (https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)
Referência de tags HTML: https://www.w3schools.com/tags/ (https://www.w3schools.com/tags/)
Referência de propriedades CSS: https://www.w3schools.com/cssref/ (https://www.w3schools.com/cssref/)
Usar referências também pode ajudá-lo a resolver problemas de codificação mais rapidamente e a aprender novas técnicas.
Você pode criar uma ampla gama de projetos na web com HTML e CSS, incluindo:
Sites estáticos: Sites simples com conteúdo estático, como portfólios, blogs ou sites institucionais.
Sites dinâmicos: Sites interativos com conteúdo dinâmico, como lojas on-line, redes sociais e aplicativos de gerenciamento de projetos.
Páginas de destino: Páginas de vendas ou promoções para ajudar a converter visitantes em clientes.
E-mails marketing: E-mails personalizados que podem ser criados e enviados para segmentos específicos de sua lista de contatos.
Landing pages: Páginas específicas que visam apresentar uma oferta ou produto de forma clara e concisa.
Formulários: Formulários da web que permitem aos usuários enviar informações para um banco de dados ou diretamente para o seu e-mail.
Aplicativos da web: Aplicativos da web interativos que podem ser usados em qualquer lugar com uma conexão à Internet.
A combinação de HTML e CSS permite a criação de páginas da web completas e funcionais. Ao longo do tempo, você pode aprender a trabalhar com outras
tecnologias, como JavaScript, para criar soluções ainda mais avançadas e interativas.
Aqui está um exemplo de uma página HTML simples com um cabeçalho, rodapé e corpo:
https://www.w3.org/TR/html/
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
https://www.w3schools.com/tags/
https://www.w3schools.com/cssref/
04/02/2023 08:41 HTML E CSS iniciantes - Jupyter Notebook
localhost:8888/notebooks/HTML E CSS iniciantes .ipynb 2/6
In [ ]:
Aqui está um exemplo de como adicionar estilos CSS à página HTML anterior:
<!DOCTYPE html>
<html>
<head>
 <title>Minha Página Web</title>
</head>
<body>
 <header>
 <h1>Cabeçalho da Página</h1>
 </header>
 <main>
 <ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 </ul>
 <p>Este é um parágrafo de exemplo na minha página web.</p>
 <a href="https://www.example.com">Clique aqui para visitar um site de exemplo</a>
 </main>
 <footer>
 <p>Rodapé da Página</p>
 </footer>
</body>
</html>
Este exemplo usa HTML para estruturar a página em um cabeçalho, corpo e rodapé, e inclui uma lista de itens, um parágrafo e um link. 
Observe que a tag <header> é usada para definir o cabeçalho da página, a tag <main> é usada para definir o corpo principal da página e a 
tag <footer> é usada para definir o rodapé da página.
04/02/2023 08:41 HTML E CSS iniciantes - Jupyter Notebook
localhost:8888/notebooks/HTML E CSS iniciantes .ipynb 3/6
In [ ]:
Aqui está um exemplo de como criar uma tabela com estilos CSS:
<!DOCTYPE html>
<html>
<head>
 <title>Minha Página Web</title>
 <style>
 body {
 background-color: lightgray;
 font-family: Arial, sans-serif;
 font-size: 16px;
 }
 header h1 {
 color: white;
 background-color: black;
 padding: 20px;
 text-align: center;
 }
 main {
 padding: 20px;
 }
 main ul {
 list-style-type: square;
 }
 main a {
 color: blue;
 text-decoration: underline;
 }
 footer {
 background-color: black;
 color: white;
 text-align: center;
 padding: 20px;
 }
 </style>
</head>
<body>
 <header>
 <h1>Cabeçalho da Página</h1>
 </header>
 <main>
 <ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 </ul>
 <p>Este é um parágrafo de exemplo na minha página web.</p>
 <a href="https://www.example.com">Clique aqui para visitar um site de exemplo</a>
 </main>
 <footer>
 <p>Rodapé da Página</p>
 </footer>
</body>
</html>
Neste exemplo, adicionamos uma seção de estilos na cabeça da página usando a tag <style>. Em seguida, usamos seletores CSS para aplicar 
estilos a elementos específicos da página, como o corpo da página (body), o cabeçalho (header), o corpo principal (main), a lista de 
itens (main ul), o link (main a) e o rodapé (footer). Neste exemplo, mudamos a cor de fundo, a fonte e o tamanho do texto, bem como 
adicionamos algumas outras formatações.
04/02/2023 08:41 HTML E CSS iniciantes - Jupyter Notebook
localhost:8888/notebooks/HTML E CSS iniciantes .ipynb 4/6
In [ ]:
Aqui está um exemplo de como adicionar uma imagem, uma lista de navegação, estilos para links, uma caixa de entrada de formulário e um menu drop-down
usando HTML e CSS:
<!DOCTYPE html>
<html>
<head>
 <title>Minha Tabela</title>
 <style>
 table {
 border-collapse: collapse;
 width: 100%;
 }
 th, td {
 border: 1px solid black;
 padding: 8px;
 text-align: center;
 }
 th {
 background-color: lightgray;
 }
 </style>
</head>
<body>
 <table>
 <tr>
 <th>Coluna 1</th>
 <th>Coluna 2</th>
 <th>Coluna 3</th>
 </tr>
 <tr>
 <td>Linha 1, Coluna 1</td>
 <td>Linha 1, Coluna 2</td>
 <td>Linha 1, Coluna 3</td>
 </tr>
 <tr>
 <td>Linha 2, Coluna 1</td>
 <td>Linha 2, Coluna 2</td>
 <td>Linha 2, Coluna 3</td>
 </tr>
 <tr>
 <td>Linha 3, Coluna 1</td>
 <td>Linha 3, Coluna 2</td>
 <td>Linha 3, Coluna 3</td>
 </tr>
 </table>
</body>
</html>
Neste exemplo, adicionamos estilos CSS à tabela usando seletores de elementos HTML. Usamos a propriedade border-collapse para remover o 
espaço entre as células da tabela. Em seguida, usamos seletores para células de cabeçalho(th) e células de dados (td) para adicionar 
uma borda preta a cada célula e espaço de 8 pixels de padding. Além disso, mudamos o alinhamento do texto para o centro. Finalmente, 
usamos uma regra para células de cabeçalho para mudar a cor de fundo para cinza claro.
04/02/2023 08:41 HTML E CSS iniciantes - Jupyter Notebook
localhost:8888/notebooks/HTML E CSS iniciantes .ipynb 5/6
In [ ]:
Observe que este exemplo é apenas para fins de demonstração e pode ser expandido para incluir mais elementos e estilos. Além disso, é recomendável
sempre adicionar comentários ao seu código para mantê-lo organizado e fácil de entender.
<!DOCTYPE html>
<html>
 <head>
 <style>
 /* Estilos para a imagem */
 img {
 width: 300px;
 height: 200px;
 border: 2px solid black;
 }
 /* Estilos para a lista de navegação */
 nav {
 background-color: lightblue;
 color: white;
 padding: 10px;
 display: flex;
 }
 /* Estilos para links */
 a {
 color: white;
 text-decoration: none;
 }
 /* Estilos para o formulário */
 form {
 padding: 20px;
 background-color: lightgray;
 text-align: center;
 }
 /* Estilos para o menu drop-down */
 .dropdown {
 position: relative;
 display: inline-block;
 }
 .dropdown-content {
 display: none;
 position: absolute;
 background-color: lightblue;
 z-index: 1;
 }
 .dropdown:hover .dropdown-content {
 display: block;
 }
 </style>
 </head>
 <body>
 <!-- Imagem -->
 <img src="image.jpg" alt="Image">
 <!-- Lista de navegação -->
 <nav>
 <a href="#">Home</a>
 <a href="#">About</a>
 <a href="#">Services</a>
 <div class="dropdown">
 <a href="#">Dropdown</a>
 <div class="dropdown-content">
 <a href="#">Option 1</a>
 <a href="#">Option 2</a>
 <a href="#">Option 3</a>
 </div>
 </div>
 </nav>
 <!-- Formulário -->
 <form>
 <input type="text" placeholder="Nome">
 <br><br>
 <input type="email" placeholder="Email">
 <br><br>
 <input type="submit" value="Submit">
 </form>
 </body>
</html>
Neste exemplo, usamos regras CSS para alterar o tamanho da imagem usando a propriedade width e height. Em seguida, usamos regras CSS 
para criar uma lista de navegação, mudando a cor de fund
04/02/2023 08:41 HTML E CSS iniciantes - Jupyter Notebook
localhost:8888/notebooks/HTML E CSS iniciantes .ipynb 6/6
Fabiana Besse
Fim