HTML Tutorial - Website Crash Course for Beginners

freeCodeCamp.org
5 Aug 202145:19

Summary

TLDR本视频教程由Beau Carnes主讲，向观众介绍了HTML基础知识。HTML是创建网页的语言，与CSS和JavaScript共同工作，分别负责网页结构、样式和功能。通过实际示例，Beau详细讲解了如何使用在线代码编辑器或Visual Studio Code编写HTML，包括基本元素、标签、属性和注释的使用。此外，还涉及了如何创建链接、图片、列表、表单以及如何将网页部署到网络上，使他人可以访问。视频以创建一个简单的猫咪照片应用网页为例，逐步引导观众了解HTML的各个方面。

Takeaways

  • 🌐 HTML是用于创建网页的超文本标记语言，每个网站都使用HTML和CSS，大多数还使用JavaScript。
  • 🏠 HTML提供网页结构，CSS负责样式，JavaScript提供功能。
  • 🔍 可以通过右键点击网页元素并选择“检查”来查看构成该元素的HTML代码。
  • 📝 编写HTML需要一个代码编辑器，如在线的codepen.io或本地的Visual Studio Code。
  • 📁 HTML文件通常以index.html命名，这是浏览器加载网站时常常寻找的文件名。
  • 🔑 HTML由元素组成，元素可以包含内容或独立存在，如doctype、img等。
  • 📖 HTML5引入了新的标签，如header、nav、main等，以标识不同的内容区域，提高可读性和搜索引擎优化。
  • 🖼️ 图像元素（img）使用src属性指定图像来源，使用alt属性提供图像的文本描述，增强可访问性。
  • 🔗 锚点元素（a）用来创建链接，通过href属性指定链接目标，target属性可以控制链接在何处打开。
  • 📝 列表在HTML中通过ul（无序列表）和ol（有序列表）实现，列表项使用li元素。
  • 🔍 表单元素（form）允许用户输入数据并提交，输入元素（input）如文本框和按钮可以设置为必填项。

Q & A

  • HTML是什么，它在网页制作中扮演什么角色？

    -HTML是超文本标记语言（Hypertext Markup Language），它用于创建网页的结构。每个网站上的网页都使用HTML来定义其内容的结构。

  • CSS和JavaScript在网页中分别承担什么功能？

    -CSS负责网页的样式设计，比如颜色、字体和布局等，而JavaScript则提供网页的交互功能，比如响应用户的操作和动态更新内容。

  • 如何查看网页上的HTML元素？

    -可以通过在网页上右键点击一个元素，然后选择“检查”来查看构成该元素的HTML代码。

  • 什么是代码编辑器，有哪些在线编写HTML的地方？

    -代码编辑器是用于编写代码或HTML的程序。在线编写HTML的地方包括CodePen和Repl.it等，无需安装任何软件即可使用。

  • 如何使用CodePen来编写HTML？

    -访问CodePen网站，点击“开始编码”，就可以看到用于编写HTML、CSS和JavaScript的区域。在该课程中，只关注HTML部分。

  • Visual Studio Code是什么，如何下载和安装？

    -Visual Studio Code是一个流行的代码编辑器，可以通过搜索其名称找到下载页面，下载并安装到电脑上。安装过程通常是自动的，比较简单。

  • HTML文件通常以什么命名，为什么？

    -HTML文件通常以'index.html'命名，这是因为网络浏览器在加载网站时常常会寻找这个名字的文件。虽然可以命名为其他名称，但遵循这个惯例有助于保持一致性。

  • HTML页面的基本结构是怎样的？

    -一个基本的HTML页面以<!DOCTYPE html>开始，然后包含<html>元素，它内部通常包含<head>和<body>元素。<head>元素包含页面的标题和元数据，而<body>元素包含所有可见内容。

  • HTML中的注释是如何工作的，它们有什么作用？

    -HTML中的注释使用'<!--'开始，'-->'结束。注释允许开发者在代码中留下信息，这些信息不会影响最终页面的显示效果，也不会被用户看到。

  • HTML中的<img>标签如何使用，它需要哪些属性？

    -<img>标签用于在网页上显示图像，它是一个自闭合标签，不需要结束标签。它需要'src'属性来指定图像的来源，可以是一个URL或者本地文件路径，还需要'alt'属性来描述图像内容，以提高可访问性。

  • HTML中的<a>标签如何创建链接，需要哪些属性？

    -<a>标签，或称为锚点元素，用于创建可以点击的链接。它需要'href'属性来指定链接的目标URL。链接的文本放在<a>标签的开闭标签之间。

  • HTML中的<form>元素如何使用，它有什么作用？

    -<form>元素用于创建表单，允许用户输入数据并提交。它通常包含输入字段、按钮等元素，并通过'action'属性指定提交数据后的处理URL。

  • HTML中的<div>元素有什么用途？

    -<div>元素，也称为分区元素，是一个通用的容器，用于组织其他元素。它常用于CSS样式定位，可以将多个元素包裹在一个<div>中，然后统一应用样式。

  • HTML页面的<head>部分通常包含哪些内容？

    -<head>部分通常包含元数据元素，如<title>定义网页标题，<link>链接外部CSS文件，<meta>定义字符集等，这些内容不会直接显示在页面上，但对页面的展示和功能至关重要。

  • 如何将HTML页面发布到互联网上？

    -可以通过网站托管服务提供商，如Hostinger，购买托管服务并上传HTML文件。上传后，通过分配的域名访问网站，如果设置正确，可以看到发布的网页内容。

Outlines

00:00

😀 HTML基础教程介绍

本段介绍了HTML（超文本标记语言）的基础知识，由Beau Carnes主讲。HTML是创建网页的基础，与CSS（负责样式）和JavaScript（负责功能）一起使用。通过一个交互式图表，讲解了网页结构、样式和功能的比喻，说明了HTML在构建网站中的作用。此外，还提到了如何通过右键检查元素来查看网页的HTML结构，以及如何使用在线代码编辑器如codepen.io和Visual Studio Code来编写HTML代码。

05:07

📝 HTML编写和页面结构

这段内容讲述了如何开始编写HTML，包括HTML元素的基本概念，如容器元素和独立元素。解释了doctype、html、body标签的作用，并介绍了head元素包含的页面标题和元数据。通过实例，展示了如何创建标题（h1和h2）、段落（p元素）和注释，以及如何使用注释来临时禁用代码。

10:08

🖼️ 图片和链接的HTML元素

本段讲解了如何在HTML中添加图片和创建链接。介绍了图片标签（img）和其属性src（资源来源）以及alt（替代文本），强调了alt属性对于提高网页可访问性的重要性。同时，解释了锚点元素（a元素）如何用于创建链接，并通过href属性指定链接目标，以及如何通过target属性控制链接在新标签页打开。

15:11

📑 HTML列表和表单的创建

介绍了如何在HTML中创建列表和表单。讲解了无序列表（ul）和有序列表（ol）的使用方法，以及如何添加列表项。接着，通过实例展示了如何创建表单，包括添加文本输入框、提交按钮，以及如何设置输入框的占位符和必填属性。此外，还提到了单选按钮（radio buttons）和复选框（checkboxes）的用法，以及如何使用label元素提高可访问性。

20:12

🔗 表单元素的进阶用法

本段进一步讲解了表单元素的用法，包括如何设置单选按钮和复选框的默认选中状态，以及如何使用ID和for属性关联label和输入元素。此外，还介绍了如何使用br标签来创建线断裂，以及如何通过div元素和class属性来组织和样式化网页内容。

25:17

🏷️ 网页头部和元数据

介绍了HTML文档的头部（head）部分，包括title标签用于定义网页标题，以及如何通过head部分引入外部CSS和JavaScript文件。强调了头部信息对于搜索引擎优化（SEO）和屏幕阅读器的重要性。

30:19

📝 完成HTML页面并上线

最后一段内容讲述了如何将完成的HTML页面上传到网络主机并发布到互联网。介绍了选择网络主机、购买域名、通过文件管理器上传文件的过程，并解释了可能需要等待一段时间才能通过URL访问新创建的网站。最后，鼓励观众学习CSS和JavaScript以进一步开发网页。

Mindmap

Keywords

💡HTML

HTML（Hypertext Markup Language）是超文本标记语言，是创建网页和网页应用的基础。在视频中，HTML被描述为网页的骨架，定义了网页的结构。例如，视频提到HTML元素如'h1'用于创建标题，'p'用于创建段落文本。

💡CSS

CSS（Cascading Style Sheets）层叠样式表，用于设置HTML元素的样式，如颜色、字体和布局。视频指出CSS为HTML结构添加样式，比如改变砖块的颜色，使网站看起来更美观。

💡JavaScript

JavaScript是一种脚本语言，用于为网页添加交互性。虽然视频中没有深入讲解JavaScript，但提到了它与HTML和CSS一起使用，为网站提供功能，比如实现用户点击事件。

💡元素

在HTML中，元素是构成网页的基本单元，如标题('h1')、段落('p')等。视频通过创建不同的HTML元素，展示了它们如何影响网页内容的显示，例如'h1'元素用于显示最大的标题。

💡标签

标签是HTML元素的开始和结束的标志，如'<h1>'和'</h1>'分别表示标题元素的开始和结束。视频中解释了标签如何包裹内容，并形成网页的结构。

💡属性

属性是HTML元素的修饰符，提供关于元素的额外信息。例如，视频提到了'src'属性用于指定图片的来源，'alt'属性为图片提供文本描述，增强了网页的可访问性。

💡注释

注释是HTML中用于解释代码或临时移除代码部分的语法，不会显示在浏览器中。视频中展示了如何使用注释来留下提醒或暂时禁用某些代码。

💡表单

表单是HTML中用于收集用户输入的元素组合，如文本框和按钮。视频展示了如何创建一个包含文本输入和提交按钮的表单，并解释了表单数据如何通过'action'属性指定的URL提交。

💡列表

列表是HTML中用于展示项目集合的元素，分为有序列表('ol')和无序列表('ul')。视频通过创建猫喜欢和不喜欢的事物列表，展示了列表在网页中的应用。

💡可访问性

可访问性是指使网站能够被更广泛用户群体使用的特性，包括使用屏幕阅读器的用户。视频提到了'alt'属性作为提高图片可访问性的例子，以及如何通过语义化标签改善搜索引擎优化和可访问性。

Highlights

HTML是用于创建网页的超文本标记语言，是互联网上每个网站的基础结构。

HTML、CSS和JavaScript是构成网站的三大核心技术。

通过右键网页元素并选择“检查”，可以查看构成该元素的HTML代码。

可以使用在线代码编辑器如codepen.io或本地安装的Visual Studio Code编写HTML。

HTML文件通常以index.html命名，这是浏览器加载网站时常见的默认文件名。

HTML由元素构成，元素是HTML的个体组件，如h1用于定义标题。

HTML5引入了新的标签，如<main>，用于标识页面的不同内容区域，提高可读性和搜索引擎优化。

注释功能允许开发者在HTML中添加不影响最终输出的说明信息。

图像标签<img>通过src属性指定图像来源，alt属性提供图像的文本描述，增强可访问性。

锚点标签<a>用于创建链接，通过href属性指定链接目标，可以打开新标签页。

列表标签如<ul>和<ol>分别用于创建无序列表和有序列表。

HTML表单<form>用于收集用户输入的数据，并通过action属性指定提交数据的URL。

输入元素<input>的type属性可以设置为text，创建文本框，或radio、checkbox等创建单选和复选框。

div元素是一个通用容器，常用于CSS样式定位和布局。

<footer>元素用于标识网页的底部区域，有助于搜索引擎优化和屏幕阅读器。

<head>部分包含元数据元素，如<title>定义网页标题，影响浏览器标签的显示。

通过hosting网站，可以将本地HTML页面部署到互联网上，供他人访问。

Transcripts

play00:00

This is an HTML Crash Course. I'm Beau Carnes  and I'm going to teach you the basics of HTML.  

play00:06

Let's jump right into it. You probably already  know that HTML is used to create web pages.  

play00:12

It stands for Hypertext Markup Language. Every  website on the internet uses HTML and CSS. Most  

play00:20

also use JavaScript. In a website, HTML is the  structure. CSS is the style, and JavaScript is  

play00:28

the functionality. Here's a great interactive  diagram from code analogies calm, you can see  

play00:35

we have the page, the structure, styling  and functionality, and we move this slider.  

play00:42

So it's like the house. So pages like the house.  So the structure or the HTML is like how many  

play00:47

bedrooms or how many rooms, the CSS, the styling  is like the color, the color of the brick here.  

play00:53

And then the functionality of what you're doing  like eating is the JavaScript, you can actually  

play00:58

see the HTML that makes up any element on a web  page by right clicking an element, and then going  

play01:06

to inspect. And this, all this right here is the  HTML. In this crash course will mainly discuss  

play01:15

HTML. Afterwards, you'll probably want to learn  CSS and JavaScript. At the end of this course.  

play01:21

I'll also show you how to get your HTML page  online using hosting or.com. to host the website  

play01:28

hosting are provided a grant that made this  course possible. Hosting her provides web hosting  

play01:34

databases, domains and other services. Before you  learn how to write HTML, you have to make sure you  

play01:41

have a place to write the HTML, a program used  to write code or HTML is called a code editor.  

play01:48

There are a few places you can write HTML online  without installing anything, such as code pin.io,  

play01:55

or replique Comm. I'll quickly show you how  to use code pin to write HTML, then I will  

play02:01

show you how to install and use a program  on your computer called Visual Studio code.  

play02:06

I'm going to be using Visual Studio code for this  course. But you can use any code editor you like.  

play02:13

If you already know where you're going to write  your HTML, you can jump right to the part of the  

play02:17

course where I start teaching HTML. So if you  want to use code pen, which is the easiest way  

play02:23

to get started, we can just go to code pen.io,  and then click start coding. So you can see  

play02:29

there's a place for HTML, CSS, and JavaScript. But  we're just going to be doing HTML in this course.  

play02:36

So let me show you an example. If I make  a paragraph, and type in hello world,  

play02:45

you can see that it appears right down here.  And then it keeps updating automatically,  

play02:50

you can see it updated with my mistake, and then I  corrected it and then it went back to the correct  

play02:54

way hello world. So you can also just change  move these stuff around, change the view. And  

play03:02

this can make it a little easier to write the  HTML on this side and then see the result on  

play03:06

this side. Now I'll show you Visual Studio code.  If you just do a search for Visual Studio code,  

play03:16

you can go right in here. And then I  will click download, and the button  

play03:21

will automatically download Visual Studio code  for whatever operating system you're using. I'm  

play03:27

not going to show the full download and install  process that should be pretty self explanatory.  

play03:32

Once you get Visual Studio Code opened, it should  look something like this, you won't have these  

play03:37

recent files here. And also I zoomed in a little  bit so everything's a little bigger on the screen.  

play03:43

But you're going to want to click new file.  And now I'm just going to go to File, Save.  

play03:50

And for the title, I'm going to type in index  dot HTML and make sure you are in the directory  

play03:57

you want. I already created a directory called  HTML course. So it's pretty standard to name your  

play04:04

main file index dot HTML. In fact, web browsers  will often look for a file with that exact name.  

play04:12

When your website is loading up. You can actually  call your HTML file anything it could be called  

play04:18

cats, dot HTML or new dot html.  But it's generally good to stick  

play04:24

with index dot HTML for your first file.  Okay, you got a place to write the HTML.  

play04:30

Let's start writing HTML. In this course, you will  learn HTML by creating a simple page. I recommend  

play04:37

that you type along with me will create a web page  line by line and I'll explain the key concepts  

play04:44

as I go. I'm going to first create an extremely  basic HTML page and then I'll explain it  

play04:58

okay HTML is made up of elements in element is  an individual component of HTML. So this right  

play05:07

here is an H one element, an element will often  have an opening tag like this, and a closing tag,  

play05:17

and it will contain everything within the opening  and closing tags, you can see a closing tag often  

play05:25

has a slash right in these angle brackets right  before the name of the tag. So this is an h1 tag  

play05:32

that's opening and closing h1 tag. Most elements  are container elements. That means they hold  

play05:40

content between the opening and closing tags.  For instance, it's this h1 element is holding  

play05:47

the content, hello world. But some elements are  stand alone, like this one right here. And we'll  

play05:54

talk about a few more later. This one right here  doctype doctype. html. This is what all HTML files  

play06:03

are going to start with. This is the first element  on every HTML page, it tells the browser to expect  

play06:09

HTML and what version to use. And this just  means to use the newest version of HTML.  

play06:17

And then we have this HTML element. So this is the  opening tag. And this is the closing tag. And all  

play06:25

of this are the contents of the HTML element. All  page content must be contained in these HTML tags.  

play06:35

And then we have this body tag here. So here's  the opening body tag and the closing body tag.  

play06:42

And here is the contents of the body, the body  is going to contain all the visible content in  

play06:49

a page, often above this body element within the  HTML element, you're going to have a head element  

play06:56

that is going to contain the page title and  metadata. We'll talk about that much later. So  

play07:03

for now, let's focus on this the h1 hello  world, the H in h1 stands for headings.  

play07:11

So h1 is is an h1 element is used to define  headings, and there's h1, h2, h3, h4 h5, h6,  

play07:20

and the one is going to be the biggest Heading  Two is going to be slightly smaller, three is  

play07:25

gonna be smaller still, and so on. So let's see  what this looks like in an actual web browser.  

play07:33

So I'm going to save this Command S or Ctrl S,  or you can go to File, Save. And now I'm going to  

play07:40

open this in a web browser. To do this. To open  it, I'll just find the file in my file browser.  

play07:47

So here's my folder. Here's the file, I just  created index dot HTML, I'll just double  

play07:53

click that file. And you can see it says hello  world. That's the h1 element I just created.  

play08:00

Let me reposition these windows. That's better.  Now I can see the HTML code on this side.  

play08:06

And I can see the web browser what the HTML  is creating over on the right side. So I told  

play08:12

you there are different types of headings like  h1, h2, h3, I'm gonna create another heading.  

play08:18

So h two, and I'm gonna call this  cat photo app. And if I save this,  

play08:25

and then I refresh, you can see hello world is  really big. And then cat photo app is a little  

play08:31

smaller because it's an h2 element. Another  common type of element is a p element. A p  

play08:39

element is used to create paragraph text on  websites. So I'm going to create a p element,  

play08:47

you may have noticed that the code editor  automatically puts the ending tag, when I put the  

play08:53

beginning tag, the code editor is automatically  going to put the ending tag right in here for us.  

play08:59

So that's pretty nice. And you may have also  noticed that the beginning and ending tag can  

play09:06

be on the same line like the h1 element, or they  can be on different lines like this body element.  

play09:12

Okay, so right within this paragraph tag, I'm  going to put Click here to view more cat photos.  

play09:24

And if I save this and refresh, we can see the  paragraph. paragraph text is the main text on a  

play09:30

web page that people read. Okay, now I'll talk to  you about commenting. Comments allow you to leave  

play09:38

messages without affecting the output displayed  to the end user. It's common in pretty much all  

play09:44

programming languages to have comments. It also  allows you to make code inactive. For instance, if  

play09:50

we put this h2 element within the inside a comment  then it wouldn't appear on the page anymore.  

play09:56

So let me show you how to add a comment. I'm gonna  put less than sign exclamation point dash dash.  

play10:01

And then the code editor automatically adds the  end of the comment. So here's the beginning of  

play10:07

the comment. And here's the end. And whatever  is in between these dashes is the comment.  

play10:12

So I'm going to put to do and link to cat photos.  So this will just remind me to do that later.  

play10:27

And now we can remove this h1 tag. This  was just an example. Because this app is  

play10:33

really this website is actually a cat photo  app. We don't need this hello world here.  

play10:38

But I save that, you'll see that the  Hello World is gone. And also, the comment  

play10:44

does not appear on the page. html five has  tags that identify different content areas.  

play10:50

These tags make your HTML easier to read,  and also help with search engine optimization  

play10:55

and accessibility. We're going to identify the  main section of this page by any main element with  

play11:02

a main opening tag and closing tag. So right after  the title, I'm going to put main, the code editor  

play11:09

automatically puts the closing tag, I'm going to  do Ctrl x or Command X to cut it. So I'm gonna  

play11:15

cut this closing tag and paste it right here.  And this is a good time to talk about nesting.  

play11:25

HTML elements are often nested within other  HTML elements. So on this page, we have this  

play11:34

body element right here, this is the opening  tag and ending tag. And inside the body element  

play11:40

is all this stuff right here, which is nested,  and the body element is actually nested within the  

play11:45

HTML element. And we have this main element inside  nested within the main element is this comment in  

play11:53

this paragraph tag, what I'm going to do is select  everything within the main element. And I'm going  

play11:58

to hit the Tab key that's going to indent all  of the everything within the main element.  

play12:06

indentation spacing, and new lines do not impact  how a browser renders a page. But it can make HTML  

play12:13

easier to read. And the general best practice is  to indent all nested elements. So you can see this  

play12:20

is indented. And then this is indented. And this  is indented. So every sect, anything that's nested  

play12:27

is indented within the elements that is nested  in. And you can see when I select this, you can  

play12:33

see these little dots, those are spaces. So though  I just click the tab button to indent this, and it  

play12:39

just added two spaces before each line. So you  could also just use the spacebar to indent those,  

play12:46

this page is going to have a few different  sections. So we'll indicate the first section  

play12:50

by adding an h3 element with the text cat  photos above the comment. So I'm going to put  

play12:59

h3 here, photos. And if I refresh, you'll see  that we have this is the H two heading and this  

play13:08

is the h3 heading, it's just a little smaller. Now  we're going to make this look a little cooler by  

play13:12

adding an image. So right after this paragraph,  I'm going to put an image tag. Now an image tag  

play13:21

and image element does not have a closing tag,  it only has an opening tag, it just has one tag.  

play13:28

Most elements have an opening and closing tag.  But there are some elements that only have a  

play13:33

single tag, they don't have a closing tag. But  we are going to have to do something to specify  

play13:39

what the image is that's going to display.  And that's where HTML attributes come in.  

play13:46

html attributes are special words used inside the  opening tag of an element to control the elements  

play13:52

behavior. So let me show you how to do that  in an image element. So in this image element,  

play13:57

I'm going to put a space, I'm putting the  space before the closing bracket. And I'm  

play14:02

gonna put SRC stands for source, the source of  the image will be equals. And then I'm going  

play14:09

to put a website here. So it's gonna be HTTPS,  colon slash slash, FCC that I am slash FCC, re.  

play14:19

Relaxing cat. Now this is the URL of an  image that already exists on the internet.  

play14:27

So if I save this and I refresh the page,  we see this cute relaxing cat right here.  

play14:34

So it's displaying this image and the source  of the image is this URL, it's getting the  

play14:38

image from that URL. So this is the attribute  and attributes are always paired with values.  

play14:46

There's always in the value here is this the  value is always going to be in quotation marks.  

play14:53

attributes are selected from a predefined set of  possible attributes depending on the element. So  

play15:00

SRC is specific to an image element and a few  other elements. And depending on the element,  

play15:06

there'll be a different list of attributes  that can go along with it. But the values are  

play15:11

more variable, they're going to be in quotation  marks. And they could be lots of different things  

play15:15

depending on what applies to the attribute. And  we're going to add another attribute right now. So  

play15:21

after this attribute and value, I'm going  to put a space and then this is going to be  

play15:28

an alt attribute. So the value of this alt  is just going is going to be a cute orange  

play15:37

cat lying on its back. So an alt attribute is  basically a way to describe the picture with  

play15:46

text. The text inside an alt attribute is used  for screen readers to improve accessibility.  

play15:52

And it's displayed if the image fails to load.  So you should always use an alt attribute with  

play15:58

every image. Now we'll add an anchor element that  will link to another website, an anchor element,  

play16:06

or the A element can is used to create a link that  you click on to go to a different page or website.  

play16:13

So let me show you how to do that. It's just  a four anchor. And then we have the opening  

play16:18

and closing tags. But we're going to specify  what the website that we're linking to is.  

play16:23

So to specify that we're going to use an attribute  called href. equals and then here's where we're  

play16:29

going to put the website we're linking to.  For this example, I'm just going to put cat  

play16:33

photos, calm, cat photos, calm. And then inside.  So we have this opening tag and this closing tag.  

play16:43

And whatever is in between the opening and  closing tag of an anchor element is what  

play16:49

the text is of the link. So I'm going to put cat  photos. So if I save this and I refresh over here,  

play16:56

we can see cat photos. And I realize I forgot  to put the HTTPS, colon slash slash. So we need  

play17:06

that this part for the links. And now if I save  this refresh here, that click on and cat photos,  

play17:14

this is not a real website. It's just an example  website for this. So it just says it cannot be  

play17:19

reached. But that's how you create a link. Next  thing is I'm going to actually put this link  

play17:26

into this paragraph, see how we have the word cat  photos here, I want the link to be right there.  

play17:31

So I'm going to cut this out Ctrl or Command x.  And now I'm going to select this text cat photos,  

play17:40

delete that Ctrl V to paste in the link, I save  that and then refresh, we can now see that the  

play17:46

link is right in that sentence. It's right in that  paragraph. Now you saw when I clicked on this,  

play17:51

it just opens right in the same tab. But what  if I want to open up into a new tab? Well,  

play17:56

we need another attribute. So right in this anchor  tag, I'm going to write after the href attribute,  

play18:04

I'm gonna put a space and then add another  attribute, it's going to be the target attribute,  

play18:09

target equals underscore blank. Now, if I refresh  this, I click here, it opens up a new tab,  

play18:19

the website still doesn't exist, though. Since  this isn't a real website, we're not actually  

play18:25

even going to use it here. I'm going to erase this  URL here, and just put a hash sign or pound or a  

play18:33

number sign here. This will keep the text as a  link, but it will no longer link to anything.  

play18:39

It's just a placeholder. It's also often used when  changing the behavior of a link using JavaScript.  

play18:46

So if I just refresh here, I click here,  it still opens in a new tab, but it just  

play18:52

loads the same website in that new tab. And we can  turn this image into a link, I just have to put  

play19:00

an anchor tag here, there's opening anchor  tag, I'm going to copy the closing tag,  

play19:06

I'm going to cut it and put it at the end. And now  I'm going to put h ref. And I'm just going to put  

play19:14

in a placeholder link in here. So if I refresh  here, if I move my mouse over the cat photo,  

play19:22

you can see it turns into a pointer because  it's a link. Now, if I click here, you can see  

play19:27

nothing really happens because it's just the  placeholder and it's not opening into a new,  

play19:31

it's not opening into a new tab. So  it just basically refreshes the page,  

play19:35

or really does nothing when I click there. It's  finally time for a new section of the page. So  

play19:42

before the closing of this main element, I'm going  to add another heading and H three. And this is  

play19:48

going to say cat lists. And now we're going to  learn how to create lists in HTML. The first list  

play19:56

is going to be things cats love. So let me  add a new paragraph. This is things cats love.  

play20:04

And then after this, I'm going to add an  unordered list ul, this ul element is an  

play20:12

unordered list. And you can see I put the  opening and closing tags on different lines.  

play20:16

Because in between, we're going to put three list  items. The first thing cats love are is catnip.  

play20:23

And then another list item is laser pointers.  

play20:31

And the final list item is lasagna. And  now I'm going to add after this list,  

play20:40

well, before I add this next thing, let's  check what it looks like in the browser.  

play20:43

So here is the unordered list, we see these bullet  points and we see the three items. After this, I'm  

play20:49

going to add an image of one of the things on the  list. So put the image tag, and then I'll put that  

play20:56

SRC the source of this image, instead of linking  to a URL like the other image on the page,  

play21:03

we're going to link to a file right on my  computer, I'm just going to put was on dot jpg.  

play21:12

And then for the alt tag, is  going to be who is on Yeah.  

play21:20

Now before I refresh my page, I want to show you  something. So in the same folder on my computer  

play21:26

with my HTML file, I also have this lasagna dot  jpg. So as long as you have an image in the same  

play21:35

folder as your HTML file, you can just link to  it by putting the file name right in here. And  

play21:43

then when we upload our files to our web server  to host our website elsewhere, there's also going  

play21:49

to be folders there. And we just have to make  sure that images are in the right folder here.  

play21:54

So if I refresh my page, we should see a picture  of lasagna, one of the things that cats love,  

play22:01

in the description of this video, I have a link,  so you can download the picture yourself to put  

play22:06

it into your website. Now we're ready for another  list. And this time, it's going to be things cats  

play22:15

hate. So this time, instead of using an unordered  list, I'm going to put in an ordered list o l,  

play22:23

and they're going to be three list  items. The first item is flea treatment.  

play22:31

Second list item is thunder. And the third  list item is other cats. Oops, oh I other cats.  

play22:46

Let's see what that looks like. So you can  see the ordered list is numbered, we have 123  

play22:54

here of the things that cats hate, I'm going to  add another image right below this. So image SRC  

play23:04

in this image is called cats that jpg. All cats.  And just like before I have the link to this image  

play23:14

in the description in this image is already in the  same folder as my HTML file. So if I refresh here,  

play23:22

we see three cute cats, which are things that cats  hate. Well, at least according to this website,  

play23:30

on the internet. And as you know, you  can believe most things on the internet.  

play23:35

But cats don't just kind of hate these  things. They really hate these things.  

play23:40

So around the word hate, I'm going to surround it  in a strong element. So I'll put strong and this  

play23:48

closing tag, I'm going to cut this closing tag  and put it at the end of the word hate. So now,  

play23:56

if I refresh this, you can see that this is bold  here. And we're going to do something similar  

play24:02

for things cats love. I'm going to surround  this in an E m tag to emphasize the word love,  

play24:10

which is also the same as italicize. So if I save  this and refresh, we can see things get love. And  

play24:17

we have italicized here. Now we're going to add  another common thing on website, which is a form.  

play24:25

So we're going to add a form element with an  opening with an opening and closing form tag.  

play24:32

So right after this image, I'm going to put form  

play24:40

and then I'll put those on different lines there  will indicate where to submit the form data by  

play24:45

adding an action attribute on the form element.  So it's gonna look like this. action equals  

play24:54

slash submit cat photo Just like that. So now  when you submit this form, we still have to  

play25:05

add the submit button. But once we do when  you click the submit button, it will submit  

play25:09

all the data to that URL. Now, we're not going  to actually create that part of this website.  

play25:17

This is just a basic HTML Crash Course. So we are  not going to do anything to handle this form data,  

play25:24

I'm just going to show you how to create the  form. And you'll have to look for another  

play25:27

tutorial to learn how to create the website that  handles that form submission. But the first thing  

play25:34

in this form is going to be a text input element.  So right here, I'm going to put an input element,  

play25:43

and I'm going to add a type. And the type is going  to be text, this is going to make a text box. So  

play25:51

if I save this and refresh over here, we can  see at the very end, this text box, which I can  

play25:57

put all these any, any text in this text box down  here, input elements do not need closing tags,  

play26:05

we're going to add placeholder text to this input.  So this is going to be another attribute place.  

play26:12

place holder equals cat photo URL. So placeholder  tags, you're just about to see what that is. But  

play26:24

it's this light gray text that appears in  the in this input box until you start typing.  

play26:31

As soon as you start typing, it goes away.  So that can indicate what's supposed to go  

play26:35

into the input box. Under this input element,  I'll add a submit button. So this is going to be  

play26:43

a button element. And it's going to have a type  of Submit. And this is this is going to have a  

play26:54

closing tag opening and closing tag. And whatever  text you put in between the opening and closing  

play26:59

tag of a button is going to appear on the  button. In this case, we'll have it say Submit.  

play27:09

So if I save that, and then I refresh, we can  see that there's a submit button right here.  

play27:18

Now if I click the submit button, remember, we  haven't implemented what happens after you click  

play27:22

the submit button at that URL. But that's how  you would submit the data. Clicking the button  

play27:28

will send the data from the form to the URL  we specified in this action attribute up here.  

play27:36

Let's make it so it's required to put it in  the URL before we can click the submit button.  

play27:40

That's pretty simple. Just in this input to  make that input required. I'm going to put an  

play27:46

attribute required. Most attributes have values.  But in this case, this does not have a value,  

play27:53

it's just the attribute use that to put the  word require doesn't have to equal anything.  

play27:57

And now if I try to click the submit button, it  says please fill out this field. You can use radio  

play28:04

buttons for questions where you want the user to  only give you one answer out of multiple options.  

play28:10

Here's how you put a radio button, we're going  to put two radio buttons for an indoor or outdoor  

play28:16

cat. So right before this text box, I'm going to  put an input element. And that type this time is  

play28:24

going to be radio. And then I'm just going to put  indoor. And then I'll put another one input type  

play28:35

equals radio. And this is going to  be out door. I save this and refresh.  

play28:44

You can now see indoor and outdoor. Right now, if  you click on it, they both stay clicked. So we're  

play28:53

going to eventually make it so when you click on  one it unclicks the others you can only have one  

play28:58

clicked at a time. We also want to make it so when  you click on the text, it will make the button  

play29:04

clicked. To make the text also click the button  we're going to nest everything within a label  

play29:12

element. So I'm going to put a label and then  this closing tag, I'm going to cut that and put  

play29:21

it at the end here. And you can see it does. Go  to the next line. And then I'll put a label here.  

play29:31

And then I'll cut this label and then put  it here and I'm going to save and refresh.  

play29:40

And now if I click the text outdoor, the  radio button clicks click the text indoor  

play29:46

the indoor button clicks. All related radio  buttons should have the same name attribute  

play29:52

to create a radio button group. By creating a  radio group selecting any single radio button  

play29:58

will automatically the Select To the  other buttons within the same group,  

play30:02

ensuring only one answer is provided by the user.  So I'm going to add the attribute indoor outdoor  

play30:09

to each radio button. So here it goes  right here, I'm going to put name, indoor,  

play30:18

outdoor. And since I'm adding the same one to  every radio button, I'm just going to copy this.  

play30:26

And I'm going to paste it.  

play30:32

Now if I refresh, we have indoor. So when I click  one, the other one D selects. Next up, I'm going  

play30:41

to add an ID attribute to these buttons. an ID  attribute is used to identify specific elements  

play30:47

in other sections of HTML, CSS, and JavaScript.  So I'm going to add an ID attribute set to equal  

play30:54

indoor on the first real input element. And Id  attributes have to equal outdoor on the secondary  

play30:59

input element. So I'm going to put the ideas I'm  going to put as the first attribute ID equals  

play31:09

indoor. And then ID equals outdoor. Now one  thing about these attributes is that the order  

play31:20

doesn't matter. So you can see on this  input element, there's three attributes,  

play31:26

there's the ID, the type and the name, the order  doesn't matter. I could have put name, type ID,  

play31:32

or type ID name, the order doesn't matter. So  it's as long as you have a space in between  

play31:40

each element, or each attribute, it's going to all  all work, it's considered best practice to set a  

play31:48

four attribute on the label element with a value  that matches the value of the ID element of the  

play31:55

input element. This allows assisting technologies  to create a linked relationship between the label  

play32:00

and the child input element. So let me show  you how you would do that. It's very simple.  

play32:05

So for this label, I'm going to put four and  that's going to be set to the same thing as ID,  

play32:10

which is indoor. So now we know that this label  is for this input, because it has the same  

play32:18

the for indoor, oh, but I door indoor. And  we'll do the same thing right down here,  

play32:25

for out door, and racist extra space. So  yeah, now we know this labels for this input,  

play32:34

I'm going to actually zoom out a little bit on  the code. So you can see more of what's going  

play32:40

on. It doesn't it doesn't go to the next line as  much doesn't wrap to the next line quite as much.  

play32:46

Now, none of this stuff, we did actually  change what the web page looks like. But we  

play32:52

are just about to change something, you can see  everything's on the same line, indoor outdoor,  

play32:57

and this text, this text box are all on the same  line. This is because line breaks in HTML have no  

play33:05

impact on how a browser renders the page. To  add a line break, we're going to use the br  

play33:11

tag for break. So after this first indoor one I'm  going to put BR and I'm just going to copy this.  

play33:21

And I'm going to put a br tag after each  of these input elements. And if I save that  

play33:28

refresh, now you can see we've indoor line  break, outdoor line break, and then the text box.  

play33:34

And then there's another line break and then the  submit button forms commonly used checkboxes for  

play33:40

questions that may have more than one answer.  The code for a checkbox is very similar to that  

play33:45

of a radio button. So let me show you how to add a  checkbox, we're going to add a check box to check  

play33:52

if a cat is loving or not the personality  of the chat the personality of the cat.  

play33:58

So here, I'm going to put a label just like  the radio buttons, and it's going to be for  

play34:09

loving. Then I'm going to put the input element  

play34:16

and input elements going to have an ID  of loving. It's going to have a type of  

play34:26

check box, Matt add some more quotation marks  here. And is going to have a name of personality.  

play34:46

And then I'm just going to have to put the word  loving that's the word that's going to appear.  

play34:51

And you know, let's just make this  consist we'll have this have a capital I  

play34:55

capital O. Okay, let me refresh.  And so we've been indoor, outdoor,  

play35:01

and we can check loving, we can check it  off and on. Let's add a line break here.  

play35:10

And then I'm going to add two more checkboxes,  I'm just going to copy this checkbox.  

play35:16

And then put two more in here. Now I'm going to  add some line breaks in the HTML, which will not  

play35:22

appear on the website. This is just to make  it easier to see the difference. So we have  

play35:27

the radio buttons, and we have the three  checkboxes. But we're going to put some  

play35:31

more personality traits. So this one is  going to be lazy, some cats are lazy.  

play35:42

And the next one is going to be energetic, and  energetic. Now let's save this and refresh. So  

play36:01

now we can see the radio buttons, we have these  checkboxes where you can check any number of  

play36:06

things. And we have this text box  where you can type in stuff here.  

play36:10

To set a checkbox or radio buttons to be  checked by default, just add the word checked  

play36:16

to the inside of the input element. Let me show  you. So we have this input element right here,  

play36:23

I'm just going to add the word checked.  This is an attribute with no value.  

play36:27

So we have checked there, and then  I'm going to add checked here.  

play36:35

I can spell it. There we go, refresh. And now  the indoor is automatically checked and loving  

play36:43

is automatically checked. We're getting close to  being done with this page. And I'm finally going  

play36:49

to tell you about one of the most commonly used  HTML elements of all, which is the div element,  

play36:57

also known as a division element. It's a  general purpose container for other elements.  

play37:03

One of the reasons it's used so much is because  div elements are often used to target with CSS.  

play37:11

So you may want to style a whole section  of your web page in one particular way. And  

play37:17

you can wrap that all within a div element. And  then you can use CSS to style that div element.  

play37:22

So we're going to put our lists in a div element.  So I'm going to put an opening div tag here.  

play37:32

And then we have the closing div tag, I'm just  going to cut this, I will actually zoom in on  

play37:37

the code just a little bit more. And at the end  of things, cats hate the end of this other list,  

play37:42

I'm going to put the closing div element.  Now I'm going to indent everything in here.  

play37:48

So you can see it's nested within the div.  So now we can see that inside this div,  

play37:53

we have the things cats love, and that things  cats hate. So the way that you would often style  

play37:59

something like this with CSS is to add a class  attribute. So I'm going to put class equals lists.  

play38:10

Class attributes are very commonly used in  HTML, specifically to style with CSS. So you  

play38:18

can actually target all elements with the class  of lists to make them have all the same style.  

play38:25

So maybe you went everything with the class of  list like this to have a blue background. Or maybe  

play38:30

you want to border around everything. Or maybe you  want all the text to be a different color, or the  

play38:37

text size we different. And you can in the CSS,  you can actually target anything with the clip  

play38:42

anything inside a div with class lists can have  a certain style. Now, we're not going to go too  

play38:49

far into that, because again, this course is just  about HTML, you'll just have to look at an S CSS  

play38:55

course to learn more about that. So now we're  going to add a footer to the web page. So we have  

play39:01

the main section, we hit the closing main tag,  I'm going to add a footer element. Now, the stuff  

play39:08

inside a footer element is not going to look any  different on your page. This is mainly for screen  

play39:14

readers and SEO purposes. So so the different  sections of your web page can be identified.  

play39:22

And inside this footer, we're going to put a  paragraph tag, it's going to say no copyright  

play39:30

free code camp.org. So if I save this  and refresh, we can see no copyright  

play39:38

free code camp.org and we can make this  into a real link by putting a href equals  

play39:46

http colon HBS colon slash slash, Free Code,  camp that org and then I have to put this closing  

play39:59

in element, the closing tag after the Free Code  camp.org text here. So they save that and refresh.  

play40:07

Now we see this is now a link to Free Code Camp  that org. And one other thing I want to show you  

play40:14

is that we could style a lot of times the text  and a footer is smaller. Now we could style that  

play40:20

with CSS, or we can just put a small tag around  everything. So when we put the closing small tag  

play40:27

at the end here, and save that, if I refresh,  you can see now this text is a little smaller.  

play40:35

Now let's go all the way back up to the top of our  HTML page. And we'll look at this HTML element,  

play40:42

you'll notice that everything is inside the HTML  element. And inside this, we are going to specify  

play40:49

the language of the website, we want to specify  that this isn't in English. So up at Lang  

play40:57

equals e en for English. And I told you earlier  that before the body section of a website,  

play41:06

you'll often have a head section of  a website. And so let's add that now.  

play41:13

Got the head section, the head section is where  it where metadata elements go sub sub that's not  

play41:20

going to actually show up in the content of your  website. Things such as link meta title style.  

play41:27

So let me give you an example. One of One very  common one is title. So I can create a title  

play41:33

for this website, I'm going to put cat photo  app. I'm going to save this and see how here it  

play41:41

says index that HTML if I refresh, now it says cat  photo app sitting that right from the title here.  

play41:48

Another thing that's common to use in the  head, or to put in the head of a website  

play41:53

is links to the external CSS file that's going  to be used to style the page and the external  

play41:59

JavaScript file that's going to be used to add  functionality to your page. And actually, that's  

play42:05

it. This is a complete HTML page that we have  created. So the next step is to update this to  

play42:16

our web hosting provider. So we can actually get  this website on the internet. so other people can  

play42:20

go to a URL to access this website with hosting,  or you can deploy websites directly. If you  

play42:27

haven't learned tools like Git and Linux yet, this  approach can save you a lot of time and stress,  

play42:33

start off by going to a hosting or.com. And  you can click Start now or just scroll down.  

play42:38

And I would recommend if you're just starting  out, just go with the cheapest option the single  

play42:42

shared hosting. And we'll just select that. And  then you just go through this checkout process,  

play42:48

choosing the options you want, you'll probably  I would recommend the 12 month option. And then  

play42:53

you just put in your payment information. I'm  not going to show you the full account creation  

play42:58

process. But after you get your account created,  you'll get logged in, it's possible during the  

play43:03

account creation process, you will have chosen  a domain name. If you haven't, there could be a  

play43:10

button on this screen to create a domain name.  So if I scroll down, I can see at the very  

play43:15

bottom amazing cat photos.com, the domain name I  got for our awesome website that we just created.  

play43:23

So to upload the photos to the website, we'll  have to go to hosting I'm going to go to this  

play43:29

menu up here and click hosting. Now amazing cat  photos calm I'm going to manage the hosting.  

play43:36

Okay now we just have to scroll down to  this file section and I go to File Manager.  

play43:48

So now I'm going to make sure to go into  the public HTML directory and there may  

play43:53

be something in this folder if there is just  delete it so you have nothing in the folder.  

play43:57

And now I'm just going to add my files I can  either drag them in from a folder on my computer,  

play44:03

or I can click Upload Files. And I was going  select the files so here are the three files  

play44:09

index dot HTML cat JPG and lasagna  dot JPG and open and upload.  

play44:18

And it's as simple as that the website should now  work you may have to wait a few hours if you just  

play44:27

create a your website. Sometimes it can take a few  hours from x from after you buy your website until  

play44:34

when you can actually go to the URL and it will go  to these files. Sometimes it can even take a day.  

play44:40

But once everything connects and everything  works, then if you make any changes it will  

play44:44

happen instantly. Just the first time when  you get set up it could take a little while.  

play44:48

So let's try going to the website. So I'll  go to WWW dot amazing cat photos calm. If  

play44:55

you try and it doesn't work you may have to  hit you may have to add the www That at the  

play45:00

beginning of the URL so www dot amazing cat  photos calm and this is the website we created  

play45:08

awesome hosting are made that super easy.  Okay you know the basics of HTML. The  

play45:13

next step is to start learning CSS and  JavaScript. Well thanks for watching.

Посмотреть больше похожих видео

超好用【ChatGPT + Visual Studio Code】完美整合，變身超強程式設計高手！

【WordPress零基础建站】第一节：Wordpress建站教程，挑战20分钟快速搭建独立站商城，服务器购买，域名连接，主题安装……

How to Add HTML Files to WordPress In 2 Easy Steps - Add HTML Page to WordPress

Basic Computing Skills - Orientation

Publishing Notion pages to the web

The ONLY Clickbank Affiliate Marketing Guide You'll Need: Step By Step For Beginners

Rate This
★
★
★
★
★

5.0 / 5 (0 votes)

Summary
Outlines
Mindmap
Keywords
Highlights
Transcripts
Связанные теги
HTML基础网页构建CSS样式JavaScript代码编辑器在线编程网页设计前端开发SEO优化教程课程
Вам нужно краткое изложение на английском?