HTML5&CSS3 Beginner's Guide (1) – Writing the first line of code

Introduction

The internet era has arrived. Surfing the web every day has become one of the most common behaviors for people today.

Enter a text address in the Web browser, just like http://www.codeproject.com, and wait for a page to load into the browser window. A typical web page is made up of text, images, and links. Apart from the differences in content, different Web pages also have different look and feel to achieve the purpose of establishing their own identity brand on the web.

If you've ever wanted to know how the pages on your screen have been created and rendered in a variety of ways, here's where you can get a sense of that knowledge. Let's walk into two core technologies that create so many Web pages in the browser HTML, CSS.

Simply put, HTML provides a basic frame of the page, and CSS enriches the performance of the page. As the saying goes: "A picture wins thousand words". 1 also very good interpretation of the application of CSS before and after the difference.

After applying CSS before applying CSS

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/139239/201612/139239-20161220120150417-962693823. PNG "style=" border:0px; "/>650" this.width=650; "src=" http://images2015.cnblogs.com/blog/139239/201612/ 139239-20161220120203776-1913184530.png "style=" border:0px; "/>

a long time ago .

The birth of HTML

Time back in 1989, a CERN young genius software engineer Tim Berners-lee, invented the World Wide Web. The following year, he created three technologies that lay the foundation of today's network:

• HTML: Hypertext Markup Language. The standard for building, publishing, and linking network files.

• URL: Uniform Resource Identifier. Assign a unique "address" to each resource on the network for easier access.

• HTTP: Hypertext Transfer Protocol. A communication protocol that defines the format and transmission of Web pages and messages on a network.

As the name implies, HTML marks every text on a Web page by embedding it in certain predefined tags, such as <title>,

While the internet is growing rapidly, some new HTML tags, such as <image> and <TABLE>, have also been added in order to improve the user's web experience. The <table> tag was originally introduced for the purpose of data tables, but was later used to format the layout of the page. However, the way the hybrid structure was presented was later discovered to be catastrophic.

Chaotic State

With the popularity of the internet, many different browsers appear. One by one, Mosaic, Netscape, and then Microsoft also entered the browser market, each introducing its own style of tagging to increase market share and meet the needs of Web developers. HTML has begun to deviate from the original as a purely structural provider.

The mid 1990s, the browser war broke out, which also brought the network chaos, many users feel dissatisfied. It is a common complaint that a specific tag in a Web page shows different content or is not displayed in a rival browser. The chaotic state also raises the browser's compatibility issues.

In the late 90, this chaotic state finally ended under the control of the World Wide Web Consortium. They decided to clean up the HTML so that it could return to the role of the original structure provider. At the same time introduce a new technology, play a role in the Web page. This sensible move contributed to the introduction of CSS.

the dawn of CSS

The full name of the CSS is the cascading style sheet. It is the presentation language of the Web. It adds the style of the Web page by assigning a font, color, or layout value to each HTML tag. However, CSS is not just for HTML, it also applies to any XML markup-based language.

This separation of concerns brings a lot of benefits. This also makes it possible to apply cascading styles from a single CSS page to different pages of a site, avoiding the difficulty of writing the same information code for each page in the site. In other words, using CSS greatly frees up the maintenance of the site.

In addition, this makes it possible to apply different CSS in the same file in different environments. such as large screens, small screens, or printers, which make users feel happy.

HTML5 and CSS3

HTML5 is the latest standard for HTML, replacing the previous HTML 4.01.

HTML5 was born in collaboration with the Working Group on Web Hypertext Technology (WHATWG). The HTML5 is created with the following three points as the target:

• Reduce dependency on plug-ins (flash, for example)

• Using tags instead of scripts

• Stand-alone devices and platforms

Reading HTML design principles helps to better understand why HTML5 is the way it is today.

When it comes to CSS, its newest standard is CSS3, which is completely backwards compatible with earlier versions. CSS3 specification is developed by the development of the software, is still in the development phase, its latest version is CSS Snapshot.

HTML Editor

To understand the nature of HTML in its original form, I strongly recommend using a text editor such as the Notepad,mac TextEdit of the PC version, or any open source text editor such as notepad++. At this stage, stay away from the professional HTML editors that promise what you can see, and these editors don't help you learn effectively.

Come on, start your text editor now.

• Step 1- Please type in 2 to text editor. I specifically selected the text display of the code snippet, please do not simply copy and paste.

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/139239/201612/139239-20161220120349714-1062633087. PNG "style=" border:0px; "/>

Figure 2: Writing HTML code

• 2nd Step- Create a new folder called MySite. In this folder, save your newly created HTML file with. htm or. html as the file name extension. In fact, I suggest you open this folder and save your files the first time you create this folder. I chose to name the file hello.html

• 3rd Step- double-click your HTML file and view your first page in a browser (Figure 3). Congratulations! You have just successfully created an HTML page.

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/139239/201612/139239-20161220120439495-973992252. PNG "style=" border:0px; "/>

   Figure 3: Viewing about the browser

• 4th Step- Place your text editor and browser side-by, and cross-check them. On one side you can see the HTML source code, and the other side can see how the browser interprets and renders it. You will see that the content enclosed in the respective tags is displayed in the browser, and the label is not displayed. There seems to be a problem. Why do you type "real" spaces and indents that are not displayed? Where does the title label for "Hello HTML" appear? Can you find it in the browser page?

Please read on

HTML Basics

As you notice, the HTML content is included in the label pair, such as <title> </title>,

<! Doctype>

Any HTML document is a <! Doctype> the first line of code to start the label. This code tells the browser page to write the version of the HTML code so that the browser can render correctly. In this sense, <! Doctype> is not an HTML tag.

HTML 4.01 version of <! Doctype> looks like this.

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >

The <! declared in our sample file Doctype> is HTML5, which is the latest standard for HTML. It is more concise and easier to read than the previous version.

More <! can be found on the world-class Doctype> 's information.

The

<title>

Start the area between the tab <title> and end tag </title > To place the HTML document title. The contents of the <title> tag will appear in the browser's toolbar. You may have noticed in our example that "Hello HTML" appears in the browser's toolbar. When you bookmark this page, the contents of the,<title> tag will also be used as the label's name.

<body>

Start tab <body> and end tag </the area between body> services in the browser window of the Web page of the Visual Content section,<body> tag similar to other HTML tags, such as

,

A total of 6 title tags, from

<p>

We use <p> tags to segment the content of the Web page so that it can be organized into paragraphs. Each <p> tag must end with a </p> tag. We have 3 paragraphs in our example. Just like the title tag, the browser automatically adds extra space for each paragraph above and below it. I intentionally added extra whitespace to the paragraph, but it didn't appear in the browser. You may have noticed that the indentation and extra spacing between the tabs are not displayed.

The conclusion is clear: "Extra whitespace will be ignored." ”

Precautions

• extra whitespace will be ignored

• html tags are wrapped in angle brackets, such as <HTML>

• html tags usually appear in pairs with a few exceptions

• html label is case-insensitive:

The first study is here.

This article is from the "Grape City Control Technology Team Blog" blog, declined to reprint!

HTML5&CSS3 Beginner's Guide (1) – Writing the first line of code