You should first have a look at the introduction of this series if you haven’t.
What is HTML?
HTML or HyperText Markup Language is the standard markup language used to create web pages.
HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like
<html>). HTML tags most commonly come in pairs like
</h1>, although some tags represent empty elements and so are unpaired, for example
<img>. The first tag in a pair is the start tag, and the second tag is the end tag (they are also called opening tags and closing tags).
Generally speaking, the least thing you need for a Web page is an HTML file.
- Create a text file (e.g.:
- Edit the content of the file to be
Hello, world!in your favorite text editor.
- Rename the file with suffix
- Open the file with Web browser (e.g.: Chrome, IE)
You should see
Hello, world! in the Web browser.
Yes! That’s your first Web page! Easy! Right? :satisfied:
If you are wondering how can this be a Web page, then…
Congratulations! Curiosity is one of the most important things to learn Web programming, as well as to learn anything else. Keep ask questions. You may write down them and see if you can answer them by yourself after some time. If not, you’re welcomed to email firstname.lastname@example.org!
Here’s the explanation. A Web page is a plain text file, which means it doesn’t have format, like font or color, and everything matters is its content. You may know that an HTML should have tags like
<body>. But our Web browsers are smart enough to know how to render the page without them.
This is only a demonstration to show how simple a Web page can be. You should always use tags like
<body>in real situation.
##A typical Web page
A typical HTML file looks like:
Change the content of
hi.html to be the above code and open it in a browser, you’ll find the result is the same as the previous example. But this is a standard way to put it.
<!DOCTYPE html>tells the browser that this file should be rendered as an HTML, which always appears in the first line in an HTML file. Although browsers don’t rely on it to know it’s an HTML, it’s always a good habit to write this explicitly.
<body></body> in the above example are called tags, which usually appear in pairs. With tags, we can organize the content in a tree-like structure.
<body></body> should always used in any HTML file. Generally speaking, everything should appear inside
<!DOCTYPE html>. Content of the HTML should be written inside
<body></body>, while additional information like defining the title or declarating importing other resources usually are inside
Different tags have different meanings. We’ll discuss more about tags in the next post.
What is CSS?
Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.
CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design).
If I would like to change the color of the
Hello, world! to be red, CSS is the one that can help. Remember that CSS is responsible for how it appears to look. :sunglasses:
Now, it’s red.
##A more complicated example
We want to make
Second be red and the background of them be yellow, which can be achieved with the following code:
But what if there’re much more
<h1> elements need to be in this style? Do we have to write
style="color: red; background-color: yellow" each time? If we want to change the style afterwards, do we have to change each of them?
You may wonder if we can write a statement like
make all h1 to be in red color and the background-color to be yellow. Yes, we can! :scream:
##Three styles of CSS
There are three styles of CSS.
- Inline (defined in each tag, as we did above)
- Internal (defined at the
<head></head>part of current HTML
- External (defined in a CSS file and include it at the
<head></head>part of current HTML
Inline style is easy to write as a demo. But in real situation, it makes it impossible to reuse the style and the content and style will be coupled tighted, which is the last thing we want. So, never use inline style in real programming! :boom:
An internal style looks like:
You may notice that it helps reuse the style and the content and style are decoupled in internal style.
In internal style, style can be reused within this HTML. But in real applications, usually most of the Web pages share the same style. So, how can we reuse the CSS in different HTML files?
The answer is to put the CSS style in a
.css file rather than inside the HTML file, and include the CSS file in HTML files.
Now, we have a
And a HTML file:
External style makes it possible to reuse CSS inter- and intra-HTML. Use this style whenever possible.
Now that we have a basic idea of what HTML and CSS are and how they can work together. If you learn the two of them well enough, it’s enough to deal with the most part of a Web page. But from Web 2.0, more interaction with user has been introduced. So knowing about HTML and CSS only is far from enough.
We want to open a message box to say hello to the user when a button is clicked. Here’s how you can do this:
For example, if you want to change the color when mouse is moved on an element, CSS is enough:
In the following posts, we are going to dig into and have a better understanding of each of them. :clap: