Web Design 101: How HTML, CSS, and JavaScript Work

Ever wondered how computer programming works, but haven't done anything more complicated on the web than upload a photo to Facebook?

Then you're in the right place.

To someone who's never coded before, the concept of creating a website from scratch -- layout, design, and all -- can seem really intimidating. You might be picturing Harvard students from the movie,社交网络，坐在他们的计算机上，戴着巨大的耳机并敲打代码，然后思考，“我永远做不到。”

实际上，您可以。

Anyone can learn to code, just like anyone can learn a new language. In fact, programming is kind of like speaking a foreign language -- which is exactly why they're called programming语言。Each one has its own rules and syntax that need to be learned step by step. Those rules are ways to tell your computer what to do. More specifically, in web programming, they're ways of telling yourbrowserswhat to do.

The goal of this post is to, in plain English, teach you with the basics of HTML, CSS, and one of the most common programming languages, JavaScript. But before we begin, let's get an idea of what programming languages actually are.

What Is a Programming Language?

编程或编码就像解决难题一样。考虑一种人类语言，例如英语或法语。我们使用这些语言将思想和思想变成行动和行为。在编程中，难题的目标是完全相同的 - 您只是在驱动各种行为，而这种行为的来源不是人类。这是一台计算机。

A编程语言is our way of communicating with software. The people who use programming languages are often called programmers or developers. The things we tell software using a programming language could be to make a webpage look a certain way, or to make an object on the page move if the human user takes a certain action.

Programming in Web Development

So, when a web designer is given an end goal like "create a webpage that has this header, this font, these colors, these pictures, and an animated unicorn walking across the screen when users click on this button," the web designer's job is to take that big idea and break it apart into tiny pieces, and then translate these pieces into instructions that the computer can understand -- including putting all these instructions in the correct order or syntax.

Every page on the web that you visit is built using a sequence of separate instructions, one after another. Your browser (Chrome, Firefox, Safari, and so on) is a big actor in translating code into something we can see on our screens and even interact with. It can be easy to forget that code without a browser is just a text file -- it's when you put that text file into abrowserthat the magic happens. When you open a web page, your browser fetches the HTML and other programming languages involved and interprets it.

HTML和CSS实际上不是技术编程语言；它们只是页面结构和样式信息。但是，在转到JavaScript和其他真实语言之前，您需要了解HTML和CSS的基础知识，因为它们位于每个网页和应用程序的前端。

在1990年代初，HTML是网络上唯一可用的语言。Web开发人员必须逐页进行艰苦的代码静态站点。从那时起，发生了很多变化：现在有许多计算机编程语言可用。

在这篇文章中，我将讨论HTML，CSS和最常见的编程语言之一：JavaScript。

特色资源

Beginner's Guide to HTML & CSS

Fill out this form to access the free guide.

HTML，CSS和JavaScript：教程

An overview:

• HTMLprovides thebasic structureof sites, which is enhanced and modified by other technologies like CSS and JavaScript.
• CSSis used to control演示，格式和布局。
• JavaScriptis used to control the行为不同的元素。

Now, let's go over each one individually to help you understand the roles each plays on a website and then we'll cover how they fit together. Let's start with good ol' HTML.

HTML

HTML is at the core of every web page, regardless the complexity of a site or number of technologies involved. It's an essential skill for any web professional. It's the starting point for anyone learning how to create content for the web. And, luckily for us, it's surprisingly easy to learn.

How does HTML work?

HTML stands for HyperText Markup Language. "Markup language" means that, rather than using a programming language to perform functions, HTML uses tags to identify different types of content and the purposes they each serve to the webpage.

让我告诉你我的意思。看看下面的文章。如果我要您标记页面上的内容类型，那么您可能会做得很好：顶部有一个标题，然后在其下方的子标题，身体文本和底部的一些图像，然后是一个很少有文字。

Markup languages work in the same way as你只是在您标记这些内容类型的标签时，除了它们使用代码做到这一点时 - 特别是，它们使用HTML标签，也称为“元素”。这些标签具有非常直观的名称：标题标签，段落标签，图像标签等。

Every web page is made up of a bunch of these HTML tags denoting each type of content on the page. Each type of content on the page is "wrapped" in, i.e. surrounded by, HTML tags.

For example, the words you're reading right now are part of a paragraph. If I were coding this web page from scratch (instead of using the WYSIWG editor inHubSpot的CMS), I would have started this paragraph with anopeningparagraph tag:

. The "tag" part is denoted by open brackets, and the letter "p" tells the computer that we're opening a paragraph instead of some other type of content.

一旦一个标签被打开,那所有的内容t follows is assumed to be part of that tag until you "close" the tag. When the paragraph ends, I'd put a closing paragraph tag:

. Notice that closing tags look exactly the same as opening tags, except there is a forward slash after the left angle bracket. Here's an example:

这是一个段落。

Using HTML, you can add headings, format paragraphs, control line breaks, make lists, emphasize text, create special characters, insert images, create links, build tables, control some styling, and much more.

To learn more about coding in HTML, I recommendchecking out our guide to basic HTML，并使用免费的课程和资源bob体育苹果系统下载安装Codecademy- 但是现在，让我们继续前进。

CSS

CSS stands for Cascading Style Sheets. This programming language dictates how the HTML elements of a website should actually appear on the frontend of the page.

如果HTML是石膏板，则CSS是油漆。

Whereas HTML was the basicstructure of your website, CSS is what gives your entire website its style. Those slick colors, interesting fonts, and background images? All thanks to CSS. This language affects the entire mood and tone of a web page, making it an incredibly powerful tool -- and an important skill for web developers to learn. It's also what allows websites to adapt to different screen sizes and device types.

To show you what CSS does to a website, look at the following two screenshots. The first screenshot is my colleague'sblog post,但基本的HTML所示,the second screenshot is that same blog post with HTMLandCSS.

Example of HTML (with no CSS)

Notice all the content is still there, but the visual styling isn't. This is what you might see if the style sheet doesn't load on the website, for whatever reason. Now, here's what the same web page looks like with CSS added.

HTML + CSS的示例

那不是更漂亮吗？

Put simply, CSS is a list of rules that can assign different properties to HTML tags, either specified to single tags, multiple tags, an entire document, or multiple documents. It exists because, as design elements like fonts and colors were developed, web designers had a lot of trouble adapting HTML to these new features.

您会发现，HTML于1990年开发，并不是真正打算显示任何物理格式的信息。它最初只是为了定义文档的结构内容，例如标题与段落。HTML超过了这些新设计功能，CSS于1996年发明和发布：所有格式都可以从HTML文档中删除，并存储在单独的CSS（.CSS）文件中。

So, what exactly does CSS stand for? It stands for Cascading Style Sheets -- and "style sheet" refers to the document itself. Ever web browser has a default style sheet, so every web page out there is affected by at least one style sheet -- the default style sheet of whatever browser the web page visitor is using -- regardless whether or not the web designer applies any styles. For example, my browser's default font style is Times New Roman, size 12, so if I visited a web page where the designer didn't apply a style sheet of their own, I would see the web page in Times New Roman, size 12.

Obviously, the vast majority of web pages I visit don't use Times New Roman, size 12 -- that's because the web designers behind those pages started out with a default style sheet that had a default font style, and then they overrode my browser's defaults with custom CSS. That's where the word "cascading" comes into play. Think about a waterfall -- as water cascades down the fall, it hits all the rocks on the way down, but only the rocks at the bottom affect where it will end up flowing. In the same way, the last defined style sheet informs my browser which instructions have precedence.

要了解CSS中编码的细节，我将再次指向免费的课程和资源bob体育苹果系统下载安装Codecademy。但是现在，让我们谈谈JavaScript。

JavaScript

JavaScript是一种比HTML或CSS更复杂的语言，直到1995年才以Beta形式发布。如今，所有现代Web浏览器都支持JavaScript，并且在网络上几乎每个站点上都使用了JavaScript，以获得更强大且复杂的功能。

简而言之，JavaScript是一种编程语言，可让Web开发人员设计交互式站点。您将在网页上看到的大多数动态行为都归功于JavaScript，它增强了浏览器的默认控件和行为。

Creating Confirmation Boxes

One example of JavaScript in action is boxes that pop up on your screen. Think about the last time you entered your information into an online form and a confirmation box popped up, asking you to press "OK" or "Cancel" to proceed. That was made possible because of JavaScript -- in the code, you'd find an "if ... else ..." statement that tells the computer to do one thing if the user clicks "OK," and a different thing if the user clicks "Cancel."

Triggering Slide-In CTAs

Another example of JavaScript in action is aslide-in call-to-action (CTA), like the ones we put on our blog posts, which appears on the bottom right-hand side of your screen when you scroll past the end of the sidebar. Here's what it looks like:

Storing New Information

JavaScript is particularly useful for assigning new identities to existing website elements, according to the decisions the user makes while visiting the page. For example, let's say you're building a landing page with a form you'd like to generates leads from by capturing information about a website visitor. You might have a "string" of JavaScript dedicated to the user's first name. That string might look something like this:

函数updatefirstname（）{

let Firstname = prompt('First Name');

}

Then, after the website visitor enters his or her first name -- and any other information you require on the landing page -- and submits the form, this action updates the identity of the initially undefined "Firstname" element in your code. Here's how you might thank your website visitor by name in JavaScript:

para.textContent = 'Thanks, ' + Firstname + "! You can now download your ebook."

In the string of JavaScript above, the "Firstname" element has been assigned the first name of the website visitor, and will therefore produce his or her actual first name on the frontend of the webpage. To a user named Kevin, the sentence would look like this:

Thanks, Kevin! You can now download your ebook.

Security, Games, and Special Effects

JavaScript的其他用途包括安全密码创建，检查表单，交互式游戏，动画和特殊效果。它还用于构建移动应用程序并创建基于服务器的应用程序。您可以通过将这些“脚本”或JavaScript代码段添加到文档的标题或车身中，将JavaScript添加到HTML文档中。

If you want to learn more about JavaScript,Codecademyhas free online courses你can take, too.

The hardest part of coding is getting started -- but once you learn the basics, it'll be easier to learn more advanced programming languages. And if you ever feel overwhelmed, head over tohackertyper.netand hit random keys on your keyboard.

Trust me, you'll feel better.

编者注：该帖子最初发表于2018年11月，已更新以进行全面性。

最初发布于2020年10月19日7:00：00 AM，更新于2021年7月21日