Day 1
Start to make a site that meets the standards. The first thing is to declare the doctype that meets your needs.
View the original homepage of this siteCode, You can see that the first line is:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Open some standards-compliant websites, such as Macromedia, a well-known web design software developer, and zeldman, a design master, to find the same code. The code for other standard websites (such as k10k.net) is as follows:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 frameset // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
So what do these codes mean? Are you sure you want to place it?
What is doctype?
The above code is called the doctype declaration. Doctype is short for document type. It is used to describe the XHTML or html version you are using.
The DTD (such as the xhtml1-transitional.dtd in the above example) is called the document type definition, which contains the document rules, the browser according to your definition of the DTD to explain your page identity and display.
To create a standard web page, the doctype Declaration is an essential part. Your logo and CSS will not take effect unless your XHTML determines a correct doctype.
XHTML 1.0 provides three types of DTD declarations:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 frameset // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
What doctype should we choose?
The ideal situation is of course a strict DTD, but for most of our designers who are new to web standards, the transitional DTD (XHTML 1.0 transitional) is currently an ideal choice (including this site, is also a transitional DTD ). Because this DTD also allows us to use the identifier, element, and attribute of the presentation layer, it is easier to pass W3C code verification.
Note: The "presentation layer identifier and attribute" mentioned above refers to the tags purely used to control the presentation, such as the table used for typographical layout and background color identifier. In XHTML, identifiers are used to represent structures rather than representations. Our purpose of transition is to ultimately separate data from representations.
For example, a human model changes clothes. Models are like data. clothes are the form of representation. Models and clothes are separated so that you can change clothes at will. In html4, data and performance are mixed, and it is very difficult to change the form at one time. It's a bit abstract. We need to gradually understand this concept in the application process.
SupplementThe doctype Declaration must be placed at the top of each XHTML document, on top of all codes and identifiers.
2nd days: What is a namespace
After the doctype is declared, the following code is:
<HTML xmlns = "http://www.w3.org/1999/xhtml" lang = "gb2312">
Generally, our html4.0 code is<HTML>What is "xmlns" here?
This "xmlns" is short for XHTML namespace and is called the "namespace" declaration. What is the role of namespace? Alibaba Cloud understands that:
Because XML allows you to define your own identifiers, the identifiers you define may be the same as those defined by others, but they indicate different meanings. Errors may occur when files are exchanged or shared. To avoid such errors, XML uses namespace declarations, allowing you to identify your identity through a URL. For example:
John and John both define a <book> identifier, if John's namespace is "http://www.xiaowang.com" and Lee's namespace is "http://www.xiaoli.com", then when two documents exchange data, the <book> identifier is not obfuscated because it belongs to different namespaces.
The more common explanation is that namespace is to mark the document and tell others who the document belongs. But this "who" is replaced by a URL.
XHTML is the identifier language for the transition from HTML to XML. It must comply with XML document rules, so you also need to define the namespace. Because xhtml1.0 cannot customize the identity, so its namespace is the same, is "http://www.w3.org/1999/xhtml ". It doesn't matter if you don't quite understand it. At present, we only need to copy the code.
The following lang = "gb2312" specifies that your document is in simplified Chinese.
3rd days: define language Encoding
The third step is to define your language encoding, like this:
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
To be correctly interpreted by the browser and validated by W3C code, all XHTML documents must declare the encoding languages they use. We generally use gb2312 (Simplified Chinese ), you can also use Unicode, ISO-8859-1, and so on to create a multi-language page, according to your needs.
Generally, this can be defined. However, the XML document does not define language encoding as follows:
<? XML version = "1.0" encoding = "gb2312"?>
You can see similar statements in the first line of macromedia.com homepage code. This is also the definition method recommended by W3C. Why don't we use this method directly? The reason is that some browsers do not fully support the standard and cannot correctly understand such definition methods, such as IE6/windows. Therefore, we recommend that you use Meta In the current transition scheme. Of course, you can write both methods.
View this siteSource codeYou will find that there is another sentence in the definition of language encoding:
<Meta http-equiv = "content-language" content = "gb2312"/>
This is intended for earlier browsers to ensure that all browsers can correctly interpret the page.
Note: At the end of the preceding statement, you can see a slash "/", which is different from the code written in html4.0. The reason is that the XHTML syntax rules require that all identifiers must start and end. Such as <body> and </body>, <p>, and </P>. For unpaired identifiers, a space must be added at the end of the identifiers, then follow "/". For example, <br> written as <br/> and written as . The reason for adding spaces is to prevent the code from being connected together and the browser does not recognize it.
4th days: Call the style sheet
To design websites with web standards, the transition method is mainly to use XHTML + CSS, and CSS style sheets are essential. This requires all web designers to be familiar with CSS. If you are not familiar with CSS before, start learning it now. To make a website that complies with the web standards, CSS cannot be designed with beautiful pages.
In fact, CSS is used to implement all the performance. We used to use table to locate and layout. Now we need to use Div to locate and layout. This is a change in the way of thinking. Haha, any change will have resistance. To enjoy the "benefits" brought by standards, it is worthwhile to give up some old traditional practices.
External call style sheet
In the past, we used two methods to use a style sheet:
<Style type = "text/CSS"> <! -- Body {Background: white; color: black;} --> </style>
<LINK rel = "stylesheet" REV = "stylesheet" href = "CSS/style.css" type = "text/CSS" Media = "all"/>
In the web-compliant design, we use the external calling method. You can change the page style by modifying the. CSS file without modifying the page. If all pages call the same style sheet file, you can change the style of all files by changing the style sheet file.
Two-table method call style sheet
Check the original code of some compliant sites. You may see the following two sentences in the style sheet:
<LINK rel = "stylesheet" REV = "stylesheet" href = "CSS/style.css" type = "text/CSS" Media = "all"/> <Style type = "text/CSS" Media = "all"> @ import URL (CSS/style01.css); </style>
Why write twice?
In fact, it is enough to use the external method to call (that is, the first sentence. I use a double table call here as an example. The "@ import" command is used to input a style sheet. The "@ import" command is invalid in the Netscape 4.0 browser. That is to say, when you want to hide some effects in the Netscape 4.0 browser and display them in more than 4.0 or other browsers, you can use the "@ import" command to call the style sheet.
5th days: other settings in the head area
These skills mainly focus on meta tag settings. In fact, they have little to do with compliance with web standards. You only need to add "/" at the end to close the tag, but since it is an introductory tutorial, let's write it in detail.
Favorites icons
If you add this site to favorites, you can see that the IE icon before the favorites site becomes a Special icon on this site. To achieve this effect, you must first create a 16x16 icon named favicon. ICO and put it in the root directory. Then, embed the following code into the head area:
<LINK rel = "icon" href = "/favicon. ICO" type = "image/X-icon"/>
<LINK rel = "shortcut icon" href = "/favicon. ICO" type = "image/X-icon"/>
The Code is as follows:
<Meta content = "all" name = "Robots"/>
<Meta name = "author" content = "ajie@netease.com, "/>
<Meta name = "Copyright" content = "www.w3cn.org"/>
<Meta name = "Description" content = "New web designer. The Web Standard tutorial site promotes the application of Web standards in China "/>
<Meta content = "Designing, with, web, standards, XHTML, CSS, graphic, design, layout, usability, ccessibility, W3C, W3, w3cn, ajie "name =" keywords "/>
So much. I have spent five sections on the head area code. The actual page content is not mentioned yet. Don't worry. In fact, the head area is very important, check the head code of a page to see if the designer is professional enough.
----------------------------------
Day 1: XHTML code specification
Before getting started with official content production, we must first understand the code specifications related to web standards. Understanding these specifications can help you avoid detours and pass code verification as soon as possible.
1. All tags must have an ending mark.Previously, in HTML, you can open many tags, such as <p> and <li>, but not necessarily write the corresponding </P> and </LI> to close them. However, this is invalid in XHTML. XHTML requires a rigorous structure, and all labels must be disabled. If it is an unpaired tag, add "/" at the end of the tag to close it. For example:
<Br/>
2. The element and attribute names of all tags must be in lower case.
Unlike HTML, XHTML is case sensitive and <title> are different tags. XHTML requires that all labels and attribute names must be in lower case. For example, <body> must be written as <body>. Case-insensitive inclusion is not recognized. Generally, the attribute name "onmouseover" automatically generated by Dreamweaver must be changed to "onmouseover ".
3. All XML tags must be reasonably nested.
Similarly, because XHTML requires a rigorous structure, all nesting must be in order. Previously we wrote code like this:
<P> <B> </P> </B>
Must be modified:
<P> <B> </B> </P>
That is to say, the nesting layer by layer must be strictly symmetric.
4. All attributes must be enclosed by quotation marks ("").In HTML, you do not need to enclose attribute values in quotation marks, but in XHTML, they must be enclosed in quotation marks. For example:
<Height = 80>
Must be modified:
<Height = "80">
In special cases, you need to use double quotation marks in the property values. You can use ", single quotation marks can use & apos;, for example:
<Alt = "say & apos; Hello & apos;">
5. encode all <and & special characters
Note: There is no space between the above characters.
6. assign a value to all attributes
XHTML specifies that all attributes must have a value. If there is no value, it repeats itself. For example:
<TD nowrap> <Input type = "checkbox" name = "shirt" value = "medium" Checked>
Must be modified:
<TD nowrap = "nowrap"> <Input type = "checkbox" name = "shirt" value = "medium" Checked = "checked">
7. Do not make "--" in the comment content
"--" Can only occur at the beginning and end of the XHTML comment, that is, they are no longer valid in the content. For example, the following code is invalid:
<! -- Here is the comment ----------- here is the comment -->
Replace the dotted line with equal signs or spaces.
<! -- Here is the comment ============= here is the comment -->
Some of the above specifications seem strange, but they all aim to make our code have a unified and unique standard, so that we can reuse data in the future.
7th days: getting started with CSS
After understanding the XHTML code specifications, we need to perform CSS layout. First, we will introduce some introduction to CSS. If you are familiar with it, you can skip this section and go directly to the next section.
CSS is short for Cascading Style Sheet. It is a simple mechanism for adding styles to Web documents and belongs to the layout language of the presentation layer.
1. Basic syntax Specification
Analyze a typical CSS statement:
P {color: # ff0000; Background: # ffffff}
Color values can be written in RGB values, for example:Color: RGB (255, 0, 0)And can also be written in hexadecimal format, as in the above example.Color: # ff0000. If the hexadecimal value is repeated in pairs, the effect is the same. For example, # ff0000 can be written as # f00. However, it cannot be abbreviated if it is not repeated. For example, # fc1a1b must be filled with six characters.
3. Define the font
The following font definition method is recommended for web standards:
Body {font-family: "lucida Grande", verdana, lucida, Arial, Helvetica,, sans-serif ;}
When the style attributes of several elements are the same, you can call a declaration. elements are separated by commas ,:P, TD, Li {font-size: 12px ;}
5. Derivative Selector
You can use the derived selector to define a style for the child element in an element. For example:
Li strong {font-style: italic; font-weight: normal ;}
The child element strong under Li defines a italic style that is not bold.
6. ID Selector
The CSS layout is mainly implemented by the "Div" layer, and the DIV style is defined by the "id selector. For example, we first define a Layer
<Div id = "menubar"> </div>
Then define in the style sheet as follows:
# Menubar {margin: 0px; Background: # fefefefe; color: #666 ;}
Here, "menubar" is your own defined ID name. Add "#" to the front.
The ID selector also supports derivation, for example:
# Menubar P {text-align: Right; margin-top: 10px ;}
This method is mainly used to define layers and those that are complicated and have multiple derived elements.
6. Category Selector
In CSS, a class selector definition starts with a vertex, for example:
. 14px {color: # f60; font-size: 14px ;}
On the page, use the class = "Class Name" method to call:
<SPAN class = "14px"> 14 PX font </span>
This method is simple and flexible, and can be created and deleted at any time according to the page requirements.
7. Define the link Style
In CSS, four pseudo classes are used to define the link styles: A: Link, A: visited, A: hover, And A: active. For example:
A: link {font-weight: bold; text-Decoration: none; color: # c00 ;}
A: visited {font-weight: bold; text-Decoration: none; color: # C30 ;}
A: hover {font-weight: bold; text-Decoration: underline; color: # f60 ;}
A: active {font-weight: bold; text-Decoration: none; color: # f90 ;}
The preceding statements define the style of "link, accessed link, mouse over, and mouse over. Note: The data must be written in the above sequence; otherwise, the display may be different from what you expected. Remember that their order is "lvha ".
Haha, after reading so much, I feel a little dizzy. In fact, there are still many CSS syntax specifications. Here we only list some common ones. After all, we are step-by-step, and it is impossible to become a fat man at a Glance :)
Day 1: getting started with CSS layout
The biggest difference between CSS layout and traditional table layout is that the original positioning uses tables to control the spacing of text layout sections through table spacing or colorless and transparent GIF images; currently, the layer (DIV) is used to locate and control the section spacing through attributes such as margin, padding, and border of the layer.
1. Define Div
Analyze a typical Div definition example:
# Sample {margin: 10px 10px 10px 10px;
Padding: 20px 10px 10px 20px;
Border-top: # CCC 2px solid;
Border-Right: # CCC 2px solid;
Border-bottom: # CCC 2px solid;
Border-left: # CCC 2px solid;
Background: URL (images/bg_poem.jpg) # fefefefe no-repeat right bottom;
Color: #666;
Text-align: center;
Line-Height: 150%; width: 60% ;}
Description:
The actual performance of this layer is as follows:
Here is the demo content, here is the demo content,
Here is the demo content, here is the demo content,
Here is the demo content, here is the demo content,
Here is the demo content...
We can see that the border is 2px Gray, the background image is not repeated in the lower right corner, the content is 20 PX away from the left border, the content is centered, everything is the same as expected. Hoho, although not easy to understand, is the most basic. If you master it, you have learned half of the CSS layout technology. That's it. It's not difficult! (What is the other half? The other half is the positioning between layers. I will explain it later .)
2. css2 Box ModelSince the release of css1 in 1996, W3C organizations have suggested placing all the images on webpages in a box. Designers can create definitions to control the attributes of this box, these objects include paragraphs, lists, titles, images, and layers. <div>. The box model mainly defines four areas: content, padding, border, and margin ). The sample layer mentioned above is a typical box. For beginners, it is often difficult to understand the levels, relationships, and mutual influences between margin, background-color, background-image, padding, content, and border. Here we provide a 3D box model for your understanding and memory.
3. background processing is used for all secondary images.
Using XHTML + CSS layout, there is a technology that you don't get used to at the beginning. It should be said that it is a different way of thinking from the traditional table layout, that is: all secondary images are implemented using the background. Similar to this:
Background: URL (images/bg_poem.jpg) # fefefefe no-repeat right bottom;
Although can be directly inserted into the content, this is not recommended. Here, "secondary images" refer to images that are not part of the content to be expressed on the page, but only used for modification, interval, and reminder. For example, pictures in photo albums, pictures in news, and 3D box model pictures above are all part of the content. They can be directly inserted into the page using the element, other similar logo, title image, and list prefix images must be displayed in the background or CSS mode.
There are two reasons for doing this:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
