ADM-201 dump PMP dumps pdf SSCP exam materials CBAP exam sample questions

HTML入门教程 学习HTML和CSS – 译学馆
未登录,请登录后再发表信息
最新评论 (0)
播放视频

HTML入门教程 学习HTML和CSS

1: HTML Tutorial for Beginners | Learn HTML and CSS | HTML Tutorial | CSS Tutorial | HTML Lesson

大家好 第一集是关于HTML和CSS
How’s it going, guys, to a first episode now to HTML and CSS.
这节课我们将要讨论什么是HTML和CSS
Now this course here we’re going to talk about what HTML CSS is
以及如何用它来做完整的网站
and how can you use it to create complete websites.
第一集我们要说的是
Now this first episode we’re going to talk about
HTML CSS到底能做什么
what exaclty HTML CSS can do
以及
and what you need to have in order to get started
需要具备什么
when it comes to making websites.
HTML代表超文本标记语言
Now HTML stands for hyper text markup language,
基本意思就是我们可以用HTML
which basically means we can take HTML
将内容包于其中
wrapped around some content inside
像是某种代码文件
some kind of coding documents,
这样一来我们就能告诉浏览器
and by doing this we then tell the browser
这个内容具体是什么
what exaclty this content is.
所以基本上我们可以用HTML告诉浏览器
So basically we can tell the browser using HTML
某特定的段落就是
that the specific section is
该网站的主要内容
the main content of the website,
而另一个段落有可能是网站的菜单
and another section might be the menu of the website.
因此我们能用HTML标记网站的
So we can use HTML to mark up the specific
特定部分然后告诉浏览器它是什么
part of the website and tell the browser what it is.
所以我们要理解HTML是用来
So it’s important to understand that HTML is basically a language that
描述网站里结构和内容的语言
describes the structure or the content inside websites.
说完HTML
Now we talked a bit about what exaclty HTML is,
那CSS又是什么呢?
but what about CSS?
CSS也是一种语言
Now CSS is a language that you don’t need
虽然用Html做网站时 你不一定非要学它
need to learn in order to write a website
但是没有CSS的话
using HTML, but without CSS
你无法设计网站的样式
you can actually style the content inside the website
也就是你不能决定
mean that you can actually decide
这个界面应该长什么样
how the content should look like.
我们来举个例子 如果我的网站里
So let’s take an example if I had a menu inside
有个菜单 CSS代码实际上
my website, the CSS code is actually
就决定了这个菜单的样式风格
what decide how the menus will look like,
比如 字要多大
you know, how big the letter should be,
文本该是什么颜色
what color the text should be, or
亦或是如何定位网站内容
where inside the website should be positioned.
因此如果我们想要把网站做漂亮且
So we need to learn CSS if we want to make website
在浏览器里进行结构化布局的话我们就要学CSS
pretty and structure layout inside the browser.
CSS是层叠样式表的缩写
Now CSS stands for cascading style sheets,
它说明了你能
which again explains that you can
用CSS定义网页样式
style the content inside HTML.
现在我们已经说明了HTML和CSS到底是什么
So now that we talked about what exactly HTML CSS is,
我将给你们一个例子 看看HTML长什么样
I’d like to show you guys example of how HTML looks like.
在我的文本编辑器里
So inside my text editor here,
进入我的第二个文件
I’m going to go into the second file I have, and
你们将看到一些非常基础的HTML代码
next you guys can see you have some very basic HTML code.
就像我说的 HTML基本是用来
Now, like I explained, HTML is basically used to
将标签围绕内容(如文本)打包
wrap tags around content such as
然后显示在网站中
text that you then display inside a website.
在这一集 我们不介绍这些标签
Now we’re not going to get into what these tags specifically means
具体什么意思
at this time in this episode,
只是给你们一个关于HTML和CSS
but just to give you guys a basic of idea what exactly HTML CSS
是什么样的基本概念 它是这样的
looks like. This is how it looks like.
接下来 我们要做的是先看几个
So what we’re going to do now is we’re going to take a look at a few
文本编辑器 就像我在这打开的这个一样
text editors like the one I have open here,
我们可以用它来创建网站
that we can use to create websites.
如果你对如何
So if you have any questions for regarding
创建网页或者文本的整个过程有任何疑问
how we actually make the website or text the actual process,
基本上我们的电脑上有一个文件夹
basically we have a folder on our computer
包含了所有的文件 图片
which contains all the documents and images and
还有一些网站里的其他媒体文件
basically know the media, that have inside the website.
文件夹里包括了所有这些东西
It contains all these things,
然后我们再把这个文件夹
and then we later on upload
传到一个在线服务器上
this folder to an online server.
文件夹中的这些文件
And it’s the documents inside the folder that
就需要我们使用HTML和CSS来创建
we’ll need to create using HTML and CSS,
类似于我当前屏幕上的这个文件
like the one I have in front of me here.
然后现在我们来了解一下创建一个网站你所需要的工具
So now let’s talk about the tools you might need to add to create a website.
相信你们能猜到 首先我们需要一台电脑
Now like you guys may guess you need a computer which
就像我面前的这台一样 然后你们需要一个基本文本编辑器
I have in front of me here, and you need to have a basic text editor.
我用的这款叫做 sublime text
And the one I’m using is called sublime text,
这款编辑器是免费的 如果你们想要下载
which is free, so if you want to download it,
就直接在网页上下载
you can go ahead and go to
sublimetext.com
sublime text.com
然后进这个网站 就可以下载了
and then inside this website you’ll go and download sublime text.
可以看到这个版本就像我说的是完全免费的
Now this version is exactly free like I metioned,
但是如果你们不想时不时地看到一个个弹窗
but if you don’t want to get pop-ups from time to time that says
你就需要付一笔小钱去购买完整的版本
please buy the full version, then you will need to pay a small amount.
现在我将要给你们看的另一个文本编辑器 也同样是免费的
Now the other text editor I’m going to show you guys that you could use which is also free
叫做notepad++ 如果你现在在想
is called notepad++. And you might think, well,
我从来没有听说这个notepad++
you haven’t heard about notepad++ before,
其实在我们的电脑都有一个叫做notepad的程序
we do actually have a program on our computer called notepad,
是文本编辑器的基本版本
which is the basic version of this text editor,
这个基础版也可以用来创建网站
which you can actually use it to create websites.
但是这个notepad其实并不好 因为它没有
But since notepad is not really good for that since it doesn’t have any kind of
任何颜色和标识
colors or indicators to
来表示代码对错
whether or not the code is correct.
所以我推荐使用notepad++
I’m going to recommend notepad++,
这个也可以用来当作一款基本的文本编辑器
which can also be used as a basic text editor.
而且这一款就算你没有购买 也不会有任何的弹窗
Now this one will not come up with any kind of pop-ups if you do not buy it.
所以 如果你不想付任何钱 你又不喜欢编辑时的弹窗 就使用notepad++吧
So if you don’t feel like paying anything and you’re tired of popups inside upon texting, go to use this one instead.
当然 这里还有其他的软件你也可以用来创建网站
And of course there’s other software that you could actually use for creating websites.
但是我就只介绍这两款了 因为这两款都很基础
But I’m just going to metion these two because these are the more
不会把新学者搞得晕头转向
basic ones that doesn’t confuse newer people.
在我们进入下一节课前 我们还有一些问题需要解决
Now this time a few questions before we actually get into
创建网站的时候 很多人都会有这样的问题
the next lesson. Because there’s some questions that I get asked quite often when it comes to
首先 我可以在没有网络链接的情况下
creating websites which first of all is can you in fact create a website
创建网站吗?
without being connected to the Internet.
当然可以 因为你可以把你的网站文件放在
Yes, you can. Because you can in fact have your website inside
你电脑的文件夹里 就像我之前说过的
the folder on your computer like I said this is how I create a website
然后打开里面的文件
and open up the documents inside,
你的浏览器不需要上网
your browser without having to be connected to the Internet.
另一个问题就是 我可以把在sublime test里面编写的文件
Another question that sometimes get is can I in fact if I code a website inside sublime text,
用notepad++打开吗?
open up the same documents inside another editor such as notepad++.
是的 你可以 因为文本编辑器并不是
Yes, you can. Because the text editor is not something that
用来创建只能在特定程序里打开的文件
create specific documents of files
所以 如果你创建了像这样的一个HTML文件
only used inside these programs so if you were to create this HTML file here
保存之后 可以在任何编辑器里打开它
and I save it I can open up inside any kind of text editor.
接下来我想要说 有些人会问我需要学习多长时间的HTML
The next thing I want to mention is some people also ask me about how long it takes to actually learn HTML
才可以创建网站
before they can make a website.
就像我开始说的那样 这个因人而异
Like I said in the beginning, it depends on you. If you like to
如果你能一直坐在这里一节节课不停地学下来
have a long sitting while just learn episode after episode,
直到你可以真正地上传一个网站
until you can actually upload a website,
那样的话 你可能就只需要一天
then you could potentially do it in just one day.
但是 如果你们想要做更加复杂的网站的话
But again I think if you want to do more complicated websites you might need to
这一天里学到的还不够 你还需要学习更多的课程
learn a few more episodes than just you know what you can do in one day.
我要回答的下一个问题是关于在一个网站里面
Now the next question I’m going to answer is regarding what it can actually do inside a website
HTML和 CSS究竟能做什么?
using HTML CSS.
你们看到在面前 是我的YouTube主页
So as you guys can see I have my YouTube page here which is
就是一个网站
in fact due to website.
在页面里有一堆元素
And inside this page we have a bunch of elements
在最上面 有一个长栏
on the top here we have a bar that has
上面有YouTube的标志
the YouTube logo that links back to
连接的是YouTube首页
Youtube front page.
在这边上有一个导航栏 还有一个搜索栏
We have a navigation at the side, we have a search bar.
还有一些其他的工具栏 像右边的这个和个人信息有关的工具栏
We also have a couple of tools like profile related tools over in the right side.
个人信息也上有一个横幅 还有一些图标
We have a profile page with my banner and some logos,
下面还有一些视频 和一些各种各样的按钮
and some videos down here at the bottom with some different buttons here.
现在我们回到HTML和CSS
Now when it comes to HTML CSS,
我们可以用HTML和CSS来创建的东西
the only thing we can create using HTML CSS
就是这个网页里的可见部分
is the visible part inside the website.
所以 事实上我们几乎可以创建这个页面上所有的东西
So we can in fact create everything inside this page here,
但是 我们无法创建这个页面上所有的功能
but we can’t create all the functionalities inside the page.
所以我们可以使用HTML和CSS
So we could using HTML CSS
来编写顶上这个长栏
program this bar up in the top
还有它的样式 填充所有的图片和其它我们所需要的东西
and the look of it and insert all the images and all that stuff we need to have in here.
你也同样可以创建这个搜索栏
You could also create the search bar if you wanted to,
但是如果不使用全部编程语言
but without using all the programming languages we can’t
我们无法实现网站的功能
create functionality,
意思是 在搜索框里成功搜到我们想要的内容的功能
meaning that if I actually type something up in the search bar and actually search for it,
无法实现
it’s not going to be able to work,
至少在没有使用其他编程语言的情况下 无法实现
at least not without using other languages. So we
我们可以创建所有在这里的东西 我们可以插入图片
can create everything in here. We can insert images, we can insert
插入链接 还有在页面之间来回切换
links, so we can actually go back and forth between pages.
但是我还实现不了像 订阅
But we can’t create stuff like subscribe,
登录 搜索 这样的东西
log in, search bars,
甚至包括下面的视频
even the videos down here.
这些实际上都是从数据库里加载来的
I actually loaded in from a database,
这需要使用其他的编程语言 来与数据库进行交互
which requires another language you know to actually interact with the database.
所以我们可以创建你们看到的这些视频和文本
So we can create videos and the text you guys see down here,
但是我们必须得
but we have to code it in
手动地把代码编写进去
manually inside the code.
我们也可以自动地从数据库里获取数据
We can actually get the data automatically from a database.
有些人可能并不知道什么是数据库
Now max to talk about database which some of you guys might not know what
数据库实际上是用在网站内部的东西
is actually used for inside a website. But
但是我们需要了解的重点是
the main thing I want to get across is that
你可以把所有的东西都编写进网站里 但是无法实现所有的功能
you can program everything you see inside the website, but not the functionalities, okay?
所以我们无法创造一切 但是你只需要硬编码进网站里
So we can’t make everything but you just need to
如果你想要一些什么不一样的东西的话
hard code it meaning that if you need to change something,
你必须分别使用不同的代码
you have to do it using code each time,
这样做虽然是完全可行的
which again is totally doable.
但是 如果你使用我们接下来会讲到的其他编程语言
But it might be easier when you have functionalities that
来实现一些功能允许你做部分调整的话
allow for you to change stuff
事情会轻松很多
using other languages later on.
在下节课开始前 最后一件事我想要说的是
The last thing I want to mention before going to the next episode is that
关于在我的sublime text里的颜色主题 如果你使用sublime text的话
the color scheme inside my sublime text. If you decide to get sublime text
或许并不会和你的看起来一模一样
does not look exactly the same as yours
如果你下载下来 安装 然后打开的话
if you just download sublime text and installed it and open it up.
因为我实际上使用的是另一款颜色主题 和sublime text默认的不一样
Because I’m actually using a different color scheme inside sublime text.
所以 如果我在我的编辑器里写下的代码颜色
So if I write some code inside my editor,
并不和你的一样
and it does not the same color as yours,
别害怕
don’t get freaked out.
这些你屏幕上的颜色 并不代表你的代码里有任何错误
The colors inside your screen doesn’t mean there’s any kind of errors.
那仅仅是因为我使用了另一套颜色主题
It is just basically because I have another color scheme, okay?
好了 我第一节课里要讲的基本就到此为止了 在下一节课里
So this is basically what I want to save the first episode. In the next episode we’re
我们将要开始学习 究竟如何创建我们的第一个网站
going to learn how to actually get started on our first website, how to actually
如何创建我们称为根文件夹的文件夹
create the folder that I talked about which we call a root folder,
还有如何在里面创建第一个文档
and how to create our first document inside
这将是我们网站的主页
this root folder which is going to be the front page of our website.
如果你们想要看我的其他教程
If you guys interested in more tutorials from me,
你们可以直接去关注我的频道 获取更多的内容
you can go ahead and check out my channel and subscribe for more contents.
下节课见
So I hope to see you guys in the next episode.

发表评论

译制信息
视频概述

上手简单的HTML入门教程 学习HTML和CSS

听录译者

:..:

翻译译者

皇冠下的人~

审核员

审核员 AF

视频来源

https://www.youtube.com/watch?v=pm5OVxpul48

相关推荐