Introduction to HTML | Ucode

Appearance

On this page

Introduction to HTML ​

Is a webpage just HTML? This understanding is mostly correct because webpages contain not only text but also images, videos, HTML5 games, complex layouts, and animations. Therefore, HTML defines a set of syntax rules that tell the browser how to display a rich and colorful page.

What does HTML look like? Last time, we looked at the HTML source code of the Sina homepage, which contains over 6000 lines!

So, when learning HTML, don't expect to start with Sina. Let’s take a look at what the simplest HTML looks like:

html
<html>
<head>
  <title>Hello</title>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>

You can write HTML in a text editor, save it as hello.html, and double-click it or drag the file into a browser to see the result:

html.webp

An HTML document consists of a series of tags, with the outermost tag being <html>. Standard HTML also includes <head>...</head> and <body>...</body> (note not to confuse these with HTTP headers and bodies). Since HTML is a rich document model, there are many other tags to represent links, images, tables, forms, and more.

Introduction to CSS ​

CSS stands for Cascading Style Sheets. CSS is used to control how all elements in HTML are displayed. For example, we can add a style to the <h1> element to change its font size to 48px, make it gray, and add a shadow:

html
<html>
<head>
  <title>Hello</title>
  <style>
    h1 {
      color: #333333;
      font-size: 48px;
      text-shadow: 3px 3px 3px #666666;
    }
  </style>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>

The effect is as follows:

css.webp

Introduction to JavaScript ​

Despite the name containing "Java," JavaScript has no relation to Java at all. JavaScript is a scripting language added to make HTML interactive. JavaScript can be embedded within HTML or linked externally. If we want to change the title color to red when the user clicks it, we must implement this with JavaScript:

html
<html>
<head>
  <title>Hello</title>
  <style>
    h1 {
      color: #333333;
      font-size: 48px;
      text-shadow: 3px 3px 3px #666666;
    }
  </style>
  <script>
    function change() {
      document.getElementsByTagName('h1')[0].style.color = '#ff0000';
    }
  </script>
</head>
<body>
  <h1 onclick="change()">Hello, world!</h1>
</body>
</html>

The effect after clicking the title is as follows:

js.webp

Summary ​

To learn web development, one must first have a certain understanding of HTML, CSS, and JavaScript. HTML defines the content of a page, CSS controls the style of page elements, and JavaScript handles the interactive logic of the page.

Explaining HTML, CSS, and JavaScript could fill three books. For excellent web developers, mastering HTML, CSS, and JavaScript is essential. I recommend the online learning site W3Schools, along with its corresponding Chinese version.

When we develop web applications using Python or other languages, we dynamically create HTML on the server side so that the browser can display different webpages to different users.