Write a pretty regular blog with HTML and CSS

Source: Internet
Author: User
Tags html tags

Use a label correctly

Hyperlinks are the most HTML tags used in blogs, which link to other articles or site links, and suggest that you add the following attributes when you use a label:

HREF: Set the URL address or anchor point of the link

Target: Set the mouse to click on the link after the target window or frame page, commonly used is target= "_blank", said opened a new window to open the link to the current page to open the link does not add this attribute

Title: Sets the message displayed when the mouse is moved to the link

Rel: This is a new attribute that has only recently begun to pop. Rel= "nofollow" to prohibit the search engine from the site link to the past, resulting in the link URL of the PageRank value changes, often used to prevent spam link;rel= "tag" This is for the Technorati set it to this link text as the tag tag for the page

Example: <a href=http://www.webjx.com/target= "_blank" title= "Web Teaching Network" rel= "nofollow" > Web Teaching Network </a>

Display: Web Teaching Network

The links in the article should not be too much, too many links will allow readers to read when there is a sense of oppression and tension, if the link color and text color contrast too large, it will make people look dazzling feeling. The best link effect is a touch of color contrast or underlined, and fill in the title attribute, indicating what the link is or why it should be linked. Sometimes you can also attach a link to this article and annotate it in the list at the end of the article.

Develop a good habit of writing sections

Writing a blog can not be like the Cologne novel as a paragraph, so according to the school teacher's writing style blog is no dispute. It is suggested to use P tag to segment the article, the code is:<p> article text </p>.

It is worth mentioning that many bloggers do not have the habit of first line indentation, and some at most also in the editor to knock a few spaces, here gives the CSS text-indent attribute to achieve the first line of indentation code: <p style= "TEXT-INDENT:2EM;" > Article Body </p>, indent unit I use 2EM, two characters, do not use percent or PX, PT and other unit length, with EM can be in the page font and layout of the situation to maintain two characters indent.

For some bloggers who like to hang pictures in the article here I recommend using the IMG tag's Align property to left or right to easily achieve the picture's suspension and body wrap. You can also use the Float property of Div tag to carry around the hanging to achieve text wrapping, the better is to achieve such as Google adsense ads around the hanging, code: <div style= "Height:100%;width:150px;float: Right; " > Here you can put a picture link, or like a foreign blog that put Google AdSense code </div>. The results are shown in the Google ads in this article.

Use list to set row height with Line-height

Use the <ul><ol><li> tab of the Stylesheet list to make a list of some subheadings entries, code:<ul><li> problem one </li><li> question two </ Li></ul>

Body font size can be personalized settings, I generally use the blog system default (13pt, XXFarEastFont-Arial and Courier New), if the body needs a large font sometimes your text appears too large and piled up, can be in the paragraph <p> add style: Line-height : 120%; This means that the line height is 1.2 times times the font

The typesetting skill of super long body

Although we are in the blog to know that the article is best dapper, but also avoid some special nature of the article need long space, this time suggest you use

Some other HTML that is commonly used in journals

Reference to other articles of the fragment recommended <blockquote> tag, this label can automatically achieve the page left and right at both ends of the indentation, the general default indentation 40 pixels, such as: <blockquote style= "background-color:# f7f7f7;border:1px dotted #dedbde;p adding:10px; " > This is an example of a reference style </blockquote>

Show:

This is an example of a reference style

Font of the HTML code you may be relatively familiar with, such as bold <b>, italic < i>, underline with <u>, font color size, etc. with <FONT>, you can also use <span style= "" > The way may be more convenient and more beautiful, code: <span style= "Font-weight:bold;font-style:italic;text-decoration:underline;font-color:blue;" > Bold, Italic, underline, blue font </span>

The easiest way to implement the text display HTML code is to add <xmp> tags, such as: <xmp><a href= "http://www.webjx.com/" > Web page Teaching Network </a></ Xmp>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.