Explore
For Enterprise
Join for Free
Log In

艺术与人文
商务
计算机科学
数据科学
信息技术
健康
数学和逻辑
个人发展
物理科学与工程
社会科学
语言学习
学位和证书

浏览 Coursera 的全部课程

浏览
搜索
企业版
登录
免费加入

Write some HTML

Loading...

响应式网站基础：HTML、CSS 与 JavaScript

4.5（3,204 个评分） | 93K 名学生已注册

课程 1（共 6 门，响应式网站开发与设计专项课程）

查看授课大纲

In this course you will learn three key website programming and design languages: HTML, CSS and JavaScript. You will create a web page using basic elements to control layout and style. Additionally, your web page will support interactivity. At the end of the course, you will be able to: 1. Define the purpose of HTML, CSS and JavaScript 2. Make a simple web page using HTML 3. Use CSS to control text styles and layout 4. Use CSS libraries such as Bootstrap to create responsive layouts 5. Use JavaScript variables and functions 6. Manipulate web page content using JavaScript 7. Respond to user input using JavaScript In this course, you will complete: 2 assignments writing HTML, CSS and JavaScript, each taking ~1 hour to complete 4 quizzes, each taking ~20 minutes to complete 1 programming exercise~30 minutes to complete multiple practice quizzes, each taking ~5 minutes to complete Participation in or completion of this online course will not confer academic credit for University of London programmes.

您将学习的技能

Jquery, Html, JavaScript, Cascading Style Sheets (CCS)

审阅

4.5（3,204 个评分）

5 stars
2,137 ratings
4 stars
750 ratings
3 stars
219 ratings
2 stars
62 ratings
1 star
36 ratings

JF

Feb 14, 2016

Bright instructors delivering succinct and interesting content, with quick-paced videos and quizzes make a great learning experience. I am really impressed! Thank you, University of London people!

SS

Jan 03, 2016

It's very good for beginner who already have hands in programming. it gives very basic and important concepts about HTML, CSS and javascript. it also gives a brief history of internet and HTML.

从本节课中

HTML

We start the course by looking at how to set up a dev environment, build a HTML navbar and how to embed images and create lists using HTML.<p>Also we'll create properly structured HTML documents and have a look at the world's first web page. <p> Looking forward to working with you this week! <p> Matthew, Marco and Kate

Write some HTML6:22

教学方

Dr Matthew Yee-King
Lecturer
Dr Marco Gillies
Senior Lecturer
Dr Kate Devlin
Senior Lecturer

[MUSIC]

Right it's time to start editing some code.

And the first thing we're going to do is fire up our text editor.

And once we got the text editor running, we can start writing HTML.

So let's go in there now.

So I've started my Sublime Text editor in this case, and

remember you can use other ones such as Notepad++, or TextWrangler.

And so I've gone to the File menu and Create a New File.

And let's have a quick look at what's on the screen here.

So we've got this number one here.

That's telling me which line in the file I'm on.

So you see if I add extra lines in the file, it increases.

So that's not really part of the document.

That's just part of the interface, telling me about what I'm editing.

And then I've got this thing here which is a tab so I can have

lots files open at the same time, the same way you can have with a web browser.

You can have lots of tabs with different files open at the same time.

So let's write our first HTML tag.

I'm going to start with the H1 tag.

So I've got an open angle bracket there, and

then I type h1, and then I close it.

So that starts an HTML tag, and then you put the name of the tag and

then you finish it like that, and then we put the contents of the tag.

So I'm gonna set this to, this is my first webpage.

And then, once you've finished writing what's in,

going in the tag, you can then end the tag.

End, so we have the angle bracket again,

then this forward slash which means end of h1.

So we can interpret this as, starts h1, contents of h1, end h1.

And let's save that, so I do File, and Save,

and I've got a folder ready here, and

I'm going to call it index.html.

So, remember that Kate was saying that, HTML files

look normally end with an html extension or .htm extension.

And you'll need to make sure that you've configured to your operating system to

show you, your file extensions.

So for example in Windows you'll have to edit your settings in your Explorer.

I think in Linux, it probably shows them by default, and also on a Mac.

So, we're saving it as index.html,

which means that it's the first page in the website.

Okay, so I saved that, and then I go into my file browser, which is here,

and I browse to where that file is saved.

And I Right-click on the file, and now I get to choose how I open it.

So, I've already got it open in Sublime Text, so I'm not going to edit it there.

I actually want to view it in my web browser, so here it is.

Here's my web browser, Google Chrome.

So that's opened it and that's my first web page.

And you can see that its, the font that's used is quite large and bold.

I mean I can zoom in just to make it really clear.

So that's large and bold.

And if I just put some text in here without any HTML.

This is outside of a tag.

Okay, save that.

So File > Save.

Or once you get into editing this stuff,

you'll gonna have to learn the keyboard shortcuts.

So in this case I do Ctrl+S to save it.

Then, I go back up to my web browser.

If I want to see what the new file looks like,

I have to hit this little reload button here.

You see again, there's a keyboard shortcut for reloading which, it's Ctrl+R.

You'll end up doing your edits in your file.

Doing Ctrl + S then, popping up to the web browser then,

doing Ctrl+R to reload the page.

Right, so let's look in this web browser.

So we've got this big large font here,

and then we've got this kind of much smaller text here.

And so what's happened is, the web browser has seen this h1 tag.

And instead of just displaying an h1 tag, it's actually decided, oh, right,

I'm actually going to display this text with a special formatting,

because h1 actually means main heading.

So, the web browser knows our main heading needs to be big and large and bold.

So, it's choosing to add that formatting to that display.

And that's one of the sorts of things to know about HTML is that,

we just say what the different parts of the document mean.

So we're saying this bit of the document is the heading.

And we can define another bit of the document as being content or whatever.

And the browser then interprets that structure that we give it, and

it chooses how to format it.

When we get into the next module and we look at CSS we'll find out how we can

actually tell the browser, don't use this formatting, use a different formatting.

So we can control the way it displays the page, but for

now we're just letting the browser make decisions for

us, about how it should display in h1, or how it should display the other tags.

So let's add some more tags and see what they do.

That's our h1 tag, and we can normally,

you'd put your paragraphs of text in a p tag.

And you can see what I'm doing is I'm creating a structure here.

So, I actually indent that slightly so it's easier to read.

So, the first paragraph.

The second paragraph.

And while we're at it, we'll do one more type of heading tag.

We'll just call it h2, this is the second heading.

Or we could call it the subtitle.

So, Ctrl+S, back over to the web browser, Ctrl+R.

So let's just have a quick look at that.

So, we created an h1 tag for the main heading,

and that's the largest text we can see there.

And then we created an h2 tag, for

the sub-heading, and that's the slightly smaller but still bold.

And then we put two paragraphs in, and that's it.

So we've created our first example of a very simple webpage.

And so, as we go through this module,

we're gonna find out about more types of tags that we can use.

[MUSIC]

探索我们的目录

免费加入并获得个性化推荐、更新和优惠。

Coursera 致力于普及全世界最好的教育，它与全球一流大学和机构合作提供在线课程。

© 2019 Coursera Inc. 保留所有权利。

通过 App Store 下载

通过 Google Play 获取

Coursera
关于
管理团队
工作机会
目录
证书
MasterTrack™ 证书
学位
企业版
政府版

社区
Learners
Partners
Developers
Beta Testers
Translators

连接
博客
Facebook
领英
Twitter
Instagram
YouTube
技术博客

更多
条款
隐私
帮助
内容访问
媒体
联系我们
目录
附属公司