HTML Tutorial - Website Crash Course for Beginners
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
😀 HTML基础教程介绍
本段介绍了HTML(超文本标记语言)的基础知识,由Beau Carnes主讲。HTML是创建网页的基础,与CSS(负责样式)和JavaScript(负责功能)一起使用。通过一个交互式图表,讲解了网页结构、样式和功能的比喻,说明了HTML在构建网站中的作用。此外,还提到了如何通过右键检查元素来查看网页的HTML结构,以及如何使用在线代码编辑器如codepen.io和Visual Studio Code来编写HTML代码。
📝 HTML编写和页面结构
这段内容讲述了如何开始编写HTML,包括HTML元素的基本概念,如容器元素和独立元素。解释了doctype、html、body标签的作用,并介绍了head元素包含的页面标题和元数据。通过实例,展示了如何创建标题(h1和h2)、段落(p元素)和注释,以及如何使用注释来临时禁用代码。
🖼️ 图片和链接的HTML元素
本段讲解了如何在HTML中添加图片和创建链接。介绍了图片标签(img)和其属性src(资源来源)以及alt(替代文本),强调了alt属性对于提高网页可访问性的重要性。同时,解释了锚点元素(a元素)如何用于创建链接,并通过href属性指定链接目标,以及如何通过target属性控制链接在新标签页打开。
📑 HTML列表和表单的创建
介绍了如何在HTML中创建列表和表单。讲解了无序列表(ul)和有序列表(ol)的使用方法,以及如何添加列表项。接着,通过实例展示了如何创建表单,包括添加文本输入框、提交按钮,以及如何设置输入框的占位符和必填属性。此外,还提到了单选按钮(radio buttons)和复选框(checkboxes)的用法,以及如何使用label元素提高可访问性。
🔗 表单元素的进阶用法
本段进一步讲解了表单元素的用法,包括如何设置单选按钮和复选框的默认选中状态,以及如何使用ID和for属性关联label和输入元素。此外,还介绍了如何使用br标签来创建线断裂,以及如何通过div元素和class属性来组织和样式化网页内容。
🏷️ 网页头部和元数据
介绍了HTML文档的头部(head)部分,包括title标签用于定义网页标题,以及如何通过head部分引入外部CSS和JavaScript文件。强调了头部信息对于搜索引擎优化(SEO)和屏幕阅读器的重要性。
📝 完成HTML页面并上线
最后一段内容讲述了如何将完成的HTML页面上传到网络主机并发布到互联网。介绍了选择网络主机、购买域名、通过文件管理器上传文件的过程,并解释了可能需要等待一段时间才能通过URL访问新创建的网站。最后,鼓励观众学习CSS和JavaScript以进一步开发网页。
Mindmap
Keywords
💡HTML
💡CSS
💡JavaScript
💡元素
💡标签
💡属性
💡注释
💡表单
💡列表
💡可访问性
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
This is an HTML Crash Course. I'm Beau Carnes and I'm going to teach you the basics of HTML.
Let's jump right into it. You probably already know that HTML is used to create web pages.
It stands for Hypertext Markup Language. Every website on the internet uses HTML and CSS. Most
also use JavaScript. In a website, HTML is the structure. CSS is the style, and JavaScript is
the functionality. Here's a great interactive diagram from code analogies calm, you can see
we have the page, the structure, styling and functionality, and we move this slider.
So it's like the house. So pages like the house. So the structure or the HTML is like how many
bedrooms or how many rooms, the CSS, the styling is like the color, the color of the brick here.
And then the functionality of what you're doing like eating is the JavaScript, you can actually
see the HTML that makes up any element on a web page by right clicking an element, and then going
to inspect. And this, all this right here is the HTML. In this crash course will mainly discuss
HTML. Afterwards, you'll probably want to learn CSS and JavaScript. At the end of this course.
I'll also show you how to get your HTML page online using hosting or.com. to host the website
hosting are provided a grant that made this course possible. Hosting her provides web hosting
databases, domains and other services. Before you learn how to write HTML, you have to make sure you
have a place to write the HTML, a program used to write code or HTML is called a code editor.
There are a few places you can write HTML online without installing anything, such as code pin.io,
or replique Comm. I'll quickly show you how to use code pin to write HTML, then I will
show you how to install and use a program on your computer called Visual Studio code.
I'm going to be using Visual Studio code for this course. But you can use any code editor you like.
If you already know where you're going to write your HTML, you can jump right to the part of the
course where I start teaching HTML. So if you want to use code pen, which is the easiest way
to get started, we can just go to code pen.io, and then click start coding. So you can see
there's a place for HTML, CSS, and JavaScript. But we're just going to be doing HTML in this course.
So let me show you an example. If I make a paragraph, and type in hello world,
you can see that it appears right down here. And then it keeps updating automatically,
you can see it updated with my mistake, and then I corrected it and then it went back to the correct
way hello world. So you can also just change move these stuff around, change the view. And
this can make it a little easier to write the HTML on this side and then see the result on
this side. Now I'll show you Visual Studio code. If you just do a search for Visual Studio code,
you can go right in here. And then I will click download, and the button
will automatically download Visual Studio code for whatever operating system you're using. I'm
not going to show the full download and install process that should be pretty self explanatory.
Once you get Visual Studio Code opened, it should look something like this, you won't have these
recent files here. And also I zoomed in a little bit so everything's a little bigger on the screen.
But you're going to want to click new file. And now I'm just going to go to File, Save.
And for the title, I'm going to type in index dot HTML and make sure you are in the directory
you want. I already created a directory called HTML course. So it's pretty standard to name your
main file index dot HTML. In fact, web browsers will often look for a file with that exact name.
When your website is loading up. You can actually call your HTML file anything it could be called
cats, dot HTML or new dot html. But it's generally good to stick
with index dot HTML for your first file. Okay, you got a place to write the HTML.
Let's start writing HTML. In this course, you will learn HTML by creating a simple page. I recommend
that you type along with me will create a web page line by line and I'll explain the key concepts
as I go. I'm going to first create an extremely basic HTML page and then I'll explain it
okay HTML is made up of elements in element is an individual component of HTML. So this right
here is an H one element, an element will often have an opening tag like this, and a closing tag,
and it will contain everything within the opening and closing tags, you can see a closing tag often
has a slash right in these angle brackets right before the name of the tag. So this is an h1 tag
that's opening and closing h1 tag. Most elements are container elements. That means they hold
content between the opening and closing tags. For instance, it's this h1 element is holding
the content, hello world. But some elements are stand alone, like this one right here. And we'll
talk about a few more later. This one right here doctype doctype. html. This is what all HTML files
are going to start with. This is the first element on every HTML page, it tells the browser to expect
HTML and what version to use. And this just means to use the newest version of HTML.
And then we have this HTML element. So this is the opening tag. And this is the closing tag. And all
of this are the contents of the HTML element. All page content must be contained in these HTML tags.
And then we have this body tag here. So here's the opening body tag and the closing body tag.
And here is the contents of the body, the body is going to contain all the visible content in
a page, often above this body element within the HTML element, you're going to have a head element
that is going to contain the page title and metadata. We'll talk about that much later. So
for now, let's focus on this the h1 hello world, the H in h1 stands for headings.
So h1 is is an h1 element is used to define headings, and there's h1, h2, h3, h4 h5, h6,
and the one is going to be the biggest Heading Two is going to be slightly smaller, three is
gonna be smaller still, and so on. So let's see what this looks like in an actual web browser.
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
open this in a web browser. To do this. To open it, I'll just find the file in my file browser.
So here's my folder. Here's the file, I just created index dot HTML, I'll just double
click that file. And you can see it says hello world. That's the h1 element I just created.
Let me reposition these windows. That's better. Now I can see the HTML code on this side.
And I can see the web browser what the HTML is creating over on the right side. So I told
you there are different types of headings like h1, h2, h3, I'm gonna create another heading.
So h two, and I'm gonna call this cat photo app. And if I save this,
and then I refresh, you can see hello world is really big. And then cat photo app is a little
smaller because it's an h2 element. Another common type of element is a p element. A p
element is used to create paragraph text on websites. So I'm going to create a p element,
you may have noticed that the code editor automatically puts the ending tag, when I put the
beginning tag, the code editor is automatically going to put the ending tag right in here for us.
So that's pretty nice. And you may have also noticed that the beginning and ending tag can
be on the same line like the h1 element, or they can be on different lines like this body element.
Okay, so right within this paragraph tag, I'm going to put Click here to view more cat photos.
And if I save this and refresh, we can see the paragraph. paragraph text is the main text on a
web page that people read. Okay, now I'll talk to you about commenting. Comments allow you to leave
messages without affecting the output displayed to the end user. It's common in pretty much all
programming languages to have comments. It also allows you to make code inactive. For instance, if
we put this h2 element within the inside a comment then it wouldn't appear on the page anymore.
So let me show you how to add a comment. I'm gonna put less than sign exclamation point dash dash.
And then the code editor automatically adds the end of the comment. So here's the beginning of
the comment. And here's the end. And whatever is in between these dashes is the comment.
So I'm going to put to do and link to cat photos. So this will just remind me to do that later.
And now we can remove this h1 tag. This was just an example. Because this app is
really this website is actually a cat photo app. We don't need this hello world here.
But I save that, you'll see that the Hello World is gone. And also, the comment
does not appear on the page. html five has tags that identify different content areas.
These tags make your HTML easier to read, and also help with search engine optimization
and accessibility. We're going to identify the main section of this page by any main element with
a main opening tag and closing tag. So right after the title, I'm going to put main, the code editor
automatically puts the closing tag, I'm going to do Ctrl x or Command X to cut it. So I'm gonna
cut this closing tag and paste it right here. And this is a good time to talk about nesting.
HTML elements are often nested within other HTML elements. So on this page, we have this
body element right here, this is the opening tag and ending tag. And inside the body element
is all this stuff right here, which is nested, and the body element is actually nested within the
HTML element. And we have this main element inside nested within the main element is this comment in
this paragraph tag, what I'm going to do is select everything within the main element. And I'm going
to hit the Tab key that's going to indent all of the everything within the main element.
indentation spacing, and new lines do not impact how a browser renders a page. But it can make HTML
easier to read. And the general best practice is to indent all nested elements. So you can see this
is indented. And then this is indented. And this is indented. So every sect, anything that's nested
is indented within the elements that is nested in. And you can see when I select this, you can
see these little dots, those are spaces. So though I just click the tab button to indent this, and it
just added two spaces before each line. So you could also just use the spacebar to indent those,
this page is going to have a few different sections. So we'll indicate the first section
by adding an h3 element with the text cat photos above the comment. So I'm going to put
h3 here, photos. And if I refresh, you'll see that we have this is the H two heading and this
is the h3 heading, it's just a little smaller. Now we're going to make this look a little cooler by
adding an image. So right after this paragraph, I'm going to put an image tag. Now an image tag
and image element does not have a closing tag, it only has an opening tag, it just has one tag.
Most elements have an opening and closing tag. But there are some elements that only have a
single tag, they don't have a closing tag. But we are going to have to do something to specify
what the image is that's going to display. And that's where HTML attributes come in.
html attributes are special words used inside the opening tag of an element to control the elements
behavior. So let me show you how to do that in an image element. So in this image element,
I'm going to put a space, I'm putting the space before the closing bracket. And I'm
gonna put SRC stands for source, the source of the image will be equals. And then I'm going
to put a website here. So it's gonna be HTTPS, colon slash slash, FCC that I am slash FCC, re.
Relaxing cat. Now this is the URL of an image that already exists on the internet.
So if I save this and I refresh the page, we see this cute relaxing cat right here.
So it's displaying this image and the source of the image is this URL, it's getting the
image from that URL. So this is the attribute and attributes are always paired with values.
There's always in the value here is this the value is always going to be in quotation marks.
attributes are selected from a predefined set of possible attributes depending on the element. So
SRC is specific to an image element and a few other elements. And depending on the element,
there'll be a different list of attributes that can go along with it. But the values are
more variable, they're going to be in quotation marks. And they could be lots of different things
depending on what applies to the attribute. And we're going to add another attribute right now. So
after this attribute and value, I'm going to put a space and then this is going to be
an alt attribute. So the value of this alt is just going is going to be a cute orange
cat lying on its back. So an alt attribute is basically a way to describe the picture with
text. The text inside an alt attribute is used for screen readers to improve accessibility.
And it's displayed if the image fails to load. So you should always use an alt attribute with
every image. Now we'll add an anchor element that will link to another website, an anchor element,
or the A element can is used to create a link that you click on to go to a different page or website.
So let me show you how to do that. It's just a four anchor. And then we have the opening
and closing tags. But we're going to specify what the website that we're linking to is.
So to specify that we're going to use an attribute called href. equals and then here's where we're
going to put the website we're linking to. For this example, I'm just going to put cat
photos, calm, cat photos, calm. And then inside. So we have this opening tag and this closing tag.
And whatever is in between the opening and closing tag of an anchor element is what
the text is of the link. So I'm going to put cat photos. So if I save this and I refresh over here,
we can see cat photos. And I realize I forgot to put the HTTPS, colon slash slash. So we need
that this part for the links. And now if I save this refresh here, that click on and cat photos,
this is not a real website. It's just an example website for this. So it just says it cannot be
reached. But that's how you create a link. Next thing is I'm going to actually put this link
into this paragraph, see how we have the word cat photos here, I want the link to be right there.
So I'm going to cut this out Ctrl or Command x. And now I'm going to select this text cat photos,
delete that Ctrl V to paste in the link, I save that and then refresh, we can now see that the
link is right in that sentence. It's right in that paragraph. Now you saw when I clicked on this,
it just opens right in the same tab. But what if I want to open up into a new tab? Well,
we need another attribute. So right in this anchor tag, I'm going to write after the href attribute,
I'm gonna put a space and then add another attribute, it's going to be the target attribute,
target equals underscore blank. Now, if I refresh this, I click here, it opens up a new tab,
the website still doesn't exist, though. Since this isn't a real website, we're not actually
even going to use it here. I'm going to erase this URL here, and just put a hash sign or pound or a
number sign here. This will keep the text as a link, but it will no longer link to anything.
It's just a placeholder. It's also often used when changing the behavior of a link using JavaScript.
So if I just refresh here, I click here, it still opens in a new tab, but it just
loads the same website in that new tab. And we can turn this image into a link, I just have to put
an anchor tag here, there's opening anchor tag, I'm going to copy the closing tag,
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
in a placeholder link in here. So if I refresh here, if I move my mouse over the cat photo,
you can see it turns into a pointer because it's a link. Now, if I click here, you can see
nothing really happens because it's just the placeholder and it's not opening into a new,
it's not opening into a new tab. So it just basically refreshes the page,
or really does nothing when I click there. It's finally time for a new section of the page. So
before the closing of this main element, I'm going to add another heading and H three. And this is
going to say cat lists. And now we're going to learn how to create lists in HTML. The first list
is going to be things cats love. So let me add a new paragraph. This is things cats love.
And then after this, I'm going to add an unordered list ul, this ul element is an
unordered list. And you can see I put the opening and closing tags on different lines.
Because in between, we're going to put three list items. The first thing cats love are is catnip.
And then another list item is laser pointers.
And the final list item is lasagna. And now I'm going to add after this list,
well, before I add this next thing, let's check what it looks like in the browser.
So here is the unordered list, we see these bullet points and we see the three items. After this, I'm
going to add an image of one of the things on the list. So put the image tag, and then I'll put that
SRC the source of this image, instead of linking to a URL like the other image on the page,
we're going to link to a file right on my computer, I'm just going to put was on dot jpg.
And then for the alt tag, is going to be who is on Yeah.
Now before I refresh my page, I want to show you something. So in the same folder on my computer
with my HTML file, I also have this lasagna dot jpg. So as long as you have an image in the same
folder as your HTML file, you can just link to it by putting the file name right in here. And
then when we upload our files to our web server to host our website elsewhere, there's also going
to be folders there. And we just have to make sure that images are in the right folder here.
So if I refresh my page, we should see a picture of lasagna, one of the things that cats love,
in the description of this video, I have a link, so you can download the picture yourself to put
it into your website. Now we're ready for another list. And this time, it's going to be things cats
hate. So this time, instead of using an unordered list, I'm going to put in an ordered list o l,
and they're going to be three list items. The first item is flea treatment.
Second list item is thunder. And the third list item is other cats. Oops, oh I other cats.
Let's see what that looks like. So you can see the ordered list is numbered, we have 123
here of the things that cats hate, I'm going to add another image right below this. So image SRC
in this image is called cats that jpg. All cats. And just like before I have the link to this image
in the description in this image is already in the same folder as my HTML file. So if I refresh here,
we see three cute cats, which are things that cats hate. Well, at least according to this website,
on the internet. And as you know, you can believe most things on the internet.
But cats don't just kind of hate these things. They really hate these things.
So around the word hate, I'm going to surround it in a strong element. So I'll put strong and this
closing tag, I'm going to cut this closing tag and put it at the end of the word hate. So now,
if I refresh this, you can see that this is bold here. And we're going to do something similar
for things cats love. I'm going to surround this in an E m tag to emphasize the word love,
which is also the same as italicize. So if I save this and refresh, we can see things get love. And
we have italicized here. Now we're going to add another common thing on website, which is a form.
So we're going to add a form element with an opening with an opening and closing form tag.
So right after this image, I'm going to put form
and then I'll put those on different lines there will indicate where to submit the form data by
adding an action attribute on the form element. So it's gonna look like this. action equals
slash submit cat photo Just like that. So now when you submit this form, we still have to
add the submit button. But once we do when you click the submit button, it will submit
all the data to that URL. Now, we're not going to actually create that part of this website.
This is just a basic HTML Crash Course. So we are not going to do anything to handle this form data,
I'm just going to show you how to create the form. And you'll have to look for another
tutorial to learn how to create the website that handles that form submission. But the first thing
in this form is going to be a text input element. So right here, I'm going to put an input element,
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
if I save this and refresh over here, we can see at the very end, this text box, which I can
put all these any, any text in this text box down here, input elements do not need closing tags,
we're going to add placeholder text to this input. So this is going to be another attribute place.
place holder equals cat photo URL. So placeholder tags, you're just about to see what that is. But
it's this light gray text that appears in the in this input box until you start typing.
As soon as you start typing, it goes away. So that can indicate what's supposed to go
into the input box. Under this input element, I'll add a submit button. So this is going to be
a button element. And it's going to have a type of Submit. And this is this is going to have a
closing tag opening and closing tag. And whatever text you put in between the opening and closing
tag of a button is going to appear on the button. In this case, we'll have it say Submit.
So if I save that, and then I refresh, we can see that there's a submit button right here.
Now if I click the submit button, remember, we haven't implemented what happens after you click
the submit button at that URL. But that's how you would submit the data. Clicking the button
will send the data from the form to the URL we specified in this action attribute up here.
Let's make it so it's required to put it in the URL before we can click the submit button.
That's pretty simple. Just in this input to make that input required. I'm going to put an
attribute required. Most attributes have values. But in this case, this does not have a value,
it's just the attribute use that to put the word require doesn't have to equal anything.
And now if I try to click the submit button, it says please fill out this field. You can use radio
buttons for questions where you want the user to only give you one answer out of multiple options.
Here's how you put a radio button, we're going to put two radio buttons for an indoor or outdoor
cat. So right before this text box, I'm going to put an input element. And that type this time is
going to be radio. And then I'm just going to put indoor. And then I'll put another one input type
equals radio. And this is going to be out door. I save this and refresh.
You can now see indoor and outdoor. Right now, if you click on it, they both stay clicked. So we're
going to eventually make it so when you click on one it unclicks the others you can only have one
clicked at a time. We also want to make it so when you click on the text, it will make the button
clicked. To make the text also click the button we're going to nest everything within a label
element. So I'm going to put a label and then this closing tag, I'm going to cut that and put
it at the end here. And you can see it does. Go to the next line. And then I'll put a label here.
And then I'll cut this label and then put it here and I'm going to save and refresh.
And now if I click the text outdoor, the radio button clicks click the text indoor
the indoor button clicks. All related radio buttons should have the same name attribute
to create a radio button group. By creating a radio group selecting any single radio button
will automatically the Select To the other buttons within the same group,
ensuring only one answer is provided by the user. So I'm going to add the attribute indoor outdoor
to each radio button. So here it goes right here, I'm going to put name, indoor,
outdoor. And since I'm adding the same one to every radio button, I'm just going to copy this.
And I'm going to paste it.
Now if I refresh, we have indoor. So when I click one, the other one D selects. Next up, I'm going
to add an ID attribute to these buttons. an ID attribute is used to identify specific elements
in other sections of HTML, CSS, and JavaScript. So I'm going to add an ID attribute set to equal
indoor on the first real input element. And Id attributes have to equal outdoor on the secondary
input element. So I'm going to put the ideas I'm going to put as the first attribute ID equals
indoor. And then ID equals outdoor. Now one thing about these attributes is that the order
doesn't matter. So you can see on this input element, there's three attributes,
there's the ID, the type and the name, the order doesn't matter. I could have put name, type ID,
or type ID name, the order doesn't matter. So it's as long as you have a space in between
each element, or each attribute, it's going to all all work, it's considered best practice to set a
four attribute on the label element with a value that matches the value of the ID element of the
input element. This allows assisting technologies to create a linked relationship between the label
and the child input element. So let me show you how you would do that. It's very simple.
So for this label, I'm going to put four and that's going to be set to the same thing as ID,
which is indoor. So now we know that this label is for this input, because it has the same
the for indoor, oh, but I door indoor. And we'll do the same thing right down here,
for out door, and racist extra space. So yeah, now we know this labels for this input,
I'm going to actually zoom out a little bit on the code. So you can see more of what's going
on. It doesn't it doesn't go to the next line as much doesn't wrap to the next line quite as much.
Now, none of this stuff, we did actually change what the web page looks like. But we
are just about to change something, you can see everything's on the same line, indoor outdoor,
and this text, this text box are all on the same line. This is because line breaks in HTML have no
impact on how a browser renders the page. To add a line break, we're going to use the br
tag for break. So after this first indoor one I'm going to put BR and I'm just going to copy this.
And I'm going to put a br tag after each of these input elements. And if I save that
refresh, now you can see we've indoor line break, outdoor line break, and then the text box.
And then there's another line break and then the submit button forms commonly used checkboxes for
questions that may have more than one answer. The code for a checkbox is very similar to that
of a radio button. So let me show you how to add a checkbox, we're going to add a check box to check
if a cat is loving or not the personality of the chat the personality of the cat.
So here, I'm going to put a label just like the radio buttons, and it's going to be for
loving. Then I'm going to put the input element
and input elements going to have an ID of loving. It's going to have a type of
check box, Matt add some more quotation marks here. And is going to have a name of personality.
And then I'm just going to have to put the word loving that's the word that's going to appear.
And you know, let's just make this consist we'll have this have a capital I
capital O. Okay, let me refresh. And so we've been indoor, outdoor,
and we can check loving, we can check it off and on. Let's add a line break here.
And then I'm going to add two more checkboxes, I'm just going to copy this checkbox.
And then put two more in here. Now I'm going to add some line breaks in the HTML, which will not
appear on the website. This is just to make it easier to see the difference. So we have
the radio buttons, and we have the three checkboxes. But we're going to put some
more personality traits. So this one is going to be lazy, some cats are lazy.
And the next one is going to be energetic, and energetic. Now let's save this and refresh. So
now we can see the radio buttons, we have these checkboxes where you can check any number of
things. And we have this text box where you can type in stuff here.
To set a checkbox or radio buttons to be checked by default, just add the word checked
to the inside of the input element. Let me show you. So we have this input element right here,
I'm just going to add the word checked. This is an attribute with no value.
So we have checked there, and then I'm going to add checked here.
I can spell it. There we go, refresh. And now the indoor is automatically checked and loving
is automatically checked. We're getting close to being done with this page. And I'm finally going
to tell you about one of the most commonly used HTML elements of all, which is the div element,
also known as a division element. It's a general purpose container for other elements.
One of the reasons it's used so much is because div elements are often used to target with CSS.
So you may want to style a whole section of your web page in one particular way. And
you can wrap that all within a div element. And then you can use CSS to style that div element.
So we're going to put our lists in a div element. So I'm going to put an opening div tag here.
And then we have the closing div tag, I'm just going to cut this, I will actually zoom in on
the code just a little bit more. And at the end of things, cats hate the end of this other list,
I'm going to put the closing div element. Now I'm going to indent everything in here.
So you can see it's nested within the div. So now we can see that inside this div,
we have the things cats love, and that things cats hate. So the way that you would often style
something like this with CSS is to add a class attribute. So I'm going to put class equals lists.
Class attributes are very commonly used in HTML, specifically to style with CSS. So you
can actually target all elements with the class of lists to make them have all the same style.
So maybe you went everything with the class of list like this to have a blue background. Or maybe
you want to border around everything. Or maybe you want all the text to be a different color, or the
text size we different. And you can in the CSS, you can actually target anything with the clip
anything inside a div with class lists can have a certain style. Now, we're not going to go too
far into that, because again, this course is just about HTML, you'll just have to look at an S CSS
course to learn more about that. So now we're going to add a footer to the web page. So we have
the main section, we hit the closing main tag, I'm going to add a footer element. Now, the stuff
inside a footer element is not going to look any different on your page. This is mainly for screen
readers and SEO purposes. So so the different sections of your web page can be identified.
And inside this footer, we're going to put a paragraph tag, it's going to say no copyright
free code camp.org. So if I save this and refresh, we can see no copyright
free code camp.org and we can make this into a real link by putting a href equals
http colon HBS colon slash slash, Free Code, camp that org and then I have to put this closing
in element, the closing tag after the Free Code camp.org text here. So they save that and refresh.
Now we see this is now a link to Free Code Camp that org. And one other thing I want to show you
is that we could style a lot of times the text and a footer is smaller. Now we could style that
with CSS, or we can just put a small tag around everything. So when we put the closing small tag
at the end here, and save that, if I refresh, you can see now this text is a little smaller.
Now let's go all the way back up to the top of our HTML page. And we'll look at this HTML element,
you'll notice that everything is inside the HTML element. And inside this, we are going to specify
the language of the website, we want to specify that this isn't in English. So up at Lang
equals e en for English. And I told you earlier that before the body section of a website,
you'll often have a head section of a website. And so let's add that now.
Got the head section, the head section is where it where metadata elements go sub sub that's not
going to actually show up in the content of your website. Things such as link meta title style.
So let me give you an example. One of One very common one is title. So I can create a title
for this website, I'm going to put cat photo app. I'm going to save this and see how here it
says index that HTML if I refresh, now it says cat photo app sitting that right from the title here.
Another thing that's common to use in the head, or to put in the head of a website
is links to the external CSS file that's going to be used to style the page and the external
JavaScript file that's going to be used to add functionality to your page. And actually, that's
it. This is a complete HTML page that we have created. So the next step is to update this to
our web hosting provider. So we can actually get this website on the internet. so other people can
go to a URL to access this website with hosting, or you can deploy websites directly. If you
haven't learned tools like Git and Linux yet, this approach can save you a lot of time and stress,
start off by going to a hosting or.com. And you can click Start now or just scroll down.
And I would recommend if you're just starting out, just go with the cheapest option the single
shared hosting. And we'll just select that. And then you just go through this checkout process,
choosing the options you want, you'll probably I would recommend the 12 month option. And then
you just put in your payment information. I'm not going to show you the full account creation
process. But after you get your account created, you'll get logged in, it's possible during the
account creation process, you will have chosen a domain name. If you haven't, there could be a
button on this screen to create a domain name. So if I scroll down, I can see at the very
bottom amazing cat photos.com, the domain name I got for our awesome website that we just created.
So to upload the photos to the website, we'll have to go to hosting I'm going to go to this
menu up here and click hosting. Now amazing cat photos calm I'm going to manage the hosting.
Okay now we just have to scroll down to this file section and I go to File Manager.
So now I'm going to make sure to go into the public HTML directory and there may
be something in this folder if there is just delete it so you have nothing in the folder.
And now I'm just going to add my files I can either drag them in from a folder on my computer,
or I can click Upload Files. And I was going select the files so here are the three files
index dot HTML cat JPG and lasagna dot JPG and open and upload.
And it's as simple as that the website should now work you may have to wait a few hours if you just
create a your website. Sometimes it can take a few hours from x from after you buy your website until
when you can actually go to the URL and it will go to these files. Sometimes it can even take a day.
But once everything connects and everything works, then if you make any changes it will
happen instantly. Just the first time when you get set up it could take a little while.
So let's try going to the website. So I'll go to WWW dot amazing cat photos calm. If
you try and it doesn't work you may have to hit you may have to add the www That at the
beginning of the URL so www dot amazing cat photos calm and this is the website we created
awesome hosting are made that super easy. Okay you know the basics of HTML. The
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
5.0 / 5 (0 votes)