Girls Coding Day Tutorial
  • 介绍
  • KickOff Party
    • 1.1 教学目的
    • 1.2 软件和工具
    • 1.3 教学方法
    • 1.4 WEB基本知识和历史
    • 1.5 课前自学
  • Intro to HTML
    • 2.1 初识HTML
    • 2.2 HTML常用术语
    • 2.3 解剖网站
    • 2.4 动手 - 修改更多HTML
  • Intro to CSS
    • 3.1 初识CSS
    • 3.2 CSS常用术语
    • 3.3 CSS盒子模型
    • 3.4 使用Chrome开发者工具调试样式
    • 3.5 动手 - 修改更多CSS样式
  • Intro to Bootstrap
    • 4.1 布局
    • 4.2 基础Bootstrap CSS
    • 4.3 组件
  • 大作业
  • 分享
Powered by GitBook
On this page
  1. Intro to HTML

2.4 动手 - 修改更多HTML

Previous2.3 解剖网站NextIntro to CSS

Last updated 5 years ago

  1. 把导航栏的英文换成中文,并添加一列「报名 Girls Coding Day」,链接到 (考察知识点:考察学员 Lists,参考 )

  2. 修改<header>元素中的内容 ( 考察知识点: Text-Based Element , 参考 )

    • 修改<h1>元素中内容为「Girls Coding Day」

    • 增加<h3>标签,其内容为「我也愿意贡献力量帮助更多的女性学习编程」 (考察知识点: Headings系列)

    • 在<span>标签嵌套一个<a>标签(链接为 Bootstrap模板下载地址 (考察知识点: Paragraphs,Opening Links in a New Window, 参考资料 )

    • 将「博客」二字加粗(考察知识点:Bold Text with Strong, 参考资料 )

    • 将「制作」二字变成斜体(考察知识点:Italicize Text with Emphasis, 参考资料 )

      Inquiry Learning :

      1. 什么是块元素?

      2. 什么是内联元素?

      3. Div元素和span元素哪个是块元素?哪个是内联元素?

      Learning by Reading : 阅读 , 理解块元素和内联元素

    • 去 下载图片到img文件夹,修改图片名字,替换掉背景图 (考察知识点:Image, 参考资料 )

  3. 修改页面最下端<footer>元素中的内容如下图所示

    • 修改twitter图标为微信图标

    • facebook图标为微博图标, 如果有微博请链接到自己的微博

      Advice for tutor

      • 什么是 Font Awesome (参考: ) ?

      • 怎么使用 Font Awesome ?

    • 添加邮箱图标,点击图标可以发送邮件。邮件需要包含主题(subject)和正文(body) (参考: ) (备注:Linking to an Email Address)

    • 修改copyright段落内容

https://girlscodingday.org/
HTML 列表
HTML 文本格式化
https://startbootstrap.com/template-overviews/clean-blog/)
HTML 链接
HTML 文本格式化
HTML 文本格式化
HTML <div> 和 <span>
https://unsplash.com/
HTML 图像
Font Awesome 中文网
Mailto Links | CSS-Tricks