没有合适的资源?快使用搜索试试~ 我知道了~
首页Caelum's Online Course: Simplified HTML, CSS, JS, PHP for Elegant Web Dev
Caelum's Online Course: Simplified HTML, CSS, JS, PHP for Elegan...
需积分: 10 2 下载量 141 浏览量
更新于2024-07-21
收藏 10.09MB PDF 举报
本资源是一份关于HTML、CSS、JavaScript和PHP的基础教程,由Caelum机构提供。Caelum是一家专注于在线教育的公司,他们提供一系列免费的课程、博客文章、电子报以及社交媒体平台,如官方网站www.caelum.com.br/online,博客blog.caelum.com.br,以及Facebook和Twitter账号,以便学员能够获取最新的学习资源和交流互动。 这个教程旨在以一种简单而优雅的方式教授这些关键的Web开发技术,强调实用性,避免在初学者阶段引入不相关或非必需的概念,确保学习过程高效且有针对性。Caelum鼓励学生积极参与,通过网站分享反馈和建议,保持材料的持续更新。学生可以从网站直接下载最新版本的教程,例如通过www.caelum.com.br/apostilas链接,以获得最全面的信息。 该教程是Caelum Web开发训练课程的一部分,涵盖了HTML(超文本标记语言)、CSS(层叠样式表)和JavaScript,这三种语言是构建网页界面和实现交互功能的基础。通过这个教程,学习者将掌握基本的网页结构、设计风格和动态交互的实现技巧。由于教程是免费提供的,它为想要踏入Web开发领域的学习者提供了一个绝佳的起点。 这个资源不仅适合对编程感兴趣的新手,也适合希望提升技能的开发者,它为用户提供了丰富的学习资源和支持,鼓励持续学习和实践。无论是寻找入门指南还是寻求进阶指导,都能在Caelum找到适合自己的路径。
资源详情
资源推荐
Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript
Cientíco da ABNT. Porém, com o tempo e a evolução da Web e de seu potencial comercial, tornou-se
necessária a exibição de informações com grande riqueza de elementos grácos e de interação.
2.2 Sintaxe do HTML
O HTML é um conjunto de tags responsáveis pela marcação do conteúdo de uma página no navegador.
No código que vimos antes, as tags são os elementos a mais que escrevemos usando a sintaxe <nomedatag>.
Diversas tags são disponibilizadas pela linguagem HTML e cada uma possui uma funcionalidade especíca.
No código de antes, vimos por exemplo o uso da tag <h1>. Ela representa o título principal da página.
<h1>Mirror Fashion</h1>
Note a sintaxe. Uma tag é denida com caracteres < e >, e seu nome (H1 no caso). Muitas tags possuem
conteúdo, como o texto do título ("Mirror Fashion”). Nesse caso, para determinar onde o conteúdo acaba,
usamos uma tag de fechamento com a barra antes do nome: </h1>.
Algumas tags podem receber atributos dentro de sua denição. São parâmetros usando a sintaxe de
nome=valor. Para denir uma imagem, por exemplo, usamos a tag <img> e, para indicar qual imagem carre-
gar, usamos o atributo src:
<img src="../imagens/casa_de_praia.jpg">
Repare que a tag img não possui conteúdo por si só. Nesses casos, não é necessário usar uma tag de fecha-
mento como antes no h1.
2.3 Estrutura de um documento HTML
Um documento HTML válido precisa seguir obrigatoriamente a estrutura composta pelas tags <html>,
<head> e <body> e a instrução <!DOCTYPE>. Vejamos cada uma delas:
A tag <html>
Na estrutura do nosso documento, antes de tudo, inserimos uma tag <html>. Dentro dessa tag, é necessário
declarar outras duas tags: <head> e <body>. Essas duas tags são “irmãs”, pois estão no mesmo nível hierárquico
em relação à sua tag “pai”, que é <html>.
<html>
<head></head>
<body></body>
</html>
Capítulo 2 - Introdução a HTML e CSS - Sintaxe do HTML - Página 7
Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript
A tag <head>
A tag <head> contém informações sobre nosso documento que são de interesse somente do navegador, e não
dos visitantes do nosso site. São informações que não serão exibidas na área do documento no navegador.
A especicação obriga a presença da tag de conteúdo <title> dentro do nosso <head>, permitindo especi-
car o título do nosso documento, que normalmente será exibido na barra de título da janela do navegador
ou na aba do documento.
Outra conguração muito utilizada, principalmente em documentos cujo conteúdo é escrito em um idioma
como o português, que tem caracteres como acentos e cedilha, é a conguração da codicação de caracteres,
chamado de encoding ou charset.
Podemos congurar qual codicação queremos utilizar em nosso documento por meio da conguração de
charset na tag <meta>. Um dos valores mais comuns usados hoje em dia é o UTF-8, também chamado de
Unicode. Há outras possibilidades, como o latin1, muito usado antigamente.
O UTF-8 é a recomendação atual para encoding na Web por ser amplamente suportada em navegadores e
editores de código, além de ser compatível com praticamente todos os idiomas do mundo. É o que usaremos
no curso.
<html>
<head>
<title>Mirror Fashion</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
A tag <body>
A tag <body> contém o corpo do nosso documento, que é exibido pelo navegador em sua janela. É necessário
que o <body> tenha ao menos um elemento “lho”, ou seja, uma ou mais tags HTML dentro dele.
<html>
<head>
<title>Mirror Fashion</title>
<meta charset="utf-8">
</head>
<body>
<h1>A Mirror Fashion</h1>
</body>
</html>
Capítulo 2 - Introdução a HTML e CSS - Estrutura de um documento HTML - Página 8
Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript
Nesse exemplo, usamos a tag <h1>, que indica um título.
A instrução DOCTYPE
O DOCTYPE não é uma tag HTML, mas uma instrução especial. Ela indica para o navegador qual versão
do HTML deve ser utilizada para renderizar a página. Utilizaremos <!DOCTYPE html>, que indica para o
navegador a utilização da versão mais recente do HTML - a versão 5, atualmente.
Há muitos comandos complicados nessa parte de DOCTYPE que eram usados em versões anteriores do HTML
e do XHTML. Hoje em dia, nada disso é mais importante. O recomendado é sempre usar a última versão
do HTML, usando a declaração de DOCTYPE simples:
<!DOCTYPE html>
2.4 Tags HTML
O HTML é composto de diversas tags, cada uma com sua função e signicado. O HTML 5, então, adicionou
muitas novas tags, que veremos ao longo do curso.
Nesse momento, vamos focar em tags que representam títulos, parágrafo e ênfase.
Títulos
Quando queremos indicar que um texto é um título em nossa página, utilizamos as tags de heading em sua
marcação:
<h1>Mirror Fashion.</h1>
<h2>Bem-vindo à Mirror Fashion, sua loja de roupas e acessórios.</h2>
As tags de heading são tags de conteúdo e vão de <h1> a <h6>, seguindo a ordem de importância, sendo <h1>
o título principal, o mais importante, e <h6> o título de menor importância.
Utilizamos, por exemplo, a tag <h1> para o nome, título principal da página, e a tag <h2> como subtítulo ou
como título de seções dentro do documento.
A ordem de importância, além de inuenciar no tamanho padrão de exibição do texto, tem impacto nas
ferramentas que processam HTML. As ferramentas de indexação de conteúdo para buscas, como o Google,
Bing ou Yahoo! levam em consideração essa ordem e relevância. Os navegadores especiais para acessibilidade
também interpretam o conteúdo dessas tags de maneira a diferenciar seu conteúdo e facilitar a navegação do
usuário pelo documento.
Capítulo 2 - Introdução a HTML e CSS - Tags HTML - Página 9
Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript
Parágrafos
Quando exibimos qualquer texto em nossa página, é recomendado que ele seja sempre conteúdo de alguma
tag lha da tag <body>. A marcação mais indicada para textos comuns é a tag de parágrafo:
<p>Nenhum item na sacola de compras.</p>
Se você tiver vários parágrafos de texto, use várias dessas tags <p> para separá-los:
<p>Um parágrafo de texto.</p>
<p>Outro parágrafo de texto.</p>
Marcações de ênfase
Quando queremos dar uma ênfase diferente a um trecho de texto, podemos utilizar as marcações de ênfase.
Podemos deixar um texto “mais forte” com a tag <strong> ou deixar o texto com uma “ênfase acentuada”
com a tag <em>. Também há a tag <small>, que diminui o tamanho do texto.
Por padrão, os navegadores renderizarão o texto dentro da tag <strong> em negrito e o texto dentro da tag
<em> em itálico. Existem ainda as tags <b> e <i>, que atingem o mesmo resultado visualmente, mas as tags
<strong> e <em> são mais indicadas por denirem nossa intenção de signicado ao conteúdo, mais do que
uma simples indicação visual. Vamos discutir melhor a questão do signicado das tags mais adiante.
<p>Compre suas roupas e acessórios na <strong>Mirror Fashion</strong>.</p>
2.5 Imagens
A tag <img> dene uma imagem em uma página HTML e necessita de dois atributos preenchidos: src e alt.
O primeiro aponta para o local da imagem e o segundo, um texto alternativo para a imagem caso essa não
possa ser carregada ou visualizada.
O HTML 5 introduziu duas novas tags especícas para imagem: <figure> e <figcaption>. A tag <figure>
dene uma imagem com a conhecida tag <img>. Além disso, permite adicionar uma legenda para a imagem
por meio da tag <figcaption>.
<figure>
<img src="img/produto1.png" alt="Foto do produto">
<figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
Capítulo 2 - Introdução a HTML e CSS - Imagens - Página 10
Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript
2.6 A estrutura dos arquivos de um projeto
Como todo tipo de projeto de soware, existem algumas recomendações quanto à organização dos arquivos
de um site. Não há nenhum rigor técnico quanto a essa organização e, na maioria das vezes, você vai adaptar
as recomendações da maneira que for melhor para o seu projeto.
Como um site é um conjunto de páginas Web sobre um assunto, empresa, produto ou qualquer outra coisa, é
comum todos os arquivos de um site estarem dentro de uma só pasta e, assim como um livro, é recomendado
que exista uma “capa”, uma página inicial que possa indicar para o visitante quais são as outras páginas que
fazem parte desse projeto e como ele pode acessá-las, como se fosse o índice do site.
Esse índice, não por coincidência, é convenção adotada pelos servidores de páginas Web. Se desejamos
que uma determinada pasta seja servida como um site e dentro dessa pasta existe um arquivo chamado
index.html, esse arquivo será a página inicial a menos que alguma conguração determine outra página
para esse m.
Dentro da pasta do site, no mesmo nível que o index.html, é recomendado que sejam criadas mais algumas
pastas para manter separados os arquivos de imagens, as folhas de estilo CSS e os scripts. Para iniciar um
projeto, teríamos uma estrutura de pastas como a demonstrada na imagem a seguir:
Muitas vezes, um site é servido por meio de uma aplicação Web e, nesses casos, a estrutura dos arquivos
depende de como a aplicação necessita dos recursos para funcionar corretamente. Porém, no geral, as apli-
cações também seguem um padrão bem parecido com o que estamos adotando para o nosso projeto.
2.7 Editores e IDEs
Existem editores de texto como Gedit (www.gnome.org), Sublime (http://www.sublimetext.com/) e Note-
pad++ (http://notepad-plus-plus.org) , que possuem realce de sintaxe e outras ferramentas para facilitar o
desenvolvimento de páginas. Há também IDEs (Integrated Development Environment), que oferecem re-
cursos como autocompletar e pré-visualização, como Eclipse e Visual Studio.
2.8 Primeira página
A primeira página que desenvolveremos para a Mirror Fashion será a Sobre, que explica detalhes sobre a
empresa, apresenta fotos e a história.
Capítulo 2 - Introdução a HTML e CSS - A estrutura dos arquivos de um projeto - Página 11
剩余262页未读,继续阅读
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学生成绩管理系统</title> <link type="text/css" rel="stylesheet" href="css/style.css"/> //<script type="text/javascript" src="js/script.js"></script> </head> <body> 学生成绩管理系统
<button>添加</button> |
github_31024879
- 粉丝: 0
- 资源: 8
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C语言快速排序算法的实现与应用
- KityFormula 编辑器压缩包功能解析
- 离线搭建Kubernetes 1.17.0集群教程与资源包分享
- Java毕业设计教学平台完整教程与源码
- 综合数据集汇总:浏览记录与市场研究分析
- STM32智能家居控制系统:创新设计与无线通讯
- 深入浅出C++20标准:四大新特性解析
- Real-ESRGAN: 开源项目提升图像超分辨率技术
- 植物大战僵尸杂交版v2.0.88:新元素新挑战
- 掌握数据分析核心模型,预测未来不是梦
- Android平台蓝牙HC-06/08模块数据交互技巧
- Python源码分享:计算100至200之间的所有素数
- 免费视频修复利器:Digital Video Repair
- Chrome浏览器新版本Adblock Plus插件发布
- GifSplitter:Linux下GIF转BMP的核心工具
- Vue.js开发教程:全面学习资源指南
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功