1.

HTML is the language used to create the web pages you visit everyday. It provides a logical way to structure content for web pages.

Let's analyze the acronym "HTML", as it contains a lot of useful information. HTML stands for HyperText Markup Language.

A markup language is a computer language that defines the structure and presentation of raw text. Markup languages work by surrounding raw text with information the computer can interpret, "marking it up" for processing.

HyperText is text displayed on a computer or device that provides access to other text through links, also known as “hyperlinks”. In fact, you probably clicked on many, many hyperlinks on your path to this Codecademy course!

In this course, you'll learn how to use the fundamentals of HTML to structure, present, and link content. You'll also learn how to use CSS, or Cascading Style Sheets, to style the HTML content you add to web pages.

Let's get started!

2.

A web browser must know what language a document is written in before they can process the contents of the document.

You can let web browsers know that you are using the HTML language by starting your HTML document with a document type declaration.

The declaration is the following:

<!DOCTYPE html>

This declaration is an instruction. It tells the browser what type of document to expect, along with what version of HTML is being used in the document. <!DOCTYPE html>must be the first line of code in all of your HTML documents.

Note: If you don't use the doctype declaration, your HTML code will likely still work, however, it's risky. Right now, the browser will correctly assume that you are using HTML5, as HTML5 is the current standard. In the future, however, a new standard will override HTML5. Future browsers may assume you're using a different, newer standard, in which case your document will be interpreted incorrectly. To make sure your document is forever interpreted correctly, always include <!DOCTYPE html> at the very beginning of your HTML documents.

3.

Great! Browsers that read your code will know to expect HTML when they attempt to read your file.

The <!DOCTYPE html> declaration is only the beginning, however. It only tells the browser that you plan on using HTML in the document, it doesn't actually add any HTML structure or content.

To begin adding HTML structure and content, we must first add opening and closing <html> tags, like so:

<!DOCTYPE html> <html> </html>

Anything between <html> and </html>will be considered HTML code. Without these tags, it's possible that browsers could incorrectly interpret your HTML code and present HTML content in unexpected ways.

Instructions 1.

After your <!DOCTYPE html>declaration, add opening (<html>) and closing (</html>) tags.

4.

Before we move forward, let's standardize some vocabulary we'll use as you learn HTML. Here are some of the terms you'll see used in this course:

  1. Angle brackets - In HTML, the characters < and > are known as angle brackets.

  2. HTML element (or simply, element) - HTML code that lives inside of angle brackets.

  3. Opening tag - the first, or opening, HTML tag used to start an HTML element.

  4. Closing tag - the second, or closing, HTML tag used to end an HTML element. Closing tags have a forward slash (/) inside of them.

With the exception of a few HTML elements, most elements consist of an opening and closing tag.

In the following example, there is one paragraph element, made up of one opening tag (<p>) and one closing tag (</p>):

<p>Hello there!</p>
 
5.

So far, you've declared to the browser the type of document it can expect (an HTML document) and added the HTML element (<html>) that will contain the rest of your code. Let's also give the browser some information about the page. We can do this by adding a <head> element.

The <head> element will contain information about the page that isn't displayed directly on the actual web page (you'll see an example in the next exercise).

<!DOCTYPE html> <html> <head> </head> </html>
Instructions 1.

Add a <head> element to index.html.

6.

What kind of information about the web page can the <head> element contain?

Well, if you look at the top of your browser (or at one of the tabs you may have open in this browser window), you'll notice the words Learn HTML & CSS: Part I | Codecademy, which is the title of this web page.

The browser displays the title of the page because the title can be specified directly inside of the <head> element, by using a <title> element.

<!DOCTYPE html> <html> <head> <title>My Coding Journal</title> </head> </html>

If we were to open a file containing the HTML code in the example above, the browser would display the words My Coding Journal in the title bar (or in the tab's title).

Instructions 1.

Add a title to your web page using the <title> element. The title can be be anything you'd like.

7.

The web page you are currently viewing has a title of Learn HTML & CSS: Part I | Codecademy.

Because the browser used in this course does not have a title bar, you won't be able to see the title of a web page if you add one. The diagram to the right, however, illustrates specifically where a web page's title would appear on a browser.

8.

We've added some HTML, but still haven't seen any results in the web browser to the right. Why is that?

Before we can add content that a browser will display, we have to add a body to the HTML file. Once the file has a body, many different types of content can be added within the body, like text, images, buttons, and much more.

<!DOCTYPE html> <html> <head> <title>I'm Learning To Code!</title> </head> <body> </body> </html>

All of the code above demonstrates what is sometimes referred to as "boilerplate code."

The term "boilerplate code" is used to describe the basic HTML code required to begin creating a web page. Without all of the elements in the boilerplate code, you'll risk starting without the minimum requirements considered to be best practice.

Note: The rest of the course will use code examples like the one above. To save space, however, code examples will avoid including common elements like the declaration, head, and so on. Unless otherwise specified, you can assume that the code in the example code blocks belongs directly within the HTML file's body.

Instructions 1.

Add a body to your web page using the <body> element.

9.

Congratulations on completing the first unit of HTML & CSS! You are well on your way to becoming a skilled web developer.

Let's review what you've learned so far:

  1. The <!DOCTYPE html> declaration should always be the first line of code in your HTML files.
  2. The <html> element will contain all of your HTML code.
  3. Information about the web page, like the title, belongs within the <head>of the page.
  4. You can add a title to your web page by using the <title> element, inside of the head.
  5. Code for visible HTML content will be placed inside of the <body>element.

What you learned in this lesson constitutes the required setup for all HTML files. The rest of the course will teach you more about how to add content using HTML and how to style that content using CSS!

 
1.

Add the required declaration on line 1 of index.html.

2.

Start an HTML document.

3.

Add a head to the web page.

4.

Add a title to the web page. The title can say anything you'd like.

5.

Add a body to the web page.

6.

In index.html, copy the following line of code and paste it inside of the body:

<h1>Hello World!</h1>

What happened to your web page? You'll learn more details in the next unit.

[codecademy]html&css的更多相关文章

  1. [Codecademy] HTML&CSS 第三课：HTML Basic II

    本文出自   http://blog.csdn.net/shuangde800 [Codecademy] HTML && CSS课程学习目录 --------------------- ...

  2. [Codecademy] HTML&CSS第八课：Design a Button for Your Webwite

    本文出自   http://blog.csdn.net/shuangde800 [Codecademy] HTML && CSS课程学习目录 --------------------- ...

  3. [Codecademy] HTML&CSS 第七课：CSS: An Overview

    本文出自   http://blog.csdn.net/shuangde800 [Codecademy] HTML && CSS课程学习目录 --------------------- ...

  4. [Codecademy] HTML&CSS 第一课：HTML Basic

    本文出自   http://blog.csdn.net/shuangde800 ------------------------------------------------------------ ...

  5. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  6. [codecademy]fonts in css

    Great job! You learned how to style an important aspect of the user experience: fonts! Let's review ...

  7. [codecademy]css

    Great work! You've learned the basics of CSS structure and syntax. We'll continue to build on these ...

  8. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  9. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

随机推荐

  1. Java中常见的比较

    一.StringBuffer.StringBuilder.String 1) 都是 final 类, 都不允许被继承; 2) String 长度是不可变的, StringBuffer.StringBu ...

  2. 【设计模式】Java之单例设计模式

    1.单例设计模式:一个类只能有一个对象 1.1 创建单例类的步骤: 1.将构造方法私有化 2.创建私有的静态成员变量 3.共有的静态成员方法,提供当前的唯一对象 1.1 创建单例的两种方式: 1.饿汉 ...

  3. day 24 内置模块re

    1.正则表达式,匹配字符串 正则表达式是对字符串操作的一种逻辑公式.我们一般使用正则表达式对字符串镜子那个匹配和过滤,使用正则的优缺点: 优点: 灵活,功能性强,逻辑性强 缺点: 上手难.一旦上手,会 ...

  4. python学习笔记：第18天 面向对象04-反射

    目录 issubclass和isinstance 区分函数和方法 反射 issubclass和isinstance issubclass:可以判断一个类是否另一个类的子类. # issubclass ...

  5. for循环删除列表中元素遇到的漏删的问题（python）

    问题描述:python中通过for循环来删除列表中的两个相邻的元素,存在漏删的问题 比如说下面的例子,准备删掉2和3,但是结果是2删掉了,3没删掉 是因为把2删掉后3的下标就变成了1,但是原本下标为1 ...

  6. 树莓派编译程序时报错：virtual memory exhausted: Cannot allocate memory

    一.原因分析: 树莓派内存太小,编译程序会出现virtual memory exhausted: Cannot allocate memory的问题,可以用swap扩展内存的方法. 二.解决方法: 安 ...

  7. C语言中结构体的访问方法解读

    在C语言中,对结构体的访问一般有两种常规方式:"."访问和"->"访问.那么两者有什么区别呢?对C语言有一定了解的同学应该知道,我们新建一个结构体的时候, ...

  8. C指针（4）——数据结构中指针的应用（非常重要）

    5-1动态内存分配,分配的是堆内存的空间 分配内存函数 (都集中在库函数 stdlib.h  中) void *malloc (unsigned int num_bytes); //指定分配内存空间大 ...

  9. go基础语法-函数

    1.基础定义 golang的函数很'纯粹',只有可变参数列表的概念,没有默认参数.可选参数.函数重载.操作符重载这些难以把控的概念 语法:'func'声明,而后函数名在前,中间的括号内定义参数,返回值 ...

  10. Caliburn.Micro 杰的入门教程1（翻译）

    Caliburn.Micro 杰的入门教程1(原创翻译)Caliburn.Micro 杰的入门教程2 ,了解Data Binding 和 Events(翻译)Caliburn.Micro 杰的入门教程 ...