嵌入式初学者用书_在面向初学者的免费和交互式课程中学习HTML5

最新推荐文章于 2024-07-29 21:16:24 发布

cumian8165

最新推荐文章于 2024-07-29 21:16:24 发布

阅读量180

点赞数

文章标签： python css java html 编程语言

原文链接：https://www.freecodecamp.org/news/want-to-learn-how-to-built-websites-heres-our-free-full-length-html5-course-4ca68cd4a39a/

版权

嵌入式初学者用书

HTML is one of the core building blocks of the web, as it encapsulates the content on the websites you visit. However, despite its huge influence, very few people are actually aware of how it works.

HTML是Web的核心组成部分之一，因为它封装了您访问的网站上的内容。但是，尽管它具有巨大的影响力，但实际上很少有人知道它是如何工作的。

So in order to improve the technological literacy of the world, we’ve teamed up with developer, designer, and teacher Eric Tirado and created a free course on HTML5.

因此，为了提高世界的技术素养，我们与开发人员，设计师和老师Eric Tirado合作，并创建了有关HTML5的免费课程。

Throughout the course, Eric will take you from beginner to proficient in HTML while showing you how to build a website. And the best part is: it’ll take you less than an hour to complete the course!

在整个课程中，Eric会带您从入门到精通HTML，同时向您展示如何构建网站。最好的部分是：您只需不到一个小时即可完成课程！

Now let’s have a look at how it’s built up.

现在让我们看看它是如何构建的。

课程内容 (Course content)

The course contains 14 interactive screencasts. Each cast handles a core concept of HTML, and most are between three and six minutes. In some of them, you’ll be encouraged to jump into the code and experiment for yourself, as that’s possible with the Scrimba platform.

该课程包含14个交互式截屏视频。每个演员表都处理HTML的核心概念，大多数时间在三到六分钟之间。在其中的一些中，将鼓励您跳入代码并自己做实验，因为使用Scrimba平台是可能的。

第1课：网络简介 (Lesson 1: Intro to the web)

It starts off by teaching you a little bit about the web in general, looking at clients, servers, and the three languages browsers speak: HTML, CSS, and JavaScript.

首先，从总体上教您一些有关Web的知识，着眼于客户端，服务器以及浏览器使用的三种语言：HTML，CSS和JavaScript。

This gives you a good foundation for the next lessons, as you’ll better grasp HTML’s overall role on the world wide web.

这为您下一课的学习打下了良好的基础，因为您将更好地掌握HTML在万维网上的整体作用。

第2课：创建HTML文档 (Lesson 2: Creating an HTML document)

The next step is to create your first HTML document. This lecture will explain how HTML files work, and it’ll also give you a quick primer on the URL bar in the browser.

下一步是创建您的第一个HTML文档。本讲座将解释HTML文件的工作方式，并为您提供浏览器URL栏上的快速入门。

第3课：嵌套元素 (Lesson 3: Nesting elements)

Nesting is a critical concept in HTML, so it’ll be covered in the third lesson. Nesting basically means that you can nest tags inside of each other. To nest an HTML element, simply add it in-between the opening and closing tags of another HTML element.

嵌套是HTML中的一个关键概念，因此在第三课中将进行介绍。嵌套基本上意味着您可以将标签彼此嵌套。要嵌套HTML元素，只需将其添加到另一个HTML元素的开始和结束标记之间。

第4课：Head元素和脚本 (Lesson 4: Head elements and scripts)

<head>  
  <title>Learning HTML</title>  
  <meta charset="UTF-8">  
  <meta name="desctiption" content="My first HTML website">  
  <meta name="viewport" content="width=device-width, intial-scale=1.0">  
  <link rel="stylesheet" href="index.css">  
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">  
  <style>  
    h1 {  
      text-align: center;  
    }  
  </style>  
  <script>  
    document.getElementById("h1").innerHTML = "Hello Universe!";  
  </script>  
</head>

The head element is the first HTML tag after the <html> tag itself. It’s a container for metadata and often defines the title**,** character set, styles, links, scripts, and other meta information.

head元素是<html>标签本身之后的第一个HTML标签。它是元数据的容器，通常定义标题**，**字符集，样式，链接，脚本和其他元信息。

So in this lecture, you’ll learn how to populate the meta tag with a bunch of different content types, as you can see in the snippet above.

因此，在本讲座中，您将学习如何使用一堆不同的内容类型填充meta标签，如您在上面的代码段中所见。

第5课：布局元素 (Lesson 5: Layout elements)

HTML5 introduced a bunch of layout elements that make HTML more semantic. These new tags now reinforce meaning to the most commonly used layout elements, like <header> <article> <aside> and <footer>, while in times past we only had a meaningless element like <div> to use. In this screencast, you’ll learn the most useful and important ones.

HTML5引入了许多布局元素，这些元素使HTML更具语义。这些新标签现在增强了最常用的布局元素的含义，例如<header> <article> <aside>和<footer> ，而在过去，我们只能使用像<div>这样毫无意义的元素。在此截屏视频中，您将学习最有用和最重要的视频。

第6课：图形和图像元素 (Lesson 6: Figure and image elements)

Images are a core part of almost all websites. In this lecture, you’ll learn how to add images to the site, and also how to add captions to them.

图片是几乎所有网站的核心部分。在本讲座中，您将学习如何向网站添加图像，以及如何向其添加标题。

第7课：嵌入视频 (Lesson 7: Embedding videos)

You might have noticed that YouTube videos are all over the web, right? Not just on youtube.com. That’s possible thanks to one of the HTML features for embedding media into a page from elsewhere on the web. In this lesson, we cover the methods for embedding videos from sites like YouTube and also directly from a video file.

您可能已经注意到YouTube视频遍布网络，对吗？不只是在youtube.com上。这有可能要归功于HTML功能之一，它可以将媒体从网络上的其他位置嵌入到页面中。在本课程中，我们介绍了嵌入来自YouTube等网站的视频以及直接嵌入视频文件的方法。

In this lecture, you’ll learn how to build the navigation bar using an unordered list and list items. This involves both a horizontal and a vertical navigation bar, for use in the header and in the sidebar of our site.

在本讲座中，您将学习如何使用无序列表和列表项来构建导航栏。这涉及水平和垂直导航栏，用于我们网站的标题和侧边栏中。

第9课：标题 (Lesson 9: Headings)

Headings are created using the <h*> tag, where the * sign is to be replaced with numbers from 1 to 6. The importance of the header drops as the number increases, meaning <h1> is the one you’d normally use for your most important title or text on your page.

使用<h*>标记创建标题，其中*符号将替换为1到6之间的数字。标题的重要性随着数字的增加而降低，这意味着<h1>是您通常用于的您页面上最重要的标题或文字。

第10课：段落和文本格式(第1部分) (Lesson 10: Paragraph and text formatting (part 1 ))

Formatting text is also important to know in order to build websites, and in this lecture, you’ll learn the basics of it. You’ll probably recognize a lot of the concepts here from text processors like Word and Pages.

格式化文本对于构建网站也很重要，在本讲座中，您将学习它的基础知识。您可能会在这里从Word和Pages等文本处理器中认识很多概念。

第11课：文本格式(第2部分) (Lesson 11: Text formatting (part 2))

In this lesson, you’ll learn more about formatting, but with tags that affect large blocks of text. Examples of this are the <code> element and the <blockquote> element.

在本课程中，您将学习有关格式的更多信息，但要使用影响大文本块的标记。例如<code>元素和<blockquote>元素。

第12课：表格(第1部分) (Lesson 12: Tables (part 1))

Tables can be a bit complicated, but this lecture tries to explain it as simply as possible. Secondly, two lectures will be dedicated to this subject so that you’ll properly understand it.

表可能有点复杂，但是本讲座试图尽可能简单地解释它。其次，将针对该主题进行两次讲座，以便您正确理解。

第13课：表格(第2部分) (Lesson 13: Tables (part 2))

In this lesson, you’ll learn more advanced elements in tables, like <thead>, <tbody>, and <tfoot>. These allow you to control the elements inside the head, body and footer separately.

在本课程中，您将学习表中的更多高级元素，例如<thead> ， <tbody>和<tfoot> 。这些使您可以分别控制头部，身体和页脚内部的元素。

You’ll also be exposed to the <colgroup>, which allows you to add styles to specific columns.

您还将接触到<colgroup> ，它允许您将样式添加到特定的列。

第14课：页面链接和最终修饰 (Lesson 14: Page linking and final touches)

In the final screencast, we’ll wrap it all up and finish the website. We’ll add a link from the navigation to various sections on the page, and also introduce another page so that you understand how links between pages work.

在最后的截屏视频中，我们将全部打包并完成网站。我们将添加从导航到页面各个部分的链接，并介绍另一个页面，以便您了解页面之间的链接如何工作。

By this point, you should have a solid understanding of HTML, and the most important tags of the language.

至此，您应该对HTML以及该语言的最重要标签有扎实的理解。

Note: Eric will also be launching a follow-up course in April, which will tackle CSS for beginners. Leave your email here if you want early access.

注意：Eric还将在4月启动一个后续课程，该课程将为初学者解决CSS。如果您想尽早访问，请在此处留下您的电子邮件。

Scrimba格式 (The Scrimba format)

Finally, let’s also have a look at the technology behind the course, as it’s pretty slick. The course is built using Scrimba, an interactive coding screencast tool. Scrimba looks like normal videos, but they’re fully interactive. You can edit the code inside the casts!

最后，让我们也看一下该课程背后的技术，因为它非常漂亮。该课程是使用Scrimba (交互式编码截屏工具)构建的。 Scrimba看起来像普通视频，但它们是完全互动的。您可以在演员表中编辑代码！

Here’s a gif which explains the concept:

这是解释概念的gif：

Pause the screencast → Edit the code → Run it! → See your changes

暂停截屏→编辑代码→运行它！ →查看您的更改

This is great for when you feel you need to experiment with the code in order to properly understand it, or when you simply want to copy a piece of the code.

当您觉得需要试验代码以正确理解它时，或者只想复制一段代码时，这非常有用。

So what are you waiting for? Head over to the course page and get started today!

那你还在等什么？转到课程页面，立即开始！

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.

谢谢阅读！我叫Per Borgen，我是Scrimba的共同创始人–学习编码的最简单方法。如果要学习以专业水平构建现代网站，则应查看我们的响应式Web设计新手训练营。

翻译自: https://www.freecodecamp.org/news/want-to-learn-how-to-built-websites-heres-our-free-full-length-html5-course-4ca68cd4a39a/

嵌入式初学者用书

cumian8165

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
嵌入式初学者用书_在面向初学者的免费和交互式课程中学习HTML5

初学者学习oracalHTML is one of the core building blocks of the web, as it encapsulates the content on the websites you visit. However, despite its huge influence, very few people are actually aware of how ...
复制链接

扫一扫